Sass

Vue-Good-Table’s styling is written in Sass. The source files are made available as part of the npm dependency.

Vue-Good-Table’s root Sass file:

1

@import "../node_modules/vue-good-table/src/styles/style.scss";

Vue-Good-Table has an optional feature to filter a column based on a multi-select dropdown. We use Vue-Select for this feature.

Style Classes

Vue-good-table allows providing your own css classes for the table via styleClass option but it also has in-built classes that you can make use of.

::: tip NOTE
by default, tables have ‘vgt-table striped bordered’
:::

.vgt-table

Base class that initializes all the core styles for the table.

1
2
3
4
5

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

Themes

Default

1
2
3
4

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

1
2
3
4
5

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

Server Side Table

Why Remote Mode?

Vue-good-table’s in-built features like sorting, paging, filtering etc. are all performed client side and therefore are great for most of the use-cases. Sometimes though, we might have too much data to render all of it at once on the UI. In such cases, we would want to do things like sorting, paging, filtering on the server side. Fortunately, vue-good-table comes with remote mode to switch from client side to server side.

When remote mode is on, vue-good-table does not perform sorting, paging, filtering etc. on the client side but instead emits events that we can use to then send proper parameters to the back-end. The server then is expected to send the correct rows to display on the UI.

Following is a workflow you can use to get a server powered vue-good-table instance:

Prep Work

What do we send to server?

Before we dive into remote mode, lets agree on what we’re going to be sending to the server. A set of parameters that tells the server exactly what rows I need to get back. Here’s a proposed parameter object to send:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

serverParams: {
  // a map of column filters example: {name: 'john', age: '20'}
  columnFilters: {
  },
  sort: [
    {
      field: '', // example: 'name'
      type: '' // 'asc' or 'desc'
    }
  ],

  page: 1, // what page I want to show
  perPage: 10 // how many items I'm showing per page
}

Grouped Table

To create grouped rows, you need two things.

1. Add groupOptions to table component

1
2
3
4
5
6
7
8

<vue-good-table
  :columns="columns"
  :rows="rows"
  :groupOptions="{
  	enabled: true
  }"
>
</vue-good-table>

2. Make sure the rows are formatted correctly. Grouped rows need to be nested within header rows containing data rows in their children property. For example:

1
2
3
4
5
6
7
8
9
10
11

rows: [
  {
    mode: "span", // span means this header will span all columns
    label: "Mammal", // this is the label that'll be used for the header
    html: false, // if this is true, label will be rendered as html
    children: [
      { name: "Elephant", diet: "herbivore", count: 5 },
      { name: "Cat", diet: "carnivore", count: 28 }
    ]
  }
];

Checkbox Table

One of the most common customizations in datatables is selectable rows. Creating a checkbox table with vue-good-table is easier than ever.

Configuration

type: Object

Object containing select options

1
2
3
4
5
6
7
8
9
10
11
12

<vue-good-table
  @on-selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :selectOptions="{
    enabled: true,
    selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
    selectionInfoClass: 'custom-class',
    selectionText: 'rows selected',
    clearSelectionText: 'clear',
    disableSelectInfo: true, // disable the select info panel on top
  }">

Customizations

Custom Row Template

Sometimes you might want to customize exactly how rows are displayed in a table. Vue-good-table also supports dynamic td templates where you dictate how to display the cells. Example:

1
2
3
4
5
6
7
8
9
10
11
12

<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'age'">
      <span style="font-weight: bold; color: blue;">{{props.row.age}}</span> 
    </span>
    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>

Result

Column Filter Options

filterOptions

type Object

A collection of filter specific properties within a column object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

columns: [
  { 
    label: 'name',
    field: 'user_name',
    filterOptions: {
  	  enabled: true, // enable filter for this column
      placeholder: 'Filter This Thing', // placeholder for filter input
      filterValue: 'Jane', // initial populated value for this filter
      filterDropdownItems: [], // dropdown (with selected values) instead of text input
      filterMultiselectDropdownItems: [], // dropdown (with multiple selected values) instead of text input
      filterFn: this.columnFilterFn, //custom filter function that
      trigger: 'enter', //only trigger on enter not on keyup 
    },
  },
  // ...
]

enabled

type: Boolean
Switch to enable column filter.

Column Options

Each column objects can contain the following configuration options:

label

type String

Text to put on column header.

1
2
3
4
5
6

columns: [
  { 
    label: 'name'
  },
  // ...
]

Pagination Options

A set of options that are related to table pagination. Each of these are optional and reasonable defaults will be used if you leave off the property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    mode: 'records',
    perPage: 5,
    position: 'top',
    perPageDropdown: [3, 7, 9],
    dropdownAllowAll: false,
    setCurrentPage: 2,
    nextLabel: 'next',
    prevLabel: 'prev',
    rowsPerPageLabel: 'Rows per page',
    ofLabel: 'of',
    pageLabel: 'page', // for 'pages' mode
    allLabel: 'All',
  }">
</vue-good-table>

enabled

type: Boolean (default: false)

Enable Pagination for table. By default the paginator is created at the bottom of the table.