Table – Once UI

Table is used to organize and render lists of information in a column/row format. It supports sorting, optional click handlers, and flexible cell content using ReactNode.

Table


Alice	Engineer
Bob	Designer
Carol	Product

<Table
  data={{
    headers: [
      { content: "Name", key: "name" },
      { content: "Role", key: "role" },
    ],
    rows: [
      ["Alice", "Engineer"],
      ["Bob", "Designer"],
      ["Carol", "Product"],
    ],
  }}
/>

Sorting

Enable sorting per column by setting sortable: true on the corresponding header. Click toggles between ascending and descending.

Sorting


Alice	Engineer
Bob	Designer
Carol	Product

<Table
  data={{
    headers: [
      { content: "Name", key: "name", sortable: true },
      { content: "Role", key: "role", sortable: true },
    ],
    rows: [
      ["Alice", "Engineer"],
      ["Bob", "Designer"],
      ["Carol", "Product"],
    ],
  }}
/>

Row actions

Add onRowClick to make rows interactive. A hover state is applied automatically.

Row actions

<Table
  onRowClick={(index) => alert(`Clicked row ${index}`)}
  data={{
    headers: [
      { content: "Task", key: "task" },
      { content: "Status", key: "status" },
    ],
    rows: [
      ["Launch", "In progress"],
      ["Prototype", "Done"],
    ],
  }}
/>

Search

Enable searchable to filter rows by cell content. Use searchPlaceholder to customize the input label.

	Role
Alice	Engineer
Bob	Designer
Carol	Product
Dan	Marketing

<Table
  searchable
  searchPlaceholder="Filter by name..."
  data={{
    headers: [
      { content: "Name", key: "name", sortable: true },
      { content: "Role", key: "role" },
    ],
    rows: [
      ["Alice", "Engineer"],
      ["Bob", "Designer"],
      ["Carol", "Product"],
    ],
  }}
/>

Pagination

Set paginated to split large datasets into pages. Control the default page size with defaultPageSize and pageSizeOptions.

Pagination

Name	Role
Alice	Engineer
Bob	Designer
Carol	Product

1 / 2

<Table
paginated
defaultPageSize={5}
pageSizeOptions={[5, 10, 20, 50]}
data={{ headers, rows }}
/>

Loading and empty states

Use loading to show a spinner while data is fetched. Provide emptyState or loadingState for custom placeholders.

Name	Role
Loading data...

<Table
loading
loadingState={<Text>Fetching records...</Text>}
emptyState={<Text>No results found.</Text>}
data={{ headers, rows }}
/>

API reference

	Type	Default
datarequired Headers and rows. Cells are ReactNodes, so anything can go in one.	{ headers: TableHeader[]; rows: ReactNode[][]; }	—
onRowClick Called with the row index. Rows become focusable when set.	(rowIndex: number) => void	—
searchable Add a search field that filters rows.	boolean	false
searchPlaceholder Placeholder for that field.	string	Search...
striped Alternate row backgrounds.	boolean	false
hoverable Highlight the row under the pointer.	boolean	true
compact Tighter row height, for dense data.	boolean	false
loading Swap the rows for the loading state.	boolean	false
emptyState What to render when there are no rows.	ReactNode	—
actions Row actions, rendered in a trailing column.	TableAction[]	—
stickyHeader Keep the header visible while the body scrolls.	boolean	false
rowClassName Per-row class, by index.	(rowIndex: number) => string	—
cellClassName Per-cell class, by row and column index.	(rowIndex: number, cellIndex: number) => string	—
paginated Page the rows instead of rendering all of them.	boolean	false
defaultPageSize Rows per page before the reader changes it.	number	10
pageSizeOptions The sizes offered in the page-size control.	number[]	[5, 10, 20, 50]
loadingState What to render while loading.	ReactNode	—
…and every FlexProps prop	inherited	—
maxHeight	string	—
className	string	—
style	React.CSSProperties	—

TableAction

	Type	Default
icon	string	—
label	string	—
tooltip	string	—
variant	primarysecondarytertiarydanger	secondary
onClick	(rowIndex: number) => void	—
disabled	(rowIndex: number) => boolean	—