An Easy To Use Powerful Advanced Data Table For Vuejs | Vue-good-table

vue-data-table-plugin

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


See Demo And Download

Official Website(xaksis): Click Here

This superior jQuery/javascript plugin is developed by xaksis. For extra Advanced Usages, please go to the official website.