Table

Presentational table primitives for rows, columns, and captions.

Introduction

Tables present related data in rows and columns. They are composed of semantic parts:

• Table — wrapper around a native table; sets variant, size, rounded, stripes, hover, and sticky header.
• TableHeader / TableBody / TableFooter — thead, tbody, and tfoot.
• TableRow — a tr.
• TableHead / TableCell — th and td, with optional numeric and align.
• TableCaption — an accessible caption for the table.

When to use: Rosters, invoices, and any dataset with a consistent set of columns. Table does not sort, select, or paginate — use DataTable for that, or pair Pagination under a static Table when you compose paging yourself.

Compared to similar components:

• DataTable — Opinionated grid with sort, selection, filters, search, and pagination wiring. Compose DataTable from columns and rows; keep Table for static HTML.
• List — A vertical index of items with primary/secondary text and slots. Use List for navigation and settings rows; use Table when values line up across columns.
• Pagination — Page controls. Table does not render pagination; place Pagination below it and match chrome.

Use the framework selector in the site header to switch between React and Vue.

Import

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@bridge-ui/vue/Components/Table";

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@bridge-ui/react/Components/Table";

Basic usage

Wrap header and body rows in TableHeader and TableBody. Use TableHead for column labels and TableCell for values.

Variants

Set chrome with variant: plain (default), ghost, or bordered. If you page the data, pair Pagination underneath — plain with text, ghost with ghost, and bordered with outlined.

Rounded

rounded shapes the wrapper, header, and footer corners. Default is lg.

Striped and hoverable

striped alternates body row surfaces. hoverable adds row hover styles on the body. Both are independent of variant.

Sizes

Change cell padding and type scale with size: sm, md (default), or lg.

Sticky header

stickyHeader (Vue: sticky-header) pins header cells to the nearest scrollport — usually the page. The wrapper skips overflow so the header can stick. For a boxed scroll area, set overflow-auto and a max height on classes.root.

Numeric cells

Set numeric on TableHead and TableCell for tabular numbers and end alignment. Override alignment with align: start (default), center, or end. numeric still applies tabular nums when align is set.

Caption and footer

TableCaption renders a native caption (typically below the table). TableFooter is a tfoot for totals or summary rows.

Related components

DataTable, Pagination, List, Badge

Accessibility

• Keep a real table with thead / tbody — do not rebuild tables from generic divs when the data is tabular.
• TableHead sets scope="col" on each header cell.
• Provide a TableCaption or an aria-label on customProps.table when the surrounding heading does not already name it.
• stickyHeader is visual only; column headers remain in the accessibility tree.

Anatomy

<div> <!-- outer wrap; w-fit when full is false -->
  <div> <!-- Table wrapper (root) -->
    <table> <!-- table -->
      <caption> <!-- TableCaption -->
      <thead> <!-- TableHeader -->
        <tr> <!-- TableRow -->
          <th> <!-- TableHead -->
      <tbody> <!-- TableBody -->
        <tr> <!-- TableRow -->
          <td> <!-- TableCell -->
      <tfoot> <!-- TableFooter -->
        <tr>
          <td>
    </table>
  </div>
</div>

Use classes on Table to style root, table, header, body, footer, row, head, cell, and caption. Each part also accepts its own classes.root.

API

Table

TableHeader / TableBody / TableFooter / TableRow / TableCaption

TableHead / TableCell