{"id":16423351,"url":"https://github.com/ngekoding/el-table","last_synced_at":"2025-03-26T18:46:58.751Z","repository":{"id":178973791,"uuid":"661918932","full_name":"ngekoding/el-table","owner":"ngekoding","description":"Improved ElementUI table component with search, pagination and more.","archived":false,"fork":false,"pushed_at":"2024-08-02T01:32:38.000Z","size":991,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T07:16:29.157Z","etag":null,"topics":["element-ui-table","improved-el-table","vue","vue-table-component"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@ngekoding/el-table","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngekoding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-04T01:16:27.000Z","updated_at":"2024-08-02T01:32:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"cae508e5-ce8f-42cd-be13-304dfff217ce","html_url":"https://github.com/ngekoding/el-table","commit_stats":null,"previous_names":["ngekoding/el-table"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngekoding%2Fel-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngekoding%2Fel-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngekoding%2Fel-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngekoding%2Fel-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngekoding","download_url":"https://codeload.github.com/ngekoding/el-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245717975,"owners_count":20661151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-ui-table","improved-el-table","vue","vue-table-component"],"created_at":"2024-10-11T07:39:33.548Z","updated_at":"2025-03-26T18:46:58.713Z","avatar_url":"https://github.com/ngekoding.png","language":"JavaScript","readme":"# Improved ElementUI Table Component\n\nImproved ElementUI table component with search, pagination and more.\n\nFeatures:\n\n- [x] Pagination\n- [x] Search\n- [x] Row number\n- [ ] Remote data\n\n![Screenshot](./screenshots/improved-el-table.png)\n\n## Installation\n\nYou can install the package via npm:\n\n```sh\nnpm install @ngekoding/el-table\n```\n\nNext, you must register the component. The most common use case is to do that globally.\n\n```js\nimport Vue from 'vue'\nimport ImprovedElTable from '@ngekoding/el-table'\n\nVue.use(ImprovedElTable)\n```\n\nor register it individually:\n\n```js\nimport Vue from 'vue'\nimport IElTable from '@ngekoding/el-table/lib/table'\nimport IElTableColumn from '@ngekoding/el-table/lib/table-column'\n\nVue.component(IElTable.name, IElTable)\nVue.component(IElTableColumn.name, IElTableColumn)\n```\n\nNote: you are still need to register `element-ui` and import the style, continue reading for complete example.\n\nor 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:\n\n- Install `unplugin-vue-components`\n\n```sh\nnpm i unplugin-vue-components -D\n```\n\nYou can found the detail about this awesome package from the link above.\n\n- Change vite config (check the docs for Webpack, etc...)\n\n```js\n// vite.config.js\nimport Components from 'unplugin-vue-components/vite'\nimport { ElementUiResolver } from 'unplugin-vue-components/resolvers'\nimport ImprovedElTableResolver from '@ngekoding/el-table/lib/resolver'\n\n// your plugin installation\nComponents({\n  resolvers: [\n    ElementUiResolver(),\n    ImprovedElTableResolver(),\n  ],\n})\n```\n\n## Usage\n\nHere's a simple example on how to use the component.\n\n```vue\n\u003cscript\u003e\nimport Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport ImprovedElTable from '@ngekoding/el-table'\n\nimport 'element-ui/lib/theme-chalk/index.css'\n\nVue.use(ElementUI)\nVue.use(ImprovedElTable)\n\nexport default {\n  data() {\n    return {\n      keyword: '',\n      data: [\n        { name: 'John Doe', age: 25, email: 'john.doe@example.com', address: '123 Main Street', phone: '555-1234' },\n        { name: 'Jane Smith', age: 30, email: 'jane.smith@example.com', address: '456 Elm Street', phone: '555-5678' },\n        { name: 'Robert Johnson', age: 35, email: 'robert.johnson@example.com', address: '789 Oak Street', phone: '555-9012' },\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"demo\"\u003e\n    \u003ch1\u003e@ngekoding/el-table demo\u003c/h1\u003e\n    \u003cdiv class=\"table-header\"\u003e\n      \u003ch2\u003eUsers\u003c/h2\u003e\n      \u003cel-input\n        v-model=\"keyword\"\n        placeholder=\"Search...\"\n        size=\"small\"\n        class=\"input-filter\"\n      /\u003e\n    \u003c/div\u003e\n    \u003ci-el-table\n      :data=\"data\"\n      :search-keyword=\"keyword\"\n      :search-columns=\"['name', 'address', 'email']\"\n      :search-delay=\"250\"\n    \u003e\n      \u003ci-el-table-column type=\"row-number\" label=\"#\" width=\"50\" /\u003e\n      \u003ci-el-table-column prop=\"name\" label=\"Name\" sortable /\u003e\n      \u003ci-el-table-column prop=\"address\" label=\"Address\" /\u003e\n      \u003ci-el-table-column prop=\"email\" label=\"Email\" /\u003e\n      \u003ci-el-table-column prop=\"phone\" label=\"Phone\" searchable /\u003e\n    \u003c/i-el-table\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n.demo {\n  max-width: 1000px;\n  margin: 20px auto;\n}\n.table-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.input-filter {\n  width: 250px;\n}\n\u003c/style\u003e\n```\n\n### Props\n\nYou can use all the original [element-ui table component](https://element.eleme.io/#/en-US/component/table) props, and extras by this improved component.\n\n\n#### i-el-table props\n\n| Prop | Description | Type | Accepted Values | Default |\n|--|--|--|--|--|\n| paginate | Enable or disable pagination feature. | Boolean | — | true |\n| per-page | Number of rows to display per page. | Number | 10, 20, 30, 40, 50, 100 | 10 |\n| current-page | Initial page to be active. Defaults to 1 if the given page is not available. | Number | — | 1 |\n| search-keyword | Keyword for searching/filtering data. | String | — | — |\n| 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 |\n| search-delay | Delay time in milliseconds before applying the `search-keyword` (debounce delay). | Number | — | 500 |\n| page-options-space | Add extra space for page options, useful when working with full-width tables in card/tabs. | Boolean | — | false |\n\n#### i-el-table-column props\n\n| Prop | Description | Type | Accepted Values | Default |\n|--|--|--|--|--|\n| type | Same as original, but with extra `row-number` to show the incremental number for each row. | String | selection/index/expand/row-number | — |\n| 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 |\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngekoding%2Fel-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngekoding%2Fel-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngekoding%2Fel-table/lists"}