Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit
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-selected-rows-change="selectionChanged"
: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',
disableSelectInfo: true, // disable the select info panel on top
}">
Although, the on-selected-rows-change
event should be enough for you to keep track of selected rows. If at any time you need to know what rows are selected, you can get it via ref.
this.$refs['my-table'].selectedRows;
Example
<vue-good-table
@on-selected-rows-change="selectionChanged"
:columns="columns"
:rows="rows"
:select-options="{ enabled: true }"
:search-options="{ enabled: true }">
</vue-good-table>
Name | Age | Created On | Percent | |
---|---|---|---|---|
John | 20 | 3.34% | ||
Jane | 24 | Oct 304th 11 | 3.34% | |
Susan | 16 | Oct 303rd 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-selected-rows-change="selectionChanged"
: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>
<!-- click on a row below to show the action button -->
Name | Age | Created On | Percent | |
---|---|---|---|---|
John | 20 | 3.34% | ||
Jane | 24 | Oct 304th 11 | 3.34% | |
Susan | 16 | Oct 303rd 11 | 3.34% |
Note
You can style the selection info bar by supplying a css class to selectionInfoClass
property.