← Frontic UI
table

Table

Rows and columns of data such as orders, with header, footer, caption and an empty state; a wide table scrolls in its box and takes keyboard focus to do so.

States: Default, Hover, Focus

Parts

PartFileDoes
TableTable.vueGroups all parts of the table, which shows data in rows and columns.
TableBodyTableBody.vueHolds the data rows of the table.
TableCaptionTableCaption.vueDescribes in a short line what the table shows.
TableCellTableCell.vueHolds one value in a row of the table.
TableEmptyTableEmpty.vueShows a message in place of rows when the table has no data.
TableFooterTableFooter.vueHolds the summary rows at the bottom of the table, such as totals.
TableHeadTableHead.vueLabels one column of the table.
TableHeaderTableHeader.vueHolds the row of column labels at the top of the table.
TableRowTableRow.vueGroups the cells that belong to one entry of the table.

Anatomy

<Table>
  <TableCaption />
  <TableHeader>
    <TableRow>
      <TableHead />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell />
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell />
    </TableRow>
  </TableFooter>
</Table>

Styling

PartRecipe
Tabletable
Tablefocus-ring
TableCaptiontable-caption
TableCelltable-cell
TableEmptytable-empty
TableFootertable-footer
TableHeadtable-head
TableRowtable-row

Install

Writes 10 files into components/ui/table/. For agents, npx @frontic/ui docs table prints this reference as markdown; the MCP server serves the same.

npm packages
@vueuse/core
reka-ui

API reference

Table Table.vue

Groups all parts of the table, which shows data in rows and columns. Renders a <table>.

PropTypeDefault
classClassValue—
Recipe tableSets
base: table 2 properties
Recipe focus-ringSets
base: focus-ring 3 properties

TableBody TableBody.vue

TableCaption TableCaption.vue

TableCell TableCell.vue

TableEmpty TableEmpty.vue

TableFooter TableFooter.vue

TableHead TableHead.vue

TableHeader TableHeader.vue

TableRow TableRow.vue

Example
State