Vue-good-table
Vue-good-table
Source
Edit
History

Table Events

카탈로그
  1. 1. Table Events
    1. 1.1. @on-row-click
    2. 1.2. @on-row-dblclick
    3. 1.3. @on-cell-click
    4. 1.4. @on-row-mouseenter
    5. 1.5. @on-row-mouseleave
    6. 1.6. @on-search
    7. 1.7. @on-page-change
    8. 1.8. @on-per-page-change
    9. 1.9. @on-sort-change
    10. 1.10. @on-column-filter
    11. 1.11. @on-select-all
    12. 1.12. @on-selected-rows-change

Table Events

@on-row-click

event emitted on table row click

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-click="onRowClick">
1
2
3
4
5
6
7
8
9
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

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-dblclick="onRowDoubleClick">
1
2
3
4
5
6
7
8
9
 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

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-cell-click="onCellClick">
1
2
3
4
5
6
7
8
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

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-mouseenter="onRowMouseover">
1
2
3
4
5
6
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

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-mouseleave="onRowMouseleave">
1
2
3
4
5
6
methods: {
  onRowMouseleave(row, pageIndex) {
    // row - row object 
    // pageIndex - index of this row on the current page.
  }
}

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

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-search="onSearch">
1
2
3
4
5
6
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)

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-page-change="onPageChange">
1
2
3
4
5
6
7
8
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)

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-per-page-change="onPageChange">
1
2
3
4
5
6
7
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.
:::

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-sort-change="onSortChange">
1
2
3
4
5
6
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)

1
2
3
4
<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-column-filter="onColumnFilter">
1
2
3
4
5
6
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)

1
2
3
4
5
<vue-good-table
  :columns="columns"
  :rows="rows"
  :select-options="{ enabled: true }"
  @on-select-all="onSelectAll">
1
2
3
4
5
6
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)

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

1
2
3
4
5
methods: {
  selectionChanged(params) {
    // params.selectedRows - all rows that are selected (this page)
  }
}