TreeTable

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-tree-table

pnpm add @shopify/flash-list react-native-reanimated tailwind-variants

Usage

import { useState } from 'react';

import { StatusChip } from '@/components/docyrus-native/status-chip';
import { TreeTable, type TreeTableColumn } from '@/components/docyrus-native/tree-table';
import { type TreeViewItem } from '@/components/docyrus-native/tree-view';

const columns: TreeTableColumn[] = [
  { id: 'status', header: 'Status', width: 130, cell: item => <StatusChip label={String(item.status)} size="sm" /> },
  { id: 'owner', header: 'Owner', accessorKey: 'owner', width: 160 },
  { id: 'progress', header: 'Progress', accessorKey: 'progress', width: 100, align: 'right' }
];

export function ProjectTree({ initial }: { initial: TreeViewItem[] }) {
  const [data, setData] = useState(initial);

  return (
    <TreeTable
      data={data}
      columns={columns}
      nameColumnHeader="Work item"
      draggable
      canDropInside={item => item.type !== 'task'}
      maxHeight={420}
      onDataChange={nextData => setData(nextData)} />
  );
}

Layout and interaction

• Rows are the flattened visible tree rendered by a FlashList with fixed row heights. The name column plus all data columns sit inside one horizontal ScrollView; with stickyNameColumn (default) the name cells are translated by the horizontal scroll offset (reanimated), so the hierarchy stays visible while the data columns scroll underneath.
• Tapping the chevron expands / collapses a folder. Tapping a row calls onRowPress; without onRowPress a folder row toggles itself.
• The options button next to the search opens Expand All / Collapse All (hidden with showExpandAll={false}). Searching filters by name and opens matching branches.
• draggable replaces web drag-and-drop with a "Move to…" sheet (long-press drag inside nested, horizontally scrolling rows is unreliable on a phone). Each row gets a … button (long-press works too); the sheet lists every valid target (the moved item and its subtree are excluded) plus Top level, and offers Before / Inside / After — Inside only when canDropInside(target) allows. The move goes through moveTreeViewItem and fires onDataChange(nextData, details) exactly like web. Moving is disabled while a search query is active, and items with draggable: false get no … button.

API Reference

TreeTableProps

TreeTableColumn

Differences from web

• ref and div HTML attributes are dropped (className + testID remain).
• Drag-and-drop (dnd-kit) is replaced by the "Move to…" sheet; onDataChange / TreeViewMoveDetails are identical and position is one of before / after / inside / root.
• TreeTableColumn.width is a number.
• nameColumnWidth, onRowPress and stickyNameColumn are native additions.

Translation keys

Copy resolves through useUiTranslation(). Shared with web: ui.treeView.searchPlaceholder, ui.treeView.noItemsFound. Native additions: ui.treeTable.name, ui.treeTable.options, ui.treeView.expandAll, ui.treeView.collapseAll, ui.treeView.expand, ui.treeView.collapse, ui.treeView.moveTo, ui.treeView.moveToRoot, ui.treeView.moveBefore, ui.treeView.moveInside, ui.treeView.moveAfter.

Components

Type Exports