@sberbusiness/triplex-next-mcp-server 1.42.0-beta → 1.44.0-beta

package/bundle/components/TableBasic.md

@@ -0,0 +1,2294 @@
+---
+component: TableBasic
+category: Table
+related: [MasterTable, ListTableItem, LoaderScreen, LoaderMiddle, Text]
+tokens:
+  - --triplex-next-TableBasic-Header_Background
+  - --triplex-next-TableBasic-Color
+  - --triplex-next-TableBasic-Background_Hover
+  - --triplex-next-TableBasic-Background_Selected
+stories: stories/TableBasic/TableBasic.stories.tsx
+version: "1.0"
+---
+
+# TableBasic
+
+## Назначение
+
+Табличное представление данных: `<table>` с шапкой из `columns`, строками из
+`data` и подвалом, в котором показывается заглушка пустого состояния или лоадер.
+Обвязку вокруг таблицы — панель чипов, фильтры, настройки колонок, футер
+выделения и пагинацию — добавляет родительский `MasterTable`; из его контекста
+`TableBasic` берёт состояние загрузки и публикует в него свой набор колонок.
+
+Используй когда: нужен структурированный набор данных в строках и столбцах —
+реестр документов, выписка, список операций.
+
+Не используй когда:
+- нужен список карточек с собственной вёрсткой строки, свайпом или
+  drag-and-drop — бери `List` / `ListTableItem`;
+- таблица должна работать без `MasterTable`. Формально это возможно (контекст
+  имеет значения по умолчанию), но тогда не работают `loading` и настройки
+  колонок — это не поддерживаемый сценарий.
+
+---
+
+## Варианты и props
+
+`TableBasic` доступен и напрямую, и как `MasterTable.TableBasic` — это один и
+тот же компонент.
+
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `columns` | `ITableBasicColumn[]` | Описание столбцов: ключ поля, заголовок, выравнивание, ширина, сортировка |
+| `data` | `ITableBasicRow[]` | Строки таблицы. Пустой массив — рендерится `renderNoData` |
+| `renderNoData` | `() => React.JSX.Element` | Заглушка для пустой таблицы. Обязателен даже там, где данные всегда есть |
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `renderNoColumns` | `() => React.ReactNode` | — | Заглушка вместо таблицы, когда все `columns` скрыты (`hidden`) |
+| `highlightRowOnHover` | `boolean` | `false` | Подсветка строки под курсором |
+| `onOrderBy` | `(order: ISortOrder) => void` | — | Обработчик сортировки. Включает кнопку сортировки у колонок с `orderDirection` |
+| `onClickRow` | `(rowKey: string) => void` | — | Клик по строке. Включает `cursor: pointer` и подсветку при наведении |
+| `headless` | `boolean` | `false` | Скрыть шапку таблицы |
+| `...HTMLTableElementAttributes` | — | — | Стандартные атрибуты `<table>`, включая `className`; `ref` — на `<table>` (в ветке `renderNoColumns` таблицы нет, ref пустой) |
+
+### `ITableBasicColumn`
+
+| Поле | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `fieldKey` | `string` | — | Ключ в `rowData`, значение которого выводится в ячейке |
+| `label` | `string \| React.JSX.Element` | — | Содержимое заголовка |
+| `title` | `string` | — | Нативный `title` у `<th>` |
+| `orderDirection` | `EOrderDirection` | — | Текущее направление. Наличие значения + `onOrderBy` включают сортировку |
+| `horizontalAlign` | `EHorizontalAlign` | `LEFT` | Горизонтальное выравнивание |
+| `verticalAlign` | `EVerticalAlign` | `BASELINE` для `TEXT`, `TOP` для остальных | Вертикальное выравнивание |
+| `cellType` | `ECellType` | `TEXT` | Отступы ячейки и способ вывода контента |
+| `width` | `string \| number` | — | У `<th>` задаёт `min/max/width`, у `<td>` — только `width` |
+| `hidden` | `boolean` | `false` | Столбец не рендерится ни в шапке, ни в строках |
+| `renderCell` | `(param: any) => React.ReactNode` | — | Кастомный рендер значения ячейки |
+| `dataAttributes` / `ariaAttributes` | `TDataHTMLAttributes` / `TAriaHTMLAttributes` | — | Ключи без префикса: `{label: "..."}` → `aria-label="..."` |
+
+### `ITableBasicRow`
+
+| Поле | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `rowKey` | `string` | — | React-key строки, он же аргумент `onClickRow` |
+| `rowData` | `any` | — | Объект «ключ колонки → значение ячейки» |
+| `rowLayout` | `Record<string, ITableRowCellSpanProps>` | — | `rowSpan` / `colSpan` по ключу колонки |
+| `selected` | `boolean` | `false` | Подсветка выбранной строки. Компонент сам флаг не проставляет |
+| `dataAttributes` / `ariaAttributes` | `TDataHTMLAttributes` / `TAriaHTMLAttributes` | — | Атрибуты `<tr>`; `test-id` дополнительно строит `data-test-id` ячеек |
+
+### Ограничения по типам ячеек
+
+- `ECellType.TEXT` (по умолчанию) — значение оборачивается в `Text` размера `B3`.
+- `ECellType.COMPONENTS` и `ECellType.CHECKBOX` — разметка выводится как есть,
+  меняются только внутренние отступы ячейки.
+
+---
+
+## Дизайн-токены
+
+```
+--triplex-next-TableBasic-Header_Background
+--triplex-next-TableBasic-Color
+--triplex-next-TableBasic-Background_Hover
+--triplex-next-TableBasic-Background_Selected
+```
+
+Остальные токены группы `TableBasic-*` (`TableFooter_*`, `TableBasicSettings_*`)
+принадлежат соседним компонентам семейства, а не самому `TableBasic`.
+
+---
+
+## Инварианты
+
+- **Корневой DOM — `<div>` со стилями таблицы, а `ref` и остальные HTML-атрибуты
+  идут на вложенный `<table>`.** Так исторически ведёт себя `className`, и
+  `forwardRef` добавлен туда же. Переносить их на корневой `<div>` — breaking
+  change. Проброс не безусловный: когда все колонки скрыты и задан
+  `renderNoColumns`, вместо таблицы рендерится заглушка и `ref.current` остаётся
+  `null` — измерять таблицу по ref в этом состоянии нельзя.
+- **`renderNoData` обязателен.** Сделать его опциональным можно только вместе с
+  решением, что рендерится при пустых данных без него.
+- **Ячейка рендерится, только если ключ колонки есть в `rowData`.** Колонка без
+  соответствующего ключа не даёт `<td>` вовсе — строка окажется короче шапки.
+  Для пустой ячейки передавай `null`, а не отсутствие ключа.
+- **Пустое значение ячейки заменяется плейсхолдером `---`.** Проверка falsy,
+  поэтому `0`, `""` и `false` тоже дают `---`. Менять это правило —
+  наблюдаемое изменение поведения.
+- **Компонент не сортирует данные.** `onOrderBy` вызывается со **следующим**
+  направлением по циклу `none → asc → desc → none`; сортировку выполняет
+  потребитель и возвращает новый `orderDirection` в колонке.
+- **Колонки публикуются в `MasterTableContext`** через `useEffect` с
+  `isEqual`-сравнением — на нём держатся настройки колонок
+  (`TableBasicSettings` / `ColumnSettings`). Собирай `columns` стабильно
+  (по возможности вне рендера), иначе таблица будет лишний раз обновлять
+  контекст.
+- **`loading` приходит только из контекста `MasterTable`**, собственного prop'а
+  у таблицы нет.
+- **Класс `selected` на `<tr>` выставляется дважды** — хешированный из
+  CSS-модуля и глобальный `"selected"`. Глобальный оставлен для внешних стилей
+  и тестов, удалять нельзя.
+
+---
+
+## Accessibility
+
+- Разметка нативная: `<table>` / `<thead>` / `<tbody>` / `<th>` / `<td>`,
+  скринридер читает её как таблицу без дополнительных ролей.
+- Собственных `aria-*` компонент не хардкодит — библиотека мультиязычная.
+  `aria-label` таблицы передаётся через props (уходит на `<table>`), атрибуты
+  столбца и строки — через `ariaAttributes` (ключи без префикса `aria-`).
+- **Сортировка не доступна с клавиатуры.** Заголовок с сортировкой — это
+  `<span>` с `onClick`, без `role="button"`, `tabIndex` и обработки
+  `Enter` / `Space`; `aria-sort` не выставляется. То же с `onClickRow`: клик по
+  `<tr>` не имеет клавиатурного эквивалента. Если нужен доступный вариант —
+  клади в ячейку интерактивный элемент через `renderCell`.
+- Иконка направления сортировки в состоянии `NONE` видна только при наведении на
+  заголовок — состояние сортировки передаётся только цветом и формой иконки.
+
+---
+
+## Связанные компоненты
+
+- `MasterTable` — родитель семейства: провайдер контекста (`loading`, `columns`)
+  и контейнер для панелей. Предоставляет `MasterTable.TableBasic`,
+  `MasterTable.FilterPanel`, `MasterTable.ChipPanel`,
+  `MasterTable.TableBasicSettings`, `MasterTable.TableFooter`,
+  `MasterTable.PaginationPanel`, `MasterTable.NoColumns`.
+- `ListTableItem` — альтернатива для табличного списка, когда строка это
+  карточка со своей вёрсткой, свайпом и контролами.
+- `LoaderScreen` — рендерится поверх таблицы, когда `loading` пришёл из
+  контекста, а данные уже есть.
+- `LoaderMiddle` — рендерится в подвале, когда идёт загрузка и данных ещё нет.
+- `Text` — в него оборачивается содержимое заголовков и ячеек типа
+  `ECellType.TEXT`.
+
+---
+
+## Stories
+
+Основные истории: `stories/TableBasic/TableBasic.stories.tsx`
+Файлы примеров: `stories/TableBasic/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль загрузки, шапки, подсветки, данных, скролла и кнопок |
+| `Default` | `Default.tsx` | Минимальная таблица: `columns`, `data`, `renderNoData` |
+| `Alignments` | `Alignments.tsx` | `horizontalAlign` и `verticalAlign` и их значения по умолчанию |
+| `CellTypes` | `CellTypes.tsx` | `ECellType.TEXT` / `COMPONENTS` / `CHECKBOX` |
+| `Sorting` | `Sorting.tsx` | Цикл `none → asc → desc → none`, сортировка на стороне потребителя |
+| `Headless` | `Headless.tsx` | Таблица без шапки |
+| `HighlightRowOnHover` | `HighlightRowOnHover.tsx` | Подсветка строки под курсором |
+| `ClickableRows` | `ClickableRows.tsx` | `onClickRow` и флаг `selected` в данных строки |
+| `NoData` | `NoData.tsx` | Заглушка пустой таблицы |
+| `NoColumns` | `NoColumns.tsx` | Заглушка, когда все колонки скрыты |
+| `Loading` | `Loading.tsx` | Загрузка поверх данных и загрузка при пустой таблице |
+| `TableSpan` | `TableSpan.tsx` | Объединение ячеек через `rowLayout` |
+| `TableSettingsColumn` | `TableSettingsColumn.tsx` | Настройка видимости и порядка колонок |
+| `TableSettingsColumnExtended` | `TableSettingsColumnExtended.tsx` | Настройка не только колонок, но и блоков внутри колонки |
+| `TableWithPagination` | `TableWithPagination.tsx` | Таблица с `Pagination` при известном количестве данных |
+| `TableWithPaginationLoading` | `TableWithPaginationLoading.tsx` | Фильтры, таблица и пагинация в состоянии загрузки |
+| `TableWithPaginationExtended` | `TableWithPaginationExtended.tsx` | Таблица с `PaginationExtended` при неизвестном количестве данных |
+| `Example: production` | `ExampleProduction.tsx` | Композиция, приближённая к production: чипы-сегменты, фильтры, теги |
+| `VisualTests` | `VisualTests.tsx` | Статичные визуальные состояния в одном кадре |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-08-27 | Создан документ. AI-рефакторинг: `TableBasic` получил `forwardRef` на `<table>`, JSDoc на всех публичных полях, разбор подвала по состояниям, удалён неиспользуемый `TableBasicAdaptive.module.less`. Stories переведены на modern pattern, добавлены unit-тесты (46) |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/TableBasic/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { ITableBasicColumn, ITableBasicRow, MasterTable } from "@sberbusiness/triplex-next";
+
+const columns: ITableBasicColumn[] = [
+    { fieldKey: "number", label: "Номер", title: "Номер", width: 100 },
+    { fieldKey: "recipient", label: "Получатель", title: "Получатель" },
+    { fieldKey: "sum", label: "Сумма", title: "Сумма", width: 140 },
+    { fieldKey: "status", label: "Статус", title: "Статус", width: 140 },
+];
+
+const data: ITableBasicRow[] = [
+    { rowKey: "1350", rowData: { number: "1350", recipient: "ООО Ромашка", sum: "9 450,00", status: "Создан" } },
+    { rowKey: "1351", rowData: { number: "1351", recipient: "ИП Иванов И. И.", sum: "18 914,00", status: "Подписан" } },
+    { rowKey: "1352", rowData: { number: "1352", recipient: "ООО Росинка", sum: "28 392,00", status: "Оплачен" } },
+];
+
+export const Default = () => (
+    <MasterTable>
+        <MasterTable.TableBasic columns={columns} data={data} renderNoData={() => <div>Нет данных</div>} />
+    </MasterTable>
+);
+```
+
+### Alignments
+
+`stories/TableBasic/examples/Alignments.tsx`
+
+```tsx
+import React from "react";
+import {
+    EHorizontalAlign,
+    EVerticalAlign,
+    ITableBasicColumn,
+    ITableBasicRow,
+    MasterTable,
+} from "@sberbusiness/triplex-next";
+
+const columns: ITableBasicColumn[] = [
+    {
+        fieldKey: "left",
+        label: "Слева (по умолчанию)",
+        horizontalAlign: EHorizontalAlign.LEFT,
+        verticalAlign: EVerticalAlign.TOP,
+    },
+    {
+        fieldKey: "center",
+        label: "По центру",
+        horizontalAlign: EHorizontalAlign.CENTER,
+        verticalAlign: EVerticalAlign.BOTTOM,
+    },
+];
+
+const data: ITableBasicRow[] = [
+    {
+        rowKey: "1",
+        rowData: {
+            left: "Выравнивание по верхнему краю ячейки. Текст занимает несколько строк, чтобы разница по вертикали была видна.",
+            center: "По нижнему краю ячейки",
+        },
+    },
+    {
+        rowKey: "2",
+        rowData: {
+            left: "Ещё одна многострочная ячейка, задающая высоту строки таблицы для наглядности примера.",
+            center: "По нижнему краю ячейки",
+        },
+    },
+];
+
+export const Alignments = () => (
+    <MasterTable>
+        <MasterTable.TableBasic columns={columns} data={data} renderNoData={() => <div>Нет данных</div>} />
+    </MasterTable>
+);
+```
+
+### CellTypes
+
+`stories/TableBasic/examples/CellTypes.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Button,
+    Checkbox,
+    ECellType,
+    EButtonTheme,
+    EComponentSize,
+    ITableBasicColumn,
+    ITableBasicRow,
+    MasterTable,
+} from "@sberbusiness/triplex-next";
+
+const rows = [
+    { rowKey: "1350", number: "1350", recipient: "ООО Ромашка" },
+    { rowKey: "1351", number: "1351", recipient: "ИП Иванов И. И." },
+];
+
+// Колонки собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const columns: ITableBasicColumn[] = [
+    { fieldKey: "checkbox", cellType: ECellType.CHECKBOX, label: "", width: 48 },
+    { fieldKey: "number", cellType: ECellType.TEXT, label: "Номер (text)", width: 120 },
+    { fieldKey: "recipient", cellType: ECellType.TEXT, label: "Получатель (text)" },
+    { fieldKey: "action", cellType: ECellType.COMPONENTS, label: "Действие (components)", width: 180 },
+];
+
+export const CellTypes = () => {
+    const [checkedRows, setCheckedRows] = useState<string[]>([]);
+
+    const toggleRow = (rowKey: string, checked: boolean) => {
+        setCheckedRows((prev) => (checked ? [...prev, rowKey] : prev.filter((key) => key !== rowKey)));
+    };
+
+    const data: ITableBasicRow[] = rows.map((row) => ({
+        rowKey: row.rowKey,
+        selected: checkedRows.includes(row.rowKey),
+        rowData: {
+            checkbox: (
+                <Checkbox
+                    checked={checkedRows.includes(row.rowKey)}
+                    onChange={(event) => toggleRow(row.rowKey, event.target.checked)}
+                    aria-label={`Выбрать строку ${row.number}`}
+                />
+            ),
+            number: row.number,
+            recipient: row.recipient,
+            action: (
+                <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => {}}>
+                    Напечатать
+                </Button>
+            ),
+        },
+    }));
+
+    return (
+        <MasterTable>
+            <MasterTable.TableBasic columns={columns} data={data} renderNoData={() => <div>Нет данных</div>} />
+        </MasterTable>
+    );
+};
+```
+
+### Sorting
+
+`stories/TableBasic/examples/Sorting.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    EHorizontalAlign,
+    EOrderDirection,
+    ISortOrder,
+    ITableBasicColumn,
+    ITableBasicRow,
+    MasterTable,
+} from "@sberbusiness/triplex-next";
+
+const rows = [
+    { rowKey: "1350", number: "1350", recipient: "ООО Ромашка", sum: 9450 },
+    { rowKey: "1351", number: "1351", recipient: "ИП Иванов И. И.", sum: 18914 },
+    { rowKey: "1352", number: "1352", recipient: "ООО Росинка", sum: 4200 },
+];
+
+export const Sorting = () => {
+    // Направление переключается по циклу none → asc → desc → none, следующее значение приходит в onOrderBy.
+    const [order, setOrder] = useState<ISortOrder>({ fieldKey: "sum", direction: EOrderDirection.NONE });
+
+    const getDirection = (fieldKey: string) => (order.fieldKey === fieldKey ? order.direction : EOrderDirection.NONE);
+
+    const columns: ITableBasicColumn[] = [
+        { fieldKey: "number", label: "Номер", width: 120, orderDirection: getDirection("number") },
+        { fieldKey: "recipient", label: "Получатель (без сортировки)" },
+        {
+            fieldKey: "sum",
+            label: "Сумма",
+            width: 160,
+            horizontalAlign: EHorizontalAlign.RIGHT,
+            orderDirection: getDirection("sum"),
+        },
+    ];
+
+    const sortedRows = [...rows].sort((a, b) => {
+        if (order.direction === EOrderDirection.NONE) {
+            return 0;
+        }
+
+        const sign = order.direction === EOrderDirection.ASC ? 1 : -1;
+
+        return order.fieldKey === "sum" ? sign * (a.sum - b.sum) : sign * a.number.localeCompare(b.number);
+    });
+
+    const data: ITableBasicRow[] = sortedRows.map((row) => ({
+        rowKey: row.rowKey,
+        rowData: { number: row.number, recipient: row.recipient, sum: row.sum.toLocaleString("ru-RU") },
+    }));
+
+    return (
+        <MasterTable>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={data}
+                onOrderBy={setOrder}
+                renderNoData={() => <div>Нет данных</div>}
+            />
+        </MasterTable>
+    );
+};
+```
+
+### Headless
+
+`stories/TableBasic/examples/Headless.tsx`
+
+```tsx
+import React from "react";
+import { ITableBasicColumn, ITableBasicRow, MasterTable } from "@sberbusiness/triplex-next";
+
+const columns: ITableBasicColumn[] = [
+    { fieldKey: "number", label: "Номер", width: 100 },
+    { fieldKey: "recipient", label: "Получатель" },
+    { fieldKey: "sum", label: "Сумма", width: 140 },
+];
+
+const data: ITableBasicRow[] = [
+    { rowKey: "1350", rowData: { number: "1350", recipient: "ООО Ромашка", sum: "9 450,00" } },
+    { rowKey: "1351", rowData: { number: "1351", recipient: "ИП Иванов И. И.", sum: "18 914,00" } },
+];
+
+export const Headless = () => (
+    <MasterTable>
+        <MasterTable.TableBasic headless columns={columns} data={data} renderNoData={() => <div>Нет данных</div>} />
+    </MasterTable>
+);
+```
+
+### HighlightRowOnHover
+
+`stories/TableBasic/examples/HighlightRowOnHover.tsx`
+
+```tsx
+import React from "react";
+import { ITableBasicColumn, ITableBasicRow, MasterTable } from "@sberbusiness/triplex-next";
+
+const columns: ITableBasicColumn[] = [
+    { fieldKey: "number", label: "Номер", width: 100 },
+    { fieldKey: "recipient", label: "Получатель" },
+    { fieldKey: "sum", label: "Сумма", width: 140 },
+];
+
+const data: ITableBasicRow[] = [
+    { rowKey: "1350", rowData: { number: "1350", recipient: "ООО Ромашка", sum: "9 450,00" } },
+    { rowKey: "1351", rowData: { number: "1351", recipient: "ИП Иванов И. И.", sum: "18 914,00" } },
+    { rowKey: "1352", rowData: { number: "1352", recipient: "ООО Росинка", sum: "28 392,00" } },
+];
+
+export const HighlightRowOnHover = () => (
+    <MasterTable>
+        <MasterTable.TableBasic
+            highlightRowOnHover
+            columns={columns}
+            data={data}
+            renderNoData={() => <div>Нет данных</div>}
+        />
+    </MasterTable>
+);
+```
+
+### ClickableRows
+
+`stories/TableBasic/examples/ClickableRows.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ITableBasicColumn, ITableBasicRow, MasterTable } from "@sberbusiness/triplex-next";
+
+const columns: ITableBasicColumn[] = [
+    { fieldKey: "number", label: "Номер", width: 100 },
+    { fieldKey: "recipient", label: "Получатель" },
+    { fieldKey: "sum", label: "Сумма", width: 140 },
+];
+
+const rows = [
+    { rowKey: "1350", number: "1350", recipient: "ООО Ромашка", sum: "9 450,00" },
+    { rowKey: "1351", number: "1351", recipient: "ИП Иванов И. И.", sum: "18 914,00" },
+    { rowKey: "1352", number: "1352", recipient: "ООО Росинка", sum: "28 392,00" },
+];
+
+export const ClickableRows = () => {
+    const [selectedRowKey, setSelectedRowKey] = useState("1351");
+
+    // Заданный onClickRow сам включает подсветку строки при наведении, highlightRowOnHover не нужен.
+    const data: ITableBasicRow[] = rows.map((row) => ({
+        rowKey: row.rowKey,
+        selected: row.rowKey === selectedRowKey,
+        rowData: { number: row.number, recipient: row.recipient, sum: row.sum },
+    }));
+
+    return (
+        <MasterTable>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={data}
+                onClickRow={setSelectedRowKey}
+                renderNoData={() => <div>Нет данных</div>}
+            />
+        </MasterTable>
+    );
+};
+```
+
+### NoData
+
+`stories/TableBasic/examples/NoData.tsx`
+
+```tsx
+import React from "react";
+import { EmptytableSysIcon96 } from "@sberbusiness/icons-next";
+import {
+    EFontType,
+    EFontWeightTitle,
+    ETextSize,
+    ETitleSize,
+    Gap,
+    ITableBasicColumn,
+    MasterTable,
+    Text,
+    Title,
+} from "@sberbusiness/triplex-next";
+
+const columns: ITableBasicColumn[] = [
+    { fieldKey: "number", label: "Номер", width: 100 },
+    { fieldKey: "recipient", label: "Получатель" },
+    { fieldKey: "sum", label: "Сумма", width: 140 },
+];
+
+const renderNoData = () => (
+    <>
+        <EmptytableSysIcon96 />
+        <Gap size={8} />
+        <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+            Пока нет документов
+        </Title>
+        <Gap size={12} />
+        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+            Здесь появятся платёжные поручения, когда вы их создадите.
+        </Text>
+    </>
+);
+
+export const NoData = () => (
+    <MasterTable>
+        <MasterTable.TableBasic columns={columns} data={[]} renderNoData={renderNoData} />
+    </MasterTable>
+);
+```
+
+### NoColumns
+
+`stories/TableBasic/examples/NoColumns.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EFontWeightTitle,
+    ETextSize,
+    ETitleSize,
+    Gap,
+    ITableBasicColumn,
+    ITableBasicRow,
+    MasterTable,
+    Text,
+    Title,
+} from "@sberbusiness/triplex-next";
+
+const defaultColumns: ITableBasicColumn[] = [
+    { fieldKey: "number", label: "Номер", width: 100 },
+    { fieldKey: "recipient", label: "Получатель" },
+    { fieldKey: "sum", label: "Сумма", width: 140 },
+];
+
+const data: ITableBasicRow[] = [
+    { rowKey: "1350", rowData: { number: "1350", recipient: "ООО Ромашка", sum: "9 450,00" } },
+];
+
+export const NoColumns = () => {
+    // Все колонки скрыты: renderNoColumns вызывается вместо таблицы.
+    const [columns, setColumns] = useState<ITableBasicColumn[]>(
+        defaultColumns.map((column) => ({ ...column, hidden: true })),
+    );
+
+    const renderNoColumns = () => (
+        <MasterTable.NoColumns>
+            <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+                Все колонки таблицы скрыты
+            </Title>
+            <Gap size={12} />
+            <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                Выберите нужные вам для отображения колонки в настройках таблицы.
+            </Text>
+            <Gap size={24} />
+            <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD} onClick={() => setColumns(defaultColumns)}>
+                Сбросить настройки
+            </Button>
+        </MasterTable.NoColumns>
+    );
+
+    return (
+        <MasterTable>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={data}
+                renderNoData={() => <div>Нет данных</div>}
+                renderNoColumns={renderNoColumns}
+            />
+        </MasterTable>
+    );
+};
+```
+
+### Loading
+
+`stories/TableBasic/examples/Loading.tsx`
+
+```tsx
+import React from "react";
+import { ETextSize, Gap, ITableBasicColumn, ITableBasicRow, MasterTable, Text } from "@sberbusiness/triplex-next";
+
+const columns: ITableBasicColumn[] = [
+    { fieldKey: "number", label: "Номер", width: 100 },
+    { fieldKey: "recipient", label: "Получатель" },
+    { fieldKey: "sum", label: "Сумма", width: 140 },
+];
+
+const data: ITableBasicRow[] = [
+    { rowKey: "1350", rowData: { number: "1350", recipient: "ООО Ромашка", sum: "9 450,00" } },
+    { rowKey: "1351", rowData: { number: "1351", recipient: "ИП Иванов И. И.", sum: "18 914,00" } },
+];
+
+// Состояние загрузки задаётся на MasterTable, TableBasic берёт его из контекста.
+export const Loading = () => (
+    <>
+        <Text tag="div" size={ETextSize.B3}>
+            Загрузка поверх уже показанных данных
+        </Text>
+        <Gap size={12} />
+        <MasterTable loading>
+            <MasterTable.TableBasic columns={columns} data={data} renderNoData={() => <div>Нет данных</div>} />
+        </MasterTable>
+        <Gap size={24} />
+        <Text tag="div" size={ETextSize.B3}>
+            Загрузка при пустой таблице
+        </Text>
+        <Gap size={12} />
+        <MasterTable loading>
+            <MasterTable.TableBasic columns={columns} data={[]} renderNoData={() => <div>Нет данных</div>} />
+        </MasterTable>
+    </>
+);
+```
+
+### TableSpan
+
+`stories/TableBasic/examples/TableSpan.tsx`
+
+```tsx
+import React from "react";
+import {
+    Amount,
+    EHorizontalAlign,
+    EVerticalAlign,
+    MasterTable,
+    ITableBasicColumn,
+    ITableBasicRow,
+} from "@sberbusiness/triplex-next";
+
+// Колонки и данные собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const backendData: ITableBasicRow[] = [
+    {
+        rowKey: "637",
+        rowData: {
+            number: "637",
+            sender: "ООО Ромашка",
+            sum: "1337,00",
+            status: "Ячейки первой и второй строки объединены по вертикали.",
+        },
+        rowLayout: {
+            status: { rowSpan: 2 },
+        },
+    },
+    {
+        rowKey: "638",
+        rowData: {
+            number: "638",
+            sender: "ООО Росинка",
+            sum: "420,00",
+        },
+    },
+    {
+        rowKey: "639",
+        rowData: {
+            number: "639",
+            sender: "Ячейки второго и третьего столбца объединены по горизонтали.",
+            status: "Исполнено",
+        },
+        rowLayout: {
+            sender: { colSpan: 2 },
+        },
+    },
+];
+
+const columns: ITableBasicColumn[] = [
+    {
+        fieldKey: "number",
+        label: "Номер",
+        width: 65,
+    },
+    {
+        fieldKey: "sender",
+        label: "Отправитель",
+    },
+    {
+        fieldKey: "sum",
+        label: "Сумма",
+        horizontalAlign: EHorizontalAlign.RIGHT,
+        renderCell: (fieldValue) => fieldValue && <Amount value={fieldValue} currency={"RUB"} />,
+    },
+    {
+        fieldKey: "status",
+        label: "Статус",
+        verticalAlign: EVerticalAlign.MIDDLE,
+        width: 150,
+    },
+];
+
+export const TableSpan = () => (
+    <div style={{ maxWidth: "600px" }}>
+        <MasterTable>
+            <MasterTable.TableBasic columns={columns} data={backendData} renderNoData={() => <div>Нет данных</div>} />
+        </MasterTable>
+    </div>
+);
+```
+
+### TableSettingsColumn
+
+`stories/TableBasic/examples/TableSettingsColumn.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EmptytableSysIcon96 } from "@sberbusiness/icons-next";
+import {
+    Amount,
+    Button,
+    Checkbox,
+    ColumnSettings,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EFontWeightTitle,
+    EHorizontalAlign,
+    ETextSize,
+    ETitleSize,
+    Gap,
+    MasterTable,
+    Text,
+    Title,
+    ITableBasicColumn,
+    ITableBasicRow,
+} from "@sberbusiness/triplex-next";
+
+const renderCounterpartyDetails = (purpose: string, account: string, tax: string) => (
+    <>
+        <div>
+            {purpose}
+            <br />
+            {account}
+        </div>
+        <Gap size={4} />
+        <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+            {tax}
+        </Text>
+    </>
+);
+
+const renderNoData = () => (
+    <>
+        <EmptytableSysIcon96 />
+        <Gap size={8} />
+        <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+            Текст заголовка
+        </Title>
+        <Gap size={12} />
+        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+            Нет данных, но можно предложить какие-то действия для заполнения таблицы
+        </Text>
+        <Gap size={24} />
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                Button text
+            </Button>
+            <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                Button text
+            </Button>
+        </div>
+    </>
+);
+
+const renderNoColumns = (onReset: () => void) => (
+    <MasterTable.NoColumns>
+        <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+            Все колонки таблицы скрыты
+        </Title>
+        <Gap size={12} />
+        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+            Выберите нужные вам для отображения колонки в настройках таблицы.
+        </Text>
+        <Gap size={24} />
+        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD} onClick={onReset}>
+            Сбросить настройки
+        </Button>
+    </MasterTable.NoColumns>
+);
+
+// Колонки и данные собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const defaultColumns: ITableBasicColumn[] = [
+    {
+        fieldKey: "number",
+        label: "Номер",
+    },
+    {
+        fieldKey: "value",
+        label: "Получатель",
+    },
+    {
+        fieldKey: "sum",
+        horizontalAlign: EHorizontalAlign.RIGHT,
+        label: "Сумма",
+        renderCell: (fieldValue) => fieldValue && <Amount value={fieldValue} currency="RUB" />,
+    },
+    {
+        fieldKey: "status",
+        label: "Статус",
+    },
+];
+
+const data: ITableBasicRow[] = Array.from({ length: 5 }, (_, index) => ({
+    rowData: {
+        number: 1397450 + index,
+        status: "Исполнено",
+        sum: "1220000000",
+        value: renderCounterpartyDetails(
+            "Платежное поручение ООО Ромашка",
+            "40702 810 2 0527 5000000",
+            "В том числе НДС 20%",
+        ),
+    },
+    rowKey: `table-basic-row-${index}`,
+}));
+
+export const TableSettingsColumn = () => {
+    const [columns, setColumns] = useState(defaultColumns);
+    const [settingsDropdownOpened, setSettingsDropdownOpened] = useState(false);
+
+    const resetColumns = () => {
+        setColumns(defaultColumns);
+    };
+
+    const showAllColumns = () => {
+        setColumns(
+            columns.map((column) => {
+                if (column.hidden) {
+                    return { ...column, hidden: false };
+                }
+                return column;
+            }),
+        );
+    };
+
+    const toggleColumn = (fieldKey: string, checked: boolean) => {
+        setColumns(
+            columns.map((column) => {
+                if (column.fieldKey === fieldKey) {
+                    return { ...column, hidden: !checked };
+                }
+                return column;
+            }),
+        );
+    };
+
+    const renderColumns = () => (
+        <ColumnSettings.SortableList columns={columns} onColumnsChange={setColumns}>
+            {columns.map((column) => (
+                <ColumnSettings.SortableList.Item key={column.fieldKey} id={column.fieldKey}>
+                    <Checkbox
+                        checked={column.hidden !== true}
+                        onChange={(event) => toggleColumn(column.fieldKey, event.target.checked)}
+                    >
+                        {column.label}
+                    </Checkbox>
+                </ColumnSettings.SortableList.Item>
+            ))}
+        </ColumnSettings.SortableList>
+    );
+
+    return (
+        <MasterTable>
+            <MasterTable.ChipPanel>
+                <MasterTable.ChipPanel.Links>
+                    <MasterTable.TableBasicSettings
+                        linkTitle={settingsDropdownOpened ? "Скрыть настройки" : "Настройки"}
+                        opened={settingsDropdownOpened}
+                        setOpened={setSettingsDropdownOpened}
+                    >
+                        <MasterTable.TableBasicSettings.Header>Показать столбцы</MasterTable.TableBasicSettings.Header>
+
+                        <MasterTable.TableBasicSettings.Body>
+                            <ColumnSettings>{renderColumns()}</ColumnSettings>
+                        </MasterTable.TableBasicSettings.Body>
+
+                        <MasterTable.TableBasicSettings.Footer>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={showAllColumns}>
+                                Выбрать все
+                            </Button>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={resetColumns}>
+                                Сбросить настройки
+                            </Button>
+                        </MasterTable.TableBasicSettings.Footer>
+                    </MasterTable.TableBasicSettings>
+                </MasterTable.ChipPanel.Links>
+            </MasterTable.ChipPanel>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={data}
+                renderNoData={renderNoData}
+                renderNoColumns={() => renderNoColumns(resetColumns)}
+            />
+        </MasterTable>
+    );
+};
+```
+
+### TableSettingsColumnExtended
+
+`stories/TableBasic/examples/TableSettingsColumnExtended.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EmptytableSysIcon96 } from "@sberbusiness/icons-next";
+import {
+    Amount,
+    Button,
+    Checkbox,
+    ColumnSettings,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EFontWeightTitle,
+    EHorizontalAlign,
+    ETextSize,
+    ETitleSize,
+    Gap,
+    MasterTable,
+    Text,
+    Title,
+    ITableBasicColumn,
+    ITableBasicRow,
+} from "@sberbusiness/triplex-next";
+
+const renderNoData = () => (
+    <>
+        <EmptytableSysIcon96 />
+        <Gap size={8} />
+        <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+            Текст заголовка
+        </Title>
+        <Gap size={12} />
+        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+            Нет данных, но можно предложить какие-то действия для заполнения таблицы
+        </Text>
+        <Gap size={24} />
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                Button text
+            </Button>
+            <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                Button text
+            </Button>
+        </div>
+    </>
+);
+
+const renderNoColumns = (onReset: () => void) => (
+    <MasterTable.NoColumns>
+        <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+            Все колонки таблицы скрыты
+        </Title>
+        <Gap size={12} />
+        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+            Выберите нужные вам для отображения колонки в настройках таблицы.
+        </Text>
+        <Gap size={24} />
+        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD} onClick={onReset}>
+            Сбросить настройки
+        </Button>
+    </MasterTable.NoColumns>
+);
+
+// Колонки собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const defaultColumns: ITableBasicColumn[] = [
+    {
+        fieldKey: "number",
+        label: "Номер",
+    },
+    {
+        fieldKey: "value",
+        label: "Получатель",
+    },
+    {
+        fieldKey: "sum",
+        horizontalAlign: EHorizontalAlign.RIGHT,
+        label: "Сумма",
+        renderCell: (fieldValue) => fieldValue && <Amount value={fieldValue} currency="RUB" />,
+    },
+    {
+        fieldKey: "status",
+        label: "Статус",
+    },
+];
+
+interface IValueColumnOptions {
+    showCounterparty: boolean;
+    showNumber: boolean;
+    showNDS: boolean;
+}
+
+const initiateValueColumnOptions = (defaultChecked: boolean): IValueColumnOptions => ({
+    showCounterparty: defaultChecked,
+    showNumber: defaultChecked,
+    showNDS: defaultChecked,
+});
+
+const defaultValueColumnOptions = initiateValueColumnOptions(true);
+
+const mapValueColumnOptionKeyToName: Record<string, string> = {
+    showCounterparty: "Получатель",
+    showNumber: "Номер счета",
+    showNDS: "НДС",
+};
+
+/**
+ * Возвращает данные для таблицы.
+ * @param showCounterparty - показать блок Получатель в столбце Значение.
+ * @param showNumber - показать блок Номер счета в столбце Значение.
+ * @param showNDS - показать блок НДС счета в столбце Значение.
+ */
+const getData = ({ showCounterparty, showNumber, showNDS }: IValueColumnOptions): ITableBasicRow[] =>
+    Array.from({ length: 5 }, (_, index) => ({
+        rowData: {
+            number: 1397450 + index,
+            status: "Исполнено",
+            sum: "1220000000",
+            value: (
+                <>
+                    {(showCounterparty || showNumber) && (
+                        <>
+                            <div>
+                                {showCounterparty && (
+                                    <>
+                                        Платежное поручение ООО Ромашка <br />
+                                    </>
+                                )}
+                                {showNumber && "40702 810 2 0527 5000000"}
+                            </div>
+                            <Gap size={4} />
+                        </>
+                    )}
+
+                    {showNDS && (
+                        <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+                            В том числе НДС 20%
+                        </Text>
+                    )}
+                </>
+            ),
+        },
+        rowKey: `table-basic-row-${index}`,
+    }));
+
+interface IValueColumnSettingsProps {
+    column: ITableBasicColumn;
+    options: IValueColumnOptions;
+    setColumn: (checked: boolean) => void;
+    setOptions: (option: IValueColumnOptions) => void;
+}
+
+const ValueColumnSettings = ({ column, options, setColumn, setOptions }: IValueColumnSettingsProps) => {
+    const handleChildCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>, columnKey: string) => {
+        const newOptions = { ...options, [columnKey]: event.target.checked };
+
+        if (event.target.checked !== !column.hidden) {
+            if (event.target.checked) {
+                if (Object.values(options).every((value) => value === false)) {
+                    setColumn(event.target.checked);
+                }
+            } else {
+                if (Object.values(newOptions).every((value) => value === false)) {
+                    setColumn(event.target.checked);
+                }
+            }
+        }
+
+        setOptions(newOptions);
+    };
+
+    const handleParentCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setOptions(initiateValueColumnOptions(event.target.checked));
+        setColumn(event.target.checked);
+    };
+
+    const renderOptions = () => (
+        <ColumnSettings.StaticList depth={1}>
+            {Object.entries(options).map(([key, value], index) => (
+                <ColumnSettings.StaticList.Item key={index}>
+                    <Checkbox checked={Boolean(value)} onChange={(event) => handleChildCheckboxChange(event, key)}>
+                        {mapValueColumnOptionKeyToName[key]}
+                    </Checkbox>
+                </ColumnSettings.StaticList.Item>
+            ))}
+        </ColumnSettings.StaticList>
+    );
+
+    return (
+        <ColumnSettings.SortableList.Item id={column.fieldKey} staticContent={renderOptions()}>
+            <Checkbox
+                checked={!column.hidden}
+                bulk={Object.values(options).some((value) => value !== !column.hidden)}
+                onChange={handleParentCheckboxChange}
+            >
+                {column.label}
+            </Checkbox>
+        </ColumnSettings.SortableList.Item>
+    );
+};
+
+export const TableSettingsColumnExtended = () => {
+    const [columns, setColumns] = useState(defaultColumns);
+    const [valueColumnOptions, setValueColumnOptions] = useState(defaultValueColumnOptions);
+    const [settingsDropdownOpened, setSettingsDropdownOpened] = useState(false);
+
+    // Содержимое колонки «Получатель» выводится из настроек — отдельного состояния для данных не нужно.
+    const data = getData(valueColumnOptions);
+
+    const resetColumns = () => {
+        setColumns(defaultColumns);
+        setValueColumnOptions(defaultValueColumnOptions);
+    };
+
+    const showAllColumns = () => {
+        setColumns(
+            columns.map((column) => {
+                if (column.hidden) {
+                    return { ...column, hidden: false };
+                }
+                return column;
+            }),
+        );
+        setValueColumnOptions(defaultValueColumnOptions);
+    };
+
+    const toggleColumn = (fieldKey: string, checked: boolean): void => {
+        setColumns(
+            columns.map((column) => {
+                if (column.fieldKey === fieldKey) {
+                    return { ...column, hidden: !checked };
+                }
+                return column;
+            }),
+        );
+    };
+
+    const renderColumns = () => (
+        <ColumnSettings.SortableList columns={columns} onColumnsChange={setColumns}>
+            {columns.map((column) => {
+                if (column.fieldKey === "value") {
+                    return (
+                        <ValueColumnSettings
+                            key={column.fieldKey}
+                            column={column}
+                            options={valueColumnOptions}
+                            setColumn={(checked: boolean) => toggleColumn(column.fieldKey, checked)}
+                            setOptions={(options) => {
+                                setValueColumnOptions(options);
+                            }}
+                        />
+                    );
+                }
+
+                return (
+                    <ColumnSettings.SortableList.Item key={column.fieldKey} id={column.fieldKey}>
+                        <Checkbox
+                            checked={column.hidden !== true}
+                            onChange={(event) => toggleColumn(column.fieldKey, event.target.checked)}
+                        >
+                            {column.label}
+                        </Checkbox>
+                    </ColumnSettings.SortableList.Item>
+                );
+            })}
+        </ColumnSettings.SortableList>
+    );
+
+    return (
+        <MasterTable>
+            <MasterTable.ChipPanel>
+                <MasterTable.ChipPanel.Links>
+                    <MasterTable.TableBasicSettings
+                        linkTitle={settingsDropdownOpened ? "Скрыть настройки" : "Настройки"}
+                        opened={settingsDropdownOpened}
+                        setOpened={setSettingsDropdownOpened}
+                    >
+                        <MasterTable.TableBasicSettings.Header>Показать столбцы</MasterTable.TableBasicSettings.Header>
+
+                        <MasterTable.TableBasicSettings.Body>
+                            <ColumnSettings>{renderColumns()}</ColumnSettings>
+                        </MasterTable.TableBasicSettings.Body>
+
+                        <MasterTable.TableBasicSettings.Footer>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={showAllColumns}>
+                                Выбрать все
+                            </Button>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={resetColumns}>
+                                Сбросить настройки
+                            </Button>
+                        </MasterTable.TableBasicSettings.Footer>
+                    </MasterTable.TableBasicSettings>
+                </MasterTable.ChipPanel.Links>
+            </MasterTable.ChipPanel>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={data}
+                renderNoData={renderNoData}
+                renderNoColumns={() => renderNoColumns(resetColumns)}
+            />
+        </MasterTable>
+    );
+};
+```
+
+### TableWithPagination
+
+`stories/TableBasic/examples/TableWithPagination.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Amount,
+    EFontType,
+    EHorizontalAlign,
+    ETextSize,
+    Gap,
+    MasterTable,
+    Pagination,
+    Text,
+    ISelectExtendedFieldDefaultOption,
+    ITableBasicColumn,
+    ITableBasicRow,
+} from "@sberbusiness/triplex-next";
+
+const renderCounterpartyDetails = (purpose: string, account: string, tax: string) => (
+    <>
+        <div>
+            {purpose}
+            <br />
+            {account}
+        </div>
+        <Gap size={4} />
+        <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+            {tax}
+        </Text>
+    </>
+);
+
+// Колонки и данные собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const columns: ITableBasicColumn[] = [
+    {
+        fieldKey: "number",
+        label: "Номер",
+    },
+    {
+        fieldKey: "value",
+        label: "Получатель",
+    },
+    {
+        fieldKey: "sum",
+        horizontalAlign: EHorizontalAlign.RIGHT,
+        label: "Сумма",
+        renderCell: (fieldValue) => fieldValue && <Amount value={fieldValue} currency="RUB" />,
+    },
+    {
+        fieldKey: "status",
+        label: "Статус",
+    },
+];
+
+const data: ITableBasicRow[] = Array.from({ length: 300 }, (_, index) => ({
+    rowData: {
+        number: 1000 + index,
+        status: "Исполнено",
+        sum: "1220000000",
+        value: renderCounterpartyDetails(
+            "Платежное поручение ООО Ромашка",
+            "40702 810 2 0527 5000000",
+            "В том числе НДС 20%",
+        ),
+    },
+    rowKey: `table-basic-row-${index}`,
+}));
+
+const options: ISelectExtendedFieldDefaultOption[] = [
+    { id: "0", value: "10", label: "10" },
+    { id: "1", value: "20", label: "20" },
+    { id: "2", value: "50", label: "50" },
+    { id: "3", value: "100", label: "100" },
+];
+
+export const TableWithPagination = () => {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const totalItems = data.length;
+    const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+
+    const handlePageSizeChange = (option: ISelectExtendedFieldDefaultOption) => {
+        setPage(1);
+        setPageSize(Number(option.value));
+    };
+
+    const selectedOption = options.find((option) => option.value === String(pageSize));
+
+    const getPaginatedData = () => {
+        return data.slice((page - 1) * pageSize, page * pageSize);
+    };
+
+    return (
+        <MasterTable>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={getPaginatedData()}
+                renderNoData={() => <div>Нет данных</div>}
+            />
+            <MasterTable.PaginationPanel>
+                <Pagination
+                    paginationNavigationProps={{
+                        currentPage: page,
+                        totalPages,
+                        boundaryCount: 1,
+                        siblingCount: 1,
+                        onCurrentPageChange: setPage,
+                    }}
+                    paginationSelectProps={{
+                        paginationLabel: "Показать на странице:",
+                        options,
+                        value: selectedOption || options[0],
+                        onChange: handlePageSizeChange,
+                        targetProps: {
+                            fieldLabel: "",
+                        },
+                    }}
+                />
+            </MasterTable.PaginationPanel>
+        </MasterTable>
+    );
+};
+```
+
+### TableWithPaginationLoading
+
+`stories/TableBasic/examples/TableWithPaginationLoading.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EmptytableSysIcon96, NotfoundSysIcon96 } from "@sberbusiness/icons-next";
+import {
+    Amount,
+    Button,
+    Col,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EFontWeightTitle,
+    EHorizontalAlign,
+    ETextSize,
+    ETitleSize,
+    Gap,
+    MasterTable,
+    Pagination,
+    Row,
+    Text,
+    TextField,
+    Title,
+    ISelectExtendedFieldDefaultOption,
+    ITableBasicColumn,
+    ITableBasicRow,
+} from "@sberbusiness/triplex-next";
+
+const renderCounterpartyDetails = (purpose: string, account: string, tax: string) => (
+    <>
+        <div>
+            {purpose}
+            <br />
+            {account}
+        </div>
+        <Gap size={4} />
+        <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+            {tax}
+        </Text>
+    </>
+);
+
+const renderNoData = (isFiltered: boolean) => (
+    <>
+        {isFiltered ? <NotfoundSysIcon96 /> : <EmptytableSysIcon96 />}
+        <Gap size={8} />
+        <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+            Текст заголовка
+        </Title>
+        <Gap size={12} />
+        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+            Нет данных, но можно предложить какие-то действия для заполнения таблицы
+        </Text>
+        <Gap size={24} />
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                Button text
+            </Button>
+            <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                Button text
+            </Button>
+        </div>
+    </>
+);
+
+// Колонки собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const columns: ITableBasicColumn[] = [
+    {
+        fieldKey: "number",
+        label: "Номер",
+    },
+    {
+        fieldKey: "value",
+        label: "Получатель",
+    },
+    {
+        fieldKey: "sum",
+        horizontalAlign: EHorizontalAlign.RIGHT,
+        label: "Сумма",
+        renderCell: (fieldValue) => fieldValue && <Amount value={fieldValue} currency="RUB" />,
+    },
+    {
+        fieldKey: "status",
+        label: "Статус",
+    },
+];
+
+const filtersAndPaginationRows = Array.from({ length: 30 }, (_, index) => ({
+    docNumber: String(1000 + index),
+    recipient: index % 2 === 0 ? "ООО Ромашка" : "ИП Иванов Иван Иванович",
+    status: ["Создан", "Подписан", "Оплачен"][index % 3],
+    sum: String((index + 1) * 10000),
+}));
+
+const pageSizeOptions: ISelectExtendedFieldDefaultOption[] = [
+    { id: "0", value: "10", label: "10" },
+    { id: "1", value: "20", label: "20" },
+    { id: "2", value: "50", label: "50" },
+];
+
+export const TableWithPaginationLoading = () => {
+    const [docNumberFilter, setDocNumberFilter] = useState("");
+    const [recipientFilter, setRecipientFilter] = useState("");
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+
+    const isFiltered = docNumberFilter !== "" || recipientFilter !== "";
+
+    const filteredRows = filtersAndPaginationRows.filter(
+        (row) =>
+            row.docNumber.includes(docNumberFilter) &&
+            row.recipient.toLowerCase().includes(recipientFilter.toLowerCase()),
+    );
+
+    const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize));
+    // Фильтр мог сократить выборку сильнее, чем текущая страница — страховка от выхода за диапазон.
+    const currentPage = Math.min(page, totalPages);
+
+    const data: ITableBasicRow[] = filteredRows
+        .slice((currentPage - 1) * pageSize, currentPage * pageSize)
+        .map((row) => ({
+            rowData: {
+                number: row.docNumber,
+                status: row.status,
+                sum: row.sum,
+                value: renderCounterpartyDetails(
+                    `Платежное поручение ${row.recipient}`,
+                    "40702 810 2 0527 5000000",
+                    "В том числе НДС 20%",
+                ),
+            },
+            rowKey: `table-with-filters-row-${row.docNumber}`,
+        }));
+
+    const handleChangeDocNumber = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setDocNumberFilter(event.target.value);
+        setPage(1);
+    };
+
+    const handleChangeRecipient = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setRecipientFilter(event.target.value);
+        setPage(1);
+    };
+
+    const handlePageSizeChange = (option: ISelectExtendedFieldDefaultOption) => {
+        setPageSize(Number(option.value));
+        setPage(1);
+    };
+
+    return (
+        <MasterTable loading>
+            <MasterTable.FilterPanel>
+                <Row paddingBottom={false}>
+                    <Col size={6}>
+                        <TextField
+                            size={EComponentSize.MD}
+                            inputProps={{
+                                value: docNumberFilter,
+                                onChange: handleChangeDocNumber,
+                                placeholder: "Введите номер документа",
+                            }}
+                            label="Номер документа"
+                        />
+                    </Col>
+                    <Col size={6}>
+                        <TextField
+                            size={EComponentSize.MD}
+                            inputProps={{
+                                value: recipientFilter,
+                                onChange: handleChangeRecipient,
+                                placeholder: "Введите получателя",
+                            }}
+                            label="Получатель"
+                        />
+                    </Col>
+                </Row>
+            </MasterTable.FilterPanel>
+            <MasterTable.TableBasic columns={columns} data={data} renderNoData={() => renderNoData(isFiltered)} />
+            <MasterTable.PaginationPanel>
+                <Pagination
+                    paginationNavigationProps={{
+                        currentPage,
+                        totalPages,
+                        boundaryCount: 1,
+                        siblingCount: 1,
+                        onCurrentPageChange: setPage,
+                    }}
+                    paginationSelectProps={{
+                        paginationLabel: "Показать на странице:",
+                        options: pageSizeOptions,
+                        value:
+                            pageSizeOptions.find((option) => option.value === String(pageSize)) || pageSizeOptions[0],
+                        onChange: handlePageSizeChange,
+                        targetProps: {
+                            fieldLabel: "",
+                        },
+                    }}
+                />
+            </MasterTable.PaginationPanel>
+        </MasterTable>
+    );
+};
+```
+
+### TableWithPaginationExtended
+
+`stories/TableBasic/examples/TableWithPaginationExtended.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Amount,
+    EFontType,
+    EHorizontalAlign,
+    EPaginationNavigationIconDirection,
+    ETextSize,
+    Gap,
+    MasterTable,
+    PaginationExtended,
+    PaginationNavigationButton,
+    PaginationNavigationExtended,
+    PaginationNavigationExtendedItem,
+    PaginationPageButton,
+    PaginationSelect,
+    Text,
+    ISelectExtendedFieldDefaultOption,
+    ITableBasicColumn,
+    ITableBasicRow,
+} from "@sberbusiness/triplex-next";
+
+const renderCounterpartyDetails = (purpose: string, account: string, tax: string) => (
+    <>
+        <div>
+            {purpose}
+            <br />
+            {account}
+        </div>
+        <Gap size={4} />
+        <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+            {tax}
+        </Text>
+    </>
+);
+
+// Колонки и данные собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const columns: ITableBasicColumn[] = [
+    {
+        fieldKey: "number",
+        label: "Номер",
+    },
+    {
+        fieldKey: "value",
+        label: "Получатель",
+    },
+    {
+        fieldKey: "sum",
+        horizontalAlign: EHorizontalAlign.RIGHT,
+        label: "Сумма",
+        renderCell: (fieldValue) => fieldValue && <Amount value={fieldValue} currency="RUB" />,
+    },
+    {
+        fieldKey: "status",
+        label: "Статус",
+    },
+];
+
+const data: ITableBasicRow[] = Array.from({ length: 300 }, (_, index) => ({
+    rowData: {
+        number: 1000 + index,
+        status: "Исполнено",
+        sum: "1220000000",
+        value: renderCounterpartyDetails(
+            "Платежное поручение ООО Ромашка",
+            "40702 810 2 0527 5000000",
+            "В том числе НДС 20%",
+        ),
+    },
+    rowKey: `table-basic-row-${index}`,
+}));
+
+const options: ISelectExtendedFieldDefaultOption[] = [
+    { id: "0", value: "10", label: "10" },
+    { id: "1", value: "20", label: "20" },
+    { id: "2", value: "50", label: "50" },
+    { id: "3", value: "100", label: "100" },
+];
+
+export const TableWithPaginationExtended = () => {
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const totalItems = data.length;
+    const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+
+    const handlePageSizeChange = (option: ISelectExtendedFieldDefaultOption) => {
+        setPage(1);
+        setPageSize(Number(option.value));
+    };
+
+    const selectedOption = options.find((option) => option.value === String(pageSize));
+
+    const getPaginatedData = () => {
+        return data.slice((page - 1) * pageSize, page * pageSize);
+    };
+
+    return (
+        <MasterTable>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={getPaginatedData()}
+                renderNoData={() => <div>Нет данных</div>}
+            />
+            <MasterTable.PaginationPanel>
+                <PaginationExtended>
+                    {totalPages > 1 && (
+                        <PaginationNavigationExtended>
+                            <PaginationNavigationExtendedItem>
+                                <PaginationNavigationButton
+                                    direction={EPaginationNavigationIconDirection.BACK}
+                                    onClick={() => setPage((prevPage) => Math.max(1, prevPage - 1))}
+                                    disabled={page === 1}
+                                />
+                            </PaginationNavigationExtendedItem>
+
+                            <PaginationNavigationExtendedItem key="current-page">
+                                <PaginationPageButton isCurrent onClick={() => {}}>
+                                    {page}
+                                </PaginationPageButton>
+                            </PaginationNavigationExtendedItem>
+
+                            <PaginationNavigationExtendedItem>
+                                <PaginationNavigationButton
+                                    direction={EPaginationNavigationIconDirection.NEXT}
+                                    onClick={() => setPage((prevPage) => Math.min(totalPages, prevPage + 1))}
+                                    disabled={page === totalPages}
+                                />
+                            </PaginationNavigationExtendedItem>
+                        </PaginationNavigationExtended>
+                    )}
+                    <PaginationSelect
+                        paginationLabel="Показать на странице:"
+                        value={selectedOption || options[0]}
+                        options={options}
+                        onChange={handlePageSizeChange}
+                        targetProps={{
+                            fieldLabel: "",
+                        }}
+                    />
+                </PaginationExtended>
+            </MasterTable.PaginationPanel>
+        </MasterTable>
+    );
+};
+```
+
+### Example: production
+
+`stories/TableBasic/examples/ExampleProduction.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { EmptytableSysIcon96, NotfoundSysIcon96 } from "@sberbusiness/icons-next";
+import {
+    Amount,
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    Chip,
+    ChipGroup,
+    ChipMultiselect,
+    Col,
+    DropdownMobileBody,
+    DropdownMobileClose,
+    DropdownMobileFooter,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownAlignment,
+    EFontType,
+    EFontWeightTitle,
+    EHorizontalAlign,
+    EMarkerStatus,
+    ETextSize,
+    ETitleSize,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    Gap,
+    Link,
+    MarkerStatus,
+    MasterTable,
+    MultiselectField,
+    Row,
+    SelectField,
+    Tag,
+    TagGroup,
+    Text,
+    TextField,
+    Title,
+    ISelectFieldOption,
+    ITableBasicColumn,
+    ITableBasicRow,
+} from "@sberbusiness/triplex-next";
+
+/** Ключи полей таблицы. */
+enum ETableField {
+    Number = "Number",
+    Recipient = "Recipient",
+    Sum = "Sum",
+    Status = "Status",
+}
+
+interface IExampleExtraFilters {
+    recipientOption: ISelectFieldOption | undefined;
+    docNumber: string;
+}
+
+const renderCounterpartyDetails = (purpose: string, account: string, tax: string) => (
+    <>
+        <div>
+            {purpose}
+            <br />
+            {account}
+        </div>
+        <Gap size={4} />
+        <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+            {tax}
+        </Text>
+    </>
+);
+
+const renderNoData = (isFiltered: boolean) => (
+    <>
+        {isFiltered ? <NotfoundSysIcon96 /> : <EmptytableSysIcon96 />}
+        <Gap size={8} />
+        <Title size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+            Текст заголовка
+        </Title>
+        <Gap size={12} />
+        <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+            Нет данных, но можно предложить какие-то действия для заполнения таблицы
+        </Text>
+        <Gap size={24} />
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                Button text
+            </Button>
+            <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                Button text
+            </Button>
+        </div>
+    </>
+);
+
+const segments: { id: string; label: string; status: string | null; withNotification?: boolean }[] = [
+    { id: "all", label: "Все", status: null },
+    { id: "drafts", label: "Черновики", status: "Создан" },
+    { id: "toSign", label: "На подпись и отправку", status: "Подписан", withNotification: true },
+    { id: "executed", label: "Исполненные", status: "Оплачен" },
+];
+
+const statusFilterOptions = [
+    { id: "created", label: "Создан" },
+    { id: "signed", label: "Подписан" },
+    { id: "paid", label: "Оплачен" },
+];
+
+const statusToMarker: Record<string, EMarkerStatus> = {
+    Создан: EMarkerStatus.WAITING,
+    Подписан: EMarkerStatus.WARNING,
+    Оплачен: EMarkerStatus.SUCCESS,
+};
+
+const counterpartyOptions: ISelectFieldOption[] = [
+    { id: "0", value: "", label: "Не указан" },
+    { id: "1", value: "ООО Ромашка", label: "ООО Ромашка" },
+    { id: "2", value: "ИП Иванов Иван Иванович", label: "ИП Иванов Иван Иванович" },
+];
+
+const documents = [
+    {
+        docNumber: "1350",
+        recipient: { account: "40702 810 2 9045 8100009", name: "ИП Иванов Иван Иванович" },
+        purpose: "Платёжное поручение ИП Иванов Иван Иванович за оказание услуг по акту №67834259-ТНГК2356-345",
+        tax: "В том числе НДС 20%",
+        sum: "9450.00",
+        status: "Создан",
+    },
+    {
+        docNumber: "1351",
+        recipient: { account: "40702 810 2 0527 5520080", name: "ООО Ромашка" },
+        purpose: "Платёжное поручение ООО Ромашка за оказание услуг по акту №67834259-ТНГК2356-345",
+        tax: "В том числе НДС 20%",
+        sum: "18914.00",
+        status: "Создан",
+    },
+    {
+        docNumber: "1352",
+        recipient: { account: "40702 810 2 2581 6403700", name: "ИП Иванов Иван Иванович" },
+        purpose: "Платёжное поручение ИП Иванов Иван Иванович за оказание услуг по акту №67834259-ТНГК2356-345",
+        tax: "В том числе НДС 20%",
+        sum: "28392.00",
+        status: "Подписан",
+    },
+    {
+        docNumber: "1353",
+        recipient: { account: "40702 810 2 8302 7306400", name: "ООО Ромашка" },
+        purpose: "Платёжное поручение ООО Ромашка за оказание услуг по акту №67834259-ТНГК2356-345",
+        tax: "В том числе НДС 20%",
+        sum: "37884.00",
+        status: "Подписан",
+    },
+    {
+        docNumber: "1354",
+        recipient: { account: "40702 810 2 9947 8250050", name: "ИП Иванов Иван Иванович" },
+        purpose: "Платёжное поручение ИП Иванов Иван Иванович за оказание услуг по акту №67834259-ТНГК2356-345",
+        tax: "В том числе НДС 20%",
+        sum: "47390.00",
+        status: "Оплачен",
+    },
+    {
+        docNumber: "1355",
+        recipient: { account: "40702 810 2 0290 9100406", name: "ООО Ромашка" },
+        purpose: "Платёжное поручение ООО Ромашка за оказание услуг по акту №67834259-ТНГК2356-345",
+        tax: "В том числе НДС 20%",
+        sum: "56910.00",
+        status: "Оплачен",
+    },
+];
+
+// Колонки собираются вне рендера, чтобы таблица не обновляла контекст MasterTable на каждый рендер.
+const columns: ITableBasicColumn[] = [
+    { fieldKey: ETableField.Number, label: "Номер", title: "Номер", width: 100 },
+    { fieldKey: ETableField.Recipient, label: "Получатель", title: "Получатель", width: 320 },
+    {
+        fieldKey: ETableField.Sum,
+        label: "Сумма",
+        title: "Сумма",
+        horizontalAlign: EHorizontalAlign.RIGHT,
+        renderCell: (fieldValue) => fieldValue && <Amount value={fieldValue} currency="RUB" />,
+    },
+    {
+        fieldKey: ETableField.Status,
+        label: "Статус",
+        title: "Статус",
+        width: 140,
+        renderCell: (status: string) => (
+            <MarkerStatus size={EComponentSize.LG} status={statusToMarker[status] ?? EMarkerStatus.WAITING}>
+                {status}
+            </MarkerStatus>
+        ),
+    },
+];
+
+const defaultExtraFilters: IExampleExtraFilters = { recipientOption: undefined, docNumber: "" };
+
+export const ExampleProduction = () => {
+    const [activeSegment, setActiveSegment] = useState("all");
+    const [selectedStatusIds, setSelectedStatusIds] = useState<string[]>([]);
+    const [statusFilter, setStatusFilter] = useState("");
+    const [recipientQuery, setRecipientQuery] = useState("");
+    const [showExtraFilters, setShowExtraFilters] = useState(false);
+    const [appliedExtraFilters, setAppliedExtraFilters] = useState<IExampleExtraFilters>(defaultExtraFilters);
+    const [tempExtraFilters, setTempExtraFilters] = useState<IExampleExtraFilters>(defaultExtraFilters);
+
+    const selectedStatusLabels = statusFilterOptions
+        .filter((option) => selectedStatusIds.includes(option.id))
+        .map((option) => option.label);
+
+    const segmentStatus = segments.find((segment) => segment.id === activeSegment)?.status ?? null;
+
+    const isExtraFilterApplied =
+        Boolean(appliedExtraFilters.recipientOption?.value) || Boolean(appliedExtraFilters.docNumber);
+
+    const isAnyFilterApplied = selectedStatusLabels.length > 0 || Boolean(recipientQuery) || isExtraFilterApplied;
+
+    const filteredData = documents.filter((doc) => {
+        if (segmentStatus && doc.status !== segmentStatus) {
+            return false;
+        }
+        if (selectedStatusLabels.length > 0 && !selectedStatusLabels.includes(doc.status)) {
+            return false;
+        }
+        if (recipientQuery && !doc.recipient.name.toLowerCase().includes(recipientQuery.toLowerCase())) {
+            return false;
+        }
+        if (
+            appliedExtraFilters.recipientOption?.value &&
+            doc.recipient.name !== appliedExtraFilters.recipientOption.value
+        ) {
+            return false;
+        }
+        if (appliedExtraFilters.docNumber && !doc.docNumber.includes(appliedExtraFilters.docNumber)) {
+            return false;
+        }
+        return true;
+    });
+
+    const data: ITableBasicRow[] = filteredData.map((doc) => ({
+        rowKey: doc.docNumber,
+        rowData: {
+            [ETableField.Number]: doc.docNumber,
+            [ETableField.Recipient]: renderCounterpartyDetails(doc.purpose, doc.recipient.account, doc.tax),
+            [ETableField.Sum]: doc.sum,
+            [ETableField.Status]: doc.status,
+        },
+    }));
+
+    const visibleStatusOptions = statusFilterOptions.filter((option) =>
+        option.label.toLowerCase().includes(statusFilter.trim().toLowerCase()),
+    );
+
+    const toggleStatus = (optionId: string, checked: boolean) => {
+        setSelectedStatusIds((prev) => (checked ? [...prev, optionId] : prev.filter((id) => id !== optionId)));
+    };
+
+    const unselectAllStatuses = () => {
+        setSelectedStatusIds([]);
+        setStatusFilter("");
+    };
+
+    const handleStatusFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setStatusFilter(event.target.value);
+    };
+
+    const handleClickToggleExtraFilters = () => {
+        setTempExtraFilters(appliedExtraFilters);
+        setShowExtraFilters((prev) => !prev);
+    };
+
+    const handleClickResetTempFilters = () => {
+        setTempExtraFilters(defaultExtraFilters);
+    };
+
+    const handleClickApplyTempFilters = () => {
+        setAppliedExtraFilters(tempExtraFilters);
+        setShowExtraFilters(false);
+    };
+
+    const handleRemoveTag = (newFilters: IExampleExtraFilters) => () => {
+        setTempExtraFilters(newFilters);
+        setAppliedExtraFilters(newFilters);
+    };
+
+    const handleClickResetAllFilters = () => {
+        unselectAllStatuses();
+        setRecipientQuery("");
+        setTempExtraFilters(defaultExtraFilters);
+        setAppliedExtraFilters(defaultExtraFilters);
+    };
+
+    const renderStatusCheckboxList = () => (
+        <CheckboxYGroup aria-label="Статус">
+            {visibleStatusOptions.map((option) => (
+                <Checkbox
+                    key={option.id}
+                    id={option.id}
+                    size={EComponentSize.MD}
+                    checked={selectedStatusIds.includes(option.id)}
+                    onChange={(event) => toggleStatus(option.id, event.target.checked)}
+                >
+                    {option.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    const renderStatusDropdownContent = () => {
+        const hasResults = !statusFilter.trim() || visibleStatusOptions.length > 0;
+
+        return hasResults ? (
+            renderStatusCheckboxList()
+        ) : (
+            <div style={{ padding: "8px 16px" }}>
+                <Text size={ETextSize.B3}>Ничего не найдено</Text>
+            </div>
+        );
+    };
+
+    const renderStatusMultiselect = () => (
+        <ChipMultiselect
+            size={EComponentSize.MD}
+            clearSelected={unselectAllStatuses}
+            selected={selectedStatusIds.length > 0}
+            label="Статус"
+            displayedValue={`Статус: ${selectedStatusLabels.join(", ")}`}
+        >
+            {({ opened, setOpened, targetRef, dropdownRef }) => (
+                <MultiselectField.Dropdown
+                    opened={opened}
+                    setOpened={setOpened}
+                    targetRef={targetRef}
+                    ref={dropdownRef}
+                    alignment={EDropdownAlignment.LEFT}
+                    focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                    mobileViewProps={{
+                        children: (
+                            <>
+                                <DropdownMobileHeader
+                                    controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                >
+                                    <DropdownMobileInput
+                                        autoFocus
+                                        placeholder="Поиск по статусу"
+                                        value={statusFilter}
+                                        onChange={handleStatusFilterChange}
+                                    />
+                                </DropdownMobileHeader>
+                                <DropdownMobileBody>{renderStatusDropdownContent()}</DropdownMobileBody>
+                                <DropdownMobileFooter>
+                                    <Button
+                                        theme={EButtonTheme.GENERAL}
+                                        size={EComponentSize.SM}
+                                        onClick={() => setOpened(false)}
+                                    >
+                                        Применить
+                                    </Button>
+                                    <Button
+                                        theme={EButtonTheme.LINK}
+                                        size={EComponentSize.SM}
+                                        onClick={unselectAllStatuses}
+                                    >
+                                        Сбросить
+                                    </Button>
+                                </DropdownMobileFooter>
+                            </>
+                        ),
+                    }}
+                >
+                    <MultiselectField.Dropdown.Header>
+                        <FormField size={EComponentSize.SM}>
+                            <FormFieldLabel>Поиск по статусу</FormFieldLabel>
+                            <FormFieldInput value={statusFilter} onChange={handleStatusFilterChange} />
+                            <FormFieldPostfix>
+                                <FormFieldClear onClick={() => setStatusFilter("")} />
+                            </FormFieldPostfix>
+                        </FormField>
+                    </MultiselectField.Dropdown.Header>
+                    <MultiselectField.Dropdown.Content>
+                        {renderStatusDropdownContent()}
+                    </MultiselectField.Dropdown.Content>
+                    <MultiselectField.Dropdown.Footer>
+                        <Button
+                            theme={EButtonTheme.SECONDARY}
+                            size={EComponentSize.SM}
+                            onClick={() => setOpened(false)}
+                        >
+                            Применить
+                        </Button>
+                        <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={unselectAllStatuses}>
+                            Сбросить
+                        </Button>
+                    </MultiselectField.Dropdown.Footer>
+                </MultiselectField.Dropdown>
+            )}
+        </ChipMultiselect>
+    );
+
+    const renderExtraFilters = () => (
+        <>
+            <Gap size={12} />
+            <Row paddingBottom={false}>
+                <Col size={6}>
+                    <SelectField
+                        size={EComponentSize.MD}
+                        value={tempExtraFilters.recipientOption}
+                        options={counterpartyOptions}
+                        onChange={(option) =>
+                            setTempExtraFilters((prev) => ({
+                                ...prev,
+                                recipientOption: option.value ? option : undefined,
+                            }))
+                        }
+                        placeholder="Выберите получателя из списка"
+                        targetProps={{ fieldLabel: "Получатель" }}
+                    />
+                </Col>
+                <Col size={6}>
+                    <TextField
+                        size={EComponentSize.MD}
+                        inputProps={{
+                            value: tempExtraFilters.docNumber,
+                            onChange: (event) =>
+                                setTempExtraFilters((prev) => ({ ...prev, docNumber: event.target.value })),
+                            placeholder: "Введите номер документа",
+                        }}
+                        label="Номер документа"
+                    />
+                </Col>
+            </Row>
+            <Gap size={12} />
+            <div style={{ display: "flex", justifyContent: "end" }}>
+                <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={handleClickResetTempFilters}>
+                    Сбросить
+                </Button>
+                <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD} onClick={handleClickApplyTempFilters}>
+                    Применить
+                </Button>
+            </div>
+        </>
+    );
+
+    const renderExtraFilterTags = () => {
+        const tags: React.JSX.Element[] = [];
+
+        if (appliedExtraFilters.recipientOption) {
+            tags.push(
+                <Tag
+                    key="tag-filter-recipient"
+                    id="tag-filter-recipient"
+                    size={EComponentSize.MD}
+                    onRemove={handleRemoveTag({ ...appliedExtraFilters, recipientOption: undefined })}
+                >
+                    {`Получатель: ${appliedExtraFilters.recipientOption.value}`}
+                </Tag>,
+            );
+        }
+
+        if (appliedExtraFilters.docNumber) {
+            tags.push(
+                <Tag
+                    key="tag-filter-doc-number"
+                    id="tag-filter-doc-number"
+                    size={EComponentSize.MD}
+                    onRemove={handleRemoveTag({ ...appliedExtraFilters, docNumber: "" })}
+                >
+                    {`Номер документа: ${appliedExtraFilters.docNumber}`}
+                </Tag>,
+            );
+        }
+
+        return (
+            <>
+                <Gap size={12} />
+                <TagGroup size={EComponentSize.MD}>{tags}</TagGroup>
+            </>
+        );
+    };
+
+    const renderAdditionalFilterArea = () => {
+        if (showExtraFilters) {
+            return renderExtraFilters();
+        }
+
+        return isExtraFilterApplied ? renderExtraFilterTags() : null;
+    };
+
+    return (
+        <MasterTable>
+            <MasterTable.ChipPanel>
+                <ChipGroup size={EComponentSize.SM} oneLine>
+                    {segments.map((segment) => (
+                        <Chip
+                            key={segment.id}
+                            size={EComponentSize.SM}
+                            selected={activeSegment === segment.id}
+                            showNotificationIcon={segment.withNotification}
+                            onClick={() => setActiveSegment(segment.id)}
+                        >
+                            {segment.label}
+                        </Chip>
+                    ))}
+                </ChipGroup>
+                <MasterTable.ChipPanel.Links>
+                    {isExtraFilterApplied && <Link onClick={handleClickResetAllFilters}>Сбросить всё</Link>}
+                    <Link onClick={handleClickToggleExtraFilters}>
+                        {showExtraFilters ? "Скрыть фильтры" : isExtraFilterApplied ? "Изменить фильтры" : "Фильтры"}
+                    </Link>
+                </MasterTable.ChipPanel.Links>
+            </MasterTable.ChipPanel>
+            <MasterTable.FilterPanel>
+                <div style={{ display: "flex", alignItems: "flex-start", gap: 12, flexWrap: "wrap" }}>
+                    {renderStatusMultiselect()}
+                    <TextField
+                        size={EComponentSize.MD}
+                        inputProps={{
+                            value: recipientQuery,
+                            onChange: (event) => setRecipientQuery(event.target.value),
+                            placeholder: "Введите получателя",
+                        }}
+                        label="Получатель"
+                    />
+                </div>
+                {renderAdditionalFilterArea()}
+            </MasterTable.FilterPanel>
+            <MasterTable.TableBasic
+                columns={columns}
+                data={data}
+                renderNoData={() => renderNoData(isAnyFilterApplied)}
+            />
+        </MasterTable>
+    );
+};
+```
+