Skip to contentAsheeUIAsheeUI

RowList

The device's list of labelled rows, and the renderer behind native's Table and DataTable.

Native

The React Native renderer, with the platform's behaviour.

Native only

Install

npm install @asheeui/native

Import

import { RowList } from "@asheeui/native";

The device's list of labelled rows, and the renderer behind native's Table and DataTable.

The name exists only in the native renderer; the umbrella does not carry it.

  • The platform has no table grid: each column becomes one labelled line of a row.
  • Selection is a press on the row; the selected state is the same fact the web table reports.

Read the React Native guide for installation, styling and the platform's behaviour outside a single component.

A table is not a native reading pattern. A row on a phone is a set of labelled lines, not a grid of columns, so the platform package draws one list of rows and lets the table contracts feed it. RowList is that list; Table and DataTable are the higher-level contracts that use it.

import { RowList } from "@asheeui/native";

<RowList
  title="Invoices"
  data={invoices}
  columns={[
    { key: "number", header: "Number" },
    { key: "customer", header: "Customer" },
    { key: "total", header: "Total" },
  ]}
  rowKeyAccessor={(invoice) => invoice.id}
/>;

What a row states

Each row carries a title, a set of labelled lines and an optional leading and trailing slot. The row is one press target, so a selection is a press rather than a checkbox column, and the selected state is the same fact the web table reports through its own selection.

Why it is native-only

The web has a real <table>; a list of rows would be a second presentation of the same data with no advantage. The name is on @asheeui/native, not on the umbrella, and a shared file that imports it is correctly a compile error on the web.

Props