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.

Installation

yarn add vue-virtual-table

npm install --save vue-virtual-table

Usage

A simplest example:

<template>
  <vue-virtual-table :config="tableConfig" :data="tableData"> </vue-virtual-table>
</template>

<script>
  import VueVirtualTable from 'vue-virtual-table'
  export default {
    components: {
      VueVirtualTable
    },
    data: () => ({
      tableConfig: [{ prop: 'user' }, { prop: 'age' }],
      tableData: [{ user: 'a1', age: 20 }, { user: 'a2', age: 21 }, { user: 'a3', age: 23 }]
    })
  }
</script>

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:

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

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

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.

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:

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
    :height="800"
    :itemHeight="55"
    :minWidth="1000"
    :selectable="true"
    :enableExport="true"
    v-on:changeSelection="handleSelectionChange"
  >
    <template slot-scope="scope" slot="actionCommon">
      <button @click="edit(scope.index, scope.row)">Edit</button>
      <button @click="del(scope.index, scope.row)">Delete</button>
    </template>
  </vue-virtual-table>
</template>

<script>
  import VueVirtualTable from 'vue-virtual-table'
  export default {
    components: {
      VueVirtualTable
    },
    data: () => ({
      tableConfig: [
        { prop: '_index', name: '#', width: 80 },
        {
          prop: 'user',
          name: 'User',
          searchable: true,
          sortable: true,
          summary: 'COUNT'
        },
        { prop: 'age', name: 'Age', numberFilter: true },
        { prop: 'city', name: 'City', filterable: true },
        { prop: '_action', name: 'Action', actionName: 'actionCommon' }
      ],
      tableData: [
        { user: 'a1', age: 20, city: 'aaaa' },
        { user: 'a2', age: 21, city: 'bbbb' },
        { user: 'a3', age: 23, city: 'aaaa' }
      ]
    }),
    methods: {
      handleSelectionChange(rows) {
        console.log(rows)
      },
      edit(index, row) {
        console.log(index)
      },
      del(index, row) {
        console.log(index)
      }
    }
  }
</script>

Examples

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

Table Attributes

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'

Table Events

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

Table Config

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

Special Props

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

Custom slot with formatted data and filter

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

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

<template slot-scope="scope" slot="price-info">
    <div>{{ scope.row.price_formatted }}</div>
</template>