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@beta

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);

Nocturnal theme added

to activate, use theme="nocturnal"

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 deleted

Some properties were removed

Table Properties

• 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!

Property name changes

I changed several property names to 1. follow recognizable patterns 2. to align them better with what they do. Here's a list:

table properties

Old Name	New Name
globalSearch	searchEnabled
globalSearchFn	searchFn
globalSearchPlaceholder	searchPlaceholder

column properties

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

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