https://github.com/ngekoding/el-table
Improved ElementUI table component with search, pagination and more.
https://github.com/ngekoding/el-table
element-ui-table improved-el-table vue vue-table-component
Last synced: 2 months ago
JSON representation
Improved ElementUI table component with search, pagination and more.
- Host: GitHub
- URL: https://github.com/ngekoding/el-table
- Owner: ngekoding
- Created: 2023-07-04T01:16:27.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-08-02T01:32:38.000Z (10 months ago)
- Last Synced: 2025-03-18T07:16:29.157Z (2 months ago)
- Topics: element-ui-table, improved-el-table, vue, vue-table-component
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@ngekoding/el-table
- Size: 968 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```sh
npm install @ngekoding/el-table
```
Next, you must register the component. The most common use case is to do that globally.
```js
import Vue from 'vue'
import ImprovedElTable from '@ngekoding/el-table'
Vue.use(ImprovedElTable)
```
or register it individually:
```js
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](https://github.com/antfu/unplugin-vue-components) to auto import the component with it's style:
- Install `unplugin-vue-components`
```sh
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...)
```js
// 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.
```vue
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' },
]
}
}
}
@ngekoding/el-table demo
Users
.demo {
max-width: 1000px;
margin: 20px auto;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.input-filter {
width: 250px;
}
```
### Props
You can use all the original [element-ui table component](https://element.eleme.io/#/en-US/component/table) 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