vue-virtual-table


Vue table component with virtual dom and easy api.

- Keep smooth when the data reachs thousands of rows or even more.
- Easy to use with a simple config.

live demo

Installation

``
yarn add vue-virtual-table
`

or

`
npm install --save vue-virtual-table
`

Usage

A simplest example:

`html



`

Every item of the config refers to a column. When you don't set sepcific 'name' of the table column header, it will uses the 'prop' value as default. Or you can set the tableConfig like:

`js
tableConfig: [{ prop: 'user', name: 'User Name' }, { prop: 'age', name: 'Age' }]
`

And if you want to search in the 'user' column, set the tableConfig like:

`js
tableConfig: [{ prop: 'user', name: 'User Name', searchable: true }, { prop: 'age', name: 'Age' }]
`

For the 'age' column which is a set of number, you'd better use 'numberFilter' to filter numbers with "<", ">", "between" etc.

`js
tableConfig: [{ prop: 'user', name: 'User Name', searchable: true }, { prop: 'age', name: 'Age', numberFilter: true }]
`

There are many convenient features hard to explain one by one.
Here is a complex example and you can get more info in the tables below the example:

`html



`

$3

Click here to see the examples. You can clone this repo and use vue serve example/xxx.vue to preview.

$3

| name | type | description | required | default |
| -------------- | ------- | --------------------------------------- | -------- | ------- |
| data | Array | The array of data. Every item is a row. | Yes | |
| config | Array | The config of table. | Yes | |
| minWidth | Number | Set the minimum width of table. | No | 1200px |
| height | Number | Set the height of table. | No | 300px |
| itemHeight | Number | Set the height of row. | No | 42px |
| bordered | Boolean | Whether table has vertical border. | No | false |
| hoverHighlight | Boolean | Whether to hightlight current row. | No | true |
| selectable | Boolean | Whether row is selectable. | No | false |
| enableExport | Boolean | Whether to show export-to-table button | No | false |
| language | String | Language from ['en', 'cn', 'ptBR'] | No | 'cn' |

$3

| name | parameters | description |
| --------------- | ---------- | ----------------------------- |
| changeSelection | rows | When the selected rows change |
| click | row, $event| When row is clicked |
| contextmenu | row, $event| When row is right-clicked |

$3

| param | type | description | required | default |
| -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------- |
| prop | String | Property name | Yes | |
| key | String | Key of element with data need in filter | No | same to the property name |
| name | String | Display name | No | same to the property name |
| width | Number | Column width | No | auto |
| sortable | Boolean | Whether this column is sortable | No | false |
| searchable | Boolean | Whether this column is searchable | No | false |
| filterable | Boolean | Whether this column is filterable | No | false |
| numberFilter | Boolean | If it's a column of number. You can use this. | No | false |
| summary | String | summary type from ['COUNT', 'SUM'] or customize(eg. ${clicks}*100/${reach} is calculated with the summary of other two columns). | No | |
| prefix | String | Display before the value | No | |
| suffix | String | Display after the value | No | |
| alignItems | String | Same with flex. Control the content of a cell | No | center |
| justifyContent | String | Defines how the browser distributes space between and around content items. | No | center |
| isHidden | Boolean | Whether this column is hidden | No | false |
| eTip | Array | Tool tip of a cell to display certain props (eg. ['name'] will display the value of 'name' prop in the tool tip ) | No | |
| eTipWithProp | Boolean | Whether to show the prop name in the tool tip | No | |
| eClass | Object | Attach class to the cell (eg. {redColor: '${spend}>100'} add the 'redColor' class to the cell whose 'spend' prop is greater than 100) | No | No |

$3

| name | description |
| -------- | ------------------------------------ |
| \_index | Show the index of row |
| \_action | A slot to customize the content |
| \_expand | A slot to customize a popover window |

$3

`javascript
{prop: '_action', key: 'price', name: 'Price', sortable: true, numberFilter: true, prefix: "R$ ", actionName: 'price-info'}
`

`javascript
{id: v.id, name: obj.name, price: obj.price, price_formatted: currency(obj.price)}
`

`html

``