Table

Lightweight data table with sorting, striped rows, grouping, and built-in pagination.

iOSAndroid

Preview Table on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-table

Usage

import { Table } from '@/components/docyrus-native/table';

type Product = { id: string; name: string; price: number };

const data: Product[] = [
  { id: '1', name: 'Widget', price: 9.99 },
  { id: '2', name: 'Gadget', price: 19.99 },
];

<Table
  data={data}
  columns={[
    { key: 'name', title: 'Name', sortable: true },
    { key: 'price', title: 'Price', align: 'right' },
  ]}
  keyExtractor={(item) => item.id}
/>

Striped & Bordered

<Table data={data} columns={columns} keyExtractor={(item) => item.id} striped bordered />

With Sorting

const [sortKey, setSortKey] = useState<string | undefined>();
const [sortDir, setSortDir] = useState<'asc' | 'desc' | null>(null);

<Table
  data={data}
  columns={columns}
  keyExtractor={(item) => item.id}
  sortKey={sortKey}
  sortDirection={sortDir ?? undefined}
  onSort={(key, dir) => { setSortKey(key); setSortDir(dir); }}
/>

With Pagination

<Table
  data={data}
  columns={columns}
  keyExtractor={(item) => item.id}
  currentPage={page}
  totalPages={5}
  totalItems={50}
  pageSize={10}
  onPageChange={setPage}
/>

API Reference

Prop	Type	Default	Description
`data`	`T[]`	—	Array of data items to display
`columns`	`TableColumn<T>[]`	—	Column definitions
`keyExtractor`	`(item: T) => string`	—	Function to extract unique key per row
`sortKey`	`string`	—	Currently sorted column key
`sortDirection`	`'asc' \| 'desc'`	—	Current sort direction
`onSort`	`(key: string, direction: 'asc' \| 'desc' \| null) => void`	—	Sort change callback
`striped`	`boolean`	`false`	Alternate row background colors
`bordered`	`boolean`	`false`	Show column border lines
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Table cell padding and font size
`groupBy`	`string`	—	Data key to group rows by
`groupHeaderRender`	`(groupKey: string, items: T[]) => ReactNode`	—	Custom group header renderer
`emptyMessage`	`string`	`'No data available'`	Message when data is empty
`loading`	`boolean`	`false`	Show loading state
`currentPage`	`number`	—	Current page for pagination
`totalPages`	`number`	—	Total pages for pagination
`totalItems`	`number`	—	Total item count for pagination info
`pageSize`	`number`	—	Items per page for pagination info
`onPageChange`	`(page: number) => void`	—	Page change callback
`className`	`string`	—	Additional CSS classes

TableColumn<T>

Prop	Type	Default	Description
`key`	`string`	—	Data field key
`title`	`string`	—	Column header text
`width`	`number`	`120`	Column width in pixels
`sortable`	`boolean`	`false`	Whether column is sortable
`align`	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment
`render`	`(value: unknown, item: T, index: number) => ReactNode`	—	Custom cell renderer

Translation Keys

Built-in copy is read through useUiTranslation() — provide these keys via <UiTranslationProvider>. Without a provider the English fallback is shown.

Key	English fallback	Used for
`ui.table.loading`	Loading...	Loading row
`ui.table.empty`	No data available	Empty text (`emptyMessage` prop wins)

Type Exports

Type	Description
`TableProps<T>`	Props for Table component
`TableColumn<T>`	Column definition type
`TableSize`	`'sm' \| 'md' \| 'lg'`

Table

On this page