JSFiddle - React, Tailwind, and code Playground

by Lardpower

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script src="//unpkg.com/[email protected]/dist/data-tables.min.js"></script>
<div id="app">
<data-tables-server :data="[]" :total="100">
    <template v-slot:empty>
      <div>
        Nothing found
      </div>
    </template>
    <el-table-column v-for="title in titles" :prop="title.prop" :label="title.label" :key="title.label" sortable="custom">
    </el-table-column>
  
</data-tables-server>
</div>

SCSS

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");

Babel + JSX

ELEMENT.locale(ELEMENT.lang.en)
Vue.use(DataTables.DataTables)
Vue.use(DataTables.DataTablesServer)
var data, titles

data = [{
    "content": "Water flood",
    "flow_no": "FW201601010001",
    "flow_type": "Repair",
    "flow_type_code": "repair",
    }, {
    "content": "Lock broken",
    "flow_no": "FW201601010002",
    "flow_type": "Repair",
    "flow_type_code": "repair",
    }, {
    "content": "Help to buy some drinks",
    "flow_no": "FW201601010003",
    "flow_type": "Help",
    "flow_type_code": "help"
  }];

  titles = [{
    prop: "flow_no",
    label: "NO."
    }, {
    prop: "content",
    label: "Content"
    }, {
    prop: "flow_type",
    label: "Type"
  }]

// fake server
let serverData = []
for (let i = 0; i < 1000; i++) {
  serverData.push({
    'content': 'Lock broken' + i,
    'flow_no': 'FW20160101000' + i,
    'flow_type': i % 2 === 0 ? 'Repair' : 'Help',
    'flow_type_code': i % 2 === 0 ? 'repair' : 'help',
  })
}

let mockServer = function(res) {
  let datas = serverData.slice()
  let allKeys = Object.keys(data[0])

  // do filter
  res && res.filters && res.filters.forEach(filter => {
    datas = datas.filter(data => {
      let props = (filter.search_prop && [].concat(filter.search_prop)) || allKeys
      return props.some(prop => {
        if (!filter.value || filter.value.length === 0) {
          return true
        }
        return [].concat(filter.value).some(val => {
           return data[prop].toString().toLowerCase().indexOf(val.toLowerCase()) > -1
        })
      })
    })
  })

  // do sort
  if (res.sort && res.sort.order) {
    let order = res.sort.order
    let prop = res.sort.prop
    let isDescending = order === 'descending'

    datas.sort(function(a, b) {
      if (a[prop] > b[prop]) {
        return 1
      } else if (a[prop] < b[prop]) {
        return -1
      } else {
        return 0
      }
    })
    if (isDescending) {
      datas.reverse()
    }
  }

  return {
    data: datas.slice((res.page - 1) *...