Blog Detail


Vue Js Tables with filtering, pagination & multiple select cover image

arrow_back Vue Js Tables with filtering, pagination & multiple select

Zhi Xiong introduced Vue-table-dynamic which is a vue component of a dynamic table. It’s designed to respond to data changes in real-time and is oriented to the runtime. It has many customizable options and is very easy to use. It has many features like sorting, filtering, editing, pagination, multiple selections, etc.


  • Multiple Select
  • Search
  • Sort
  • Filter
  • Pagination
  • Edit
  • Border
  • Stripe
  • Highlight
  • Column Width
  • Configure Header
  • Fixed Header
  • Fixed Columns
  • Slot


npm install vue-table-dynamic --save


You can install this package via Npm, Just run this command.

import VueTableDynamic from 'vue-table-dynamic'


Global registration


Local registration

export default {
  components: { VueTableDynamic }
Basic Table

  <div class="base-demo" style="width: 400px">
    <vue-table-dynamic :params="params"></vue-table-dynamic>

import VueTableDynamic from 'vue-table-dynamic'

export default {
  name: 'Demo',
  data() {
    return {
      params: {
        data: [
          ['Cell-1', 'Cell-2', 'Cell-3'],
          ['Cell-4', 'Cell-5', 'Cell-6'],
          ['Cell-7', 'Cell-8', 'Cell-9']
  components: { VueTableDynamic }


Bordered table usage

  • border:true with border
  • border:false without border


Striped rows

  • stripe:true striped
  • stripe:false unstriped


Highlighted rows/columns/cells

  • highlight:{row?:Array; column?:Array; cell?:Array<[number,number]>;} configure highlighted rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]} if negative, the position from the end of the array.
  • highlightedColor:string configure highlighted colors

Multiple Select

Select multiple rows

  • showCheck:boolean show checkbox of rows
  • getCheckedRowDatas:function get data for all currently selected rows
  • setAllRowChecked:function(selected:boolean) toggle all selection
  • select:event currently selected/unselected rows


Filter rows by keyword

  • enableSearch:boolean enable/disable searching
  • search:function(value:string, included:array, excluded:array) manual row filtering


Sort rows based on specified column data

  • sort:Array array members are sortable column indexes. such as: [0, 1]


Filter rows based on specified column data and rule

  • filter:Array<{column:number; content:Array<{text:string; value:string|number;}>; method:function;}> specify filterable columns and rules. such as: [{column: 0, content: [{text: ‘> 2’, value: 2}], method: (value, cell) => { return > value }}]
  • filter[].column: column index
  • filter[].content: filter items
  • filter[].method: filter rule.


Table with pagination

  • pagination:boolean enable/disable pagination
  • pageSize?:number row count of each page. default: 10
  • pageSizes?:Array options of row count per page. default: - [10, 20, 50, 100]


Editable table

Support specifying rows/columns/cells for editing

  • edit:{row?:Array; column?:Array; cell?:Array<[number,number]>;} configure editable rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]}. if negative, the position from the end of the array.
  • getData:function() table data changed after editing, get the latest data by this method.
  • cell-change:event cell data changed event
  • edit:{row: ‘all’} all cells can be edited
  • if header is ‘row’, the first row is not editable
  • if the type of source data item is number, only acceptable when entering numbers

This package has a lot more features with many code examples. If you want to learn more about this package you can visit its detailed documentation on Github.

Published at : 22-11-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project