{"id":13810586,"url":"https://github.com/dwqs/v2-table","last_synced_at":"2025-08-20T14:32:40.876Z","repository":{"id":49747354,"uuid":"118741777","full_name":"dwqs/v2-table","owner":"dwqs","description":"A simple table component based Vue 2.x: https://dwqs.github.io/v2-table/","archived":false,"fork":false,"pushed_at":"2018-07-30T13:49:14.000Z","size":1215,"stargazers_count":100,"open_issues_count":7,"forks_count":24,"subscribers_count":11,"default_branch":"dev","last_synced_at":"2024-12-15T10:21:34.794Z","etag":null,"topics":["table","vue-table","vuejs-components","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwqs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-24T09:19:40.000Z","updated_at":"2024-02-03T20:47:01.000Z","dependencies_parsed_at":"2022-09-26T20:31:49.246Z","dependency_job_id":null,"html_url":"https://github.com/dwqs/v2-table","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fv2-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/v2-table/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230431103,"owners_count":18224655,"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":["table","vue-table","vuejs-components","vuejs2"],"created_at":"2024-08-04T02:01:01.266Z","updated_at":"2024-12-19T12:11:45.297Z","avatar_url":"https://github.com/dwqs.png","language":"Vue","funding_links":[],"categories":["Vue","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["表","UI Components","Table"],"readme":"[![build pass](https://api.travis-ci.org/dwqs/v2-table.svg?branch=master)](https://travis-ci.org/dwqs/v2-table?branch=master) ![npm-version](https://img.shields.io/npm/v/v2-table.svg) ![license](https://img.shields.io/npm/l/v2-table.svg)\n\n[中文 README](https://github.com/dwqs/v2-table/blob/master/README_CN.md)\n# v2-table\nA simple table component based Vue 2.x.\n## Installation\n\nInstall the pkg with npm:\n\n```\nnpm i --save v2-table beautify-scrollbar\n```\nor yarn\n\n```\nyarn add  v2-table beautify-scrollbar\n```\n\n## Get Started\n\n```\nimport Vue from 'vue';\n\nimport 'beautify-scrollbar/dist/index.css'; \nimport 'v2-table/dist/index.css'; \nimport V2Table from 'v2-table';\n\nVue.use(V2Table)\n```\n\n```\n\u003ctemplate\u003e\n  \u003cv2-table :data=\"list\"\u003e\n    \u003cv2-table-column label=\"Name\" prop=\"name\"\u003e\u003c/v2-table-column\u003e\n    \u003cv2-table-column label=\"Date\" prop=\"date\"\u003e\u003c/v2-table-column\u003e\n    \u003cv2-table-column label=\"Address\" prop=\"address\"\u003e\u003c/v2-table-column\u003e  \n  \u003c/v2-table\u003e  \n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data () {\n      return {\n        list: [{\n          date: '2017-12-02',\n          name: 'test1',\n          address: 'Shenzhen,China'\n        }, {\n          date: '2017-11-02',\n          name: 'test2',\n          address: 'Guangzhou,China'\n        }, {\n          date: '2018-01-02',\n          name: 'test3',\n          address: 'Shaoyang,Hunan'\n        }, {\n          date: '2017-10-02',\n          name: 'test4',\n          address: 'Changsha,Hunan'\n        }]\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\nMore demo to visit [here](https://dwqs.github.io/v2-table).\n\n## Available Props\n\n### The v2-table component\n\n|  Attribute  |  Type  |  Accepted Values  |  Default  |  Description  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| data | Array | - | [] | table data |\n| border | Boolean | - | false | whether show table border |\n| stripe | Boolean | - | false | whether table is striped |\n| loading | Boolean | - | false | show loading component |\n| empty-text | String | - | No Data | Displayed text when data is empty. You can customize this area with `slot=\"empty\"` |\n| default-sort | Object | `order`: ascending/descending |if `prop` is set, and `order` is not set, then `order` is default to `ascending`| set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order |\n| row-class-name | String/Function({row, rowIndex}) | - | - | function that returns custom class names for a row, or a string assigning class names for every row |\n| pagination-info | Object | - | { text: '', pageSize: 10, nextPageText: 'Next', prevPageText: 'Prev' } | pagination info for table data |\n| shown-pagination | Boolean | - | false | whether showing pagination of table data |\n| total | Number | - | 0 | all data of table, it\\'s needed when `shown-pagination` is true |\n| height | Number/String | - | auto | table\\'s height |\n| cell-height | Number/String | - | 44 | cell\\'s height |\n| show-summary | Boolean | - | false | whether to display a summary row |\n| sum-text | String | - | Sum | displayed text for the first column of summary row |\n| summary-method | Function({ columns, data }) | - | - | custom summary method |\n| lazy-load | Boolean | - | false | whether enable lazy-load |\n| col-height | Number/String | - | 40 | header columns\\' height |\n\n\n### Table Events\n\n|  Event Name  |  Description  |  Parameters |\n|  :--:  |  :--:  |  :--: |\n| sort-change | triggers when table's sorting changes | { prop, order } |\n| page-change | triggers when table's page changes | currentPage |\n| select-change | triggers when selection changes | rows |\n\n### Table Methods\n|  Event Name  |  Description  |  Parameters |\n|  :--:  |  :--:  |  :--: |\n| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |\n| updateScrollbar | update the scrollbar config for the table  | isReset(whether reset scrollbar, default value is false) |\n\n### Table Slot\n\n|  Name  |  Description  |\n|  :--:  |  :--:  |\n| empty | custom empty component, it's will show when data is empty |\n| loading | custom loading component, it's will show when `loading` property of table is true \n\n### The v2-table-column component\n\n|  Attribute  |  Type  |  Accepted Values  |  Default  |  Description  |\n|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |\n| label | String | - | - | column label |\n| prop | String | - | - | field name |\n| width | String/Number | - | - | column width |\n| sortable | Boolean | true/false | false | whether column can be sorted. |\n| align | String | left/center/right | center | alignment |\n| fixed | String | left/right | - | fixed column to left or right |\n| type | String | - | - | type of the column |\n| render-header | Function(h, { column }) | - | - | render function for table header of this column |\n\n## Development\n\n```js\ngit clone git@github.com:dwqs/v2-table.git\n\ncd v2-table\n\nnpm i \n\nnpm run dev\n```\n\n## Thanks\n\n* [Element UI](http://element.eleme.io/2.0/#/en-US).\n* [浅谈表格组件的实现：固定表头和固定列](https://zhuanlan.zhihu.com/p/33280304)\n\n## LICENSE\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fv2-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Fv2-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fv2-table/lists"}