### Default Complete Table Configuration

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating the setup of a typical table with sorting, row selection, column resizing, and integration with reordering and settings providers.

```typescript
function MyTable({data}) {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});

  const columns: ColumnDef<Data>[] = [
    selectionColumn,
    dragHandleColumn,
    // ...other columns
    getSettingsColumn(table),
  ];

  const table = useTable({
    columns,
    data,
    enableSorting: true,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    enableColumnResizing: true,
    columnResizeMode: 'onChange',
    getRowId: (row) => row.id,
    state: {
      sorting,
      rowSelection,
      columnVisibility,
    },
    onSortingChange: setSorting,
    onRowSelectionChange: setRowSelection,
    onColumnVisibilityChange: setColumnVisibility,
  });

  return (
    <ReorderingProvider table={table} onReorder={handleReorder}>
      <Table
        table={table}
        size="m"
        stickyHeader={true}
      />
    </ReorderingProvider>
  );
}
```

--------------------------------

### Basic Table Configuration with useTable

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/usetable.md

Demonstrates the basic setup of the useTable hook with essential configurations like columns, data, sorting, and column resizing. This is a starting point for most table implementations.

```typescript
import React from 'react';
import { Table, useTable } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Person {
  id: string;
  name: string;
  age: number;
}

const columns: ColumnDef<Person>[] = [
  { accessorKey: 'name', header: 'Name', size: 150 },
  { accessorKey: 'age', header: 'Age', size: 100 },
];

function MyTable() {
  const data: Person[] = [
    { id: '1', name: 'John', age: 28 },
    { id: '2', name: 'Jane', age: 32 },
  ];

  const table = useTable({
    columns,
    data,
    enableSorting: true,
    enableColumnResizing: true,
    getCoreRowModel: undefined, // Will be auto-provided
  });

  return <Table table={table} />;
}
```

--------------------------------

### Install @gravity-ui/table

Source: https://github.com/gravity-ui/table/blob/main/README.md

Install the @gravity-ui/table package using npm.

```shell
npm install --save @gravity-ui/table
```

--------------------------------

### Standard Table Setup Import

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/INDEX.md

Import necessary components and hooks for a basic table setup, including selection and drag-and-drop columns.

```typescript
import {
  Table,
  useTable,
  selectionColumn,
  dragHandleColumn,
} from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';
```

--------------------------------

### Basic Table Migration: Before

Source: https://github.com/gravity-ui/table/blob/main/docs/migration-from-uikit-table/migration-from-uikit-table.md

Example of a simple table using the older @gravity-ui/uikit component.

```typescript
import {Table} from '@gravity-ui/uikit';

type User = {
  id: string;
  name: string;
  email: string;
}

const columns = [
  {id: 'name', name: 'Name'},
  {id: 'email', name: 'Email'},
];

const data: User[] = [
  {id: '1', name: 'John Doe', email: 'john@example.com'},
  {id: '2', name: 'Jane Smith', email: 'jane@example.com'},
];

function MyTable() {
  return (
    <Table
      columns={columns}
      data={data}
      getRowDescriptor={(item) => ({id: item.id})}
    />
  );
}
```

--------------------------------

### Install @gravity-ui/table

Source: https://github.com/gravity-ui/table/blob/main/docs/migration-from-uikit-table/migration-from-uikit-table.md

Install the new table package using npm, yarn, or pnpm.

```bash
npm install @gravity-ui/table
# or
yarn add @gravity-ui/table
# or
pnpm add @gravity-ui/table
```

--------------------------------

### Basic Table Usage

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/usetable.md

A simple example demonstrating how to use the `useTable` hook with basic column definitions and data.

```APIDOC
## Basic Table Usage

```typescript
import React from 'react';
import { Table, useTable } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Person {
  id: string;
  name: string;
  age: number;
}

const columns: ColumnDef<Person>[] = [
  { accessorKey: 'name', header: 'Name', size: 150 },
  { accessorKey: 'age', header: 'Age', size: 100 },
];

function MyTable() {
  const data: Person[] = [
    { id: '1', name: 'John', age: 28 },
    { id: '2', name: 'Jane', age: 32 },
  ];

  const table = useTable({
    columns,
    data,
    enableSorting: true,
    enableColumnResizing: true,
    getCoreRowModel: undefined, // Will be auto-provided
  });

  return <Table table={table} />;
}
```
```

--------------------------------

### Custom Selection Example with RangedSelectionCheckbox

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/selection.md

An example demonstrating a custom selection column using RangedSelectionCheckbox and SelectionCheckbox. This allows for custom sizing and configuration of the selection UI.

```typescript
import React, { useState } from 'react';
import {
  Table,
  useTable,
  RangedSelectionCheckbox,
  SelectionCheckbox,
} from '@gravity-ui/table';
import type {
  ColumnDef,
  CellContext,
  RowSelectionState,
} from '@gravity-ui/table/tanstack';

interface Item {
  id: string;
  name: string;
}

const customSelectionColumn: ColumnDef<Item> = {
  id: '_select',
  header: ({ table }) => (
    <SelectionCheckbox
      size="l"
      checked={table.getIsAllRowsSelected()},
      indeterminate={table.getIsSomeRowsSelected()},
      onChange={table.getToggleAllRowsSelectedHandler()},
    />
  ),
  cell: (cellContext) => (
    <RangedSelectionCheckbox
      size="l"
      checked={cellContext.row.getIsSelected()},
      disabled={!cellContext.row.getCanSelect()},
      indeterminate={cellContext.row.getIsSomeSelected()},
      cellContext={cellContext},
    />
  ),
  size: 41,
  maxSize: 41,
  minSize: 41,
  enableResizing: false,
  enableSorting: false,
};

export function CustomSelectionExample() {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const columns: ColumnDef<Item>[] = [
    customSelectionColumn,
    { accessorKey: 'name', header: 'Item Name', size: 300 },
  ];

  const data: Item[] = [
    { id: '1', name: 'Item A' },
    { id: '2', name: 'Item B' },
    { id: '3', name: 'Item C' },
  ];

  const table = useTable({
    columns,
    data,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    state: { rowSelection },
    onRowSelectionChange: setRowSelection,
  });

  return <Table table={table} />;
}
```

--------------------------------

### Window Row Virtualization Example

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/virtualization.md

Demonstrates how to use `useWindowRowVirtualizer` for efficient rendering of large tables with up to 5000 rows. Ensure the `bodyRef` is correctly passed to the `Table` component.

```typescript
import React, { useRef } from 'react';
import { Table, useTable, useWindowRowVirtualizer } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Row {
  id: string;
  name: string;
}

const columns: ColumnDef<Row>[] = [
  { accessorKey: 'name', header: 'Name' },
];

export function PageScrollTableExample() {
  const bodyRef = useRef<HTMLTableSectionElement>(null);

  const data = Array.from({ length: 5000 }, (_, i) => ({
    id: String(i),
    name: `Item ${i}`,
  }));

  const table = useTable({ columns, data });

  const rowVirtualizer = useWindowRowVirtualizer({
    count: table.getRowModel().rows.length,
    estimateSize: () => 40,
    overscan: 10,
    scrollMargin: bodyRef.current?.offsetTop ?? 0,
  });

  return (
    <main>
      <h1>Large Table</h1>
      <Table
        table={table}
        rowVirtualizer={rowVirtualizer}
        bodyRef={bodyRef}
      />
    </main>
  );
}
```

--------------------------------

### Advanced Table Setup with useTable

Source: https://github.com/gravity-ui/table/blob/main/docs/migration-from-uikit-table/migration-from-uikit-table.md

Demonstrates setting up a table with dynamic column visibility and order using the `useTable` hook. Columns can be hidden by default and managed through user interaction.

```typescript jsx
import React from 'react';
import {Table, useTable, getSettingsColumn} from '@gravity-ui/table';
import type {ColumnDef, VisibilityState, ColumnOrderState} from '@gravity-ui/table/tanstack';

type User = {
  id: string;
  name: string;
  email: string;
  phone: string;
}

const data: User[] = [
  {id: '1', name: 'John Doe', email: 'john@example.com', phone: '+1234567890'},
  {id: '2', name: 'Jane Smith', email: 'jane@example.com', phone: '+0987654321'},
];

const settingsColumns: ColumnDef<User>[] = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
  },
  {
    id: 'email',
    header: 'Email',
    accessorKey: 'email',
  },
  {
    id: 'phone',
    header: 'Phone',
    accessorKey: 'phone',
    enableHiding: true, // Can be hidden
  },
  // Add settings column using helper function
  getSettingsColumn<User>(),
];

function MyTable() {
  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({
    phone: false, // Hidden by default
  });

  const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>([
    'name',
    'email',
    'phone',
  ]);

  const table = useTable({
    data,
    columns: settingsColumns,
    enableHiding: true,
    state: {
      columnVisibility,
      columnOrder,
    },
    onColumnVisibilityChange: setColumnVisibility,
    onColumnOrderChange: setColumnOrder,
    getRowId: (row) => row.id,
  });

  return <Table table={table} />;
}
```

--------------------------------

### Folder Tree Example with TreeExpandableCell

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/columns.md

Demonstrates a full table implementation using `TreeExpandableCell` to display hierarchical folder data with expandable rows.

```typescript
import React from 'react';
import {
  Table,
  useTable,
  TreeExpandableCell,
} from '@gravity-ui/table';
import type { ColumnDef, ExpandedState } from '@gravity-ui/table/tanstack';

interface Folder {
  id: string;
  name: string;
  size: number;
  folders?: Folder[];
}

const columns: ColumnDef<Folder>[] = [
  {
    accessorKey: 'name',
    header: 'Folder Name',
    size: 300,
    withNestingStyles: true,
    showTreeDepthIndicators: true,
    cell: ({row, info}) => (
      <TreeExpandableCell row={row}>
        {info.getValue<string>()}
      </TreeExpandableCell>
    ),
  },
  {
    accessorKey: 'size',
    header: 'Size (MB)',
    size: 120,
  },
];

export function FolderTreeExample() {
  const [expanded, setExpanded] = React.useState<ExpandedState>({});

  const data: Folder[] = [
    {
      id: 'root',
      name: 'Project',
      size: 1024,
      folders: [
        {
          id: 'src',
          name: 'src',
          size: 512,
          folders: [
            { id: 'components', name: 'components', size: 256 },
            { id: 'hooks', name: 'hooks', size: 128 },
          ],
        },
        {
          id: 'public',
          name: 'public',
          size: 256,
        },
      ],
    },
  ];

  const table = useTable({
    columns,
    data,
    enableExpanding: true,
    getSubRows: (folder) => folder.folders,
    state: { expanded },
    onExpandedChange: setExpanded,
  });

  return <Table table={table} />;
}
```

--------------------------------

### Basic Table Migration: After

Source: https://github.com/gravity-ui/table/blob/main/docs/migration-from-uikit-table/migration-from-uikit-table.md

Example of the same table migrated to the new @gravity-ui/table component, utilizing the useTable hook and TanStack Table definitions.

```typescript
import React from 'react';
import {Table, useTable} from '@gravity-ui/table';
import type {ColumnDef} from '@gravity-ui/table/tanstack';

type User = {
  id: string;
  name: string;
  email: string;
}

const columns: ColumnDef<User>[] = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
  },
  {
    id: 'email',
    header: 'Email',
    accessorKey: 'email',
  },
];

const data: User[] = [
  {id: '1', name: 'John Doe', email: 'john@example.com'},
  {id: '2', name: 'Jane Smith', email: 'jane@example.com'},
];

function MyTable() {
  const table = useTable({
    data,
    columns,
    getRowId: (row) => row.id,
  });

  return (
    <Table table={table} />
  );
}
```

--------------------------------

### Table with Custom Footer Content Example

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/row-components.md

Demonstrates how to use the BaseTable component with a custom footer to display summary information. This example shows calculating and rendering a total amount for the table data.

```typescript
import React from 'react';
import {
  BaseTable,
  useTable,
} from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Item {
  id: string;
  name: string;
  amount: number;
}

const columns: ColumnDef<Item>[] = [
  { accessorKey: 'name', header: 'Item', size: 200 },
  { accessorKey: 'amount', header: 'Amount', size: 100 },
];

export function TableWithFooter() {
  const data: Item[] = [
    { id: '1', name: 'Item A', amount: 100 },
    { id: '2', name: 'Item B', amount: 200 },
  ];

  const table = useTable({ columns, data });
  const total = data.reduce((sum, item) => sum + item.amount, 0);

  return (
    <BaseTable
      table={table}
      withFooter={true}
      renderCustomFooterContent={({
        cellClassName,
        rowClassName,
      }) => (
        <tr className={rowClassName}>
          <td className={cellClassName}>Total</td>
          <td className={cellClassName}>{total}</td>
        </tr>
      )}
    />
  );
}
```

--------------------------------

### Advanced Table with Selection and Expansion

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/usetable.md

An example showcasing advanced features like row selection and row expansion using `useTable`.

```APIDOC
## Advanced Table with Selection and Expansion

```typescript
import React, { useState } from 'react';
import { Table, useTable, selectionColumn } from '@gravity-ui/table';
import type { ColumnDef, ExpandedState, RowSelectionState } from '@gravity-ui/table/tanstack';

interface Item {
  id: string;
  name: string;
  items?: Item[];
}

const columns: ColumnDef<Item>[] = [
  selectionColumn as ColumnDef<Item>,
  { accessorKey: 'name', header: 'Name', size: 200 },
];

function AdvancedTable() {
  const data: Item[] = [
    {
      id: 'group1',
      name: 'Group 1',
      items: [
        { id: 'item1', name: 'Item 1' },
        { id: 'item2', name: 'Item 2' },
      ],
    },
  ];

  const [expanded, setExpanded] = useState<ExpandedState>({});
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const table = useTable({
    columns,
    data,
    enableExpanding: true,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    getSubRows: (item) => item.items,
    state: {
      expanded,
      rowSelection,
    },
    onExpandedChange: setExpanded,
    onRowSelectionChange: setRowSelection,
  });

  return <Table table={table} />;
}
```
```

--------------------------------

### Table Size and Alignment Example

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/table.md

Illustrates how to dynamically change the Table component's size and configure vertical alignment for header and body cells.

```typescript
import React, { useState } from 'react';
import { Table, useTable } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Item {
  id: string;
  description: string;
}

const columns: ColumnDef<Item>[] = [
  { accessorKey: 'description', header: 'Details', size: 400 },
];

export function ResizableTable() {
  const [size, setSize] = useState<'s' | 'm' | 'l' | 'xl'>('m');

  const data: Item[] = [
    { id: '1', description: 'Multi-line
Cell content
Example' },
  ];

  const table = useTable({ columns, data });

  return (
    <div>
      <div>
        <label>
          Size:
          <select value={size} onChange={(e) => setSize(e.target.value as any)}>
            <option value="s">Small</option>
            <option value="m">Medium</option>
            <option value="l">Large</option>
            <option value="xl">Extra Large</option>
          </select>
        </label>
      </div>

      <Table
        table={table}
        size={size}
        verticalAlign="middle"
        headerVerticalAlign="middle"
      />
    </div>
  );
}
```

--------------------------------

### Basic Reordering Example

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/reordering.md

Demonstrates how to set up the ReorderingProvider for basic row reordering in a table. The onReorder callback is implemented to update the component's state with the new data order.

```typescript
import React, { useState } from 'react';
import {
  Table,
  useTable,
  ReorderingProvider,
  dragHandleColumn,
} from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Task {
  id: string;
  title: string;
  priority: string;
}

const columns: ColumnDef<Task>[] = [
  dragHandleColumn,
  { accessorKey: 'title', header: 'Task', size: 300 },
  { accessorKey: 'priority', header: 'Priority', size: 100 },
];

export function ReorderableTaskList() {
  const [data, setData] = useState<Task[]>([
    { id: '1', title: 'Complete project setup', priority: 'High' },
    { id: '2', title: 'Review pull requests', priority: 'Medium' },
    { id: '3', title: 'Update documentation', priority: 'Low' },
  ]);

  const table = useTable({
    columns,
    data,
    getRowId: (row) => row.id,
  });

  const handleReorder = ({
    draggedItemKey,
    targetItemKey,
  }: any) => {
    const draggedIndex = data.findIndex((item) => item.id === draggedItemKey);
    const targetIndex = data.findIndex((item) => item.id === targetItemKey);

    if (draggedIndex === -1 || targetIndex === -1) return;

    const newData = [...data];
    const [draggedItem] = newData.splice(draggedIndex, 1);
    newData.splice(targetIndex, 0, draggedItem);

    setData(newData);
  };

  return (
    <ReorderingProvider
      table={table}
      onReorder={handleReorder}
    >
      <Table table={table} />
    </ReorderingProvider>
  );
}
```

--------------------------------

### Minimal Gravity UI Table Example

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/QUICK-REFERENCE.md

A basic implementation of the Gravity UI Table component. It requires importing Table and useTable, defining columns with accessor keys and headers, and providing data.

```typescript
import React from 'react';
import { Table, useTable } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface User {
  id: string;
  name: string;
  email: string;
}

export function MyTable() {
  const columns: ColumnDef<User>[] = [
    { accessorKey: 'name', header: 'Name', size: 200 },
    { accessorKey: 'email', header: 'Email', size: 250 },
  ];

  const data: User[] = [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob', email: 'bob@example.com' },
  ];

  const table = useTable({ columns, data });

  return <Table table={table} />;
}
```

--------------------------------

### Basic BaseTable Usage

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/basetable.md

A fundamental example of using the BaseTable component with defined columns and data. It showcases basic table rendering with custom class names and sticky headers.

```typescript
import React from 'react';
import { BaseTable, useTable } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Row {
  id: string;
  name: string;
  email: string;
}

const columns: ColumnDef<Row>[] = [
  { accessorKey: 'name', header: 'Name', size: 150 },
  { accessorKey: 'email', header: 'Email', size: 200 },
];

export function BasicTableExample() {
  const data: Row[] = [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob', email: 'bob@example.com' },
  ];

  const table = useTable({ columns, data });

  return (
    <BaseTable
      table={table}
      className="my-table"
      stickyHeader={true}
      headerRowClassName="header-row"
      rowClassName={(row) => row.getIsSelected() ? 'selected' : ''}
    />
  );
}
```

--------------------------------

### TableSettings Component Usage Example

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/tablesettings.md

Demonstrates how to integrate the TableSettings component into a React application, managing column visibility and order with the useTable hook.

```typescript
import React, { useState } from 'react';
import { Table, TableSettings, useTable } from '@gravity-ui/table';
import type { ColumnDef, VisibilityState } from '@gravity-ui/table/tanstack';

interface Product {
  id: string;
  name: string;
  sku: string;
  price: number;
  inventory: number;
}

const columns: ColumnDef<Product>[] = [
  { accessorKey: 'name', header: 'Product Name', size: 200 },
  { accessorKey: 'sku', header: 'SKU', size: 120 },
  { accessorKey: 'price', header: 'Price', size: 100 },
  { accessorKey: 'inventory', header: 'In Stock', size: 100 },
];

export function ProductTableWithSettings() {
  const data: Product[] = [
    {
      id: '1',
      name: 'Widget A',
      sku: 'WDG-001',
      price: 29.99,
      inventory: 150,
    },
    {
      id: '2',
      name: 'Widget B',
      sku: 'WDG-002',
      price: 39.99,
      inventory: 80,
    },
  ];

  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
  const [columnOrder, setColumnOrder] = useState<string[]>([]);

  const table = useTable({
    columns,
    data,
    state: {
      columnVisibility,
      columnOrder,
    },
    onColumnVisibilityChange: setColumnVisibility,
    onColumnOrderChange: setColumnOrder,
  });

  const handleSettingsApply = ({
    visibilityState,
    columnOrder,
  }: { 
    visibilityState: VisibilityState;
    columnOrder: string[];
  }) => {
    // Settings have been applied
    console.log('Updated visibility:', visibilityState);
    console.log('Updated order:', columnOrder);
  };

  return (
    <div style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
      <TableSettings
        table={table}
        onSettingsApply={handleSettingsApply}
        sortable={true}
        filterable={true}
        enableSearch={true}
        searchPlaceholder="Search columns..."
      />
    </div>
  );
}

```

--------------------------------

### Table with Column Setup Component

Source: https://github.com/gravity-ui/table/blob/main/docs/migration-from-uikit-table/migration-from-uikit-table.md

Illustrates using `TableColumnSetup` to manage column visibility for a `Table` component. The `TableColumnSetup` component allows users to select which columns are displayed, and the `Table` re-renders accordingly.

```typescript jsx
import React from 'react';
import {Table, TableColumnSetup} from '@gravity-ui/uikit';

type User = {
  id: string;
  name: string;
  email: string;
  phone: string;
}

const columns = [
  {id: 'name', name: 'Name'},
  {id: 'email', name: 'Email'},
  {id: 'phone', name: 'Phone'},
];

const data: User[] = [
  {id: '1', name: 'John Doe', email: 'john@example.com', phone: '+1234567890'},
  {id: '2', name: 'Jane Smith', email: 'jane@example.com', phone: '+0987654321'},
];

function MyTable() {
  const [items, setItems] = React.useState([
    {id: 'name', title: 'Name', selected: true},
    {id: 'email', title: 'Email', selected: true},
    {id: 'phone', title: 'Phone', selected: false},
  ]);

  // Filter columns based on items
  const visibleColumns = columns.filter(col =>
    items.find(item => item.id === col.id && item.selected)
  );

  return (
    <>
      <TableColumnSetup
        items={items}
        onUpdate={(newItems) => {
          setItems(newItems);
        }}
      />
      <Table
        data={data}
        columns={visibleColumns}
        getRowDescriptor={(item) => ({id: item.id})}
      />
    </>
  );
}
```

--------------------------------

### User Table with Row Selection Example

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/selection.md

Demonstrates how to use the selectionColumn to enable row selection in a user table. Configure row selection and multi-row selection to allow users to select multiple rows using checkboxes and Shift+click.

```typescript
import React, { useState } from 'react';
import {
  Table,
  useTable,
  selectionColumn,
} from '@gravity-ui/table';
import type {
  ColumnDef,
  RowSelectionState,
} from '@gravity-ui/table/tanstack';

interface User {
  id: string;
  name: string;
  email: string;
}

const columns: ColumnDef<User>[] = [
  selectionColumn as ColumnDef<User>,
  { accessorKey: 'name', header: 'Name', size: 200 },
  { accessorKey: 'email', header: 'Email', size: 200 },
];

export function UserTableWithSelection() {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const data: User[] = [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob', email: 'bob@example.com' },
    { id: '3', name: 'Charlie', email: 'charlie@example.com' },
  ];

  const table = useTable({
    columns,
    data,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    state: {
      rowSelection,
    },
    onRowSelectionChange: setRowSelection,
  });

  const selectedRows = table.getFilteredSelectedRowModel().rows;

  return (
    <div>
      <p>Selected: {selectedRows.length} of {data.length}</p>
      <Table table={table} />
    </div>
  );
}
```

--------------------------------

### User Table with useTableSettings Hook

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/tablesettings.md

Demonstrates a full usage example of the `useTableSettings` hook to manage column visibility and ordering, integrating with the `useTable` hook for a functional table component. Initial settings like hidden columns and default order are configured.

```typescript
import React from 'react';
import { Table, TableSettings, useTable, useTableSettings } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  createdAt: string;
}

const columns: ColumnDef<User>[] = [
  { accessorKey: 'name', header: 'Name', size: 150 },
  { accessorKey: 'email', header: 'Email', size: 200 },
  { accessorKey: 'role', header: 'Role', size: 120 },
  { accessorKey: 'createdAt', header: 'Created', size: 150 },
];

export function UserTableWithHook() {
  const data: User[] = [
    {
      id: '1',
      name: 'Alice',
      email: 'alice@example.com',
      role: 'Admin',
      createdAt: '2023-01-15',
    },
  ];

  const { state, callbacks } = useTableSettings({
    initialVisibility: {
      email: false, // Hide email by default
    },
    initialOrdering: ['name', 'role', 'email', 'createdAt'],
    onVisibilityChange: (vis) => {
      console.log('Visibility changed:', vis);
      // Persist to localStorage or send to server
    },
    onOrderingChange: (order) => {
      console.log('Order changed:', order);
    },
  });

  const table = useTable({
    columns,
    data,
    state: state,
    onColumnVisibilityChange: callbacks.onColumnVisibilityChange,
    onColumnOrderChange: callbacks.onColumnOrderChange,
  });

  return <Table table={table} />;
}
```

--------------------------------

### Table with Row Selection and Sorting

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/table.md

This example demonstrates how to implement row selection and sorting in a Gravity UI table. It requires importing necessary components and hooks from '@gravity-ui/table'. Ensure your data structure matches the expected User interface.

```typescript
import React, { useState } from 'react';
import { Table, useTable, selectionColumn } from '@gravity-ui/table';
import type { ColumnDef, RowSelectionState, SortingState } from '@gravity-ui/table/tanstack';

interface User {
  id: string;
  name: string;
  email: string;
}

const columns: ColumnDef<User>[] = [
  selectionColumn as ColumnDef<User>,
  {
    accessorKey: 'name',
    header: 'Name',
    size: 150,
  },
  {
    accessorKey: 'email',
    header: 'Email',
    size: 200,
  },
];

export function SelectableTableExample() {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const data: User[] = [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob', email: 'bob@example.com' },
  ];

  const table = useTable({
    columns,
    data,
    enableSorting: true,
    enableRowSelection: true,
    enableMultiRowSelection: true,
    state: {
      sorting,
      rowSelection,
    },
    onSortingChange: setSorting,
    onRowSelectionChange: setRowSelection,
  });

  return (
    <Table
      table={table}
      size="m"
      verticalAlign="middle"
      stickyHeader={true}
    />
  );
}
```

--------------------------------

### Memoization for Performance Utilities

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/utility-functions.md

Examples of using `React.useMemo` to memoize expensive operations like getting ARIA sort attributes and cell class modes, ensuring performance in render functions.

```typescript
const ariaSort = React.useMemo(
  () => getAriaSort(header.column.getIsSorted()),
  [header.column.getIsSorted()]
);

const classModifiers = React.useMemo(
  () => getCellClassModes(cell),
  [cell]
);
```

--------------------------------

### Table Ref Usage

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/table.md

Example of how to use a ref with the Table component to access the underlying HTMLTableElement.

```typescript
const tableRef = React.useRef<HTMLTableElement>(null);
return <Table ref={tableRef} table={table} />;
```

--------------------------------

### Project File Structure

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/COMPLETION-REPORT.md

Provides an overview of the project's directory and file structure, indicating the purpose of each file.

```bash
output/
├── README.md                           # Start here
├── QUICK-REFERENCE.md                  # Common patterns
├── INDEX.md                            # Symbol directory
├── types.md                            # Type definitions
├── configuration.md                    # Setup options
├── errors.md                           # Troubleshooting
├── DOCUMENTATION-SUMMARY.txt           # Generation report
├── COMPLETION-REPORT.md                # This file
└── api-reference/                      # Component/hook docs
    ├── usetable.md
    ├── basetable.md
    ├── table.md
    ├── tablesettings.md
    ├── selection.md
    ├── reordering.md
    ├── virtualization.md
    ├── columns.md
    ├── row-components.md
    ├── advanced-hooks.md
    └── utility-functions.md
```

--------------------------------

### Usage of getSortIndicatorIcon

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/utility-functions.md

Example demonstrating how to use `getSortIndicatorIcon` to display a sort indicator icon in a table header.

```typescript
import { getSortIndicatorIcon } from '@gravity-ui/table';
import { Icon } from '@gravity-ui/uikit';

function SortIndicator({header}) {
  const order = header.column.getIsSorted();
  return <Icon data={getSortIndicatorIcon(order)} />;
}
```

--------------------------------

### Column Definition with Nesting Styles

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/columns.md

Example of defining a column with `withNestingStyles` and `showTreeDepthIndicators` enabled for hierarchical data display.

```typescript
import type { ColumnDef } from '@gravity-ui/table';

interface TreeItem {
  id: string;
  name: string;
  items?: TreeItem[];
}

const columns: ColumnDef<TreeItem>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
    size: 300,
    withNestingStyles: true,
    showTreeDepthIndicators: true,
    cell: ({row, info}) => (
      <TreeExpandableCell row={row}>
        {info.getValue<string>()}
      </TreeExpandableCell>
    ),
  },
];
```

--------------------------------

### Basic Table Usage

Source: https://github.com/gravity-ui/table/blob/main/README.md

Demonstrates how to set up and render a basic table with columns and data using the useTable hook.

```tsx
import React from 'react';
import {Table, useTable} from '@gravity-ui/table';
import type {ColumnDef} from '@gravity-ui/table/tanstack';

interface Person {
  id: string;
  name: string;
  age: number;
}

const columns: ColumnDef<Person>[] = [
  {accessorKey: 'name', header: 'Name', size: 100},
  {accessorKey: 'age', header: 'Age', size: 100},
];

const data: Person[] = [
  {id: 'name', name: 'John', age: 23},
  {id: 'age', name: 'Michael', age: 27},
];

const BasicExample = () => {
  const table = useTable({
    columns,
    data,
  });

  return <Table table={table} />;
};

```

--------------------------------

### Get Cell Styles

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/utility-functions.md

Utility to retrieve styles for a table cell. Used within the table rendering logic.

```typescript
const styles = getCellStyles(cell, table);
<td style={styles}>{/* ... */}</td>
```

--------------------------------

### Get Sort Indicator Icon Signature

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/utility-functions.md

Signature for a function that returns Gravity UI icon data for the sort state.

```typescript
export const getSortIndicatorIcon = (
  order: false | 'asc' | 'desc' | undefined
): any // Returns Gravity UI icon data
```

--------------------------------

### Implement Basic Auto-Sizing Table

Source: https://github.com/gravity-ui/table/blob/main/src/hooks/useColumnsAutoSize/README.md

Integrate the hook by passing column definitions and options, then syncing the resulting table instance.

```tsx
import {useTable, experimentalUseColumnsAutoSize, ColumnDef} from '@gravity-ui/table';

function MyTable({data}) {
  // Define your columns
  const columns = React.useMemo<ColumnDef<MyData>[]>(
    () => [
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        id: 'status',
        accessorFn: (row) => row.status,
        header: 'Status',
        cell: (info) => (
          <div className={`status-badge status-${info.getValue()}`}>{info.getValue()}</div>
        ),
      },
    ],
    [],
  );

  // Calculate column widths
  const {setTableInstance, columnsWithAutoSizes} = experimentalUseColumnsAutoSize({
    columns,
    options: {
      minWidth: 80,
      maxWidth: 300,
    },
  });

  // Create table instance
  const table = useTable({
    data,
    columns: columnsWithAutoSizes,
    enableColumnResizing: true,
  });

  // Update table instance reference
  React.useEffect(() => {
    setTableInstance(table);
  }, [table, setTableInstance]);

  // Render your table
}
```

--------------------------------

### Configuring Column Settings with `withTableSettings` (Before)

Source: https://github.com/gravity-ui/table/blob/main/docs/migration-from-uikit-table/migration-from-uikit-table.md

Illustrates the older method of managing column visibility and order using the `withTableSettings` HOC. This involved passing `settings` and `updateSettings` props.

```typescriptjsx
import React from 'react';
import {Table, withTableSettings} from '@gravity-ui/uikit';
import type {WithTableSettingsProps} from '@gravity-ui/uikit';

type User = {
  id: string;
  name: string;
  email: string;
  phone: string;
}

const columns = [
  {id: 'name', name: 'Name'},
  {id: 'email', name: 'Email'},
  {id: 'phone', name: 'Phone'},
];

const data: User[] = [
  {id: '1', name: 'John Doe', email: 'john@example.com', phone: '+1234567890'},
  {id: '2', name: 'Jane Smith', email: 'jane@example.com', phone: '+0987654321'},
];

const TableWithSettings = withTableSettings(Table);

function MyTable() {
  const [settings, setSettings] = React.useState<WithTableSettingsProps['settings']>([
    {id: 'name', isSelected: true},
    {id: 'email', isSelected: true},
    {id: 'phone', isSelected: false},
  ]);

  return (
    <TableWithSettings
      data={data}
      columns={columns}
      settings={settings}
      updateSettings={setSettings}
    />
  );
}
```

--------------------------------

### Get Aria Multiselectable Attribute

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/utility-functions.md

Returns the `aria-multiselectable` attribute value for a grid role. This is useful for accessibility, indicating whether multiple items can be selected.

```typescript
export const getAriaMultiselectable = <TData>(
  table: Table<TData>
): boolean
```

```typescript
<table
  role="grid"
  aria-multiselectable={getAriaMultiselectable(table)}
>
  {/* ... */}
</table>
```

--------------------------------

### Configure Container Virtualization

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/configuration.md

Implement container-based virtualization using 'useRowVirtualizer' for performance with large datasets. Ensure the container has a defined height and 'overflow: auto'.

```typescript
const rowVirtualizer = useRowVirtualizer({
  count: table.getRowModel().rows.length,
  estimateSize: () => 35,        // Estimated row height
  overscan: 10,                  // Rows to render outside viewport
  gap: 0,                        // Space between items
  getScrollElement: () => containerRef.current,
  rangeExtractor: getVirtualRowRangeExtractor(tableRef.current),
});

<div ref={containerRef} style={{height: '600px', overflow: 'auto'}}>
  <Table table={table} rowVirtualizer={rowVirtualizer} />
</div>
```

--------------------------------

### Configuring Virtualization for Row Count and Size

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/errors.md

Ensure correct `count` and `estimateSize` parameters are set for `useRowVirtualizer` to prevent the table from appearing empty or rendering only a few rows when virtualization is enabled.

```typescript
const rowVirtualizer = useRowVirtualizer({
  count: table.getRowModel().rows.length,  // ✓ Correct count
  estimateSize: () => 35,  // ✓ Set to actual row height
  overscan: 10,
  getScrollElement: () => containerRef.current,
});
```

--------------------------------

### useSortableList

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/advanced-hooks.md

Manages drag-and-drop sorting with dnd-kit. Provides methods for handling drag start, end, and cancel events, and manages active item state.

```APIDOC
## useSortableList

### Description
Manages drag-and-drop sorting with dnd-kit. Provides methods for handling drag start, end, and cancel events, and manages active item state.

### Signature
```typescript
export const useSortableList = <T = string>(
  options: UseSortableListOptions<T>
): UseSortableListReturn<T>
```

### Parameters
#### Path Parameters
- **items** (T[]) - Required - Array of draggable item IDs/values.
- **onDragEnd** ((event: DragEndEvent) => void) - Optional - Callback fired when drag completes.
- **onDragStart** ((event: DragStartEvent) => void) - Optional - Callback fired when drag starts.
- **onDragCancel** ((event: DragCancelEvent) => void) - Optional - Callback fired when drag is cancelled.
- **enableNesting** (boolean) - Optional - Enable hierarchical drag-and-drop.

### Return Type
```typescript
{
  activeId: string | number | null;
  handleDragStart: (event: DragStartEvent) => void;
  handleDragEnd: (event: DragEndEvent) => void;
  handleDragCancel: (event: DragCancelEvent) => void;
}
```
```

--------------------------------

### Configure Window Virtualization

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/configuration.md

Utilize 'useWindowRowVirtualizer' for virtualization when the table scrolls with the main window. This optimizes rendering by only displaying visible rows.

```typescript
const rowVirtualizer = useWindowRowVirtualizer({
  count: table.getRowModel().rows.length,
  estimateSize: () => 40,
  overscan: 10,
  scrollMargin: bodyRef.current?.offsetTop ?? 0,
});
```

--------------------------------

### Get Header Cell Aria Column Index Signature

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/utility-functions.md

Signature for a function that returns the ARIA column index for header cells, accounting for pinned columns.

```typescript
export const getHeaderCellAriaColIndex = <TData, TValue>(
  header: Header<TData, TValue>
): number
```

--------------------------------

### Get Cell Styles

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/utility-functions.md

Calculates and returns inline CSS properties for cell sizing and positioning. This is essential for correctly rendering cells, especially in virtualized tables.

```typescript
export const getCellStyles = <TData, TValue>(
  cell: Cell<TData, TValue>,
  table: Table<TData>
): React.CSSProperties
```

--------------------------------

### Basic Table Usage

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/api-reference/table.md

Demonstrates the basic usage of the Table component with columns, data, and common props like size and vertical alignment.

```typescript
import React from 'react';
import { Table, useTable } from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface Product {
  id: string;
  name: string;
  price: number;
}

const columns: ColumnDef<Product>[] = [
  { accessorKey: 'name', header: 'Product Name', size: 200 },
  { accessorKey: 'price', header: 'Price ($)', size: 100 },
];

export function ProductTable() {
  const data: Product[] = [
    { id: '1', name: 'Laptop', price: 999 },
    { id: '2', name: 'Mouse', price: 29 },
  ];

  const table = useTable({ columns, data });

  return (
    <Table
      table={table}
      size="m"
      verticalAlign="middle"
      stickyHeader={true}
    />
  );
}
```

--------------------------------

### Table with Settings (Column Visibility & Ordering)

Source: https://github.com/gravity-ui/table/blob/main/_autodocs/QUICK-REFERENCE.md

Integrates table settings for column visibility and ordering using `useTableSettings`. Pass the state and callbacks to `useTable`.

```typescript
import React from 'react';
import {
  Table,
  useTable,
  useTableSettings,
} from '@gravity-ui/table';
import type { ColumnDef } from '@gravity-ui/table/tanstack';

interface User {
  id: string;
  name: string;
  email: string;
}

export function TableWithSettings() {
  const columns: ColumnDef<User>[] = [
    { accessorKey: 'name', header: 'Name', size: 200 },
    { accessorKey: 'email', header: 'Email', size: 250 },
  ];

  const data: User[] = [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
  ];

  const {state, callbacks} = useTableSettings();

  const table = useTable({
    columns,
    data,
    state,
    onColumnVisibilityChange: callbacks.onColumnVisibilityChange,
    onColumnOrderChange: callbacks.onColumnOrderChange,
  });

  return <Table table={table} />;
}

```