Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
Table

Table is a data display component for rendering tabular data in rows and columns.

​
Import

import { Table } from 'radix-native-ui';

​
Usage

import { Table } from 'radix-native-ui';

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Role</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>john@example.com</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Jane Smith</Table.Cell>
      <Table.Cell>jane@example.com</Table.Cell>
      <Table.Cell>User</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

​
Components

​
Table.Root

The root container component.

​
Table.Header

Header section of the table.

​
Table.Body

Body section containing data rows.

​
Table.Row

Individual row in the table.

​
Table.HeaderCell

Header cell in the table header.

​
Table.ColumnHeaderCell

Column header cell with optional sorting.

​
Table.Cell

Data cell in the table body.

​
Props

​
Table.Root

​
Table.Row

​
Table.Cell

​
Examples

​
Basic Table

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Product</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Price</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Stock</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Widget A</Table.Cell>
      <Table.Cell>$29.99</Table.Cell>
      <Table.Cell>150</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Widget B</Table.Cell>
      <Table.Cell>$49.99</Table.Cell>
      <Table.Cell>75</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

​
Sizes

<Table.Root size={1}>
  {/* Small table */}
</Table.Root>

<Table.Root size={2}>
  {/* Medium table (default) */}
</Table.Root>

<Table.Root size={3}>
  {/* Large table */}
</Table.Root>

​
With Status Badges

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Order ID</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Customer</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>#12345</Table.Cell>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>
        <Badge color="green">Completed</Badge>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>#12346</Table.Cell>
      <Table.Cell>Jane Smith</Table.Cell>
      <Table.Cell>
        <Badge color="yellow">Pending</Badge>
      </Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>#12347</Table.Cell>
      <Table.Cell>Bob Wilson</Table.Cell>
      <Table.Cell>
        <Badge color="red">Cancelled</Badge>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

​
With Row Actions

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Actions</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>john@example.com</Table.Cell>
      <Table.Cell>
        <Flex gap={2}>
          <IconButton size={1} variant="ghost">
            <Icon name="pencil" />
          </IconButton>
          <IconButton size={1} variant="ghost" color="red">
            <Icon name="trash" />
          </IconButton>
        </Flex>
      </Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

​
In Card

<Card>
  <Flex direction="column" gap={3}>
    <Heading size={3}>Users</Heading>
    <Table.Root>
      <Table.Header>
        <Table.Row>
          <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
          <Table.ColumnHeaderCell>Role</Table.ColumnHeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>John Doe</Table.Cell>
          <Table.Cell>Admin</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Root>
  </Flex>
</Card>
  • Card - Card component
  • Flex - Flexbox layout
  • Badge - Badge component