JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%;"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
   >
     <el-table-column
      type="selection"
      width="30">
    </el-table-column>
    <el-table-column
      prop="status"
      label="Status"
      sortable
      width="150">
    </el-table-column>
    <el-table-column
      prop="user"
      label="User"
      sortable
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="requestedDate"
      label="Requested Date"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="100"
    >
    </el-table-column>
    <el-table-column
      prop="dept"
      label="Dept"
      width="100"
    >
    </el-table-column>
  </el-table>
</div>
</template>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

JavaScript

const tableData = [
 { id: 1, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1', dept: 'port1' },
 { id: 2, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1', dept: 'port1' },
 { id: 3, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1', dept: 'port1' },
 { id: 4, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1', dept: 'port1' },
 { id: 5, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1', hasChildren: true },
 { id: 6, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 7, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 8, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 9, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 10, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 11, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 12, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 13, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 14, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 15, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 16, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 17, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 18, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 19, status: 'success', user: 'User-A', requestedDate: '2019/07/04 14:00', name: 'Vsl1' },
 { id: 20, status: 'success', user: 'User-A', requestedDate:...