Table

A compound table component with header, body, rows, and cells for displaying structured data.

Name	Status	Role
Alice	Active	Admin
Bob	Inactive	User
Charlie	Active	Editor

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Bob</TableCell>
      <TableCell>Inactive</TableCell>
      <TableCell>User</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Charlie</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>Editor</TableCell>
    </TableRow>
  </TableBody>
</Table>

Installation

npx @aniui/cli add table

Usage

app/index.tsx

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";

export function MyScreen() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Alice</TableCell>
          <TableCell>Active</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Bob</TableCell>
          <TableCell>Inactive</TableCell>
          <TableCell>User</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Examples

Default

Name	Status	Role
Alice	Active	Admin
Bob	Inactive	User
Charlie	Active	Editor

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Bob</TableCell>
      <TableCell>Inactive</TableCell>
      <TableCell>User</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Charlie</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>Editor</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Table

PropTypeDefault

className

string

—

children

ReactNode

—

Also accepts all ScrollView props from React Native.

TableHeader / TableBody / TableRow

PropTypeDefault

className

string

—

children

ReactNode

—

Also accepts all View props from React Native.

TableHead / TableCell

PropTypeDefault

className

string

—

children

ReactNode

—

Also accepts all Text props from React Native.

Source

components/ui/table.tsx

import React from "react";
import { View, Text, ScrollView } from "react-native";
import { cn } from "@/lib/utils";
type ViewProps = React.ComponentPropsWithoutRef<typeof View> & { className?: string; children?: React.ReactNode };
type TextProps = React.ComponentPropsWithoutRef<typeof Text> & { className?: string };
export function Table({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof ScrollView> & { className?: string; children?: React.ReactNode }) {
  return (
    <ScrollView horizontal className={cn("rounded-md border border-border", className)} {...props}>
      <View className="min-w-full">{children}</View>
    </ScrollView>
  );
}
export function TableHeader({ className, ...props }: ViewProps) {
  return <View className={cn("bg-muted/50", className)} {...props} />;
}
export function TableBody({ className, ...props }: ViewProps) {
  return <View className={cn("", className)} {...props} />;
}
export function TableRow({ className, ...props }: ViewProps) {
  return <View className={cn("flex-row border-b border-border", className)} {...props} />;
}
export function TableHead({ className, ...props }: TextProps) {
  return (
    <Text className={cn("flex-1 px-4 py-3 text-sm font-medium text-muted-foreground", className)} {...props} />
  );
}
export function TableCell({ className, ...props }: TextProps) {
  return (
    <Text className={cn("flex-1 px-4 py-3 text-sm text-foreground", className)} {...props} />
  );
}