Table Primitive
Shows an accessible table component.
Installation
Install the component via your command line.
npx expo install @rn-primitives/tableCopy/paste the following code to ~/components/primitives/table.tsx
import * as Slot from '~/components/primitives/slot';import type { PressableRef, SlottablePressableProps, SlottableViewProps, ViewRef,} from '~/components/primitives/types';import * as React from 'react';import { Pressable, View } from 'react-native';
type RootProps = SlottableViewProps;type RootRef = ViewRef;
const Root = React.forwardRef<RootRef, RootProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component role='table' ref={ref} {...props} />;});Root.displayName = 'RootTable';
type HeaderProps = SlottableViewProps;type HeaderRef = ViewRef;
const Header = React.forwardRef<HeaderRef, HeaderProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component role='rowheader' ref={ref} {...props} />;});Header.displayName = 'HeaderTable';
type RowProps = SlottablePressableProps;type RowRef = PressableRef;
const Row = React.forwardRef<RowRef, RowProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} role='row' {...props} />;});Row.displayName = 'RowTable';
type HeadProps = SlottableViewProps;type HeadRef = ViewRef;
const Head = React.forwardRef<HeadRef, HeadProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='columnheader' {...props} />;});Head.displayName = 'HeadTable';
type BodyProps = SlottableViewProps;type BodyRef = ViewRef;
const Body = React.forwardRef<BodyRef, BodyProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='rowgroup' {...props} />;});Body.displayName = 'BodyTable';
type CellProps = SlottableViewProps;type CellRef = ViewRef;
const Cell = React.forwardRef<CellRef, CellProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='cell' {...props} />;});Cell.displayName = 'CellTable';
type FooterProps = SlottableViewProps;type FooterRef = ViewRef;
const Footer = React.forwardRef<FooterRef, FooterProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='rowgroup' {...props} />;});Footer.displayName = 'FooterTable';
export { Body, Cell, Footer, Head, Header, Root, Row };export type { BodyProps, BodyRef, CellProps, CellRef, FooterProps, FooterRef, HeaderProps, HeaderRef, HeadProps, HeadRef, RootProps, RootRef, RowProps, RowRef,};Usage
import * as TablePrimitive from '@rn-primitives/table';import { Text } from 'react-native';
function Example() { return ( <TablePrimitive.Root aria-labelledby='invoice-table'> <TablePrimitive.Header> <TablePrimitive.Row> <TablePrimitive.Head> <Text>Invoice</Text> </TablePrimitive.Head> <TablePrimitive.Head> <Text>Status</Text> </TablePrimitive.Head> <TablePrimitive.Head> <Text>Method</Text> </TablePrimitive.Head> <TablePrimitive.Head> <Text>Amount</Text> </TablePrimitive.Head> </TablePrimitive.Row> </TablePrimitive.Header> <TablePrimitive.Body> <TablePrimitive.Row> <TablePrimitive.Cell> <Text>INV001</Text> </TablePrimitive.Cell> <TablePrimitive.Cell> <Text>Paid</Text> </TablePrimitive.Cell> <TablePrimitive.Cell> <Text>$250.00</Text> </TablePrimitive.Cell> <TablePrimitive.Cell> <Text>Credit Card</Text> </TablePrimitive.Cell> </TablePrimitive.Row> <TablePrimitive.Footer> <TablePrimitive.Row> <TablePrimitive.Cell> <Text>Total</Text> </TablePrimitive.Cell> <TablePrimitive.Cell> <Text>$250.00</Text> </TablePrimitive.Cell> </TablePrimitive.Row> </TablePrimitive.Footer> <Text nativeID='invoice-table'> A list of your recent invoices. </Text> </TablePrimitive.Body> </TablePrimitive.Root> );}Props
Root
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Header
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Row
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Head
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Body
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Cell
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Footer
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |