Home
Table
Simple Clean Data Table For VueJS – good-table

Simple Clean Data Table For VueJS – good-table

xaksis Last Updated: 2 years ago

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.

  • @on-row-click
  • @on-row-dblclick
  • @on-cell-click
  • @on-row-mouseenter
  • @on-row-mouseleave
  • @on-search
  • @on-page-change
  • @on-per-page-change
  • @on-sort-change
  • @on-column-filter
  • @on-select-all
  • @on-selected-rows-change

Preview:

good-table

Changelog:

v2.21.11 (09/29/2021)

  • Bugfixes

v2.21.10 (04/19/2021)

  • Bugfixes

v2.21.9 (03/28/2021)

  • Removed console.log
  • Bugs fixed

v2.21.8 (03/11/2021)

  • Fix placeholder always forced to null
  • Prevent JSON parse error
  • Tooltip support
  • Fixes go to first page on perPageChange
  • Adding polar bear

v2.21.7 (03/02/2021)

  • Ability to disable multiple column sort.
  • Bugfix

v2.21.6 (02/28/2021)

  • Updated package

v2.21.4 (02/19/2021)

  • Remove debounce on dropdown column filter
  • Fix bug with sorting applied to other colums having using function fields
  • Fix wrong pagination on grouped rows
  • Fix using function name for field
  • Current row number for grouped tables
  • Fixed: Disable row selection if a condition is met
  • Paging optimization

v2.21.3 (01/16/2021)

  • Fix style issues introduced by accessibility
  • Stylistic fixes
  • Submit default prevented on forms
  • PerPageDropdownEnabled property added
  • Add scss variable for table bg
  • Show custom filter (column-filter) when header is
  • Fixed StyleClass for column filters

v2.21.2 (01/05/2021)

  • Version upgraded
  • Accessibility enhancements
  • Fixed issues
  • Update both sides of pagination widget during changes

v2.21.1 (10/18/2020)

  • Fixed header now has a resize observer for primary column headers

v2.21.0 (08/08/2020)

  • Remove Vue Select and Add Column Filter Slot
  • Fix invalid date warnings

v2.20.0 (07/22/2020)

  • Add compact-mode
  • Add feature to enable checking all checkboxes of a grouped table

v2.19.5 (06/24/2020)

  • Bundle files

v2.19.4 (06/23/2020)

  • Add rowKey option
  • Fix: highlighting should work even when striped style is applied
  • New column property firstSortType

Download Details:

Author: xaksis

Live Demo: https://xaksis.github.io/vue-good-table/

Download Link: https://github.com/xaksis/vue-good-table/archive/master.zip

Official Website: https://github.com/xaksis/vue-good-table

Install & Download:

npm install --save vue-good-table

Related Posts

Tags:

Add Comment