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 React from 'react';import { Pressable, View } from 'react-native';import * as Slot from '~/components/primitives/slot';import type { PressableRef, SlottablePressableProps, SlottableViewProps, ViewRef,} from '~/components/primitives/types';
const Root = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component role='table' ref={ref} {...props} />;});Root.displayName = 'RootTable';
const Header = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component role='rowheader' ref={ref} {...props} />;});Header.displayName = 'HeaderTable';
const Row = React.forwardRef<PressableRef, SlottablePressableProps>( ({ asChild, ...props }, ref) => { const Component = asChild ? Slot.Pressable : Pressable; return <Component ref={ref} role='row' {...props} />; });Row.displayName = 'RowTable';
const Head = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='columnheader' {...props} />;});Head.displayName = 'HeadTable';
const Body = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='rowgroup' {...props} />;});Body.displayName = 'BodyTable';
const Cell = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => { const Component = asChild ? Slot.View : View; return <Component ref={ref} role='cell' {...props} />;});Cell.displayName = 'CellTable';
const Footer = React.forwardRef<ViewRef, SlottableViewProps>(({ 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 };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) |