Components
DataTable
A table shell over TanStack Table: header row, body, and the three states a remote list actually has — loading, error and empty.
Web-only.
Columns are laid out with flex rather than fixed widths, so the table fills
its container at any viewport. A column can opt out below a breakpoint with
minWidth, which is how the same table survives a narrow screen without a
horizontal scrollbar.
function Table(props: Record<string, any>) {
return (
<View style={{ maxWidth: 720 }}>
<DataTable columns={COLUMNS} data={MEMBERS} keyExtractor={(r: Member) => r.id} {...props} />
</View>
);
}
<Table />Import
import { DataTable } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
columns | — | — | Each needs id, header, flex and a cell renderer. minWidth hides the column below that viewport width; the default 0 means always visible. |
data | — | — | The rows. The table does no fetching, sorting or paging of its own. |
keyExtractor | — | — | Required. Must return a stable unique id per row — an array index will reorder wrongly on filter. |
isLoading | boolean | — | Replaces the body with a spinner while keeping the header, so the layout does not jump when data lands. |
isError | boolean | — | Replaces the body with errorMessage. Takes precedence over the empty state. |
errorMessage | — | — | Shown when isError. Say what failed, not that something failed. |
emptyMessage | — | — | Shown when data is empty and nothing is loading or errored. |
toolbar | — | — | Rendered above the table shell — typically a SegmentTabs strip or a search field. |
reserveBodyHeight | boolean | — | Holds the body at the tallest height it has rendered, so filtering to fewer rows does not collapse the page under the cursor. |
Examples
Loading
The three remote states. Each keeps the header, so the table does not reflow as it resolves.
function Table(props: Record<string, any>) {
return (
<View style={{ maxWidth: 720 }}>
<DataTable columns={COLUMNS} data={MEMBERS} keyExtractor={(r: Member) => r.id} {...props} />
</View>
);
}
<Table isLoading />Empty
function Table(props: Record<string, any>) {
return (
<View style={{ maxWidth: 720 }}>
<DataTable columns={COLUMNS} data={MEMBERS} keyExtractor={(r: Member) => r.id} {...props} />
</View>
);
}
<Table data={[]} emptyMessage="No members yet." />Error State
function Table(props: Record<string, any>) {
return (
<View style={{ maxWidth: 720 }}>
<DataTable columns={COLUMNS} data={MEMBERS} keyExtractor={(r: Member) => r.id} {...props} />
</View>
);
}
<Table isError errorMessage="Could not reach the server." />