Guide to upgrade from 1.x to v2.0

For full documentation refer to: new build readme

Changes

Styles come separately

The styles are now separated from the js component. This means it needs to be imported separately. This also means that if you don't want to use vue-good-table's styles, just don't include it 😄

Install with npm:

npm install --save vue-good-table

Import into project:

import Vue from 'vue';

import VueGoodTable from 'vue-good-table';
// import the styles 
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTable);

action-slot now renders on the control-bar next to the global-search

Custom td/row now works differently

for dynamic td templates the workings have changed to add IE support and to better meet the HTML specification. here's an example of how to do this now:

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

• The original row object can be accessed via props.row
• The currently displayed table row index can be accessed via props.index .
• The original row index can be accessed via props.row.originalIndex. You can then access the original row object by using row[props.row.originalIndex].
• The column object can be accessed via props.column
• You can access the formatted row data (for example - formatted date) via props.formattedRow

Properties were re-named/re-categorized

• All global search related properties now reside inside searchOptions

• All pagination related properties now reside inside paginationOptions

• All sort related properties now reside inside sortOptions

• title - title can easily be rendered outside the table. There's no good reason to have that as part of the table component especially since action-slot is now moved to the control-bar (next to global-search). Good Bye Title!

Column Properties

• filterDropdown - If filterDropdownItems is populated and is an array, we know to use a dropdown instead of an input. This boolean was not necessary and therefore was removed. Good-Bye!

Column property name changes and categorization

Several property names were changed to 1. follow recognizable patterns 2. to align them better with what they do. Here's a list for column properties and their new names:

Old Name	New Name
inputFormat	dateInputFormat
outputFormat	dateOutputFormat
filterable	filterOptions.enabled
filterValue	filterOptions.filterValue
filter	filterOptions.filterFn
placeholder	filterOptions.placeholder
filterOptions	filterOptions.filterDropdownItems

Event name changes

Event names were also changed to make them more consistent

Old Name	New Name
perPageChanged	on-per-page-change
pageChanged	on-page-change

Nocturnal theme added

to activate, use theme="nocturnal"

New events added to support Remote Mode

• on-row-click - event emitted on row click
• on-search - event emitted on global search change
• on-column-filter - event emitted on column filter change
• on-sort-change - event emitted on sort change