Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-virtual-table with all npm packages installed. Try it out:

var vueVirtualTable = require("vue-virtual-table")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-virtual-table v0.2.14

vue table component with virtual dom

vue-virtual-table

npm version downloads

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:

<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

nametypedescriptionrequireddefault
dataArrayThe array of data. Every item is a row.Yes
configArrayThe config of table.Yes
minWidthNumberSet the minimum width of table.No1200px
heightNumberSet the height of table.No300px
itemHeightNumberSet the height of row.No42px
borderedBooleanWhether table has vertical border.Nofalse
hoverHighlightBooleanWhether to hightlight current row.Notrue
selectableBooleanWhether row is selectable.Nofalse
enableExportBooleanWhether to show export-to-table buttonNofalse
languageStringLanguage from ['en', 'cn']No'cn'

Table Events

nameparametersdescription
changeSelectionrowsWhen the selected rows change

Table Config

paramtypedescriptionrequireddefault
propStringProperty nameYes
nameStringDisplay nameNosame to the property name
widthNumberColumn widthNoauto
sortableBooleanWhether this column is sortableNofalse
searchableBooleanWhether this column is searchableNofalse
filterableBooleanWhether this column is filterableNofalse
numberFilterBooleanIf it's a column of number. You can use this.Nofalse
summaryStringsummary type from ['COUNT', 'SUM'] or customize(eg. ${clicks}*100/${reach} is calculated with the summary of other two columns).No
prefixStringDisplay before the valueNo
suffixStringDisplay after the valueNo
alignItemsStringSame with flex. Control the content of a cellNocenter
isHiddenBooleanWhether this column is hiddenNofalse
eTipArrayTool tip of a cell to display certain props (eg. ['name'] will display the value of 'name' prop in the tool tip )No
eTipWithPropBooleanWhether to show the prop name in the tool tipNo
eClassObjectAttach class to the cell (eg. {redColor: '${spend}>100'} add the 'redColor' class to the cell whose 'spend' prop is greater than 100)NoNo

Special Props

namedescription
_indexShow the index of row
_actionA slot to customize the content
_expandA slot to customize a popover window

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free