Table Events

@on-row-click

event emitted on table row click

<vue-good-table :columns="columns" :rows="rows" @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 } } 

@on-row-dblclick

event emitted on table row click

<vue-good-table :columns="columns" :rows="rows" @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 } } 

@on-cell-click

event emitted on table cell click

<vue-good-table :columns="columns" :rows="rows" @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 } } 

@on-row-mouseenter

event emitted on row mouseenter

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

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

@on-row-mouseleave

event emitted on table row mouseleave

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

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

@on-search

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

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

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

@on-page-change

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

<vue-good-table :columns="columns" :rows="rows" @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 } } 

@on-per-page-change

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

<vue-good-table :columns="columns" :rows="rows" @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 } } 

@on-sort-change

event emitted on sort change.

TIP

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

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

methods: { onSortChange(params) { // params[0].sortType - ascending or descending // params[0].columnIndex - index of column being sorted } } 

@on-column-filter

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

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

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

@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 }" @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) } } 

@on-selected-rows-change

event emitted whenever selection is changed (on checkbox tables)

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

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