Table Events

v-on:row-click

event emitted on table row click

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:row-click="onRowClick">

methods: {
  onRowClick(params) {
    // params.row - row object 
    // params.pageIndex - index of this row on the current page.
    // params.selected - if selection is enabled this argument 
    // indicates selected or not
    // params.event - click event
  }
}

v-on:row-dblclick

event emitted on table row click

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:row-dblclick="onRowDoubleClick">

methods: {
  onRowDoubleClick(params) {
    // params.row - row object 
    // params.pageIndex - index of this row on the current page.
    // params.selected - if selection is enabled this argument 
    // indicates selected or not
    // params.event - click event
  }
}

v-on:cell-click

event emitted on table cell click

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:cell-click="onCellClick">

methods: {
  onCellClick(params) {
    // params.row - row object 
    // params.column - column object
    // params.rowIndex - index of this row on the current page.
    // params.event - click event
  }
}

v-on:row-mouseenter

event emitted on row mouseenter

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:row-mouseenter="onRowMouseover">

methods: {
  onRowMouseover(params) {
    // params.row - row object 
    // params.pageIndex - index of this row on the current page.
  }
}

v-on:row-mouseleave

event emitted on table row mouseleave

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:row-mouseleave="onRowMouseleave">

methods: {
  onRowMouseleave(row, pageIndex) {
    // row - row object 
    // pageIndex - index of this row on the current page.
  }
}

v-on:search

event emitted on global search (when global search is enabled)

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:search="onSearch">

methods: {
  onSearch(params) {
    // params.searchTerm - term being searched for
    // params.rowCount - number of rows that match search
  }
}

v-on:page-change

event emitted on pagination page change (when pagination is enabled)

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:page-change="onPageChange">

methods: {
  onPageChange(params) {
    // params.currentPage - current page that pagination is at
    // params.prevPage - previous page
    // params.currentPerPage - number of items per page
    // params.total - total number of items in the table
  }
}

v-on:per-page-change

event emitted on per page dropdown change (when pagination is enabled)

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:per-page-change="onPageChange">

methods: {
  onPageChange(params) {
    // params.currentPage - current page that pagination is at
    // params.currentPerPage - number of items per page
    // params.total - total number of items in the table
  }
}

v-on:sort-change

event emitted on sort change.

Tips

vue-good-table now supports sorting by multiple columns, so the params is an array.

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:sort-change="onSortChange">

methods: {
  onSortChange(params) {
    // params is Vue-created proxy object:
    // params[0].type - "asc" or "desc"
    // params[0].field - field being sorted
  }
}

v-on:column-filter

event emitted when column is filtered (only emitted for remote mode)

<vue-good-table
  :columns="columns"
  :rows="rows"
  v-on:column-filter="onColumnFilter">

methods: {
  onColumnFilter(params) {
    // params.columnFilters - filter values for each column in the following format:
    // {field1: 'filterTerm', field3: 'filterTerm2')
  }
}

v-on:select-all

event emitted when all is selected (only emitted for checkbox tables)

<vue-good-table
  :columns="columns"
  :rows="rows"
  :select-options="{ enabled: true }"
  v-on:select-all="onSelectAll">

methods: {
  onSelectAll(params) {
    // params.selected - whether the select-all checkbox is checked or unchecked
    // params.selectedRows - all rows that are selected (this page)
  }
}

v-on:selected-rows-change

event emitted whenever selection is changed (on checkbox tables)

<vue-good-table
 :columns="columns"
 :rows="rows"
 :select-options="{ enabled: true }"
 v-on:selected-rows-change="selectionChanged">

methods: {
  selectionChanged(params) {
    // params.selectedRows - all rows that are selected (this page)
  }
}