TableNew

Import

import { Table } from 'heroui-native-pro';

Anatomy

<Table>
  <Table.ScrollContainer>
    <Table.Content>
      <Table.Header>
        <Table.Column>...</Table.Column>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>...</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Content>
  </Table.ScrollContainer>
  <Table.Footer>...</Table.Footer>
</Table>

• Table: Root shell. Owns the visual variant, selection state, and sort descriptor. Cascades disable-all to animated descendants. The table never reorders data itself.
• Table.Background: Absolute-fill layer behind the shell. With no children, the active library theme decides the content (glass renders a blur layer). Mounted for the primary variant only; replaceable via the background prop on Table.
• Table.ScrollContainer: Horizontal ScrollView so wide tables scroll while the shell and footer keep the available width.
• Table.Content: Vertical column hosting the header row and the body. Grows to fill the scroll content width.
• Table.Header: Header row hosting Table.Column and optionally Table.SelectAllCell parts. Injects column positions so body cells align with their columns.
• Table.Column: Header cell. Declares the column width behavior (width, or flex + minWidth). With allowsSorting, pressing it toggles the sort descriptor and an animated chevron reflects the direction.
• Table.Body: Body container. Renders static Table.Row children, an items collection through a render function, or a virtualized FlatList. Shows renderEmptyState when there are no rows.
• Table.Row: Body row. Pressing it toggles selection when selectionMode is not "none". disabledKeys and isDisabled block interaction and dim the row.
• Table.Cell: Body cell. Resolves its width from the header column at the same position. Plain string/number children are wrapped in a styled Text.
• Table.SelectAllCell: Header checkbox cell for selectionMode="multiple" tables. Registers a fixed-width selection column.
• Table.SelectionCell: Row checkbox cell bound to the row's selection state. Place it at the same position as Table.SelectAllCell.
• Table.Footer: Row below the table content, outside the horizontal scroll area, for load-more actions or summaries.

Usage

Basic usage

Compose a header of columns and a body of rows. Wrap the content in Table.ScrollContainer so wide tables can scroll horizontally.

<Table>
  <Table.ScrollContainer>
    <Table.Content>
      <Table.Header>
        <Table.Column>Name</Table.Column>
        <Table.Column>Role</Table.Column>
        <Table.Column>Status</Table.Column>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>Ava Thompson</Table.Cell>
          <Table.Cell>Design</Table.Cell>
          <Table.Cell>Active</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Liam Nguyen</Table.Cell>
          <Table.Cell>Engineering</Table.Cell>
          <Table.Cell>Paused</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table.Content>
  </Table.ScrollContainer>
</Table>

Secondary variant

Set variant="secondary" for a flat root with a rounded header band and border-separated body rows.

<Table variant="secondary">...</Table>

Sorting

Sorting is controlled. The table never reorders data itself. Mark columns with allowsSorting, give each an id, and sort your items from sortDescriptor.

const [sortDescriptor, setSortDescriptor] = useState<TableSortDescriptor>({
  column: 'name',
  direction: 'ascending',
});

const sortedItems = useMemo(() => {
  const sorted = [...items].sort((a, b) => {
    const comparison =
      sortDescriptor.column === 'tasks'
        ? a.tasks - b.tasks
        : a.name.localeCompare(b.name);
    return sortDescriptor.direction === 'descending' ? -comparison : comparison;
  });
  return sorted;
}, [items, sortDescriptor]);

<Table sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor}>
  ...
  <Table.Header>
    <Table.Column id="name" allowsSorting>
      Name
    </Table.Column>
    <Table.Column id="tasks" allowsSorting>
      Open tasks
    </Table.Column>
  </Table.Header>
  <Table.Body items={sortedItems}>
    {(item) => (
      <Table.Row id={item.id}>
        <Table.Cell>{item.name}</Table.Cell>
        <Table.Cell>{item.tasks}</Table.Cell>
      </Table.Row>
    )}
  </Table.Body>
  ...
</Table>;

Multiple selection

Enable selectionMode="multiple" and add the checkbox cells. Rows also toggle on press.

<Table
  selectionMode="multiple"
  defaultSelectedKeys={['1']}
  onSelectionChange={(keys) => console.log([...keys])}
  disabledKeys={['3']}
>
  ...
  <Table.Header>
    <Table.SelectAllCell />
    <Table.Column>Name</Table.Column>
  </Table.Header>
  <Table.Body items={items}>
    {(item) => (
      <Table.Row id={item.id}>
        <Table.SelectionCell />
        <Table.Cell>{item.name}</Table.Cell>
      </Table.Row>
    )}
  </Table.Body>
  ...
</Table>

Single selection

Set selectionMode="single". Pressing a row selects it. Checkbox cells are not required.

<Table selectionMode="single" defaultSelectedKeys={['2']}>
  ...
</Table>

Column widths

Columns are flexible (flex: 1) by default. Fixed and minimum widths push wide tables into horizontal scrolling.

<Table.Header>
  <Table.Column width={220}>Name</Table.Column>
  <Table.Column minWidth={140}>Role</Table.Column>
  <Table.Column flex={2}>Notes</Table.Column>
</Table.Header>

Empty state

Pass renderEmptyState to show centered content when the body has no rows.

<Table.Body renderEmptyState={() => <EmptyState>...</EmptyState>} />

Virtualized body

For large collections, render rows through a FlatList. Requires items with the render function form of children and a bounded height on the body.

<Table.Body
  virtualized
  className="h-96"
  items={manyItems}
  keyExtractor={(item) => item.id}
>
  {(item) => (
    <Table.Row id={item.id}>
      <Table.Cell>{item.name}</Table.Cell>
    </Table.Row>
  )}
</Table.Body>

Footer

Table.Footer sits outside the horizontal scroll area. Compose load-more actions or summary content inside it.

<Table>
  <Table.ScrollContainer>...</Table.ScrollContainer>
  <Table.Footer>...</Table.Footer>
</Table>

Example

import { Chip } from 'heroui-native';
import { Table } from 'heroui-native-pro';
import { View } from 'react-native';

const MEMBERS = [
  {
    id: '1',
    name: 'Ava Thompson',
    role: 'Design',
    status: 'Active',
    statusColor: 'success' as const,
  },
  {
    id: '2',
    name: 'Liam Nguyen',
    role: 'Engineering',
    status: 'Paused',
    statusColor: 'warning' as const,
  },
  {
    id: '3',
    name: 'Maya Patel',
    role: 'Product',
    status: 'Active',
    statusColor: 'success' as const,
  },
];

export default function TableExample() {
  return (
    <View className="flex-1 px-5 justify-center">
      <Table>
        <Table.ScrollContainer>
          <Table.Content>
            <Table.Header>
              <Table.Column flex={1.3}>Name</Table.Column>
              <Table.Column>Role</Table.Column>
              <Table.Column width={110}>Status</Table.Column>
            </Table.Header>
            <Table.Body>
              {MEMBERS.map((member) => (
                <Table.Row key={member.id} id={member.id}>
                  <Table.Cell>{member.name}</Table.Cell>
                  <Table.Cell textProps={{ numberOfLines: 1 }}>
                    {member.role}
                  </Table.Cell>
                  <Table.Cell>
                    <Chip color={member.statusColor} size="sm" variant="soft">
                      {member.status}
                    </Chip>
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table.Content>
        </Table.ScrollContainer>
      </Table>
    </View>
  );
}

API Reference

Table

TableVariant

TableKey

TableSelectionMode

TableSortDescriptor

TableSortDirection

TableRootAnimation

Animation configuration for the Table root. Can be:

• "disable-all": Disable all animations including children (cascades down through AnimationSettingsProvider)
• undefined: Use default animations

Table.Background

Absolute-fill container rendered behind the table shell. With no children, the active library theme decides the default content (e.g. a glass blur layer); pass children to host custom content with the same positioning and clipping.

Table.ScrollContainer

Table.Content

Table.Header

Table.Column

ElementSlots<ColumnSlots>

styles

The indicator slot has animated style properties that cannot be set via className: opacity (visibility) and transform (rotate, for the sort direction flip). To customize, use the animation prop. To disable animated styles, set isAnimatedStyleActive={false}.

TableColumnAnimation

Animation configuration for the column sort indicator. Can be:

• false or "disabled": Disable the sort indicator animation
• true or undefined: Use default animations
• object: Custom animation configuration

rotation

opacity

Table.Body

ElementSlots<BodySlots>

styles

Table.Row

Table.Cell

ElementSlots<CellSlots>

styles

Table.SelectAllCell

TableSelectionCheckboxProps

Props forwarded to the checkbox rendered by Table.SelectAllCell and Table.SelectionCell. Selection state and change handling are owned by the table. Omits isSelected, onSelectedChange, and isDisabled from CheckboxProps.

The table renders the checkboxes at a compact 20pt size with a reduced corner radius. The header select-all checkbox defaults to the primary variant; row checkboxes default to secondary. Override via variant, className, or children.

Table.SelectionCell

Table.Footer