Table: Vue 3 Component with Row Selection

Example

Name	Age	City
Alice	30	New York
Bob	25	Los Angeles
Charlie	35	Chicago
Diana	28	San Francisco
Ethan	41	Seattle
Fiona	33	Austin
George	29	Boston
Total: 7 entries

<TableComponent border-type="rows" alternate-row-color outer-border hoverable sticky-header max-height="14rem">
  <template #header>
    <TableHeaderComponent>
      <th>Name</th>
      <th>Age</th>
    </TableHeaderComponent>
  </template>

  <template #body>
    <TableBodyComponent>
      <tr v-for="person in people" :key="person.id">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
      </tr>
    </TableBodyComponent>
  </template>

  <template #footer>
    <TableFooterComponent>
      <td colspan="2">Total: {{ people.length }}</td>
    </TableFooterComponent>
  </template>
</TableComponent>

Row selection

Use TableRowComponent with a unique value for each row. selectable lets users click rows; show-checkbox also adds a checkbox column with select-all in the header. Selected rows turn a darker gray (--ml-selected).

multiple show-checkbox

Name	Age	City
Alice	30	New York
Bob	25	Los Angeles
Charlie	35	Chicago
Diana	28	San Francisco
Ethan	41	Seattle
Fiona	33	Austin
George	29	Boston

const selectedIds = ref<OptionValue[]>([])

<TableComponent v-model:selected="selectedIds" selectable show-checkbox>
  <template #header>
    <TableHeaderComponent>
      <th>Name</th>
    </TableHeaderComponent>
  </template>

  <template #body>
    <TableBodyComponent>
      <TableRowComponent v-for="person in people" :key="person.id" :value="person.id">
        <td>{{ person.name }}</td>
      </TableRowComponent>
    </TableBodyComponent>
  </template>
</TableComponent>

API

TableComponent props

Name	Type	Default	Description
`borderType`	`'rows' \| 'all' \| 'columns' \| 'none'`	`'rows'`	Which cell borders to draw.
`alternateRowColor`	`boolean`	`false`	Stripe every other body row.
`outerBorder`	`boolean`	`false`	Border around the whole table.
`hoverable`	`boolean`	`false`	Highlight body rows on hover.
`stickyHeader`	`boolean`	`false`	Keep header cells visible while scrolling.
`maxHeight`	`string`	`undefined`	Maximum height; the table scrolls inside it.
`v-model:selected`	`(string \| number)[]`	`[]`	Values of the selected rows.
`selectable`	`boolean`	`false`	Clicking a TableRowComponent toggles its selection.
`showCheckbox`	`boolean`	`false`	Adds a checkbox column (and select-all when multiple). Implies selectable.
`multiple`	`boolean`	`true`	Allow more than one selected row.

TableRowComponent props

Name	Type	Default	Description
`value`	`string \| number`	`undefined`	Unique row value used for selection. Rows without a value cannot be selected.

Slots

Name	Description
`header`	TableHeaderComponent with <th> cells.
`body`	TableBodyComponent with <tr> rows.
`default`	Alternative to the body slot.
`footer`	TableFooterComponent with <td> cells.