Custom Dynamic Table Component For Vue.js 2

Custom Dynamic Table Component For Vue.js 2

A Vue.js 2 component to dynamically generates a customizable data table with sorting and custom template on your web app.

build pass npm-version license



A simple table component based Vue 2.x.


Install the pkg with npm:

npm i --save v2-table beautify-scrollbar

or yarn

yarn add  v2-table beautify-scrollbar

Get Started

import Vue from 'vue';

import 'beautify-scrollbar/dist/index.css'; 
import 'v2-table/dist/index.css'; 
import V2Table from 'v2-table';

  <v2-table :data="list">
    <v2-table-column label="Name" prop="name"></v2-table-column>
    <v2-table-column label="Date" prop="date"></v2-table-column>
    <v2-table-column label="Address" prop="address"></v2-table-column>  

  export default {
    data () {
      return {
        list: [{
          date: '2017-12-02',
          name: 'test1',
          address: 'Shenzhen,China'
        }, {
          date: '2017-11-02',
          name: 'test2',
          address: 'Guangzhou,China'
        }, {
          date: '2018-01-02',
          name: 'test3',
          address: 'Shaoyang,Hunan'
        }, {
          date: '2017-10-02',
          name: 'test4',
          address: 'Changsha,Hunan'

More demo to visit here.

Available Props

The v2-table component

Attribute Type Accepted Values Default Description
data Array - [] table data
border Boolean - false whether show table border
stripe Boolean - false whether table is striped
loading Boolean - false show loading component
empty-text String - No Data Displayed text when data is empty. You can customize this area with slot="empty"
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
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
pagination-info Object - { text: '', pageSize: 10, nextPageText: 'Next', prevPageText: 'Prev' } pagination info for table data
shown-pagination Boolean - false whether showing pagination of table data
total Number - 0 all data of table, it's needed when shown-pagination is true
height Number/String - auto table's height
cell-height Number/String - 44 cell's height
show-summary Boolean - false whether to display a summary row
sum-text String - Sum displayed text for the first column of summary row
summary-method Function({ columns, data }) - - custom summary method
lazy-load Boolean - false whether enable lazy-load
col-height Number/String - 40 header columns' height

Table Events

Event Name Description Parameters
sort-change triggers when table's sorting changes { prop, order }
page-change triggers when table's page changes currentPage
select-change triggers when selection changes rows

Table Methods

Event Name Description Parameters
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
updateScrollbar update the scrollbar config for the table isReset(whether reset scrollbar, default value is false)

Table Slot

Name Description
empty custom empty component, it's will show when data is empty
loading custom loading component, it's will show when loading property of table is true

The v2-table-column component

Attribute Type Accepted Values Default Description
label String - - column label
prop String - - field name
width String/Number - - column width
sortable Boolean true/false false whether column can be sorted.
align String left/center/right center alignment
fixed String left/right - fixed column to left or right
type String - - type of the column
render-header Function(h, { column }) - - render function for table header of this column


git clone

cd v2-table

npm i 

npm run dev




Github Repository

Tags: #VueJs