Tables
Display structured data in a scannable, organized way.
A table is three pieces, top to bottom: FilterBar (search and filters), Table (the data), and TableFooter (the item count and Pagination, shown once there is more than one page). Search, filter, and pagination state belong to the caller; Table only renders data and columns. When a table has a createRowSelectColumn, there is a fourth piece, RowSelectActionBar, which floats in at the bottom center of the viewport as soon as a row is selected and disappears when the selection clears. FilterBar stays in place the whole time, so search and filtering keep working during a selection.
When to use each piece
- Compose FilterBar, Table, and TableFooter for every user-facing data table. Do not hand-build page controls or fold pagination into
Table. - Skip FilterBar only for a small, fixed dataset that nobody needs to search, like a settings table with a handful of rows.
- Skip Pagination only when the data always fits on one page. The footer's item count stays either way.
- Add RowSelectActionBar only when the table has bulk actions on selected rows. It floats in at the bottom on selection, alongside FilterBar, not in place of it.
Example
Full composition
| Owner | Repository | Visibility | Findings | |
|---|---|---|---|---|
s security-team | repo-1(opens in new tab) | Public | 0 | |
p platform-team | repo-2(opens in new tab) | Private | 1 | |
d docs-team | repo-3(opens in new tab) | Private | 2 | |
s security-team | repo-4(opens in new tab) | Public | 3 | |
p platform-team | repo-5(opens in new tab) | Private | 0 |
14 repositories
<template> <FilterBar v-model="activeFilters" v-model:search="search" :fields="filterFields" /> <Table v-model:row-selection="rowSelection" :get-row-id="row => row.name" :data="paginatedRepos" :columns="columns" /> <RowSelectActionBar v-if="selectedCount > 0" :count="selectedCount" :actions="bulkActions" @clear="rowSelection = {}" /> <TableFooter v-model:page="page" :total="filteredRepos.length" :items-per-page="ITEMS_PER_PAGE" :count-label="countLabel" /></template>