Checkbox Table
One of the most common customizations in datatables is selectable rows. Creating a checkbox table with vue-good-table is easier than ever.
Configuration
type: Object
Object containing select options
<vue-good-table
@on-select-all="allSelected"
@on-row-click="rowSelected"
:columns="columns"
:rows="rows"
:selectOptions="{
enabled: true,
selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
selectionInfoClass: 'custom-class',
selectionText: 'rows selected',
clearSelectionText: 'clear',
}">
you can also programmatically get selected rows at any time by putting a ref
on the table and then doing
this.$refs['my-table'].selectedRows;
Example
<vue-good-table
@on-select-all="selectAll"
@on-row-click="toggleSelectRow"
:columns="columns"
:rows="rows"
:select-options="{ enabled: true }"
:search-options="{ enabled: true }">
</vue-good-table>
Name | Age | Created On | Percent | |
---|---|---|---|---|
John | 20 | Oct 31st 01 | 3.34% | |
Jane | 24 | Oct 31st 11 | 3.34% | |
Susan | 16 | Oct 30th 11 | 3.34% |
Selected row action slot
Once you select a row, an info bar shows up. This bar allows for a customizable slot for your action buttons.
Example
<vue-good-table
@on-select-all="selectAll"
@on-row-click="toggleSelectRow"
:columns="columns"
:rows="rows"
:select-options="{
enabled: true,
}"
:search-options="{ enabled: true }">
<div slot="selected-row-actions">
<button>Action 1</button>
</div>
</vue-good-table>