Table Primitive
Shows an accessible table component.
Installation
Section titled “Installation”Install the component via your command line.
npx expo install @rn-primitives/tableCopy/paste the following code to ~/components/primitives/table.tsx
import { 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;type RootComponentProps = RootProps & React.RefAttributes<RootRef>;
const Root = ({ asChild, ref, ...props }: RootComponentProps) => { const Component = asChild ? Slot : View; return <Component role='table' ref={ref} {...props} />;};Root.displayName = 'RootTable';
type HeaderProps = SlottableViewProps;type HeaderRef = ViewRef;type HeaderComponentProps = HeaderProps & React.RefAttributes<HeaderRef>;
const Header = ({ asChild, ref, ...props }: HeaderComponentProps) => { const Component = asChild ? Slot : View; return <Component role='rowheader' ref={ref} {...props} />;};Header.displayName = 'HeaderTable';
type RowProps = SlottablePressableProps;type RowRef = PressableRef;type RowComponentProps = RowProps & React.RefAttributes<RowRef>;
const Row = ({ asChild, ref, ...props }: RowComponentProps) => { const Component = asChild ? Slot : Pressable; return <Component ref={ref} role='row' {...props} />;};Row.displayName = 'RowTable';
type HeadProps = SlottableViewProps;type HeadRef = ViewRef;type HeadComponentProps = HeadProps & React.RefAttributes<HeadRef>;
const Head = ({ asChild, ref, ...props }: HeadComponentProps) => { const Component = asChild ? Slot : View; return <Component ref={ref} role='columnheader' {...props} />;};Head.displayName = 'HeadTable';
type BodyProps = SlottableViewProps;type BodyRef = ViewRef;type BodyComponentProps = BodyProps & React.RefAttributes<BodyRef>;
const Body = ({ asChild, ref, ...props }: BodyComponentProps) => { const Component = asChild ? Slot : View; return <Component ref={ref} role='rowgroup' {...props} />;};Body.displayName = 'BodyTable';
type CellProps = SlottableViewProps;type CellRef = ViewRef;type CellComponentProps = CellProps & React.RefAttributes<CellRef>;
const Cell = ({ asChild, ref, ...props }: CellComponentProps) => { const Component = asChild ? Slot : View; return <Component ref={ref} role='cell' {...props} />;};Cell.displayName = 'CellTable';
type FooterProps = SlottableViewProps;type FooterRef = ViewRef;type FooterComponentProps = FooterProps & React.RefAttributes<FooterRef>;
const Footer = ({ asChild, ref, ...props }: FooterComponentProps) => { const Component = asChild ? Slot : 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,};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> );}Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Header
Section titled “Header”Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
Footer
Section titled “Footer”Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |