Vue-good-tables are powerful data tables for vue.js. It has the latest customization features like sorting, column filtering, pagination, grouping etc. It's also easy to use. The features of vue-good-table are : table search, sorting, column filtering, pagination, highly customizable, checkbox table, grouped rows table, server powered table, customizable style and themes. Let’s see how to install it using npm. Type the npm command shown below.

npm install --save vue-good-table
Import globally in app:
import VueGoodTablePlugin from 'vue-good-table';
 
// import the styles 
import 'vue-good-table/dist/vue-good-table.css'
 
Vue.use(VueGoodTablePlugin);

To import into your component, paste the following lines of code.

import { VueGoodTable } from 'vue-good-table';
 
// add to component
components: {
  VueGoodTable,
}

To import into your component using Typescript do the following code.

// add to component
components: {
  'vue-good-table': require('vue-good-table').VueGoodTable,
}

Let’s see a few table options in order to know about how to use the vue-good-table. There are many table options available in the vue-good-table. Columns- Array containing objects that describe table columns. The object can contain many configurable properties.

[
    {
      label: 'Name',
      field: 'name',
    }
    //...
]

Rows: Its type is also array. This array contains row objects. Each row object contains data that will be displayed in the table row.

[
    {
      id:1,
      name:"John",
      age:20
    },
    //...
]

Max-height- Its type is string, It can be used to set maximum height for the table body.

<vue-good-table

  :columns="columns"

  :rows="rows"

  max-height="300px">

</vue-good-table>

Fixed-header, line-numbers, row-style-class, rtl are other table options in vue-good-table.