vue table component with virtual dom
npm install 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.
```
yarn add vue-virtual-table
or
``
npm install --save vue-virtual-table
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
:data="tableData"
:height="800"
:itemHeight="55"
:minWidth="1000"
:selectable="true"
:enableExport="true"
v-on:changeSelection="handleSelectionChange"
>
`
Click here to see the examples. You can clone this repo and use vue serve example/xxx.vue to preview.
| 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' |
| 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 |
| 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 | |['name']
| 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. will display the value of 'name' prop in the tool tip ) | No | |{redColor: '${spend}>100'}
| eTipWithProp | Boolean | Whether to show the prop name in the tool tip | No | |
| eClass | Object | Attach class to the cell (eg. add the 'redColor' class to the cell whose 'spend' prop is greater than 100) | No | No |
| name | description |
| -------- | ------------------------------------ |
| \_index | Show the index of row |
| \_action | A slot to customize the content |
| \_expand | A slot to customize a popover window |
`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``
{{ scope.row.price_formatted }}