Column Options

Each column objects can contain the following configuration options:

label

type String

Text to put on column header.

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

field

type String

Row object property that this column corresponds to. This can be:

• String eg: 'name' - simple row property name
• String eg: 'location.lat'- nested row property name. lets say if the row had a property 'location' which was an object containing 'lat' and 'lon'
• Function - a function that returns a value to be displayed based on the row object

columns: [
  {
    label: 'name',
    field: this.fealdFn,
  },
  // ...
]
// in methods
fieldFn(rowObj) {
  return rowObj.name;
}

type

type String

type of column. default: 'text'. This determines the formatting for the column and filter behavior as well. Possible values:

• number - right aligned
• decimal - right aligned, 2 decimal places
• percentage - expects a decimal like 0.03 and formats it as 3.00%
• boolean - right aligned
• date - expects a string representation of date eg '20170530'. You should also specify dateInputFormat and dateOutputFormat

columns: [
  {
    label: 'joined On',
    field: 'createdAt',
    type: 'date',
    dateInputFormat: 'yyyy-MM-dd', // expects 2018-03-16
    dateOutputFormat: 'MMM do yyyy', // outputs Mar 16th 2018
  },
  // ...
]

dateInputFormat

type String

provide the format to parse date string.

TIP

Vue-good-table uses date-fns for date parsing. Check out their formats here (opens new window).

dateOutputFormat

type String

provide the format for output date

sortable

type Boolean

enable/disable sorting on columns. This property is higher priority than global sortable property

columns: [
  {
    label: 'name',
    field: 'user_name',
    sortable: false,
  },
  // ...
]

firstSortType

type String (default: 'asc')

controls the first sort type when sorting by the column. If you want the first sort type for this column to be descending, set this property to 'desc'. Possible values:

• asc - the initial sort will be ascending
• desc - the initial sort will be descending

columns: [
  {
    label: 'name',
    field: 'user_name',
    sortable: true,
    firstSortType: 'desc'
  },
  // ...
]

sortFn

type Function

custom sort function. If you want to supply your own sort function you can use this property.

// in data
columns: [
  {
    label: 'Name',
    field: 'name',
    sortable: true,
    sortFn: this.sortFn,
  }
  //...
],
// in methods
methods: {
  sortFn(x, y, col, rowX, rowY) {
    // x - row1 value for column
    // y - row2 value for column
    // col - column being sorted
    // rowX - row object for row1
    // rowY - row object for row2
    return (x < y ? -1 : (x > y ? 1 : 0));
  }
}

formatFn

type Function

Allows for custom format of values, function(value), should return the formatted value to display.

// in data
columns: [
  {
    label: 'Salary',
    field: 'salary',
    sortable: true,
    formatFn: this.formatFn,
  }
  //...
],
// in methods
formatFn: function(value) {
  return '$' + value;
}

html

type Boolean

indicates whether this column will require html rendering.

TIP

The preferred way of creating columns that have html is by using slots

// in data
columns: [
  {
    label: 'Action',
    field: 'btn',
    html: true,
  }
  //...
],
rows: [
  {
    btn: '<button>My Action</button>',
    // ...
  }
]

width

type Number

provide a width value for this column

columns: [
  {
    label: 'name',
    field: 'user_name',
    width: '50px',
  },
  // ...
]

hidden

type Boolean

hide a column

columns: [
  {
    label: 'name',
    field: 'user_name',
    hidden: true,
  },
  // ...
]

thClass

type String

provide custom class(es) to the table header

columns: [
  {
    label: 'name',
    field: 'user_name',
    thClass: 'custom-th-class',
  },
  // ...
]

tdClass

type String or Function

provide custom class(es) to the table cells

columns: [
  {
    label: 'name',
    field: 'user_name',
    tdClass: 'text-center',
  },
  // ...
]

or

columns: [
  {
    label: 'name',
    field: 'user_name',
    tdClass: this.tdClassFunc,
  },
  // ...
]
// and later
methods: {
  tdClassFunc(row) {
    if (row.field > 50) {
      return 'red-class';
    }
    return 'green-class';
  },
}

globalSearchDisabled

type Boolean (default: false)

if true, this column will be ignored by the global search

columns: [
  {
    label: 'name',
    field: 'user_name',
    globalSearchDisabled: true,
  },
  // ...
]

tooltip

type String

Text to put on a simple tooltip for column header.

columns: [
  {
    label: 'name',
    field: 'user_name',
    tooltip: 'A simple tooltip',
  },
  // ...
]