# useNestedTable

**Category:** Base Components/Collections/NestedTable

## API

### Description

`useNestedTable` is a React hook that creates the state for a [`NestedTable`](./?path=/story/base-components-collections-nestedtable--nestedtable) component — a table that displays hierarchical data with expand/collapse, flat and nested view modes, and multi-level optimistic actions.

You define the hierarchy through `levels`, where each level describes how to fetch its items, how they relate to their parent, and how to render columns. The hook returns a [`NestedTableState`](./?path=/story/base-components-collections-nestedtable--nestedtablestate) to pass to ``.

```tsx
import { useNestedTable } from '@wix/patterns';
```

### Example

```tsx
import { useNestedTable, NestedTable, createNestedTableLevel } from '@wix/patterns';

const columns = [
  { id: 'name', title: 'Name' },
  { id: 'status', title: 'Status' },
];

const state = useNestedTable({
  columns,
  mainColumn: { title: 'Name' },
  levels: [
    createNestedTableLevel({
      parentKey: (item) => item.parentId,
      createCollection: () => ({
        collection: useCollection({
          queryName: 'my-nested-items',
          fetchData: (query) => fetchItems(query),
          itemKey: (item) => item.id,
        }),
      }),
      renderMainColumn: (item) => ({ title: item.name }),
      columns: {
        name: (item) => item.name,
        status: (item) => item.status,
      },
    }),
  ],
});

return ;
```

### Returns

[NestedTableState](./?path=/story/base-components-collections-nestedtable--nestedtablestate)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `fetchAllLimit` | `number` | No | `1000` | If the total items in the server are less or equal to this threshold, all items will be fetched and rendered at once, in expanded state (referred to as "Eager" mode). |
| `fetchAllThreshold` | `number` | No | - | @deprecated Use `fetchAllLimit` instead. |
| `expandAllThreshold` | `number` | No | ``fetchAllThreshold`` | In "Eager" mode, items will be in expanded state. This threshold allows to use collapsed state if the total items in the server are greater than this threshold. |
| `columns` | `NestedTableColumn<C>[]` | Yes | - | Columns to be rendered in the nested table. Same as [TableColumn](./?path=/story/common-types--tablecolumn) - just without rendering logic of cells (`render` prop will be defined for each level individually in the `levels` prop). |
| `mainColumn` | `{ title?: string; width?: string \| number; } \| undefined` | No | - | Main column of the nested table. An object with the following properties: - `title`: The title of the column. @default '' - `width`: The width of the column. Can be a number (in pixels) or a string (percentage). @default '326px' |
| `levels` | `Omit<NestedTableLevelDescriptor<C, any, any>, "depth">[]` | Yes | - | Configuration of the nested table levels. Use one of the helper function to create the levels configuration: - [createNestedTableLevel](./?path=/story/base-components-collections-nestedtable--createnestedtablelevel) - for cases where each level if of a different entity type. - [createNestedTableSingleEntityLevels](./?path=/story/base-components-collections-nestedtable--createnestedtablesingleentitylevels) - for cases where all levels are of the same entity type. |