Data Table

A table that scrolls sideways when its columns are wider than the screen and keeps its header visible while the rows scroll up and down. Tapping a sortable header sorts by it, then reverses, and the arrow turns to match. Headers report their sort order to screen readers. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add data-table

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/data-table.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { DataTable } from "@/components/ui/data-table";

const rows = [
  { id: "1", name: "Maya", score: 92 },
  { id: "2", name: "Jon", score: 78 },
];

export default function Example() {
  return (
    <DataTable
      rows={rows}
      rowKey={(row) => row.id}
      columns={[
        { key: "name", title: "Name", sortable: true },
        { key: "score", title: "Score", align: "right", sortable: true },
      ]}
    />
  );
}

Props