Simple Clean Data Table For VueJS - good-table

Install & Download:

npm install --save vue-good-table

Description:

A simple, clean data table for VueJS with essential features like sorting, column filtering, pagination etc.

How to use it:

1. Import the good-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 template and define the column & 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. Default component props & options.

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',
    };
  },
},

4. Events.