Improved ElementUI Table Component

Improved ElementUI table component with search, pagination and more.

Features:

• [x] Pagination
• [x] Search
• [x] Row number
• [ ] Remote data

Installation

You can install the package via npm:

npm install @ngekoding/el-table

Next, you must register the component. The most common use case is to do that globally.

import Vue from 'vue'
import ImprovedElTable from '@ngekoding/el-table'

Vue.use(ImprovedElTable)

or register it individually:

import Vue from 'vue'
import IElTable from '@ngekoding/el-table/lib/table'
import IElTableColumn from '@ngekoding/el-table/lib/table-column'

Vue.component(IElTable.name, IElTable)
Vue.component(IElTableColumn.name, IElTableColumn)

Note: you are still need to register element-ui and import the style, continue reading for complete example.

or for the easiest way, you can use unplugin-vue-components to auto import the component with it's style:

• Install unplugin-vue-components

npm i unplugin-vue-components -D

You can found the detail about this awesome package from the link above.

• Change vite config (check the docs for Webpack, etc...)

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { ElementUiResolver } from 'unplugin-vue-components/resolvers'
import ImprovedElTableResolver from '@ngekoding/el-table/lib/resolver'

// your plugin installation
Components({
  resolvers: [
    ElementUiResolver(),
    ImprovedElTableResolver(),
  ],
})

Usage

Here's a simple example on how to use the component.

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import ImprovedElTable from '@ngekoding/el-table'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(ImprovedElTable)

export default {
  data() {
    return {
      keyword: '',
      data: [
        { name: 'John Doe', age: 25, email: '[email protected]', address: '123 Main Street', phone: '555-1234' },
        { name: 'Jane Smith', age: 30, email: '[email protected]', address: '456 Elm Street', phone: '555-5678' },
        { name: 'Robert Johnson', age: 35, email: '[email protected]', address: '789 Oak Street', phone: '555-9012' },
      ]
    }
  }
}
</script>

<template>
  <div class="demo">
    <h1>@ngekoding/el-table demo</h1>
    <div class="table-header">
      <h2>Users</h2>
      <el-input
        v-model="keyword"
        placeholder="Search..."
        size="small"
        class="input-filter"
      />
    </div>
    <i-el-table
      :data="data"
      :search-keyword="keyword"
      :search-columns="['name', 'address', 'email']"
      :search-delay="250"
    >
      <i-el-table-column type="row-number" label="#" width="50" />
      <i-el-table-column prop="name" label="Name" sortable />
      <i-el-table-column prop="address" label="Address" />
      <i-el-table-column prop="email" label="Email" />
      <i-el-table-column prop="phone" label="Phone" searchable />
    </i-el-table>
  </div>
</template>

<style>
.demo {
  max-width: 1000px;
  margin: 20px auto;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input-filter {
  width: 250px;
}
</style>

Props

You can use all the original element-ui table component props, and extras by this improved component.

i-el-table props

| Prop | Description | Type | Accepted Values | Default | |--|--|--|--|--| | paginate | Enable or disable pagination feature. | Boolean | — | true | | per-page | Number of rows to display per page. | Number | 10, 20, 30, 40, 50, 100 | 10 | | current-page | Initial page to be active. Defaults to 1 if the given page is not available. | Number | — | 1 | | search-keyword | Keyword for searching/filtering data. | String | — | — | | search-columns | Properties of the data to search in. You can also define the table-column as searchable. | Array | — | All properties of the first data object | | search-delay | Delay time in milliseconds before applying the search-keyword (debounce delay). | Number | — | 500 | | page-options-space | Add extra space for page options, useful when working with full-width tables in card/tabs. | Boolean | — | false |

i-el-table-column props

| Prop | Description | Type | Accepted Values | Default | |--|--|--|--|--| | type | Same as original, but with extra row-number to show the incremental number for each row. | String | selection/index/expand/row-number | — | | searchable | Whether column can be searched, merged with search-columns on table props. Note that you need to define the column prop to make it work. | Boolean | — | false |

License

MIT