Table – Once UI

Table takes the same props as on the web: data (headers and rows), searchable, sortable columns, onRowClick, row actions, striped, compact, loading, emptyState and paginated. On a phone, drop the columns that matter least with a header's hide, as on the web. See the web Table for the same component in the browser.

Basic usage

Cells are text or any element. Numbers in text sort as numbers, so "12" comes after "9".

Guests.tsx

import { Table, Tag } from "@once-ui-system/native";

export function Guests() {
return (
  <Table
    searchable
    searchPlaceholder="Search guests"
    paginated
    defaultPageSize={5}
    actions={[{ icon: "moreHorizontal", label: "More", onClick: (row) => open(row) }]}
    data={{
      headers: [
        { content: "Guest", key: "name", sortable: true },
        { content: "Visits", key: "visits", sortable: true, width: "96px", align: "right" },
        { content: "Last visit", key: "last", hide: { s: true } },
        { content: "Tier", key: "tier", width: "88px" },
      ],
      rows: [
        ["Anna Kovács", "12", "Oct 18", <Tag size="s" scheme="warning" label="Gold" />],
        ["Bence Szabó", "4", "Oct 20", <Tag size="s" label="Silver" />],
      ],
    }}
  />
);
}

Column widths

A header's width is "120px" for a fixed column or "30%" for a share; columns without one share what is left. align lines a column up left, centre or right.

Scrolling

maxHeight scrolls the rows inside that many points; stickyHeader keeps the header in view while they scroll. Without maxHeight the table is as tall as its rows, for a screen that already scrolls.

Differences from the web

Pressed, not hover. hoverable highlights a row while it is pressed.
No class names. rowClassName and cellClassName are left out.
maxHeight is a number of points rather than a CSS length.

API reference

Prop	Type	Default	Description
data	{ headers: TableHeader[]; rows: ReactNode[][] }		The table. Required.
searchable	boolean	false	A search field over the rows.
searchPlaceholder	string	"Search..."	The search field's label.
onRowClick	(rowIndex: number) => void		Called with the tapped row's index in rows.
actions	TableAction[]		Icon buttons at the end of each row.
striped	boolean	false	Tints every other row.
hoverable	boolean	true	Highlights a row while pressed.
compact	boolean	false	Tighter cells.
loading	boolean	false	Shows skeleton lines, or loadingState.
emptyState	ReactNode	"No results"	Shown when there are no rows.
paginated	boolean	false	Pages the rows with a Pagination under the table.
defaultPageSize	number	10	Rows per page.
pageSizeOptions	number[]	[5, 10, 20, 50]	Page sizes to pick from.
maxHeight	number		Scrolls the rows inside this height.
stickyHeader	boolean	false	Keeps the header in view while the rows scroll.

TableHeader

Field	Type	Description
content	ReactNode	The header.
key	string	The column's key, for sorting.
sortable	boolean	A tap sorts by this column, then reverses it.
width	string	"120px" or "30%".
align	"left" \| "center" \| "right"	The column's alignment.
hide	{ xl?, l?, m?, s?, xs?: boolean }	Hides the column at a breakpoint and below.

TableAction

Field	Type	Description
icon	IconName	The button's icon.
label	string	Its spoken name.
variant	"primary" \| "secondary" \| "tertiary" \| "danger"	Defaults to "tertiary".
onClick	(rowIndex: number) => void	Called with the row's index.
disabled	(rowIndex: number) => boolean	Disables it for some rows.