Table — RNR AI Elements

Install

npx @react-native-reusables/cli@latest add https://rnraielements.com/r/nativewind/table.json

npx @react-native-reusables/cli@latest add https://rnraielements.com/r/uniwind/table.json

Dependencies

@rn-primitives/table

`https://reactnativereusables.com/r/nativewind/text.json`

`https://reactnativereusables.com/r/uniwind/text.json`

AI SDK peers:ai@^7.0.89@ai-sdk/react@^4.0.92

Source

table.tsx

import { Text, TextClassContext } from '@/registry/nativewind/components/ui/text';
import { cn } from '@/registry/nativewind/lib/utils';
import * as TablePrimitive from '@rn-primitives/table';
import * as React from 'react';
import { ScrollView, type ViewProps } from 'react-native';

/**
 * Table — RNR does not wrap @rn-primitives/table, so this is the styled shell.
 * Backs schema-display, test-results, package-info and environment-variables.
 *
 * WRAPPED IN A HORIZONTAL SCROLLVIEW BY DEFAULT. A phone-width table with more than two
 * columns has to scroll; the web's `table-layout` has no React Native equivalent, and
 * shrinking text to fit would break both the type ramp and the accessibility floor.
 *
 * Column widths are explicit flex values, never `auto` — there is no layout algorithm here
 * to infer them.
 */

function Table({ className, children, scrollable = true, ...props }: ViewProps & { scrollable?: boolean }) {
  const table = (
    <TablePrimitive.Root className={cn('w-full', className)} {...props}>
      {children}
    </TablePrimitive.Root>
  );
  if (!scrollable) return table;
  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      {table}
    </ScrollView>
  );
}

function TableHeader({ className, ...props }: React.ComponentProps<typeof TablePrimitive.Header>) {
  return (
    <TextClassContext.Provider value="text-xs font-medium text-muted-foreground">
      <TablePrimitive.Header className={cn('border-b border-border', className)} {...props} />
    </TextClassContext.Provider>
  );
}

function TableBody({ className, ...props }: React.ComponentProps<typeof TablePrimitive.Body>) {
  return <TablePrimitive.Body className={cn('', className)} {...props} />;
}

function TableRow({ className, ...props }: React.ComponentProps<typeof TablePrimitive.Row>) {
  return (
    <TablePrimitive.Row
      className={cn('flex-row border-b border-border active:bg-accent', className)}
      {...props}
    />
  );
}

function TableHead({ className, ...props }: React.ComponentProps<typeof TablePrimitive.Head>) {
  return <TablePrimitive.Head className={cn('px-3 py-2', className)} {...props} />;
}

function TableCell({ className, ...props }: React.ComponentProps<typeof TablePrimitive.Cell>) {
  return <TablePrimitive.Cell className={cn('justify-center px-3 py-2', className)} {...props} />;
}

function TableCellText({ className, ...props }: React.ComponentProps<typeof Text>) {
  return <Text numberOfLines={1} className={cn('text-sm text-foreground', className)} {...props} />;
}

export { Table, TableBody, TableCell, TableCellText, TableHead, TableHeader, TableRow };

Theming

Themed via text-muted-foreground, border-border, bg-accent, text-foreground.

Usage

() => (
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>
              <TableCellText className="text-xs font-medium">Kind</TableCellText>
            </TableHead>
            <TableHead>
              <TableCellText className="text-xs font-medium">Count</TableCellText>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>
              <TableCellText className="text-sm">component</TableCellText>
            </TableCell>
            <TableCell>
              <TableCellText className="text-sm">39</TableCellText>
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell>
              <TableCellText className="text-sm">ui</TableCellText>
            </TableCell>
            <TableCell>
              <TableCellText className="text-sm">11</TableCellText>
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell>
              <TableCellText className="text-sm">lib</TableCellText>
            </TableCell>
            <TableCell>
              <TableCellText className="text-sm">6</TableCellText>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    )