# Tree Table
URL: /docs/web/components/tree-table

Tree Table component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState, type ReactNode } from 'react';

import {
  TreeTable,
  type TreeTableColumn
} from '@docyrus/ui/components/tree-table';
import { type TreeViewItem } from '@docyrus/ui/components/tree-view';
import { Badge } from '@docyrus/ui/primitives/ui/badge';
import { Button } from '@docyrus/ui/primitives/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';
import { cn } from '@docyrus/ui/primitives/lib/utils';
import {
  FileText,
  Folder,
  FolderOpen
} from 'lucide-react';

type TreeTableDemoItem = TreeViewItem & {
  owner: string;
  status: 'Planned' | 'In Progress' | 'Done';
  updatedAt: string;
};

function makeTreeTableData(): TreeTableDemoItem[] {
  return [
    {
      id: 'product',
      name: 'Product',
      type: 'folder',
      owner: 'Ava',
      status: 'In Progress',
      updatedAt: 'Today',
      children: [
        {
          id: 'roadmap',
          name: 'Roadmap',
          type: 'folder',
          owner: 'Ava',
          status: 'In Progress',
          updatedAt: '1h ago',
          children: [
            {
              id: 'q3-review',
              name: 'Q3 Review',
              type: 'file',
              owner: 'Milo',
              status: 'Done',
              updatedAt: '10m ago'
            },
            {
              id: 'pricing-tests',
              name: 'Pricing Tests',
              type: 'file',
              owner: 'Iris',
              status: 'Planned',
              updatedAt: 'Yesterday'
            }
          ]
        },
        {
          id: 'research',
          name: 'User Research',
          type: 'file',
          owner: 'Noah',
          status: 'Done',
          updatedAt: '2d ago'
        }
      ]
    },
    {
      id: 'operations',
      name: 'Operations',
      type: 'folder',
      owner: 'Lena',
      status: 'Planned',
      updatedAt: 'Today',
      children: [
        {
          id: 'vendors',
          name: 'Vendor Audit',
          type: 'file',
          owner: 'Lena',
          status: 'In Progress',
          updatedAt: '3h ago'
        },
        {
          id: 'checklist',
          name: 'Launch Checklist',
          type: 'file',
          owner: 'Jade',
          status: 'Planned',
          updatedAt: '4d ago'
        }
      ]
    },
    {
      id: 'archive',
      name: 'Archive',
      type: 'folder',
      owner: 'Kai',
      status: 'Done',
      updatedAt: 'Last week',
      children: []
    }
  ];
}

function renderStatus(status: TreeTableDemoItem['status']) {
  if (status === 'Done') {
    return ;
  }

  if (status === 'In Progress') {
    return ;
  }

  return ;
}

const TREE_TABLE_COLUMNS: TreeTableColumn[] = [
  {
    id: 'owner',
    header: 'Owner',
    accessorKey: 'owner',
    width: 140
  },
  {
    id: 'status',
    header: 'Status',
    width: 150,
    cell: item => renderStatus(item.status as TreeTableDemoItem['status'])
  },
  {
    id: 'updatedAt',
    header: 'Updated',
    accessorKey: 'updatedAt',
    width: 120,
    align: 'right',
    className: 'text-muted-foreground'
  }
];

export function TreeTableDemo() {
  type Variant = 'default' | 'outline' | 'ghost';
  type Size = 'default' | 'sm' | 'lg';

  const [data, setData] = useState
      </div>

      <div
        className={cn(
          'grid transition-[grid-template-rows] duration-300 ease-in-out',
          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
        )}>
        <div className="overflow-hidden">
          <div className="mb-4 grid gap-6 rounded-lg border border-border bg-muted/30 p-4">
            <div className="flex flex-wrap items-center gap-4">
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Variant</span>
                
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Size</span>
                
                  
                    
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Drag &amp; Drop</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-4xl space-y-3">
        <TreeTable
          data={data}
          columns={TREE_TABLE_COLUMNS}
          variant={variant}
          size={size}
          draggable={draggable}
          getIcon={getIcon}
          maxHeight="420px"
          onDataChange={nextData => setData(nextData as TreeTableDemoItem[])} />
        <p className="text-center text-xs text-muted-foreground">
          Use the drag handle to reorder rows, drop onto a folder row to nest an item,
          or drop between top-level rows to bring an item back to the root.
        </p>
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-tree-table
```

**Dependencies:**
- [@dnd-kit/core](https://www.npmjs.com/package/@dnd-kit/core)
- [@dnd-kit/utilities](https://www.npmjs.com/package/@dnd-kit/utilities)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  TreeTable
} from "@docyrus/ui/components/tree-table";

<TreeTable
  ref={...}
  data={TreeViewItem[]}
  columns={TreeTableColumn[]}
  nameColumnHeader={...}
  getIcon={() => {}}
  showExpandAll
  searchPlaceholder="..."
  emptyText="..."
  draggable
  canDropInside={() => {}}
  onDataChange={(nextData: TreeViewItem, details: TreeViewMoveDetails) = void[]}
  maxHeight="..."
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `ref` | `Ref<HTMLDivElement>` | — |
| `data` | `TreeViewItem[]` | — |
| `columns` | `TreeTableColumn[]` | — |
| `nameColumnHeader` | `ReactNode` | — |
| `getIcon` | `(item: TreeViewItem, depth: number) => ReactNode` | — |
| `showExpandAll` | `boolean` | — |
| `searchPlaceholder` | `string` | — |
| `emptyText` | `string` | — |
| `draggable` | `boolean` | — |
| `canDropInside` | `(item: TreeViewItem) => boolean` | — |
| `onDataChange` | `(nextData: TreeViewItem[], details: TreeViewMoveDetails) => void` | — |
| `maxHeight` | `string` | — |
| `className` | `string` | — |