Components

Table

Scrollable data grid with header, body, and cell primitives—shadcn-style structure for React Native rows.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Loading...

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add table to your project.

watermelon add table
2

Import the component

Import Table from your local UI registry output.

Import

import { Table } from "@/components/ui/table";

Import

Import

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

Usage

Native wraps the grid in a horizontal ScrollView when columns overflow. Each row is a flex row; use TableHead / TableCell for text cells.

Basic

Loading...

API Reference

Optional TableFooter is available on native for summary rows. On web, the table uses semantic table, thead, and tbody elements.

PreviousSwitch
NextTabs