A Powerful Advanced Data Table For Vuejs

Vue good table is an easy-to-use, clean and powerful data table spreadsheet for VueJS with core features like sorting, column filtering, pagination, and much more.

vuejs datatable example vuejs datatable bootstrap, vuejs datatable github, how to use jquery datatable in vue js, vue 3 data table, automated data cleaning excel

Features

Table Search
Sorting
Column Filtering
Pagination
Highly Customizable
Checkbox Table
Grouped Rows Table
Server Powered Table
Customizable Style and Themes

How to make use of it:

Install and download:

npm install --save vue-good-table

1. Import the Goods table into your app or component.

// globally
import VueGoodTablePlugin from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css'
Vue.use(VueGoodTablePlugin);

// locally
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';
components: {
  VueGoodTable,
}

2. Add the <vue-good-table /> component to the form and specify the column and row data as follows:

<vue-good-table :columns="columns" :rows="rows"/>

export default {
  name: 'my-component',
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        // ...
      ],
      rows: [
        { id:1, name:"John", age: 20 },
        { id:2, name:"Jane", age: 24 },
        // ...
      ],
    };
  },
};

3. Options and props for virtual components.

isLoading: { default: null, type: Boolean },
maxHeight: { default: null, type: String },
fixedHeader: Boolean ,
theme: { default: '' },
mode: { default: 'local' }, // could be remote
totalRows: {}, // required if mode = 'remote'
styleClass: { default: 'vgt-table bordered' },
columns: {},
rows: {},
lineNumbers: Boolean,
responsive: { default: true , type: Boolean },
rtl: Boolean,
rowStyleClass: { default: null, type: [Function, String] },
compactMode: Boolean,
groupOptions: {
  default() {
    return {
      enabled: false,
      collapsable: false,
      rowKey: null
    };
  },
},
selectOptions: {
  default() {
    return {
      enabled: false,
      selectionInfoClass: '',
      selectionText: 'rows selected',
      clearSelectionText: 'clear',
      disableSelectInfo: false,
      selectAllByGroup: false,
    };
  },
},
// sort
sortOptions: {
  default() {
    return {
      enabled: true,
      multipleColumns: true,
      initialSortBy: {},
    };
  },
},
// pagination
paginationOptions: {
  default() {
    return {
      enabled: false,
      position: 'bottom',
      perPage: 10,
      perPageDropdown: null,
      perPageDropdownEnabled: true,
      position: 'bottom',
      dropdownAllowAll: true,
      mode: 'records', // or pages
      infoFn: null,
      jumpFirstOrLast : false
    };
  },
},
searchOptions: {
  default() {
    return {
      enabled: false,
      trigger: null,
      externalQuery: null,
      searchFn: null,
      placeholder: 'Search Table',
    };
  },
},

Simple Clean Data Table For VueJS, Vue good table Plugin/Github