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
  v-on:selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :select-options="{
    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
    selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
  }">

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
  v-on:selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :select-options="{ enabled: true }"
  :search-options="{ enabled: true }">
</vue-good-table>

Search

	Name	Age	Created On	Percent
	John	20	Jul 2nd 11	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
  v-on:selected-rows-change="selectionChanged"
  :columns="columns"
  :rows="rows"
  :select-options="{ 
    enabled: true,
  }"
  :search-options="{ enabled: true }">
  <template #selected-row-actions>
    <button>Action 1</button>
  </template>
</vue-good-table>
<!-- click on a row below to show the action button -->

Search

	Name	Age	Created On	Percent
	John	20	Jul 2nd 11	3.34%
	Jane	24	Oct 31st 11	3.34%
	Susan	16	Oct 30th 11	3.34%

Note

You can style the selection info bar by supplying a css class to selectionInfoClass property.