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.

Features

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

Installation

npm install vue-table-dynamic --save

Usage

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

import VueTableDynamic from 'vue-table-dynamic'

Registration

Global registration

Vue.use(VueTableDynamic)

Local registration

<script>
export default {
  components: { VueTableDynamic }
}
</script>
Basic Table

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

<script>
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 }
}
</script>

Border

Bordered table usage

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

Stripe

Striped rows

• stripe:true striped
• stripe:false unstriped

Highlight

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

Search

Filter rows by keyword

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

Sort

Sort rows based on specified column data

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

Filter

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 cell.data > value }}]
• filter[].column: column index
• filter[].content: filter items
• filter[].method: filter rule.

Pagination

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]

Edit

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.