Table

import { Table } from '@yarcl/react';

compactcomfortable

Invoices

	Invoice	Customer	Status	Amount
	INV-1042	Ada Lovelace	Paid	$1,200.00
	INV-1043	Grace Hopper	Pending	$860.50
	INV-1044	Alan Turing	Overdue	$45.00
	INV-1045	Katherine Johnson	Paid	$13,075.25

<Table density="compact" radius="md" striped interactive stickyHeader caption="Invoices">
  <Table.Head>
    <Table.Row>
      <Table.SelectAllCell checked={allSelected} indeterminate={someSelected} onCheckedChange={toggleAll} />
      <Table.HeaderCell sortable sortDirection={sortDir} onSort={setSortDir}>Customer</Table.HeaderCell>
      <Table.HeaderCell align="end">Amount</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.VirtualBody items={invoices} estimateRowHeight={48} getItemKey={(invoice) => invoice.id}>
    {(invoice) => (
      <Table.Row key={invoice.id} selected={selectedIds.has(invoice.id)}>
        <Table.SelectionCell
          aria-label={`Select ${invoice.customer}`}
          checked={selectedIds.has(invoice.id)}
          onCheckedChange={() => toggleRow(invoice.id)}
        />
        <Table.Cell>{invoice.customer}</Table.Cell>
        <Table.Cell align="end">${invoice.amount.toFixed(2)}</Table.Cell>
      </Table.Row>
    )}
  </Table.VirtualBody>
</Table>

• density accepts the keys of your density group.
• Text without an explicit text style follows the cell’s density font size, so muted and truncate can be used alongside plain cell text. Use textStyle to opt into a specific text style.
• radius accepts the keys of your radii group and styles the table frame.
• sortable on Table.HeaderCell manages aria-sort state and accessible sort triggers.
• Table.SelectAllCell and Table.SelectionCell provide accessible row selection checkboxes.
• Table.VirtualBody renders a window of rows around the viewport. Choose measured heights for wrapped content or an explicit fixed height when every row is equal.
• align="end" also uses tabular numbers, so amounts line up.
• caption is visible and names the table for screen readers.

Virtual rows

Use measured mode when descriptions wrap, rows expand, or density changes their height:

<Table stickyHeader caption="Orders" wrapStyle={{ maxHeight: '24rem' }}>
  <Table.Head>
    <Table.Row>
      <Table.HeaderCell>Customer</Table.HeaderCell>
      <Table.HeaderCell>Description</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.VirtualBody
    items={orders}
    estimateRowHeight={48}
    getItemKey={(order) => order.id}
    overscan={5}
  >
    {(order) => (
      <Table.Row>
        <Table.Cell>{order.customer}</Table.Cell>
        <Table.Cell>{order.description}</Table.Cell>
      </Table.Row>
    )}
  </Table.VirtualBody>
</Table>

estimateRowHeight is a positive initial estimate in CSS pixels. ResizeObserver replaces it with each rendered row’s actual height. Unvisited rows retain their estimate, so the scrollbar becomes more accurate as you scroll. Choose an estimate close to a typical row to reduce adjustments.

getItemKey is required in measured mode. Return a unique, stable ID that follows the item through sorting and filtering. An array index is unsuitable for mutable order. Measurements are cached by this key, refreshed when visible content resizes, and invalidated when table width, density or theme changes. The first visible item remains the scroll anchor when earlier rows are remeasured. The focused row and its immediate neighbors stay mounted so Tab and Shift+Tab can continue across virtual windows. The sticky table wrapper can receive keyboard focus; use PageDown to scroll, Home for the first row and End for the last row.

Render exactly one Table.Row or native tr per item. A custom row component must spread its props onto its tr. Row and body refs remain available. Keep column widths stable, for example with tableLayout: 'fixed' or a colgroup, so different windows do not continually change text wrapping.

For fixed mode, pass rowHeight instead of estimateRowHeight. Rows must all render at that height, including their padding and borders. Both modes reject duplicate item keys. Update it if density or content changes the height:

<Table.VirtualBody items={orders} rowHeight={36} getItemKey={(order) => order.id}>
  {(order) => (
    <Table.Row>
      <Table.Cell>{order.customer}</Table.Cell>
      <Table.Cell>{order.total}</Table.Cell>
    </Table.Row>
  )}
</Table.VirtualBody>

overscan is a nonnegative integer. Both modes use the table wrapper as their scroll container. Pass scrollRef when an ancestor handles scrolling; captions and content before the table are accounted for in the offsets. Use Table.Body when every row must be present for printing, browser find or assistive technology traversal.

Part styles

Configure root, header, row and cell through component parts. The root is the scrollable frame; header cells expose data-part="header", body cells expose "cell", and compound rows expose "row". Use wrapClassName to scope application CSS to a table frame.

Column controls

Add typed column widths, pointer and keyboard resize handles, and visibility checkboxes with useTableColumns, Table.Columns and Table.ColumnVisibility. They work with sorting, selection, sticky headers and both virtualization modes. See the complete table columns guide.

Props

Table

Prop	Type	Default	Description
caption	ReactNode		Visible caption describing the table. Also its accessible name.
density	Densityconfig	config.defaults.density	Cell padding and font size, from the density config.
interactive	boolean		Highlights the row under the pointer. Use when rows are clickable.
radius	Radiusconfig	config.components.Table.radius ?? config.defaults.radius	Corner radius of the table frame, from the radii config.
stickyHeader	boolean		Enables a scrollable container with sticky header support.
striped	boolean		Shades every other row.
wrapClassName	string		Additional class name for the outer table wrapper.
wrapStyle	CSSProperties		Additional inline styles for the outer table wrapper.

Table.HeaderCell

Prop	Type	Default	Description
align	CellAlign	'start'	Content alignment.
onSort	(direction: 'ascending' | 'descending') => void		Callback invoked when the user activates the sort button.
resize	TableColumnResizerProps		Optional column-width separator beside the header content or sort button.
sortable	boolean		Indicates whether the column is sortable.
sortDirection	false | SortDirection | null		Current sort direction of the column.
sortLabel	string		Accessible label for the sort action.

Table.Cell

Prop	Type	Default	Description
align	CellAlign	'start'	Content alignment.

Table.Row

Prop	Type	Default	Description
selected	boolean		Indicates whether the row is currently selected.

Table.SelectAllCell

Prop	Type	Default	Description
aria-label	string	config.labels.selectAllRows	Accessible label for screen readers.
checked	boolean		Checked state when all rows are selected.
disabled	boolean		Disables the select all checkbox.
indeterminate	boolean		Indeterminate state when a subset of rows is selected.
onCheckedChange	(checked: boolean) => void		Change handler when the checkbox is toggled.

Table.SelectionCell

Prop	Type	Default	Description
aria-label required	string		Accessible label for the row checkbox.
checked	boolean		Checked state of the row selection checkbox.
disabled	boolean		Disables the row selection checkbox.
onCheckedChange	(checked: boolean) => void		Change handler when the row checkbox is toggled.

Table.VirtualBody

Measured heights

Prop	Type	Default	Description
children required	(item: T, index: number) => ReactElement<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>>		Render exactly one Table.Row or tr per item. Custom row components must spread their props onto a tr.
estimateRowHeight required	number		Initial estimate in CSS pixels. Actual row heights are measured with ResizeObserver.
getItemKey required	(item: T, index: number) => string | number		Stable, unique key for each item, independent of its position after sorting or filtering.
items required	T[]		Array of items to render.
overscan	number	5	Number of buffer rows above and below the viewport. Must be a nonnegative integer.
scrollRef	RefObject<HTMLElement | null>		Optional custom scroll container ref instead of the table wrapper.

Fixed heights

Prop	Type	Default	Description
children required	(item: T, index: number) => ReactNode		Render prop called for each visible item.
items required	T[]		Array of items to render.
rowHeight required	number		Rendered height of every row in CSS pixels. Opts into fixed-height virtualization.
getItemKey	(item: T, index: number) => string | number		Key extractor. Fixed mode defaults to item.id or index.
overscan	number	5	Number of buffer rows above and below the viewport. Must be a nonnegative integer.
scrollRef	RefObject<HTMLElement | null>		Optional custom scroll container ref instead of the table wrapper.