@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-table/examples.md

@@ -0,0 +1,3049 @@
+# CdsTable — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+A table shows large sets of records in columns and takes the data work off your hands: sorting, filters, pagination, row selection and expansion, a pinned header and pinned columns. Columns are described by the `columns` prop, the records by the `data` prop.
+
+## Перетаскивание
+
+### Dragging rows
+
+The `row-draggable` prop shows a grip icon to the left of the row. The move is reported by the `row-reorder` event — change the order in `data` yourself. A row can only be dropped between neighboring rows.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type TRow = { key: string; name: string; category: string; price: string };
+
+const columns: NTable.NColumn.TColumns<TRow> = [
+  { title: 'Наименование', dataIndex: 'name', key: 'name' },
+  { title: 'Категория', dataIndex: 'category', key: 'category' },
+  { title: 'Цена', dataIndex: 'price', key: 'price', align: 'right' }
+];
+
+const data = ref<TRow[]>([
+  { key: '1', name: 'iPhone 17 Pro Max', category: 'Смартфоны', price: '$1700' },
+  { key: '2', name: 'MacBook Air M5', category: 'Ноутбуки', price: '$2000' },
+  { key: '3', name: 'Apple Vision Pro', category: 'Гарнитуры', price: '$3500' },
+  { key: '4', name: 'iPad Air', category: 'Планшеты', price: '$800' },
+  { key: '5', name: 'AirPods Pro', category: 'Наушники', price: '$250' }
+]);
+
+const onRowReorder = (info: NTable.NDraggable.IRowReorderInfo<TRow>) => {
+  const next = [...data.value];
+  const dragIndex = next.findIndex((item) => item.key === info.dragKey);
+  if (dragIndex === -1) return;
+  const [moved] = next.splice(dragIndex, 1);
+  const dropIndex = next.findIndex((item) => item.key === info.dropKey);
+  next.splice(info.dropPosition === -1 ? dropIndex : dropIndex + 1, 0, moved);
+  data.value = next;
+};
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" row-draggable :pagination="false" @row-reorder="onRowReorder" />
+</template>
+```
+
+### Dragging nested rows
+
+In a tree, a row is only reordered among the siblings of its own parent: it cannot be dropped onto another level — the cursor shows "not allowed" and no event arrives.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type TRow = { key: number; name: string; price: number; children?: TRow[] };
+
+const columns: NTable.NColumn.TColumns<TRow> = [
+  { title: 'Название', dataIndex: 'name', key: 'name' },
+  { title: 'Цена, $', dataIndex: 'price', key: 'price', align: 'right', width: '20%' }
+];
+
+const data = ref<TRow[]>([
+  {
+    key: 1,
+    name: 'Apple iPhone',
+    price: 3250,
+    children: [
+      { key: 11, name: 'iPhone 14 Pro', price: 2000 },
+      { key: 12, name: 'Power Bank', price: 50 },
+      { key: 13, name: 'Headphones', price: 1200 }
+    ]
+  },
+  {
+    key: 2,
+    name: 'Xiaomi Mi',
+    price: 200,
+    children: [
+      { key: 21, name: 'Mi Band', price: 40 },
+      { key: 22, name: 'Mi Buds', price: 60 }
+    ]
+  }
+]);
+
+// Находит массив-родитель, содержащий строку с заданным ключом.
+const findParentList = (list: TRow[], key: NTable.TKey): TRow[] | null => {
+  for (const item of list) {
+    if (item.key === key) return list;
+    if (item.children) {
+      const found = findParentList(item.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+const onRowReorder = (info: NTable.NDraggable.IRowReorderInfo<TRow>) => {
+  const next = [...data.value];
+  // drag и drop гарантированно в одном родителе (reorder только между соседями).
+  const parentList = findParentList(next, info.dragKey);
+  if (!parentList) return;
+  const dragIndex = parentList.findIndex((item) => item.key === info.dragKey);
+  const [moved] = parentList.splice(dragIndex, 1);
+  const dropIndex = parentList.findIndex((item) => item.key === info.dropKey);
+  parentList.splice(info.dropPosition === -1 ? dropIndex : dropIndex + 1, 0, moved);
+  data.value = next;
+};
+</script>
+
+<template>
+  <CdsTable
+    :columns="columns"
+    :data="data"
+    :default-expand-all-rows="true"
+    row-draggable
+    :pagination="false"
+    @row-reorder="onRowReorder"
+  />
+</template>
+```
+
+### Dragging columns
+
+The `column-draggable` prop adds a grip icon to the header. The `column-reorder` event reports the new order — update the `columns` array.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type TRow = { key: string; name: string; category: string; price: string; stock: string };
+
+const columns = ref<NTable.NColumn.TColumns<TRow>>([
+  { title: 'Наименование', dataIndex: 'name', key: 'name' },
+  { title: 'Категория', dataIndex: 'category', key: 'category' },
+  { title: 'Цена', dataIndex: 'price', key: 'price', align: 'right' },
+  { title: 'Наличие', dataIndex: 'stock', key: 'stock' }
+]);
+
+const data: TRow[] = [
+  { key: '1', name: 'iPhone 17 Pro Max', category: 'Смартфоны', price: '$1500', stock: 'В наличии' },
+  { key: '2', name: 'MacBook Air M5', category: 'Ноутбуки', price: '$2000', stock: 'В наличии' },
+  { key: '3', name: 'Apple Vision Pro', category: 'Гарнитуры', price: '$3500', stock: 'Нет в наличии' }
+];
+
+const onColumnReorder = (info: NTable.NDraggable.IColumnReorderInfo<TRow>) => {
+  const next = [...columns.value];
+  const dragIndex = next.indexOf(info.dragColumn);
+  if (dragIndex === -1) return;
+  const [moved] = next.splice(dragIndex, 1);
+  const dropIndex = next.indexOf(info.dropColumn);
+  next.splice(info.dropPosition === -1 ? dropIndex : dropIndex + 1, 0, moved);
+  columns.value = next;
+};
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" column-draggable :pagination="false" @column-reorder="onColumnReorder" />
+</template>
+```
+
+### Dragging columns with groups
+
+A leaf column is reordered inside its own group, while a group header is dragged as a whole among neighboring groups.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const columns = ref<NTable.NColumn.TColumns>([
+  { title: 'Имя', dataIndex: 'name', key: 'name', width: 120 },
+  {
+    title: 'Контакты',
+    key: 'contacts',
+    children: [
+      { title: 'Телефон', dataIndex: 'phone', key: 'phone', width: 160 },
+      { title: 'Email', dataIndex: 'email', key: 'email', width: 200 }
+    ]
+  },
+  {
+    title: 'Компания',
+    key: 'company',
+    children: [
+      { title: 'Название', dataIndex: 'companyName', key: 'companyName', width: 160 },
+      { title: 'Город', dataIndex: 'city', key: 'city', width: 140 }
+    ]
+  }
+]);
+
+const data = [...Array(5)].map((_, i) => ({
+  key: i,
+  name: 'Иван',
+  phone: '+7 900 000-00-00',
+  email: 'ivan@b2b-center.ru',
+  companyName: 'B2B-Center',
+  city: 'Москва'
+}));
+
+// Находит массив-родитель (уровень группы), содержащий колонку по ссылке.
+const findParentList = (
+  list: NTable.NColumn.TColumns,
+  column: NTable.NColumn.IColumn
+): NTable.NColumn.TColumns | null => {
+  for (const col of list) {
+    if (col === column) return list;
+    const children = (col as NTable.NColumn.IColumnGroup).children;
+    if (children) {
+      const found = findParentList(children, column);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+const onColumnReorder = (info: NTable.NDraggable.IColumnReorderInfo) => {
+  const next = [...columns.value];
+  const parentList = findParentList(next, info.dragColumn);
+  if (!parentList) return;
+  const dragIndex = parentList.indexOf(info.dragColumn);
+  const [moved] = parentList.splice(dragIndex, 1);
+  const dropIndex = parentList.indexOf(info.dropColumn);
+  parentList.splice(info.dropPosition === -1 ? dropIndex : dropIndex + 1, 0, moved);
+  columns.value = next;
+};
+</script>
+
+<template>
+  <CdsTable
+    :columns="columns"
+    :data="data"
+    :scroll="{ x: 'max-content' }"
+    bordered
+    column-draggable
+    :pagination="false"
+    @column-reorder="onColumnReorder"
+  />
+</template>
+```
+
+## Редактирование
+
+Правка данных прямо в таблице: отдельные ячейки, построчный режим
+с сохранением и отменой или редактирование всей таблицы разом.
+
+### Editable cells
+
+The `bodyCell` slot replaces the content of a cell: on click the value turns into an input, on confirmation it turns back into text.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsButton, CdsFunctionalButton, CdsTable, CdsTextInput, CdsTooltip } from '@central-design-system/components';
+import type { Ref, UnwrapRef } from 'vue';
+import { computed, reactive, ref } from 'vue';
+
+type TDataItem = { key: string; name: string; age: number; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: 'Имя', dataIndex: 'name', width: '30%' },
+  { title: 'Возраст', dataIndex: 'age' },
+  { title: 'Адрес', dataIndex: 'address' },
+  { title: 'Действия', dataIndex: 'actions' }
+];
+
+const data: Ref<TDataItem[]> = ref([
+  { key: '0', name: 'Иван Иванов 0', age: 28, address: 'г. Москва, ул. Ленина, д. 0' },
+  { key: '1', name: 'Иван Иванов 1', age: 28, address: 'г. Москва, ул. Ленина, д. 1' }
+]);
+
+const count = computed(() => data.value.length + 1);
+const editableData: UnwrapRef<Record<string, TDataItem>> = reactive({});
+
+function edit(key: string) {
+  editableData[key] = data.value.filter((item) => key === item.key)[0];
+}
+
+function save(key: string) {
+  Object.assign(data.value.filter((item) => key === item.key)[0], editableData[key]);
+  delete editableData[key];
+}
+
+function remove(key: string) {
+  data.value = data.value.filter((item) => item.key !== key);
+}
+
+const handleAdd = () => {
+  data.value.push({
+    key: `${count.value}`,
+    name: `Иван Иванов ${count.value}`,
+    age: 28,
+    address: `г. Москва, ул. Ленина, д. ${count.value}`
+  });
+};
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data">
+    <template #toolbar>
+      <div class="flex justify-end">
+        <CdsButton text="Добавить" @click="handleAdd" />
+      </div>
+    </template>
+
+    <template #bodyCell="{ column, text, record }">
+      <template v-if="column.dataIndex === 'name'">
+        <div class="flex">
+          <div v-if="editableData[record.key]" class="flex items-center grow-1">
+            <CdsTextInput
+              class="grow-1"
+              v-model="editableData[record.key].name"
+              hide-messages
+              @keydown.enter="save(record.key)"
+            />
+            <CdsTooltip location="right">
+              <template #activator="{ props }">
+                <CdsFunctionalButton icon="save" class="ml-2" v-bind="props" @click="save(record.key)" />
+              </template>
+              Сохранить
+            </CdsTooltip>
+          </div>
+          <div v-else class="flex items-center">
+            {{ text || ' ' }}
+            <CdsTooltip location="right">
+              <template #activator="{ props }">
+                <CdsFunctionalButton icon="edit" class="ml-2" v-bind="props" @click="edit(record.key)" />
+              </template>
+              Редактировать
+            </CdsTooltip>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="column.dataIndex === 'actions'">
+        <CdsTooltip location="right">
+          <template #activator="{ props }">
+            <CdsFunctionalButton icon="delete" v-bind="props" @click="remove(record.key)" />
+          </template>
+          Удалить
+        </CdsTooltip>
+      </template>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Editable rows
+
+The whole row switches into edit mode: inputs in every cell, the "Save" and "Cancel" buttons in the actions column.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsFunctionalButton, CdsTable, CdsTextInput, CdsTooltip } from '@central-design-system/components';
+import type { UnwrapRef } from 'vue';
+import { reactive, ref } from 'vue';
+
+type TDataItem = { key: string; name: string; age: number; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: 'Имя', dataIndex: 'name', width: '25%' },
+  { title: 'Возраст', dataIndex: 'age', width: '15%' },
+  { title: 'Адрес', dataIndex: 'address', width: '40%' },
+  { title: 'Действия', dataIndex: 'actions' }
+];
+
+const data: TDataItem[] = [...Array(20)].map((_, i) => ({
+  key: i.toString(),
+  name: `Иван Иванов ${i}`,
+  age: 28,
+  address: `г. Москва, ул. Ленина, д. ${i}`
+}));
+
+const dataSource = ref(data);
+const editableData: UnwrapRef<Record<string, TDataItem>> = reactive({});
+
+function edit(key: string) {
+  editableData[key] = dataSource.value.filter((item) => key === item.key)[0];
+}
+
+function save(key: string) {
+  Object.assign(dataSource.value.filter((item) => key === item.key)[0], editableData[key]);
+  delete editableData[key];
+}
+
+function cancel(key: string) {
+  delete editableData[key];
+}
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="dataSource">
+    <template #bodyCell="{ column, text, record }">
+      <template v-if="['name', 'age', 'address'].includes(String(column.dataIndex))">
+        <div>
+          <CdsTextInput
+            v-if="editableData[record.key]"
+            v-model="editableData[record.key][column.dataIndex as keyof TDataItem]"
+            hide-messages
+          />
+          <template v-else>
+            {{ text }}
+          </template>
+        </div>
+      </template>
+      <template v-else-if="column.dataIndex === 'actions'">
+        <div>
+          <span v-if="editableData[record.key]">
+            <CdsTooltip>
+              <template #activator="{ props }">
+                <CdsFunctionalButton icon="save" v-bind="props" @click="save(record.key)" />
+              </template>
+              Сохранить
+            </CdsTooltip>
+            <CdsTooltip>
+              <template #activator="{ props }">
+                <CdsFunctionalButton icon="remove" v-bind="props" @click="cancel(record.key)" />
+              </template>
+              Отменить
+            </CdsTooltip>
+          </span>
+          <span v-else>
+            <CdsTooltip location="left">
+              <template #activator="{ props }">
+                <CdsFunctionalButton icon="edit" v-bind="props" @click="edit(record.key)" />
+              </template>
+              Редактировать
+            </CdsTooltip>
+          </span>
+        </div>
+      </template>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Editable table
+
+Edit mode is turned on for the entire table at once — convenient for filling in reference data in bulk.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsButton, CdsTable, CdsTextInput } from '@central-design-system/components';
+import type { UnwrapRef } from 'vue';
+import { reactive, ref } from 'vue';
+
+type TDataItem = { key: string; name: string; age: number; address: string; quantity: number };
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: 'Имя', dataIndex: 'name', width: '25%' },
+  { title: 'Возраст', dataIndex: 'age', width: '15%' },
+  { title: 'Адрес', dataIndex: 'address', width: '40%' },
+  { title: 'Количество', dataIndex: 'quantity' }
+];
+
+const data: TDataItem[] = [...Array(10)].map((_, i) => ({
+  key: i.toString(),
+  name: `Иван Иванов ${i}`,
+  age: 32,
+  address: `г. Москва, ул. Ленина, д. ${i}`,
+  quantity: Math.round(Math.random() * 100)
+}));
+
+const dataSource = ref(data);
+const editing = ref(false);
+const editableData: UnwrapRef<Record<string, TDataItem>> = reactive({});
+
+function edit() {
+  if (!editing.value) {
+    editing.value = true;
+    dataSource.value.forEach((item) => {
+      editableData[item.key] = { ...item };
+    });
+  } else {
+    editing.value = false;
+    Object.assign(dataSource.value, editableData);
+  }
+}
+
+function cancel() {
+  editing.value = false;
+  dataSource.value.forEach((item) => {
+    delete editableData[item.key];
+  });
+}
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="dataSource">
+    <template #toolbar>
+      <div class="flex justify-end">
+        <div class="flex gap-2">
+          <CdsButton appearance="secondary" :disabled="!editing" @click="cancel">Отменить</CdsButton>
+          <CdsButton @click="edit">{{ editing ? 'Сохранить' : 'Редактировать' }}</CdsButton>
+        </div>
+      </div>
+    </template>
+
+    <template #bodyCell="{ column, text, record }">
+      <div>
+        <CdsTextInput
+          v-if="editing"
+          v-model="editableData[record.key][column.dataIndex as keyof TDataItem]"
+          hide-messages
+        />
+        <template v-else>
+          {{ text }}
+        </template>
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+## Раскрытие и деревья
+
+Дополнительное содержимое строки: раскрываемые строки со слотом,
+вложенные таблицы и древовидные данные с каскадным выбором.
+
+### Expandable rows
+
+The `expandedRowRender` slot renders the content of an expanded row — the column with the chevron appears automatically.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: number; name: string; age: number; phone: string; address: string; description: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Имя', dataIndex: 'name', key: 'name' },
+  { title: 'Возраст', dataIndex: 'age', key: 'age' },
+  { title: 'Адрес', dataIndex: 'address', key: 'address' },
+  { title: 'Телефон', dataIndex: 'phone', key: 'phone' }
+];
+const data: TDataType[] = [
+  {
+    key: 1,
+    name: 'Иванов Иван',
+    age: 20,
+    phone: '79999999999',
+    address: 'г. Москва, ул. Ленина д. 1',
+    description: 'Меня зовут Иванов Иван, мне 20 лет и я живу по адресу г. Москва, ул. Ленина д. 1'
+  },
+  {
+    key: 2,
+    name: 'Иванов Василий',
+    age: 32,
+    phone: '79999999999',
+    address: 'г. Москва, ул. Ленина д. 2',
+    description: 'Меня зовут Иванов Василий, мне 32 года и я живу по адресу г. Москва, ул. Ленина д. 2'
+  },
+  {
+    key: 3,
+    name: 'Иванов Кирилл',
+    age: 41,
+    phone: '79999999999',
+    address: 'г. Москва, ул. Ленина д. 3',
+    description: 'Меня зовут Иванов Кирилл, мне 41 год и я живу по адресу г. Москва, ул. Ленина д. 3'
+  }
+];
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false">
+    <template #expandedRowRender="{ record }">
+      <p>{{ record.description }}</p>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Nested tables
+
+Anything can live inside `expandedRowRender` — including another `CdsTable` with its own columns and data.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsFunctionalButton, CdsStatus, CdsTable, CdsToggle } from '@central-design-system/components';
+
+const columns: NTable.NColumn.TColumns = [
+  { title: 'Название', dataIndex: 'name', key: 'name' },
+  { title: 'Платформа', dataIndex: 'platform', key: 'platform' },
+  { title: 'Версия', dataIndex: 'version', key: 'version' },
+  { title: 'Покрытие', dataIndex: 'coverage', key: 'coverage' },
+  { title: 'Автор', dataIndex: 'creator', key: 'creator' },
+  { title: 'Дата', dataIndex: 'createdAt', key: 'createdAt' },
+  { title: 'Действия', key: 'operation' }
+];
+const data = [...Array(3)].map((_, i) => ({
+  key: i,
+  name: `Компонент ${i + 1}`,
+  platform: 'iOS',
+  version: '3.2.1',
+  coverage: 100,
+  creator: 'i.ivanov',
+  createdAt: new Date('2023-02-07 23:12:00').toLocaleDateString()
+}));
+
+const innerColumns: NTable.NColumn.TColumns = [
+  { title: 'Дата', dataIndex: 'date', key: 'date' },
+  { title: 'Название', dataIndex: 'name', key: 'name' },
+  { title: 'Статус', key: 'state' },
+  { title: 'Покрытие', dataIndex: 'coverage', key: 'coverage' },
+  { title: 'Действие', dataIndex: 'operation', key: 'operation' }
+];
+const innerData = [...Array(3)].map((_, i) => ({
+  key: i,
+  date: new Date('2023-02-07 23:12:00').toLocaleDateString(),
+  name: `Это компонент ${i + 1}`,
+  coverage: 'Покрыто: 56'
+}));
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false">
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'operation'">
+        <CdsToggle hide-messages />
+      </template>
+    </template>
+    <template #expandedRowRender>
+      <CdsTable :columns="innerColumns" :data="innerData" :pagination="false">
+        <template #bodyCell="{ column }">
+          <template v-if="column.key === 'state'">
+            <span>
+              <CdsStatus status="success" text="Готово" />
+            </span>
+          </template>
+          <template v-else-if="column.key === 'operation'">
+            <span class="flex gap-2">
+              <CdsFunctionalButton icon="edit" />
+              <CdsFunctionalButton icon="delete" />
+            </span>
+          </template>
+        </template>
+      </CdsTable>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Tree data
+
+Records with a `children` field expand as a tree. Together with `row-selection`, the `checkStrictly: false` option turns on cascading selection: checking a parent selects its children.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsCheckbox, CdsTable } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type TDataItem = {
+  key: number;
+  name: string;
+  price: number;
+  description: string;
+  children?: TDataItem[];
+};
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: 'Название', dataIndex: 'name', key: 'name' },
+  { title: 'Цена, $', dataIndex: 'price', key: 'price', width: '12%' },
+  { title: 'Описание', dataIndex: 'description', width: '30%', key: 'description' }
+];
+const data: TDataItem[] = [
+  {
+    key: 1,
+    name: 'Apple iPhone',
+    price: 3250,
+    description: 'Описание товара',
+    children: [
+      { key: 11, name: 'iPhone 14 Pro', price: 2000, description: 'Описание товара' },
+      {
+        key: 12,
+        name: 'Power Bank',
+        price: 50,
+        description: 'Описание товара',
+        children: [{ key: 121, name: 'MagSafe Battery Pack', price: 50, description: 'Описание товара' }]
+      },
+      {
+        key: 13,
+        name: 'Headphones',
+        price: 1200,
+        description: 'Описание товара',
+        children: [
+          {
+            key: 131,
+            name: 'AirPods',
+            price: 1200,
+            description: 'Описание товара',
+            children: [
+              { key: 1311, name: 'AirPods Pro', price: 200, description: 'Описание товара' },
+              { key: 1312, name: 'AirPods Max', price: 1000, description: 'Описание товара' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  { key: 2, name: 'Xiaomi Mi', price: 200, description: 'Описание товара' }
+];
+
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys: NTable.TKey[], selectedRows: TDataItem[]) => {
+    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+  },
+  onSelect: (record: TDataItem, selected: boolean, selectedRows: TDataItem[]) => {
+    console.log('onSelect', record, selected, selectedRows);
+  }
+});
+
+const rowClassName = (record: TDataItem) => (!record.children?.length ? 'cds-table__row--no-children' : '');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsCheckbox v-model="rowSelection.checkStrictly" label="Строгий выбор" hide-messages />
+    <CdsTable :columns="columns" :data="data" :row-selection="rowSelection" :row-class-name="rowClassName" />
+  </div>
+</template>
+```
+
+### Expanding every node
+
+The `expanded-row-keys` prop makes expansion controlled: collect the keys of every parent record — and an "Expand all" button unfolds the whole tree.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsFunctionalButton, CdsTable } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+type TDataItem = {
+  key: number;
+  name: string;
+  price: number;
+  description: string;
+  children?: TDataItem[];
+};
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: 'Название', dataIndex: 'name', key: 'name' },
+  { title: 'Цена, $', dataIndex: 'price', key: 'price', width: '12%' },
+  { title: 'Описание', dataIndex: 'description', width: '30%', key: 'description' }
+];
+const data = ref<TDataItem[]>([
+  {
+    key: 1,
+    name: 'Apple iPhone',
+    price: 3250,
+    description: 'Описание товара',
+    children: [
+      { key: 11, name: 'iPhone 14 Pro', price: 2000, description: 'Описание товара' },
+      {
+        key: 12,
+        name: 'Power Bank',
+        price: 50,
+        description: 'Описание товара',
+        children: [{ key: 121, name: 'MagSafe Battery Pack', price: 50, description: 'Описание товара' }]
+      },
+      {
+        key: 13,
+        name: 'Headphones',
+        price: 1200,
+        description: 'Описание товара',
+        children: [
+          {
+            key: 131,
+            name: 'AirPods',
+            price: 1200,
+            description: 'Описание товара',
+            children: [
+              { key: 1311, name: 'AirPods Pro', price: 200, description: 'Описание товара' },
+              { key: 1312, name: 'AirPods Max', price: 1000, description: 'Описание товара' }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  { key: 2, name: 'Xiaomi Mi', price: 200, description: 'Описание товара' }
+]);
+
+const rowClassName = (record: TDataItem) => (!record.children?.length ? 'cds-table__row--no-children' : '');
+
+// Массив для хранения ключей развернутых узлов
+const expandedRowKeys = ref<NTable.TKey[]>([]);
+
+// Рекурсивная функция для сбора всех ключей из данных
+const getAllKeys = (items: TDataItem[]): NTable.TKey[] => {
+  let keys: NTable.TKey[] = [];
+  items.forEach((item) => {
+    keys.push(item.key);
+    if (item.children && item.children.length > 0) {
+      keys = keys.concat(getAllKeys(item.children));
+    }
+  });
+  return keys;
+};
+
+const allRowKeys = computed(() => getAllKeys(data.value));
+
+const allExpanded = computed(() => allRowKeys.value.every((key) => expandedRowKeys.value.includes(key)));
+
+const toggleAll = () => {
+  expandedRowKeys.value = allExpanded.value ? [] : allRowKeys.value;
+};
+
+const handleExpand = (expanded: boolean, record: TDataItem) => {
+  if (expanded) {
+    expandedRowKeys.value.push(record.key);
+  } else {
+    expandedRowKeys.value = expandedRowKeys.value.filter((key) => key !== record.key);
+  }
+};
+</script>
+
+<template>
+  <CdsTable
+    :columns="columns"
+    :data="data"
+    :expanded-row-keys="expandedRowKeys"
+    :row-class-name="rowClassName"
+    @expand="handleExpand"
+  >
+    <template #headerCell="{ title, column }">
+      <template v-if="column.key === 'name'">
+        <CdsFunctionalButton :icon="allExpanded ? 'chevron-down' : 'chevron-right'" @click="toggleAll" />
+      </template>
+      {{ title }}
+    </template>
+  </CdsTable>
+</template>
+```
+
+## Фильтры и сортировка
+
+Фильтры и сортировка описываются прямо в колонках: меню фильтра с
+вложенными пунктами, сортировка по одной или нескольким колонкам,
+управляемое состояние со сбросом и собственная панель фильтра.
+
+### Filters and sorting
+
+The column filter menu is set by `filters` and `onFilter`, the sorting by the `sorter` function. `sortDirections` lists the directions, `defaultSortOrder` sets the initial order, and `filterMultiple: false` switches the filter to single choice. Every change is reported by the `change` event.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ITableProps, NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: string; name: string; age: number; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  {
+    title: 'Имя',
+    dataIndex: 'name',
+    filters: [
+      { text: 'Иван', value: 'Иван' },
+      { text: 'Петр', value: 'Петр' },
+      {
+        text: 'Фамилии',
+        value: 'Submenu',
+        children: [
+          { text: 'Иванов', value: 'Иван Иванов' },
+          { text: 'Петров', value: 'Петр Петров' }
+        ]
+      }
+    ],
+    onFilter: (value, record: TDataType) => record.name.indexOf(value as string) === 0,
+    sorter: (a: TDataType, b: TDataType) => a.name.length - b.name.length,
+    sortDirections: ['descend']
+  },
+  {
+    title: 'Возраст',
+    dataIndex: 'age',
+    defaultSortOrder: 'descend',
+    sorter: (a: TDataType, b: TDataType) => a.age - b.age
+  },
+  {
+    title: 'Адрес',
+    dataIndex: 'address',
+    filters: [
+      { text: 'Москва', value: 'Москва' },
+      { text: 'Санкт-Петербург', value: 'Санкт-Петербург' }
+    ],
+    filterMultiple: false,
+    onFilter: (value, record: TDataType) => record.address.indexOf(value as string) === 0,
+    sorter: (a: TDataType, b: TDataType) => a.address.length - b.address.length,
+    sortDirections: ['descend', 'ascend']
+  }
+];
+
+const data: TDataType[] = [
+  { key: '1', name: 'Иван Иванов', age: 40, address: 'Москва, ул. Ленина, д. 1' },
+  { key: '2', name: 'Петр Петров', age: 42, address: 'Санкт-Петербург, ул. Ленина, д. 1' },
+  { key: '3', name: 'Иван Иванов', age: 18, address: 'Санкт-Петербург, ул. Ленина, д. 2' },
+  { key: '4', name: 'Петр Петров', age: 28, address: 'Москва, ул. Ленина, д. 2' }
+];
+
+const onChange: ITableProps<TDataType>['onChange'] = (pagination, filters, sorter) => {
+  console.log('onChange', pagination, filters, sorter);
+};
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" @change="onChange" />
+</template>
+```
+
+### Multiple sorting
+
+A `sorter` object with a `multiple` field allows sorting by several columns at once — the number sets the column's priority in the chain.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ITableProps, NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: string; product: string; usd: number; eur: number; rub: number };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Продукт', dataIndex: 'product' },
+  {
+    title: 'Цена USD',
+    dataIndex: 'usd',
+    sorter: { compare: (a, b) => a.usd - b.usd, multiple: 3 }
+  },
+  {
+    title: 'Цена EUR',
+    dataIndex: 'eur',
+    sorter: { compare: (a, b) => a.eur - b.eur, multiple: 2 }
+  },
+  {
+    title: 'Цена RUB',
+    dataIndex: 'rub',
+    sorter: { compare: (a, b) => a.rub - b.rub, multiple: 1 }
+  }
+];
+
+const data: TDataType[] = [
+  { key: '1', product: 'Позиция 1', usd: 100, eur: 92, rub: 9100 },
+  { key: '2', product: 'Позиция 2', usd: 50, eur: 46, rub: 4530 },
+  { key: '3', product: 'Позиция 3', usd: 150, eur: 138, rub: 13590 },
+  { key: '4', product: 'Позиция 4', usd: 25, eur: 23, rub: 2265 }
+];
+
+const onChange: ITableProps['onChange'] = (pagination, filters, sorter, extra) => {
+  console.log('params', pagination, filters, sorter, extra);
+};
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" @change="onChange" />
+</template>
+```
+
+### Resetting filters and sorting
+
+The `filteredValue` and `sortOrder` column props make the state controlled: keep it outside, update it in the `change` handler — and reset it with buttons in a single assignment.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ITableProps, NTable } from '@central-design-system/components';
+import { CdsButton, CdsTable } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+type TDataItem = { key: string; name: string; age: number; address: string };
+
+const filteredInfo = ref();
+const sortedInfo = ref();
+
+const columns = computed<NTable.NColumn.TColumns<TDataItem>>(() => {
+  const filtered = filteredInfo.value || {};
+  const sorted = sortedInfo.value || {};
+
+  return [
+    {
+      title: 'Имя',
+      dataIndex: 'name',
+      key: 'name',
+      filters: [
+        { text: 'Иван', value: 'Иван' },
+        { text: 'Петр', value: 'Петр' }
+      ],
+      filteredValue: filtered.name || null,
+      onFilter: (value, record: TDataItem) => record.name.includes(value as string),
+      sorter: (a: TDataItem, b: TDataItem) => a.name.length - b.name.length,
+      sortOrder: sorted.columnKey === 'name' && sorted.order,
+      ellipsis: true
+    },
+    {
+      title: 'Возраст',
+      dataIndex: 'age',
+      key: 'age',
+      sorter: (a: TDataItem, b: TDataItem) => a.age - b.age,
+      sortOrder: sorted.columnKey === 'age' && sorted.order
+    },
+    {
+      title: 'Адрес',
+      dataIndex: 'address',
+      key: 'address',
+      filters: [
+        { text: 'Москва', value: 'Москва' },
+        { text: 'Санкт-Петербург', value: 'Санкт-Петербург' }
+      ],
+      filteredValue: filtered.address || null,
+      onFilter: (value, record: TDataItem) => record.address.includes(value as string),
+      sorter: (a: TDataItem, b: TDataItem) => a.address.length - b.address.length,
+      sortOrder: sorted.columnKey === 'address' && sorted.order,
+      ellipsis: true
+    }
+  ] as NTable.NColumn.TColumns<TDataItem>;
+});
+
+const data: TDataItem[] = [
+  { key: '1', name: 'Иван Иванов', age: 40, address: 'Москва, ул. Ленина, д. 1' },
+  { key: '2', name: 'Петр Петров', age: 42, address: 'Санкт-Петербург, ул. Ленина, д. 1' },
+  { key: '3', name: 'Иван Иванов', age: 18, address: 'Санкт-Петербург, ул. Ленина, д. 2' },
+  { key: '4', name: 'Петр Петров', age: 28, address: 'Москва, ул. Ленина, д. 2' }
+];
+
+const handleChange: ITableProps['onChange'] = (pagination, filters, sorter) => {
+  filteredInfo.value = filters;
+  sortedInfo.value = sorter;
+};
+
+const clearFilters = () => {
+  filteredInfo.value = null;
+};
+
+const clearAll = () => {
+  filteredInfo.value = null;
+  sortedInfo.value = null;
+};
+
+const setAgeSort = () => {
+  sortedInfo.value = { order: 'descend', columnKey: 'age' };
+};
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" @change="handleChange">
+    <template #toolbar>
+      <div class="flex justify-end gap-2">
+        <CdsButton appearance="secondary" @click="clearFilters">Очистить фильтры</CdsButton>
+        <CdsButton appearance="secondary" @click="clearAll">Очистить фильтры и сортировки</CdsButton>
+        <CdsButton appearance="primary" @click="setAgeSort">Сортировать возраст</CdsButton>
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Custom filter panel
+
+The column's `customFilterDropdown: true` flag enables the `customFilterDropdown` and `customFilterIcon` slots — the filter panel and its icon are drawn by your markup, a search field for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsButton, CdsDivider, CdsIcon, CdsTable, CdsTextInput } from '@central-design-system/components';
+import { reactive, ref, toRefs } from 'vue';
+
+type TDataType = { key: string; name: string; age: number; address: string };
+
+const state = reactive({
+  searchText: '',
+  searchedColumn: ''
+});
+const searchInput = ref();
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  {
+    title: 'Имя',
+    dataIndex: 'name',
+    key: 'name',
+    customFilterDropdown: true,
+    onFilter: (value, record) =>
+      record.name
+        .toString()
+        .toLowerCase()
+        .includes((value as string).toLowerCase()),
+    onFilterDropdownVisibleChange: (visible) => {
+      if (visible) {
+        setTimeout(() => {
+          searchInput.value?.focus?.();
+        }, 100);
+      }
+    }
+  },
+  { title: 'Возраст', dataIndex: 'age', key: 'age' },
+  {
+    title: 'Адрес',
+    dataIndex: 'address',
+    key: 'address',
+    customFilterDropdown: true,
+    onFilter: (value, record) =>
+      record.address
+        .toString()
+        .toLowerCase()
+        .includes((value as string).toLowerCase()),
+    onFilterDropdownVisibleChange: (visible) => {
+      if (visible) {
+        setTimeout(() => {
+          searchInput.value?.focus?.();
+        }, 100);
+      }
+    }
+  }
+];
+const data: TDataType[] = [
+  { key: '1', name: 'Иван Иванов', age: 18, address: 'г. Москва ул. Ленина д. 1' },
+  { key: '2', name: 'Петр Петров', age: 25, address: 'г. Санкт-Петербург ул. Ленина д. 1' },
+  { key: '3', name: 'Александр Александрович', age: 48, address: 'г. Екатеринбург ул. Ленина д. 1' },
+  { key: '4', name: 'Иван Петрович', age: 42, address: 'г. Новосибирск ул. Ленина д. 1' }
+];
+
+const handleSearch = (selectedKeys: NTable.TKey[], confirm: Function, dataIndex?: NTable.TDataIndex) => {
+  confirm();
+  state.searchText = String(selectedKeys[0] ?? '');
+  state.searchedColumn = String(dataIndex ?? '');
+};
+
+const handleReset = (clearFilters: ({ confirm }: { confirm: boolean }) => void) => {
+  clearFilters({ confirm: true });
+  state.searchText = '';
+};
+
+const searchingRegExp = (searchText: string) => new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i');
+
+const { searchText, searchedColumn } = toRefs(state);
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data">
+    <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
+      <div class="p-1">
+        <cds-text-input
+          ref="searchInput"
+          :placeholder="'Введите ' + String(column?.title ?? '').toLowerCase()"
+          :model-value="selectedKeys[0]"
+          size="sm"
+          clearable
+          hide-messages
+          class="w-[176px]"
+          @update:model-value="(value: any) => setSelectedKeys(value ? [value] : [])"
+          @keydown.enter="handleSearch(selectedKeys, confirm, column?.dataIndex)"
+        />
+        <cds-divider class="my-3" />
+        <div class="flex gap-2">
+          <cds-button text="Сбросить" size="sm" appearance="secondary" @click="handleReset(clearFilters)" />
+          <cds-button
+            text="Найти"
+            size="sm"
+            prepend-icon="search"
+            @click="handleSearch(selectedKeys, confirm, column?.dataIndex)"
+          />
+        </div>
+      </div>
+    </template>
+    <template #customFilterIcon>
+      <cds-icon name="search" />
+    </template>
+    <template #bodyCell="{ text, column }">
+      <span v-if="searchText && searchedColumn === column.dataIndex">
+        <template v-for="(fragment, i) in text.toString().split(searchingRegExp(searchText))">
+          <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i">
+            {{ fragment }}
+          </mark>
+          <template v-else>{{ fragment }}</template>
+        </template>
+      </span>
+    </template>
+  </CdsTable>
+</template>
+```
+
+## Фиксация и прокрутка
+
+Работа с таблицами, которые не помещаются на экран: закрепление шапки
+и колонок при прокрутке и кнопки горизонтального скролла.
+
+### Fixed header
+
+The `scroll.y` property limits the height of the table body — the column header stays in place while you scroll vertically.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: number; name: string; age: number; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Имя', dataIndex: 'name', width: 150 },
+  { title: 'Возраст', dataIndex: 'age', width: 150 },
+  { title: 'Адрес', dataIndex: 'address' }
+];
+
+const data: TDataType[] = [...Array(100)].map((_, i) => ({
+  key: i,
+  name: `Иван Иванов ${i}`,
+  age: 27,
+  address: `г. Москва, ул. Ленина, д. ${i}`
+}));
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="{ total: 50 }" :scroll="{ y: 245 }" />
+</template>
+```
+
+### Fixed columns
+
+The column's `fixed: 'left' | 'right'` property pins it during horizontal scrolling. Set `scroll.x` wider than the container so that scrolling appears.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsButton, CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: string; name: string; age: number; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Имя', dataIndex: 'name', key: 'name', fixed: 'left', width: 100 },
+  { title: 'Возраст', dataIndex: 'age', key: 'age', fixed: 'left', width: 100 },
+  { title: 'Заголовок 1', dataIndex: 'address', key: '1' },
+  { title: 'Заголовок 2', dataIndex: 'address', key: '2' },
+  { title: 'Заголовок 3', dataIndex: 'address', key: '3' },
+  { title: 'Заголовок 4', dataIndex: 'address', key: '4' },
+  { title: 'Заголовок 5', dataIndex: 'address', key: '5' },
+  { title: 'Заголовок 6', dataIndex: 'address', key: '6' },
+  { title: 'Заголовок 7', dataIndex: 'address', key: '7' },
+  { title: 'Заголовок 8', dataIndex: 'address', key: '8' },
+  { title: 'Действия', key: 'actions', fixed: 'right', width: 100 }
+];
+
+const data: TDataType[] = [
+  { key: '1', name: 'Иван', age: 32, address: 'г. Москва' },
+  { key: '2', name: 'Петр', age: 40, address: 'г. Пермь' },
+  { key: '3', name: 'Вадим', age: 32, address: 'г. Москва' },
+  { key: '4', name: 'Евгений', age: 40, address: 'г. Балашиха' }
+];
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :scroll="{ x: 1300, y: 1000 }" :pagination="{ total: 2 }">
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'actions'">
+        <CdsButton size="sm" appearance="secondary">Удалить</CdsButton>
+      </template>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Fixed columns and header
+
+Together, `scroll.x` and `scroll.y` pin both the columns and the header — the center of the table scrolls in both directions.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsButton, CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: number; name: string; age: number; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Имя', dataIndex: 'name', key: 'name', fixed: 'left', width: 100 },
+  { title: 'Возраст', dataIndex: 'age', key: 'age', fixed: 'left', width: 100 },
+  { title: 'Заголовок 1', dataIndex: 'address', key: '1', width: 150 },
+  { title: 'Заголовок 2', dataIndex: 'address', key: '2', width: 150 },
+  { title: 'Заголовок 3', dataIndex: 'address', key: '3', width: 150 },
+  { title: 'Заголовок 4', dataIndex: 'address', key: '4', width: 150 },
+  { title: 'Заголовок 5', dataIndex: 'address', key: '5', width: 150 },
+  { title: 'Заголовок 6', dataIndex: 'address', key: '6', width: 150 },
+  { title: 'Заголовок 7', dataIndex: 'address', key: '7', width: 150 },
+  { title: 'Заголовок 8', dataIndex: 'address', key: '8', width: 150 },
+  { title: 'Действия', key: 'actions', fixed: 'right', width: 100 }
+];
+
+const data: TDataType[] = [...Array(10)].map((_, i) => ({
+  key: i,
+  name: `Иван ${i}`,
+  age: 24,
+  address: `ул. Главная, д. ${i}`
+}));
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :scroll="{ x: 1500, y: 300 }" :pagination="false">
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'actions'">
+        <CdsButton size="sm" appearance="secondary">Удалить</CdsButton>
+      </template>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Scroll buttons
+
+A table with horizontal scrolling can get scroll buttons: take the DOM node of the table body (`.cds-table__body`) through the component `ref` and change its `scrollLeft` on click.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsButton, CdsTable } from '@central-design-system/components';
+import { ref, unref } from 'vue';
+
+type TDataType = { key: string; name: string; age: number; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Имя', dataIndex: 'name', key: 'name', fixed: 'left', width: 100 },
+  { title: 'Возраст', dataIndex: 'age', key: 'age', fixed: 'left', width: 100 },
+  { title: 'Заголовок 1', dataIndex: 'address', key: '1' },
+  { title: 'Заголовок 2', dataIndex: 'address', key: '2' },
+  { title: 'Заголовок 3', dataIndex: 'address', key: '3' },
+  { title: 'Заголовок 4', dataIndex: 'address', key: '4' },
+  { title: 'Заголовок 5', dataIndex: 'address', key: '5' },
+  { title: 'Заголовок 6', dataIndex: 'address', key: '6' },
+  { title: 'Заголовок 7', dataIndex: 'address', key: '7' },
+  { title: 'Заголовок 8', dataIndex: 'address', key: '8' },
+  { title: 'Заголовок 9', dataIndex: 'address', key: '9' },
+  { title: 'Заголовок 10', dataIndex: 'address', key: '10' },
+  { title: 'Действия', key: 'actions', fixed: 'right', width: 100 }
+];
+
+const data: TDataType[] = [
+  { key: '1', name: 'Иван', age: 32, address: 'г. Москва' },
+  { key: '2', name: 'Петр', age: 40, address: 'г. Москва' }
+];
+
+// Функционал для реализации кнопок скролла
+const scrollStep = 50;
+const tableRef = ref<InstanceType<typeof CdsTable> | null>(null);
+
+function handleClickScrollButton(_event: MouseEvent, isLeft: boolean) {
+  const tableBody = unref(tableRef)?.$el.querySelector('.cds-table__body');
+
+  if (tableBody) {
+    tableBody.scrollLeft += isLeft ? -scrollStep : scrollStep;
+  }
+}
+</script>
+
+<template>
+  <CdsTable ref="tableRef" :columns="columns" :data="data" :scroll="{ x: 1300, y: 1000 }" :pagination="false">
+    <template #header>
+      <div class="flex justify-between">
+        <div>
+          <h4 class="mb-2">Заголовок таблицы</h4>
+          <p class="text-content-secondary">Описание таблицы в слоте заголовка таблицы</p>
+        </div>
+        <div>
+          <CdsButton text="Действие" />
+        </div>
+      </div>
+    </template>
+    <template #toolbar>
+      <div class="flex justify-end">
+        <div class="flex gap-2">
+          <CdsButton icon="chevron-left" appearance="tertiary" @click="(e) => handleClickScrollButton(e, true)" />
+          <CdsButton icon="chevron-right" appearance="tertiary" @click="(e) => handleClickScrollButton(e, false)" />
+        </div>
+      </div>
+    </template>
+
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'actions'">
+        <CdsButton appearance="secondary" size="sm">Удалить</CdsButton>
+      </template>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <CdsButton icon="chevron-left" appearance="tertiary" @click="(e) => handleClickScrollButton(e, true)" />
+        <CdsButton icon="chevron-right" appearance="tertiary" @click="(e) => handleClickScrollButton(e, false)" />
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+## Сценарии
+
+Готовые рецепты продуктовых таблиц: данные с сервера, модерация со
+сложной шапкой, встроенная пагинация со скелетоном и вложенные списки.
+
+### Data from the server
+
+Pagination, sorting and filters are handled on the backend: the `change` event gives you the current state of the table, the handler requests a page of data, and the `loading` prop shows the request in progress.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ITableProps } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+import { computed, onMounted, ref } from 'vue';
+
+type APIResponse = {
+  results: {
+    gender: 'female' | 'male';
+    name: { first: string; last: string };
+    email: string;
+    login: { uuid: string };
+    location: { city: string; country: string };
+  }[];
+};
+
+const columns = [
+  { title: 'Имя', dataIndex: 'name', sorter: true, width: '20%' },
+  {
+    title: 'Пол',
+    dataIndex: 'gender',
+    filters: [
+      { text: 'Мужчина', value: 'male' },
+      { text: 'Женщина', value: 'female' }
+    ],
+    width: '20%'
+  },
+  { title: 'Email', dataIndex: 'email' },
+  { title: 'Адрес', dataIndex: 'location', sorter: true }
+];
+const dataSource = ref<APIResponse['results']>([]);
+
+const FIRST_PAGE = 1;
+const PER_PAGE = 10;
+const TOTAL = 100;
+const pagination = computed(() => ({
+  total: TOTAL,
+  length: PER_PAGE
+}));
+
+const isLoading = ref(false);
+
+async function queryData(params: Record<string, any>) {
+  try {
+    isLoading.value = true;
+
+    const query = new URLSearchParams(
+      Object.entries(params)
+        .filter(([, value]) => value !== undefined && value !== null)
+        .map(([key, value]) => [key, String(value)])
+    );
+    const response = await fetch(`https://randomuser.me/api?${query}`);
+    const data: APIResponse = await response.json();
+
+    dataSource.value = data.results ?? [];
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+onMounted(() => {
+  queryData({ results: PER_PAGE, page: FIRST_PAGE });
+});
+
+const handleTableChange: ITableProps['onChange'] = (paginationInfo, filters: any, sorter: any) => {
+  queryData({
+    results: paginationInfo.length as number,
+    page: paginationInfo.modelValue,
+    sortField: sorter.field,
+    sortOrder: sorter.order,
+    ...filters
+  });
+};
+</script>
+
+<template>
+  <CdsTable
+    :data="dataSource"
+    :columns="columns"
+    :row-key="(record) => record.login.uuid"
+    :pagination="pagination"
+    :loading="isLoading"
+    @change="handleTableChange"
+  >
+    <template #bodyCell="{ column, text }">
+      <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
+      <template v-if="column.dataIndex === 'location'">{{ text.country }}, {{ text.city }}</template>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Product moderation
+
+A header with tabs, a toolbar with search and filters, an empty state with an action and external pagination in the footer — a typical table for a moderation section.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import {
+  CdsBadge,
+  CdsButton,
+  CdsEmptyState,
+  CdsFunctionalButton,
+  CdsIcon,
+  CdsLoader,
+  CdsPagination,
+  CdsSelect,
+  CdsSkeletonLoader,
+  CdsTab,
+  CdsTable,
+  CdsTabs,
+  CdsTag,
+  CdsTextInput,
+  CdsTooltip,
+  utils
+} from '@central-design-system/components';
+import { computed, onMounted, ref, unref, watch } from 'vue';
+
+const { debounce, plurals } = utils;
+
+type TDataItem = {
+  key: number;
+  sku: string;
+  date: string;
+  name: string;
+  category: string;
+  tolerance: number;
+  count: string;
+  base_price: number | string;
+  percent: number;
+  price: number | string;
+};
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: 'Артикул', dataIndex: 'sku', width: 140 },
+  { title: 'Дата', dataIndex: 'date', width: 140 },
+  { title: 'Наименование', dataIndex: 'name', width: 350 },
+  { title: 'Толеранс, %', dataIndex: 'tolerance', align: 'right', width: 110 },
+  { title: 'Единица', dataIndex: 'count', width: 110 },
+  { title: 'Базовая цена, ₽', dataIndex: 'base_price', align: 'right', width: 140 },
+  { title: '%', dataIndex: 'percent', align: 'right', width: 70 },
+  { title: 'Новая цена, ₽', dataIndex: 'price', align: 'right', width: 140 }
+];
+const data = ref<TDataItem[]>([]);
+const filtersData = ['Узлы, устройства и инструменты', 'Изделия производственные', 'Машины установки и оборудование'];
+const isLoading = ref(false);
+const tableDataSwitcher = ref(0);
+const isActiveFilters = ref(false);
+
+const currentPage = ref(1);
+const totalData = ref(100);
+const perPage = ref(10);
+const pagesLength = computed(() => Math.ceil(unref(totalData) / unref(perPage)));
+const pageSizeItems = Array.from(new Set([5, 10, 15, 20, 30, 50]), (item) => ({
+  value: item,
+  title: item.toString()
+}));
+
+const queryParams = computed(() => ({
+  page: unref(currentPage),
+  perPage: unref(perPage)
+}));
+
+const formatPrice = (price: number | string) =>
+  new Intl.NumberFormat('ru-RU', {
+    style: 'decimal',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(+price);
+
+const queryData = async (params?: Record<string, any>) => {
+  try {
+    isLoading.value = true;
+
+    const query = new URLSearchParams({ example: 'example1', ...params });
+    const response = await fetch(`https://cds-api.b2b-center.ru/api/v1/examples/data-table?${query}`);
+    const { data: examples, meta: metaInfo } = await response.json();
+    // Принудительная задержка для примера загрузки
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    totalData.value = metaInfo.total;
+    perPage.value = metaInfo.perPage;
+
+    data.value =
+      examples.map((item: TDataItem, idx: number) => ({
+        ...item,
+        base_price: formatPrice(item.base_price),
+        price: formatPrice(item.price),
+        key: idx
+      })) ?? [];
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const getDataTableExample = () => {
+  queryData(unref(queryParams));
+};
+const clearDataTableExample = () => {
+  data.value = [];
+};
+
+const isPublishLoading = ref(false);
+const publishData = async () => {
+  isPublishLoading.value = true;
+
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  selectedRowKeys.value = [];
+
+  isPublishLoading.value = false;
+};
+
+const selectedRowKeys = ref<NTable.TKey[]>([]);
+const selectedRowText = computed(() => plurals(unref(selectedRowKeys).length, ['строка', 'строки', 'строк']));
+
+const cancelSelected = () => {
+  selectedRowKeys.value = [];
+};
+
+const onSelectChange = (selectedKeys: NTable.TKey[]) => {
+  selectedRowKeys.value = selectedKeys;
+};
+
+const handleSearch = debounce(async () => {
+  await queryData(unref(queryParams));
+}, 500);
+
+onMounted(() => {
+  queryData(unref(queryParams));
+});
+
+watch([currentPage, perPage], () => {
+  queryData(unref(queryParams));
+});
+
+watch(tableDataSwitcher, () => {
+  queryData(unref(queryParams));
+});
+</script>
+
+<template>
+  <CdsTable
+    class="min-w-[860px]"
+    :columns="columns"
+    :data="data"
+    :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
+    :pagination="false"
+  >
+    <template #header>
+      <div class="flex justify-between">
+        <div>
+          <h4>Список товаров, поступивших на модерацию</h4>
+          <p class="mb-4 text-content-secondary">
+            Согласуйте или отклоните товары поставщика для их доступности в каталоге
+          </p>
+          <div class="flex">
+            <CdsTabs v-model="tableDataSwitcher">
+              <CdsTab>Все 654</CdsTab>
+              <CdsTab>Новые 340</CdsTab>
+              <CdsTab>Обновленные 314</CdsTab>
+            </CdsTabs>
+          </div>
+        </div>
+        <div>
+          <CdsButton appearance="secondary" text="Удалить данные" @click="clearDataTableExample" />
+        </div>
+      </div>
+    </template>
+
+    <template #toolbar>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <p>
+            Выбрано: <strong>{{ selectedRowKeys.length }}</strong> {{ selectedRowText }}
+          </p>
+          <CdsTextInput
+            prepend-inner-icon="search"
+            placeholder="Артикул, наименование"
+            hide-messages
+            class="w-[250px]"
+            @update:model-value="handleSearch"
+          />
+          <CdsButton
+            :appearance="isActiveFilters ? 'secondary' : 'tertiary'"
+            prepend-icon="filters"
+            @click="isActiveFilters = !isActiveFilters"
+          >
+            Фильтры
+            <CdsBadge v-if="isActiveFilters" content="10" inline />
+          </CdsButton>
+        </div>
+        <div class="flex gap-2">
+          <CdsButton appearance="secondary" text="Отклонить" @click="cancelSelected" />
+          <CdsButton text="Опубликовать" :loading="isPublishLoading" @click="publishData" />
+        </div>
+      </div>
+      <div v-if="isActiveFilters" class="mt-4">
+        <h6 class="mb-2">Активные фильтры:</h6>
+        <div class="flex flex-col gap-2">
+          <div class="flex">
+            <div class="flex items-start">
+              <CdsFunctionalButton icon="remove" @click="isActiveFilters = false" />
+              <div class="mx-1 flex h-[24px] items-center">Категории:</div>
+            </div>
+            <div class="flex flex-wrap items-center gap-2">
+              <CdsTag v-for="item in filtersData" :key="item">{{ item }}</CdsTag>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #headerCell="{ title, column }">
+      <div class="flex items-center" :class="{ 'justify-end': column.align === 'right' }">
+        <span>{{ title }}</span>
+        <CdsTooltip v-if="['count', 'percent'].includes(String(column.dataIndex))">
+          <template #activator="{ props }">
+            <CdsIcon name="info" class="ml-2" v-bind="props" />
+          </template>
+          Информация о столбце
+        </CdsTooltip>
+      </div>
+    </template>
+
+    <template #bodyCell>
+      <template v-if="isLoading">
+        <CdsSkeletonLoader type="text" />
+      </template>
+    </template>
+
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <CdsPagination v-model="currentPage" :length="pagesLength" class="w-full" />
+        <div class="flex w-full justify-center gap-1">
+          Отображено <strong>{{ perPage }}</strong> из <strong>{{ totalData }}</strong>
+        </div>
+        <div class="flex w-full items-center justify-end gap-2">
+          <span class="text-content-tertiary">Строк на странице:</span>
+          <CdsSelect v-model="perPage" :items="pageSizeItems" hide-messages class="max-w-[70px]" />
+        </div>
+      </div>
+    </template>
+
+    <template #emptyText>
+      <div class="flex h-[500px] items-center justify-center">
+        <CdsLoader v-if="isLoading" fixed overlay />
+        <CdsEmptyState
+          title="Нет данных"
+          description="Нажмите кнопку ниже чтобы добавить данные в таблицу"
+          illustration="documents"
+        >
+          <template #actions>
+            <CdsButton text="Добавить данные" @click="getDataTableExample" />
+          </template>
+        </CdsEmptyState>
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Items and prices
+
+Built-in pagination with a counter and a page size selector, a skeleton while loading and composite cells with an extra line of text.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ITableProps, NTable } from '@central-design-system/components';
+import {
+  CdsButton,
+  CdsEmptyState,
+  CdsLoader,
+  CdsSkeletonLoader,
+  CdsTab,
+  CdsTable,
+  CdsTabs,
+  CdsTextInput,
+  utils
+} from '@central-design-system/components';
+import { computed, onMounted, ref, unref, watch } from 'vue';
+
+const { plurals } = utils;
+
+type TDataItem = {
+  key: number;
+  id: number;
+  name: string;
+  best_price: number | string;
+  qty: number;
+  price: number | string;
+  tax: number;
+  delay: number;
+  download: boolean;
+};
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: '№', dataIndex: 'id', width: 40 },
+  { title: 'Позиция', dataIndex: 'name', width: 350 },
+  { title: 'Лучшая цена с НДС, ₽', dataIndex: 'best_price', width: 200, align: 'right' },
+  { title: 'Количество', dataIndex: 'qty', align: 'right', width: 80 },
+  { title: 'Цена за единицу с НДС, ₽', dataIndex: 'price', align: 'right', width: 200 },
+  { title: 'НДС, %', dataIndex: 'tax', align: 'right', width: 80 },
+  { title: 'Срок поставки, дней', dataIndex: 'delay', align: 'right', width: 180 },
+  { title: 'Документация', dataIndex: 'docs', align: 'right', width: 80 }
+];
+
+const data = ref<TDataItem[]>([]);
+const total = ref(10);
+const isLoading = ref(false);
+const tableDataSwitcher = ref(0);
+
+const formatPrice = (price: number | string) =>
+  new Intl.NumberFormat('ru-RU', {
+    style: 'decimal',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(+price);
+
+const queryDataTableExample = async () => {
+  try {
+    isLoading.value = true;
+
+    const response = await fetch('https://cds-api.b2b-center.ru/api/v1/examples/data-table?example=example2');
+    const { data: examples } = await response.json();
+    // Принудительная задержка для примера загрузки
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    data.value =
+      examples.map((item: TDataItem, idx: number) => ({
+        ...item,
+        best_price: formatPrice(item.best_price),
+        price: formatPrice(item.price),
+        key: idx
+      })) ?? [];
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const selectedRowKeys = ref<NTable.TKey[]>([]);
+const selectedRowText = computed(() => plurals(unref(selectedRowKeys).length, ['строка', 'строки', 'строк']));
+
+const onSelectChange = (selectedKeys: NTable.TKey[]) => {
+  selectedRowKeys.value = selectedKeys;
+};
+
+const onTableChange: ITableProps<TDataItem>['onChange'] = (pagination) => {
+  total.value = pagination.total!;
+};
+
+onMounted(() => {
+  queryDataTableExample();
+});
+
+watch(tableDataSwitcher, () => {
+  queryDataTableExample();
+});
+</script>
+
+<template>
+  <CdsTable
+    class="min-w-[860px]"
+    :columns="columns"
+    :data="data"
+    :pagination="{ total, position: ['bottomLeft'], counter: true, size: true }"
+    :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
+    @change="onTableChange"
+  >
+    <template #header>
+      <div class="flex justify-between">
+        <div>
+          <h4 class="mb-4">Позиции и цены</h4>
+          <CdsTabs v-model="tableDataSwitcher">
+            <CdsTab>Заявки на позиции</CdsTab>
+            <CdsTab>Позиции без заявки</CdsTab>
+          </CdsTabs>
+        </div>
+        <div>
+          <CdsButton prepend-icon="upload" appearance="secondary" text="Загрузить из файла" />
+        </div>
+      </div>
+    </template>
+
+    <template #toolbar>
+      <div class="flex items-end justify-between">
+        <div>
+          <p>
+            Выбрано: <strong>{{ selectedRowKeys.length }}</strong> {{ selectedRowText }}
+          </p>
+        </div>
+        <div class="flex gap-2">
+          <CdsTextInput prefix="на" suffix="%" model-value="5" hide-messages class="mr-2 w-[127px]" />
+          <CdsButton appearance="secondary" text="Пересчитать" />
+          <CdsButton text="Сохранить цены" />
+        </div>
+      </div>
+    </template>
+
+    <template #bodyCell="{ column, record, text }">
+      <template v-if="isLoading">
+        <CdsSkeletonLoader type="text@4" />
+      </template>
+      <template v-else>
+        <div v-if="column.dataIndex === 'name'" class="flex flex-col">
+          <p>{{ text }}</p>
+          <span class="text-content-secondary">Количество: 100 шт</span>
+          <span class="text-content-secondary">Максимальная цена: 150.00 ₽ с НДС 20%</span>
+        </div>
+        <div v-if="column.dataIndex === 'docs'">
+          <CdsButton
+            size="sm"
+            :prepend-icon="record.download ? 'download' : 'upload'"
+            :appearance="record.download ? 'tertiary' : 'secondary'"
+            :text="record.download ? 'Скачать' : 'Добавить'"
+          />
+        </div>
+      </template>
+    </template>
+
+    <template #emptyText>
+      <div class="flex h-[500px] items-center justify-center">
+        <CdsLoader v-if="isLoading" fixed overlay />
+        <CdsEmptyState
+          title="Нет данных"
+          description="Нажмите кнопку ниже чтобы добавить данные в таблицу"
+          illustration="documents"
+        >
+          <template #actions>
+            <CdsButton text="Добавить данные" @click="queryDataTableExample" />
+          </template>
+        </CdsEmptyState>
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Item list
+
+A nested table inside an expanded row and a toolbar with fields and a dropdown calendar — a recipe for documents with line items.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ITableProps, NTable } from '@central-design-system/components';
+import {
+  CdsButton,
+  CdsDatePicker,
+  CdsEmptyState,
+  CdsFunctionalButton,
+  CdsLoader,
+  CdsMenu,
+  CdsSkeletonLoader,
+  CdsTab,
+  CdsTable,
+  CdsTabs,
+  CdsTextInput,
+  utils
+} from '@central-design-system/components';
+import { computed, onMounted, ref, unref, watch } from 'vue';
+
+const { plurals } = utils;
+
+type TInnerDataItem = {
+  key: number | string;
+  factory: string;
+  firm: number;
+  place: string;
+  date: string;
+  price_one: number | string;
+  qty: number;
+  price: number | string;
+};
+type TDataItem = {
+  key: number | string;
+  id: number;
+  name: string;
+  group: number | string;
+  size: number;
+  qty: number | string;
+  price: number | string;
+  innerData: TInnerDataItem[];
+};
+
+const columns: NTable.NColumn.TColumns<TDataItem> = [
+  { title: '№', dataIndex: 'id', width: 59 },
+  { title: 'Код ОЗМ', dataIndex: 'code', width: 91 },
+  { title: 'Позиция', dataIndex: 'name', width: 545 },
+  { title: 'Группа закупок', dataIndex: 'group', width: 187 },
+  { title: 'Единица', dataIndex: 'size', width: 89 },
+  { title: 'Количество', dataIndex: 'qty', align: 'right', width: 107 },
+  { title: 'Плановая стоимость, ₽', dataIndex: 'price', align: 'right', width: 187 },
+  { title: '', dataIndex: 'action', width: 45 }
+];
+const innerColumns: NTable.NColumn.TColumns<TInnerDataItem> = [
+  { title: 'Завод', dataIndex: 'factory', width: 98 },
+  { title: 'Склад', dataIndex: 'firm', width: 92 },
+  { title: 'Место поставки', dataIndex: 'place', width: 218 },
+  { title: 'Плановая дата поставки', dataIndex: 'date', width: 280 },
+  { title: 'Цена за единицу, ₽', dataIndex: 'price_one', align: 'right', width: 290 },
+  { title: 'Количество', dataIndex: 'qty', align: 'right', width: 107 },
+  { title: 'Плановая стоимость, ₽', dataIndex: 'price', align: 'right', width: 185 },
+  { title: '', dataIndex: 'action', width: 44 }
+];
+
+const data = ref<TDataItem[]>([]);
+const total = ref(10);
+const isLoading = ref(false);
+const tableDataSwitcher = ref(0);
+const date = ref('');
+
+const formatPrice = (price: number | string) =>
+  new Intl.NumberFormat('ru-RU', {
+    style: 'decimal',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(+price);
+
+const queryDataTableExample = async () => {
+  try {
+    isLoading.value = true;
+
+    const response = await fetch('https://cds-api.b2b-center.ru/api/v1/examples/data-table?example=example3');
+    const { data: examples } = await response.json();
+    // Принудительная задержка для примера загрузки
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    data.value =
+      examples.map((item: TDataItem, idx: number) => ({
+        ...item,
+        price: formatPrice(item.price),
+        innerData: item.innerData.map((innerItem, innerIdx) => ({
+          ...innerItem,
+          price_one: formatPrice(innerItem.price_one),
+          key: `${idx}.${innerIdx}`
+        })),
+        key: idx
+      })) ?? [];
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const selectedRowKeys = ref<NTable.TKey[]>([]);
+const selectedRowText = computed(() => plurals(unref(selectedRowKeys).length, ['строка', 'строки', 'строк']));
+
+const onSelectChange = (selectedKeys: NTable.TKey[]) => {
+  selectedRowKeys.value = selectedKeys;
+};
+
+const onTableChange: ITableProps<TDataItem>['onChange'] = (pagination) => {
+  total.value = pagination.total!;
+};
+
+onMounted(() => {
+  queryDataTableExample();
+});
+
+watch(tableDataSwitcher, () => {
+  queryDataTableExample();
+});
+</script>
+
+<template>
+  <CdsTable
+    class="min-w-[860px]"
+    :columns="columns"
+    :data="data"
+    :pagination="{ total, position: ['bottomLeft'], counter: true, size: true }"
+    :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
+    @change="onTableChange"
+  >
+    <template #header>
+      <div class="flex justify-between">
+        <div>
+          <h4 class="mb-4">Список позиций</h4>
+          <CdsTabs v-model="tableDataSwitcher">
+            <CdsTab text="Позиции" />
+            <CdsTab text="Адреса" />
+          </CdsTabs>
+        </div>
+        <div class="flex gap-2">
+          <CdsButton prepend-icon="download" appearance="secondary" text="Скачать шаблон" />
+          <CdsButton prepend-icon="upload" appearance="secondary" text="Загрузить из файла" />
+        </div>
+      </div>
+    </template>
+
+    <template #toolbar>
+      <div class="flex flex-wrap items-end justify-between gap-4">
+        <div class="flex items-end gap-4">
+          <p class="min-w-[121px]">
+            Выбрано: <strong>{{ selectedRowKeys.length }}</strong> {{ selectedRowText }}
+          </p>
+          <CdsTextInput label="Все адреса" placeholder="Введите адрес" hide-messages class="w-[250px]" />
+          <CdsTextInput
+            v-model="date"
+            append-inner-icon="calendar"
+            label="Дата"
+            placeholder="Выберите дату"
+            hide-messages
+            class="w-[250px]"
+          >
+            <CdsMenu activator="parent" :close-on-content-click="false">
+              <CdsDatePicker v-model="date" />
+            </CdsMenu>
+          </CdsTextInput>
+        </div>
+        <div class="flex gap-2">
+          <CdsButton appearance="secondary" prepend-icon="add" text="Добавить позицию" />
+          <CdsButton appearance="secondary" prepend-icon="add" text="Добавить адреса и позиции" />
+        </div>
+      </div>
+    </template>
+
+    <template #bodyCell="{ column }">
+      <template v-if="isLoading">
+        <CdsSkeletonLoader type="text" />
+      </template>
+      <template v-else>
+        <CdsFunctionalButton v-if="column.dataIndex === 'action'" icon="delete" />
+      </template>
+    </template>
+
+    <template #expandedRowRender="{ record }">
+      <CdsTable :columns="innerColumns" :data="record.innerData" :pagination="false">
+        <template #bodyCell="{ column }">
+          <template v-if="column.dataIndex === 'action'">
+            <CdsFunctionalButton icon="delete" />
+          </template>
+        </template>
+      </CdsTable>
+    </template>
+
+    <template #emptyText>
+      <div class="flex h-[500px] items-center justify-center">
+        <CdsLoader v-if="isLoading" fixed overlay />
+        <CdsEmptyState
+          title="Нет данных"
+          description="Нажмите кнопку ниже чтобы добавить данные в таблицу"
+          illustration="documents"
+        >
+          <template #actions>
+            <CdsButton text="Добавить данные" @click="queryDataTableExample" />
+          </template>
+        </CdsEmptyState>
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+## Выбор строк
+
+Проп `row-selection` добавляет колонку с чекбоксами: выбранные ключи
+строк управляются снаружи, а меню выбора расширяется своими пунктами.
+
+### Selection and operations
+
+The `row-selection` object turns on row selection: `selectedRowKeys` holds the selected keys, `onChange` reports the changes. Actions on the selected set fit nicely in the `toolbar` slot.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsButton, CdsTable } from '@central-design-system/components';
+import { reactive, toRefs } from 'vue';
+
+const state = reactive<{ selectedRowKeys: NTable.TKey[]; loading: boolean }>({
+  selectedRowKeys: [],
+  loading: false
+});
+
+const start = () => {
+  state.loading = true;
+
+  setTimeout(() => {
+    state.loading = false;
+    state.selectedRowKeys = [];
+  }, 1000);
+};
+
+const cancel = () => {
+  state.selectedRowKeys = [];
+};
+
+const onSelectChange = (selectedRowKeys: NTable.TKey[]) => {
+  state.selectedRowKeys = selectedRowKeys;
+};
+
+const columns: NTable.NColumn.TColumns = [
+  { title: 'Заголовок 1', dataIndex: 'name' },
+  { title: 'Заголовок 2', dataIndex: 'age' },
+  { title: 'Заголовок 3', dataIndex: 'address' },
+  { title: 'Заголовок 4', dataIndex: 'phone' }
+];
+const data = [...Array(8)].map((_, i) => ({
+  key: i,
+  name: `Текст ячейки ${i}`,
+  age: `Текст ячейки ${i}`,
+  address: `Текст ячейки ${i}`,
+  phone: `Текст ячейки ${i}`
+}));
+
+const { selectedRowKeys, loading } = toRefs(state);
+</script>
+
+<template>
+  <CdsTable
+    :columns="columns"
+    :data="data"
+    :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
+    :pagination="false"
+  >
+    <template #toolbar>
+      <div class="flex items-center justify-between">
+        <p>
+          Выбрано: <strong>{{ selectedRowKeys.length }}</strong> строк
+        </p>
+        <div class="flex gap-2">
+          <CdsButton appearance="secondary" @click="cancel">Отменить</CdsButton>
+          <CdsButton :loading="loading" @click="start">Загрузить</CdsButton>
+        </div>
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Custom selection menu items
+
+The `selections` property fills the menu in the selection column header: the ready-made `SELECTION_ALL`, `SELECTION_INVERT` and `SELECTION_NONE` constants plus your own items with arbitrary logic.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable, SELECTION_ALL, SELECTION_INVERT, SELECTION_NONE } from '@central-design-system/components';
+import { computed, ref, unref } from 'vue';
+
+const selectedRowKeys = ref<NTable.TKey[]>([]);
+
+const onSelectChange = (selectedRows: NTable.TKey[]) => {
+  selectedRowKeys.value = selectedRows;
+};
+
+const rowSelection = computed(() => ({
+  selectedRowKeys: unref(selectedRowKeys),
+  onChange: onSelectChange,
+  hideDefaultSelections: true,
+  selections: [
+    SELECTION_ALL,
+    SELECTION_INVERT,
+    SELECTION_NONE,
+    {
+      key: 'odd',
+      text: 'Выбрать нечетные',
+      onSelect: (selectedRows: NTable.TKey[]) => {
+        selectedRowKeys.value = selectedRows.filter((_key, index) => index % 2 === 0);
+      }
+    },
+    {
+      key: 'even',
+      text: 'Выбрать четные',
+      onSelect: (selectedRows: NTable.TKey[]) => {
+        selectedRowKeys.value = selectedRows.filter((_key, index) => index % 2 !== 0);
+      }
+    }
+  ]
+}));
+
+const columns: NTable.NColumn.TColumns = [
+  { title: 'Заголовок 1', dataIndex: 'name' },
+  { title: 'Заголовок 2', dataIndex: 'age' },
+  { title: 'Заголовок 3', dataIndex: 'address' },
+  { title: 'Заголовок 4', dataIndex: 'phone' }
+];
+const data = [...Array(6)].map((_, i) => ({
+  key: i,
+  name: `Текст ячейки ${i}`,
+  age: `Текст ячейки ${i}`,
+  address: `Текст ячейки ${i}`,
+  phone: `Текст ячейки ${i}`
+}));
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :row-selection="rowSelection" :pagination="false" />
+</template>
+```
+
+## Обзор
+
+Таблица выводит большие наборы записей в колонках и берёт на себя работу
+с данными: сортировку, фильтры, пагинацию, выбор и раскрытие строк,
+фиксацию шапки и колонок. Колонки описываются пропом `columns`,
+данные — пропом `data`.
+
+### Showing data
+
+A minimal table: an array of column descriptions in `columns`, the records in `data`. The row key comes from the record's `key` field or from the `row-key` prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TSimpleRow = {
+  key: string;
+  name: string;
+  age: string;
+  address: string;
+  phone: string;
+};
+
+const simpleColumns: NTable.NColumn.TColumns<TSimpleRow> = [
+  { title: 'Заголовок', dataIndex: 'name' },
+  { title: 'Заголовок', dataIndex: 'age' },
+  { title: 'Заголовок', dataIndex: 'address' },
+  { title: 'Заголовок', dataIndex: 'phone' }
+];
+
+const makeSimpleData = (count: number): TSimpleRow[] =>
+  [...Array(count)].map((_, i) => ({
+    key: i.toString(),
+    name: 'Текст ячейки',
+    age: 'Текст ячейки',
+    address: 'Текст ячейки',
+    phone: 'Текст ячейки'
+  }));
+
+const columns = simpleColumns;
+const data = makeSimpleData(5);
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" />
+</template>
+```
+
+### Showing data
+
+The column's `align` property aligns the content — numeric values are conventionally aligned to the right.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: string; name: string; price: string; address: string; tags: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Наименование', dataIndex: 'name', key: 'name' },
+  { title: 'Цена', dataIndex: 'price', key: 'price', align: 'right' },
+  { title: 'Адрес', dataIndex: 'address', key: 'address' },
+  { title: 'Наличие', key: 'tags', dataIndex: 'tags' }
+];
+const data: TDataType[] = [
+  { key: '1', name: 'iPhone 17 Pro Max', price: '$1500', address: 'г. Москва', tags: 'В наличии' },
+  { key: '2', name: 'MacBook Air M5', price: '$2000', address: 'г. Москва', tags: 'В наличии' },
+  { key: '3', name: 'Apple Vision Pro', price: '$3500', address: 'г. Нью-Йорк', tags: 'Нет в наличии' }
+];
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false" />
+</template>
+```
+
+### Sizes
+
+The `size` prop controls the density: `md` is the default, `sm` and `xs` are for data-dense screens.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+const columns: NTable.NColumn.TColumns = [...Array(4)].map((_, i) => ({
+  title: 'Заголовок',
+  dataIndex: `header${i + 1}`,
+  key: (i + 1).toString()
+}));
+const data = [...Array(4)].map((_, i) => ({
+  key: (i + 1).toString(),
+  header1: 'Текст ячейки',
+  header2: 'Текст ячейки',
+  header3: 'Текст ячейки',
+  header4: 'Текст ячейки'
+}));
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <CdsTable :columns="columns" :data="data" size="md" :pagination="false">
+      <template #header>
+        <h4>Medium size</h4>
+      </template>
+    </CdsTable>
+
+    <CdsTable :columns="columns" :data="data" size="sm" :pagination="false">
+      <template #header>
+        <h4>Small size</h4>
+      </template>
+    </CdsTable>
+
+    <CdsTable :columns="columns" :data="data" size="xs" :pagination="false">
+      <template #header>
+        <h4>Extra small size</h4>
+      </template>
+    </CdsTable>
+  </div>
+</template>
+```
+
+### Rows
+
+The `row-class-name` property computes a row class from the record: the built-in `cds-table--striped` class alternates the background, `cds-table__row--warning` and `cds-table__row--error` add a status highlight. The `hovered` prop highlights the row under the cursor.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TSimpleRow = {
+  key: string;
+  name: string;
+  age: string;
+  address: string;
+  phone: string;
+};
+
+const simpleColumns: NTable.NColumn.TColumns<TSimpleRow> = [
+  { title: 'Заголовок', dataIndex: 'name' },
+  { title: 'Заголовок', dataIndex: 'age' },
+  { title: 'Заголовок', dataIndex: 'address' },
+  { title: 'Заголовок', dataIndex: 'phone' }
+];
+
+const makeSimpleData = (count: number): TSimpleRow[] =>
+  [...Array(count)].map((_, i) => ({
+    key: i.toString(),
+    name: 'Текст ячейки',
+    age: 'Текст ячейки',
+    address: 'Текст ячейки',
+    phone: 'Текст ячейки'
+  }));
+
+const columns = simpleColumns;
+const data = makeSimpleData(4);
+</script>
+
+<template>
+  <CdsTable
+    :columns="columns"
+    :data="data"
+    :row-class-name="(_record: unknown, index: number) => (index % 2 === 1 ? 'cds-table--striped' : '')"
+    :pagination="false"
+    hovered
+  />
+</template>
+```
+
+### Rows
+
+Статусная подсветка строк классами `cds-table__row--warning` и
+`cds-table__row--error` через `row-class-name`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TSimpleRow = {
+  key: string;
+  name: string;
+  age: string;
+  address: string;
+  phone: string;
+};
+
+const simpleColumns: NTable.NColumn.TColumns<TSimpleRow> = [
+  { title: 'Заголовок', dataIndex: 'name' },
+  { title: 'Заголовок', dataIndex: 'age' },
+  { title: 'Заголовок', dataIndex: 'address' },
+  { title: 'Заголовок', dataIndex: 'phone' }
+];
+
+const makeSimpleData = (count: number): TSimpleRow[] =>
+  [...Array(count)].map((_, i) => ({
+    key: i.toString(),
+    name: 'Текст ячейки',
+    age: 'Текст ячейки',
+    address: 'Текст ячейки',
+    phone: 'Текст ячейки'
+  }));
+
+const columns = simpleColumns;
+const data = makeSimpleData(4);
+</script>
+
+<template>
+  <CdsTable
+    :columns="columns"
+    :data="data"
+    :row-class-name="(_record, index) => (index % 2 === 1 ? 'cds-table__row--warning' : 'cds-table__row--error')"
+    :pagination="false"
+    hovered
+  />
+</template>
+```
+
+### Cell content
+
+The column's `ellipsis` property truncates long text to a single line with an ellipsis — in cells and in headers alike.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: string; name: string; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Заголовок таблицы', dataIndex: 'name', key: 'name' },
+  { title: 'Заголовок таблицы', dataIndex: 'address', key: 'address 1', ellipsis: true },
+  { title: 'Заголовок таблицы Заголовок таблицы', dataIndex: 'address', key: 'address 2', ellipsis: true },
+  { title: 'Заголовок таблицы Заголовок таблицы', dataIndex: 'address', key: 'address 3', ellipsis: true },
+  { title: 'Заголовок таблицы Заголовок таблицы', dataIndex: 'address', key: 'address 4', ellipsis: true }
+];
+const data: TDataType[] = [...Array(3)].map((_, i) => ({
+  key: (i + 1).toString(),
+  name: 'Текст ячейки',
+  address: 'Текст ячейки Текст ячейки Текст ячейки Текст ячейки'
+}));
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false" />
+</template>
+```
+
+### Responsiveness
+
+The column's `responsive` property lists the breakpoints at which the column is visible — secondary columns get hidden on narrow screens.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+const columns: NTable.NColumn.TColumns = [
+  { title: 'Заголовок (all screens)', dataIndex: 'name', key: 'name' },
+  { title: 'Заголовок (small screen or bigger)', dataIndex: 'age', key: 'age', responsive: ['smUp'] },
+  { title: 'Заголовок (medium screen or bigger)', dataIndex: 'address', key: 'address', responsive: ['mdUp'] },
+  {
+    title: 'Заголовок (only md, sm, xs screen)',
+    dataIndex: 'phone',
+    key: 'phone',
+    responsive: ['md', 'sm', 'xs']
+  }
+];
+const data = [{ key: '1', name: 'Текст ячейки', age: 'Текст ячейки', address: 'Текст ячейки', phone: 'Текст ячейки' }];
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false" />
+</template>
+```
+
+## Структура и заголовки
+
+Управление структурой таблицы: группировка шапки, объединение ячеек,
+слоты вокруг таблицы, изменение ширины колонок и декларативное описание
+колонок компонентами.
+
+### Grouping headers
+
+A nested `children` array on a column joins several columns under a shared header — the header becomes multi-level.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+const columns: NTable.NColumn.TColumns = [
+  { title: 'Имя', dataIndex: 'name', key: 'name', width: 100, fixed: 'left' },
+  {
+    title: 'Информация',
+    children: [
+      { title: 'Возраст', dataIndex: 'age', key: 'age', width: 200 },
+      {
+        title: 'Адрес',
+        children: [
+          { title: 'Улица', dataIndex: 'street', key: 'street', width: 200 },
+          {
+            title: 'Дом',
+            children: [
+              { title: 'Корпус', dataIndex: 'building', key: 'building', width: 100 },
+              { title: 'Квартира', dataIndex: 'number', key: 'number', width: 100 }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    title: 'Компания',
+    children: [
+      { title: 'Адрес компании', dataIndex: 'companyAddress', key: 'companyAddress', width: 200 },
+      { title: 'Название компании', dataIndex: 'companyName', key: 'companyName' }
+    ]
+  },
+  { title: 'Пол', dataIndex: 'gender', key: 'gender', width: 80, fixed: 'right' }
+];
+
+const data = [...Array(10)].map((_, i) => ({
+  key: i,
+  name: 'Иван',
+  age: i + 1,
+  street: 'Главная',
+  building: 'Б',
+  number: 1004,
+  companyAddress: 'г. Москва, ул. Ленина',
+  companyName: 'B2B-Center',
+  gender: 'Муж'
+}));
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false" :scroll="{ x: 'calc(700px + 50%)', y: 240 }" bordered />
+</template>
+```
+
+### Merging cells
+
+The column's `customCell` function returns `colSpan`/`rowSpan` for a specific cell, while `colSpan` on the column itself merges header cells. A cell with `colSpan: 0` is not rendered.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+
+type TDataType = { key: string; name: string; age: number; tel: string; phone: string; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  {
+    title: 'Имя',
+    dataIndex: 'name',
+    customCell: (_, index) => ({ colSpan: index! < 4 ? 1 : 5 })
+  },
+  {
+    title: 'Возраст',
+    dataIndex: 'age',
+    customCell: (_, index) => {
+      if (index === 4) return { colSpan: 0 };
+    }
+  },
+  {
+    title: 'Номер телефона',
+    colSpan: 2,
+    dataIndex: 'tel',
+    customCell: (_, index) => {
+      if (index === 2) return { rowSpan: 2 };
+      if (index === 3) return { rowSpan: 0 };
+      if (index === 4) return { colSpan: 0 };
+    }
+  },
+  {
+    title: 'Номер домашнего телефона',
+    colSpan: 0,
+    dataIndex: 'phone',
+    customCell: (_, index) => {
+      if (index === 4) return { colSpan: 0 };
+    }
+  },
+  {
+    title: 'Адрес',
+    dataIndex: 'address',
+    customCell: (_, index) => {
+      if (index === 4) return { colSpan: 0 };
+    }
+  }
+];
+const data: TDataType[] = [
+  {
+    key: '1',
+    name: 'Иванов Иван',
+    age: 20,
+    tel: '79999999999',
+    phone: '74959999999',
+    address: 'г. Москва, ул. Ленина д. 1'
+  },
+  {
+    key: '2',
+    name: 'Иванов Василий',
+    tel: '79999999999',
+    phone: '74959999999',
+    age: 32,
+    address: 'г. Москва, ул. Ленина д. 2'
+  },
+  {
+    key: '3',
+    name: 'Иванов Кирилл',
+    age: 41,
+    tel: '79999999999',
+    phone: '74959999999',
+    address: 'г. Москва, ул. Ленина д. 3'
+  },
+  {
+    key: '4',
+    name: 'Иванов Александр',
+    age: 30,
+    tel: '79999999999',
+    phone: '74959999999',
+    address: 'г. Екатеринбург, ул. Ленина д. 4'
+  },
+  {
+    key: '5',
+    name: 'Иванов Иван',
+    age: 18,
+    tel: '79999999999',
+    phone: '74959999999',
+    address: 'г. Новосибирск, ул. Ленина д. 5'
+  }
+];
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false" />
+</template>
+```
+
+### Header, toolbar and footer
+
+The `header`, `toolbar` and `footer` slots add your own areas around the table, and the `pagination` prop adds built-in pagination with a record counter and a page size selector.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { ITableProps, NTable } from '@central-design-system/components';
+import { CdsButton, CdsTab, CdsTable, CdsTabs, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type TDataType = { key: number; name: string; money: string; address: string };
+
+const columns: NTable.NColumn.TColumns<TDataType> = [
+  { title: 'Название', dataIndex: 'name' },
+  { title: 'Адрес', dataIndex: 'address' },
+  { title: 'Цена', className: 'column-money', dataIndex: 'money', align: 'right' }
+];
+const data: TDataType[] = [...Array(100)].map((_, i) => ({
+  key: i,
+  name: `Позиция ${i + 1}`,
+  money: new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format((i + 1) * 10000),
+  address: `г. Москва, ул. Ленина, д.${i}`
+}));
+
+const contentSwitcher = ref(0);
+const total = ref(10);
+
+const onChange: ITableProps<TDataType>['onChange'] = (pagination) => {
+  total.value = pagination.total!;
+};
+</script>
+
+<template>
+  <CdsTable
+    :columns="columns"
+    :data="data"
+    :pagination="{ total, counter: true, size: true, position: ['bottomLeft'] }"
+    @change="onChange"
+  >
+    <template #header>
+      <div class="flex justify-between">
+        <div>
+          <h4 class="mb-2">Заголовок таблицы</h4>
+          <p class="mb-4 text-content-secondary">Описание таблицы в слоте заголовка таблицы</p>
+          <div class="flex">
+            <CdsTabs v-model="contentSwitcher">
+              <CdsTab v-for="i in 5" :key="i">Текст</CdsTab>
+            </CdsTabs>
+          </div>
+        </div>
+        <div>
+          <CdsButton appearance="secondary" text="Внешнее действия" />
+        </div>
+      </div>
+    </template>
+
+    <template #toolbar>
+      <div class="flex justify-between">
+        <div class="flex gap-4">
+          <CdsTextInput prepend-inner-icon="search" placeholder="Описание поиска" hide-messages class="w-[250px]" />
+          <CdsButton prepend-icon="filters" text="Фильтры" appearance="tertiary" />
+        </div>
+        <div class="flex gap-2">
+          <CdsButton appearance="secondary" text="Отменить" />
+          <CdsButton text="Действие" />
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <h4>Подвал таблицы</h4>
+        <div class="flex gap-2">
+          <CdsButton appearance="secondary" text="Отменить" />
+          <CdsButton text="Действие" />
+        </div>
+      </div>
+    </template>
+  </CdsTable>
+</template>
+```
+
+### Resizing columns
+
+The column's `resizable` property enables dragging the header border. The new width is reported by the `resize-column` event — store it in the column description.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import type { NTable } from '@central-design-system/components';
+import { CdsTable } from '@central-design-system/components';
+import { ref } from 'vue';
+
+type TDataType = { key: string; name: string; price: string; address: string; tags: string };
+
+const columns = ref<NTable.NColumn.TColumns<TDataType>>([
+  { title: 'Наименование', dataIndex: 'name', key: 'name', resizable: true, width: 150 },
+  {
+    title: 'Цена',
+    dataIndex: 'price',
+    key: 'price',
+    align: 'right',
+    resizable: true,
+    width: 100,
+    minWidth: 100,
+    maxWidth: 200
+  },
+  { title: 'Адрес', dataIndex: 'address', key: 'address' },
+  { title: 'Наличие', key: 'tags', dataIndex: 'tags' }
+]);
+const data: TDataType[] = [
+  {
+    key: '1',
+    name: 'iPhone 17 Pro Max',
+    price: '$1500',
+    address: 'г. Москва, ул. Ленина, д. 1',
+    tags: 'В наличии'
+  },
+  {
+    key: '2',
+    name: 'MacBook Air M5',
+    price: '$2000',
+    address: 'г. Москва, ул. Ленина, д. 1',
+    tags: 'В наличии'
+  },
+  {
+    key: '3',
+    name: 'Apple Vision Pro',
+    price: '$3500',
+    address: 'г. Нью-Йорк, ул. Ленина, д. 1',
+    tags: 'Нет в наличии'
+  }
+];
+
+const handleResizeColumn = (width: number, column: NTable.NColumn.IColumn) => {
+  column.width = width;
+};
+</script>
+
+<template>
+  <CdsTable :columns="columns" :data="data" :pagination="false" @resize-column="handleResizeColumn" />
+</template>
+```
+
+### Declarative column descriptions
+
+Instead of the `columns` array, columns can be described in the template with the `CdsTableColumn` and `CdsTableColumnGroup` components — handy when headers and cells need their own markup.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsStatus, CdsTable, CdsTableColumn, CdsTableColumnGroup, CdsToggle } from '@central-design-system/components';
+
+type TDataType = {
+  key: string;
+  firstName: string;
+  lastName: string;
+  age: number;
+  address: string;
+  tags: string[];
+};
+
+const data: TDataType[] = [
+  {
+    key: '1',
+    firstName: 'Иван',
+    lastName: 'Иванов',
+    age: 20,
+    address: 'г. Москва, ул. Ленина, д. 1',
+    tags: ['Senior', 'Developer']
+  },
+  {
+    key: '2',
+    firstName: 'Анатолий',
+    lastName: 'Анатольев',
+    age: 42,
+    address: 'г. Москва, ул. Ленина, д. 2',
+    tags: ['Junior', 'Developer']
+  },
+  {
+    key: '3',
+    firstName: 'Игнат',
+    lastName: 'Игнатьев',
+    age: 33,
+    address: 'г. Москва, ул. Ленина, д. 3',
+    tags: ['Junior', 'Developer']
+  },
+  {
+    key: '4',
+    firstName: 'Петр',
+    lastName: 'Петров',
+    age: 28,
+    address: 'г. Москва, ул. Ленина, д. 4',
+    tags: ['Middle', 'Developer']
+  }
+];
+</script>
+
+<template>
+  <CdsTable :data="data" :pagination="false">
+    <CdsTableColumnGroup>
+      <template #title>
+        <span class="text-brand-primary">Сотрудник</span>
+      </template>
+      <CdsTableColumn key="firstName" data-index="firstName">
+        <template #title>
+          <span class="text-brand-primary">Имя</span>
+        </template>
+      </CdsTableColumn>
+      <CdsTableColumn key="lastName" title="Фамилия" data-index="lastName" />
+    </CdsTableColumnGroup>
+    <CdsTableColumn key="age" title="Возраст" data-index="age" />
+    <CdsTableColumn key="address" title="Адрес" data-index="address" />
+    <CdsTableColumn key="tags" title="Особенности" data-index="tags">
+      <template #default="{ text: tags }">
+        <CdsStatus
+          v-for="tag in tags"
+          :key="tag"
+          :status="tag === 'Junior' ? 'danger' : tag === 'developer' ? 'info' : 'success'"
+          class="mr-2"
+        >
+          {{ tag }}
+        </CdsStatus>
+      </template>
+    </CdsTableColumn>
+    <CdsTableColumn key="action" title="Действия" data-index="action">
+      <template #default="{ record }">
+        <CdsToggle :disabled="!record.tags.includes('Junior')" hide-messages />
+      </template>
+    </CdsTableColumn>
+  </CdsTable>
+</template>
+```