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

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

@@ -0,0 +1,320 @@
+# CdsSteps — 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.
+
+The stepper walks the user through a multi-step process: it shows which steps are done, which one is active and how many are left. It can switch the content of the steps and renders the "Back" / "Next" buttons out of the box, while a header without content works as a status tracker.
+
+## Steps from an array
+
+Pass an array of objects into `items` — the title, the description and the value of a step are read by the `item-title`, `item-text` and `item-value` keys (by default `title`, `text`, and the value is the ordinal number of the step starting from one). The content of a step comes from the `item.{value}` slots or from the shared `item` slot, and the "Back" / "Next" buttons are rendered automatically: their texts are changed by the `prev-text` / `next-text` props, and `hide-actions` hides the buttons.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCard, CdsSteps } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(1);
+const items = [
+  { title: 'ФИО', text: 'Имя и фамилия' },
+  { title: 'Паспортные данные', text: 'Номер паспорта и дата рождения' },
+  { title: 'Способ оплаты', text: 'Данные банковской карты' },
+  { title: 'Подтверждение', text: 'Код из смс' }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[750px]">
+    <CdsSteps v-model="step" :items="items">
+      <template v-for="(item, index) in items" :key="item.title" #[`item.${index+1}`]>
+        <CdsCard :title="item.title" :text="`Контент шага «${item.title}»: ${item.text.toLowerCase()}.`" borderless />
+      </template>
+    </CdsSteps>
+  </div>
+</template>
+```
+
+## States
+
+Steps can also be declared by hand — with `CdsStepsItem` components in the default slot: only the header is rendered, the content and the navigation stay up to you. A step has three states: `error` — finished with an error, `warning` — needs attention, `disabled` — unavailable.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(1);
+</script>
+
+<template>
+  <CdsSteps v-model="step">
+    <CdsStepsItem title="ФИО" text="Имя и фамилия" />
+    <CdsStepsItem title="Паспортные данные" error text="Номер паспорта и дата рождения" />
+    <CdsStepsItem title="Способ оплаты" disabled text="Данные банковской карты" />
+    <CdsStepsItem title="Подтверждение" warning text="Код из смс" />
+  </CdsSteps>
+</template>
+```
+
+## Interactive steps
+
+The `interactive` prop allows jumping to any step by click or from the keyboard — the progress animates in a cascade and `disabled` steps are skipped. The `readonly` prop turns the transitions off while keeping the appearance.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(2);
+</script>
+
+<template>
+  <CdsSteps v-model="step" interactive>
+    <CdsStepsItem title="ФИО" text="Имя и фамилия" />
+    <CdsStepsItem title="Паспортные данные" text="Номер паспорта и дата рождения" />
+    <CdsStepsItem title="Способ оплаты" text="Данные банковской карты" />
+    <CdsStepsItem title="Подтверждение" text="Код из смс" />
+  </CdsSteps>
+</template>
+```
+
+## Vertical layout
+
+The `vertical` prop turns the header into a column — a good fit for status trackers and narrow panels.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(0);
+</script>
+
+<template>
+  <div class="flex h-[350px] w-full items-center justify-center">
+    <CdsSteps v-model="step" vertical interactive>
+      <CdsStepsItem title="ФИО" text="Имя и фамилия" />
+      <CdsStepsItem title="Паспортные данные" text="Номер паспорта и дата рождения" />
+      <CdsStepsItem title="Способ оплаты" text="Данные банковской карты" />
+      <CdsStepsItem title="Подтверждение" text="Код из смс" />
+    </CdsSteps>
+  </div>
+</template>
+```
+
+## Slots
+
+The `title` and `text` slots receive the state of the step (`selected`, `complete`, `error`, `first`, `last`…) — handy for adding tags and hints.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsSteps, CdsStepsItem, CdsTag, CdsTooltip } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(3);
+const items = [
+  { title: 'ФИО', text: 'Имя и фамилия' },
+  { title: 'Паспортные данные', text: 'Номер паспорта и дата рождения', error: true },
+  { title: 'Способ оплаты', text: 'Данные банковской карты', disabled: true },
+  { title: 'Подтверждение', text: 'Код из смс' }
+];
+</script>
+
+<template>
+  <CdsSteps v-model="step">
+    <CdsStepsItem v-for="item in items" :key="item.title" :disabled="item.disabled" :error="item.error">
+      <template #title>
+        <span class="inline-flex items-center gap-1">
+          {{ item.title }}
+          <CdsTag v-if="!item.disabled" text="Доступ" />
+        </span>
+      </template>
+      <template #text="{ last }">
+        <span class="inline-flex items-center gap-1">
+          <CdsTooltip v-if="last">
+            <template #activator="{ props }">
+              <CdsIcon icon="info" v-bind="props" />
+            </template>
+            Push уведомления
+          </CdsTooltip>
+          {{ item.text }}
+        </span>
+      </template>
+    </CdsStepsItem>
+  </CdsSteps>
+</template>
+```
+
+## Model
+
+The active step is controlled through `v-model`. For steps from `items` the default value is the ordinal number starting from one; for steps declared by hand it is the index starting from zero. Your own value is set by the `item-value` key or by the `value` prop of `CdsStepsItem`. The `prev` / `next` methods are available through the component ref.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFunctionalButton, CdsSteps, CdsStepsItem } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(2);
+const items = [
+  { title: 'ФИО', text: 'Имя и фамилия' },
+  { title: 'Паспортные данные', text: 'Номер паспорта и дата рождения' },
+  { title: 'Способ оплаты', text: 'Данные банковской карты' },
+  { title: 'Подтверждение', text: 'Код из смс' }
+];
+const next = () => {
+  if (step.value < items.length - 1) step.value++;
+};
+const prev = () => {
+  if (step.value > 0) step.value--;
+};
+</script>
+
+<template>
+  <div>
+    <div class="mb-4 flex w-full items-center justify-center gap-2">
+      <CdsFunctionalButton icon="chevron-left" @click="prev" />
+      v-model: {{ step }}
+      <CdsFunctionalButton icon="chevron-right" @click="next" />
+    </div>
+    <CdsSteps v-model="step">
+      <CdsStepsItem v-for="item in items" :key="item.title" :title="item.title" :text="item.text" />
+    </CdsSteps>
+  </div>
+</template>
+```
+
+## Checkout wizard
+
+A classic wizard: every step gets its own `item.{value}` slot with a form. The built-in buttons page through the steps, and the fields are bound to shared state through `v-model`, so the data survives the transitions.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsForm, CdsRadio, CdsRadioGroup, CdsSteps, CdsTextInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(1);
+const city = ref('');
+const address = ref('');
+const payment = ref('card');
+
+const items = [
+  { title: 'Доставка', text: 'Город и адрес' },
+  { title: 'Оплата', text: 'Способ оплаты' },
+  { title: 'Проверка', text: 'Данные заказа' }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[750px]">
+    <CdsSteps v-model="step" :items="items">
+      <template #[`item.1`]>
+        <CdsForm class="m-auto flex w-[350px] flex-col gap-2 py-2">
+          <CdsTextInput v-model="city" label="Город" placeholder="Москва" />
+          <CdsTextInput v-model="address" label="Адрес" placeholder="Улица, дом, офис" />
+        </CdsForm>
+      </template>
+
+      <template #[`item.2`]>
+        <CdsRadioGroup v-model="payment" label="Как оплатите заказ?" class="m-auto w-[350px] py-2" hide-details>
+          <CdsRadio value="card" label="Банковской картой" />
+          <CdsRadio value="invoice" label="Счётом на компанию" />
+        </CdsRadioGroup>
+      </template>
+
+      <template #[`item.3`]>
+        <div class="m-auto flex w-[350px] flex-col gap-1 py-2">
+          <p>Доставка: {{ [city, address].filter(Boolean).join(', ') || 'не указана' }}</p>
+          <p>Оплата: {{ payment === 'card' ? 'банковской картой' : 'счётом на компанию' }}</p>
+        </div>
+      </template>
+    </CdsSteps>
+  </div>
+</template>
+```
+
+## Confirmation before moving on
+
+The `actions` slot replaces the built-in buttons and receives the `prev` and `next` methods — you define the conditions of the transition yourself. Here the "Next" button stays disabled until the user accepts the terms of service.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsCheckbox, CdsSteps } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(1);
+const agreed = ref(false);
+
+const items = [
+  { title: 'Условия', text: 'Договор оферты' },
+  { title: 'Данные', text: 'Реквизиты компании' },
+  { title: 'Готово', text: 'Заявка отправлена' }
+];
+</script>
+
+<template>
+  <div class="m-auto max-w-[750px]">
+    <CdsSteps v-model="step" :items="items">
+      <template #[`item.1`]>
+        <div class="m-auto flex w-[350px] flex-col gap-2 py-2">
+          <p>Перед заполнением заявки ознакомьтесь с условиями обслуживания.</p>
+          <CdsCheckbox v-model="agreed" label="Принимаю условия обслуживания" hide-details />
+        </div>
+      </template>
+
+      <template #[`item.2`]>
+        <p class="py-2 text-center">Здесь будет форма с реквизитами компании.</p>
+      </template>
+
+      <template #[`item.3`]>
+        <p class="py-2 text-center">Заявка отправлена — подтверждение придёт на почту.</p>
+      </template>
+
+      <template #actions="{ prev, next }">
+        <div class="flex items-center justify-between">
+          <CdsButton appearance="secondary" text="Назад" :disabled="step === 1" @click="prev" />
+          <CdsButton text="Далее" :disabled="step === 3 || (step === 1 && !agreed)" @click="next" />
+        </div>
+      </template>
+    </CdsSteps>
+  </div>
+</template>
+```
+
+## Request status
+
+A header without `items` works as a process tracker: only the steps, no content and no buttons. The completed stages are marked with indicators, and the descriptions carry the dates and the deadlines. The `vertical` prop lays the history out in a column.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSteps, CdsStepsItem } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsSteps :model-value="2" vertical>
+      <CdsStepsItem title="Заявка отправлена" text="12 марта, 10:24" />
+      <CdsStepsItem title="Документы проверены" text="13 марта, 16:02" />
+      <CdsStepsItem title="Согласование" text="Обычно занимает до двух дней" />
+      <CdsStepsItem title="Заключение договора" />
+    </CdsSteps>
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-steps/guidelines.md

@@ -0,0 +1,10 @@
+# CdsSteps — guidelines
+
+> Extracted from `docs/demos/Guidelines.vue` by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md).
+
+| ✅ Do | ❌ Don't |
+| --- | --- |
+| The step title is a short name of the stage; the details go into the text description. | Sentence-long titles inflate the header and are hard to scan. |
+| Three to five steps: the process stays graspable and every step is a meaningful stage. | Seven steps or more scare the user with their volume — merge the adjacent stages. |
+| The description adds to the title: what the step needs or what will happen. | A description that repeats the title adds nothing — drop it. |

package/skills/cds-builder/references/components/cds-steps/tokens.md

@@ -0,0 +1,52 @@
+# CdsSteps — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## _CdsSteps.variables.scss
+
+```scss
+@use 'sass:map';
+@use '../../../styles/settings';
+
+// CdsSteps
+$steps-section-gap: var(--cds-spacing-400) !default;
+$steps-header-gap: var(--cds-spacing-100) !default;
+
+// CdsStepsItem
+$steps-item-gap: var(--cds-spacing-100) !default;
+$steps-item-min-width: 96px !default;
+$steps-item-status-gap: var(--cds-spacing-100) !default;
+$steps-item-content-padding: var(--cds-spacing-400) !default;
+$steps-item-icon-size: 12px !default;
+$steps-item-icon-border: var(--cds-border-200) !default;
+$steps-item-indicator-size: 4px !default;
+$steps-item-indicator-radius: map.get(settings.$rounded, 'pill') !default;
+
+// CdsStepsItem (vertical)
+$steps-item-vertical-gap: var(--cds-spacing-200) !default;
+$steps-item-vertical-height: 56px !default;
+$steps-item-vertical-content-width: 168px !default;
+$steps-item-vertical-content-padding: var(--cds-spacing-400) !default;
+$steps-item-status-vertical-padding: var(--cds-spacing-100) !default;
+$steps-item-color: (
+  'icon-unpassed': rgb(var(--cds-color-line-primary)),
+  'icon-hover': rgb(var(--cds-color-status-progress-surface)),
+  'icon-disabled': rgb(var(--cds-color-line-disable)),
+  'current': rgb(var(--cds-color-status-progress-surface)),
+  'warning': rgb(var(--cds-color-status-warning-surface)),
+  'warning-text': rgb(var(--cds-color-status-warning-content)),
+  'error': rgb(var(--cds-color-status-danger-surface)),
+  'error-text': rgb(var(--cds-color-status-danger-content)),
+  'disabled': rgb(var(--cds-color-content-disable)),
+  'title': rgb(var(--cds-color-content-primary)),
+  'description': rgb(var(--cds-color-content-secondary)),
+  'focus': rgb(var(--cds-color-line-focus-outline)),
+  'indicator': rgb(var(--cds-color-fill-secondary)),
+  'stream': rgb(var(--cds-color-status-progress-surface))
+) !default;
+
+// CdsStepsActions
+$steps-actions-gap: var(--cds-spacing-200) !default;
+```

package/skills/cds-builder/references/components/cds-surface/api.md

@@ -0,0 +1,30 @@
+# CdsSurface — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md)
+
+A surface is a container with a background from the tokens, sizes, positioning and a theme of its own. Take it when a block needs a design system background rather than a ready-made component: the backdrop of a panel, a plate, the base of your own component.
+
+## CdsSurface
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `color` | `string \| undefined` | — | no | Background color of the surface |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `location` | `Anchor \| null \| undefined` | — | no | Position of the element relative to its container, for example "top left", "center", "bottom right". |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `position` | `"absolute" \| "static" \| "fixed" \| "relative" \| "sticky" \| undefined` | — | no | CSS positioning of the component — the value of the `position` property |
+| `tag` | `string \| JSXComponent<any> \| undefined` | `'div'` | no | Custom HTML tag or component to render |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | The main content of the surface. |

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

@@ -0,0 +1,106 @@
+# CdsSurface — 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 surface is a container with a background from the tokens, sizes, positioning and a theme of its own. Take it when a block needs a design system background rather than a ready-made component: the backdrop of a panel, a plate, the base of your own component.
+
+## Color
+
+The `color` prop sets the background from the theme tokens and picks a contrasting text color. Besides `surface-*`, any color of the palette and any CSS color will do. Which colors exactly hide behind the tokens is decided by the theme: the `theme` prop switches it for the surface and for everything inside it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSurface } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-2">
+    <CdsSurface color="surface-primary" class="p-3 rounded-200">surface-primary</CdsSurface>
+    <CdsSurface color="surface-secondary" class="p-3 rounded-200">surface-secondary</CdsSurface>
+    <CdsSurface color="surface-elevated" class="p-3 rounded-200">surface-elevated</CdsSurface>
+    <CdsSurface color="surface-inverse" class="p-3 rounded-200">surface-inverse</CdsSurface>
+  </div>
+</template>
+```
+
+## Sizes
+
+The `width`, `height`, `min-width`, `max-width`, `min-height` and `max-height` props accept a number (pixels) or a string with any CSS unit.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSurface } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-2">
+    <CdsSurface color="surface-secondary" width="120" height="80" class="p-2 rounded-200"> 120 × 80 </CdsSurface>
+
+    <CdsSurface color="surface-secondary" min-height="80" max-width="200" class="p-2 rounded-200">
+      Ширина не больше 200, высота не меньше 80
+    </CdsSurface>
+  </div>
+</template>
+```
+
+## Positioning
+
+The `position` prop sets the CSS position, `location` pins the surface to an edge of the container — `top end`, `bottom start`, `center`. Together they build a plate on top of another block.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsSurface } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsSurface color="surface-secondary" position="relative" height="140" class="w-[280px] m-auto rounded-200">
+    <CdsSurface color="surface-inverse" position="absolute" location="top end" class="p-1 rounded-100">
+      top end
+    </CdsSurface>
+
+    <CdsSurface color="surface-inverse" position="absolute" location="bottom start" class="p-1 rounded-100">
+      bottom start
+    </CdsSurface>
+  </CdsSurface>
+</template>
+```
+
+## A summary panel
+
+The surface gives the background and the sizes, while the paddings and the layout inside are up to you. The `tag` prop changes the tag of the wrapper — here it is `section`, so the block stays meaningful in the structure of the page.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsDivider, CdsSurface } from '@central-design-system/components';
+
+const rows = [
+  { label: 'Позиций', value: '12' },
+  { label: 'Доставка', value: '1 500 ₽' },
+  { label: 'Итого', value: '48 900 ₽' }
+];
+</script>
+
+<template>
+  <CdsSurface tag="section" color="surface-secondary" class="w-[320px] m-auto p-4 rounded-200">
+    <div class="flex flex-col gap-1">
+      <div v-for="row of rows" :key="row.label" class="flex justify-between">
+        <span>{{ row.label }}</span>
+        <b>{{ row.value }}</b>
+      </div>
+    </div>
+
+    <CdsDivider class="my-3" />
+
+    <CdsButton block text="Оформить заказ" />
+  </CdsSurface>
+</template>
+```

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

@@ -0,0 +1,120 @@
+# CdsTable — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Guidelines: [guidelines.md](guidelines.md) · Tokens: [tokens.md](tokens.md)
+
+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.
+
+Family: [CdsTable](#cdstable) + subcomponents: [CdsTableColumn](#cdstablecolumn), [CdsTableColumnGroup](#cdstablecolumngroup).
+
+## CdsTable
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `bordered` | `boolean \| undefined` | `false` | no | Show every table border |
+| `borderless` | `boolean \| undefined` | `false` | no | Remove every table border |
+| `canExpandable` | `boolean \| undefined` | `false` | no | Rows can be expanded |
+| `childrenColumnName` | `string \| undefined` | `'children'` | no | Name of the property holding the child records |
+| `columnDraggable` | `NTable.NDraggable.TColumnDraggable<any> \| undefined` | — | no | Column drag and drop. `true` or a configuration object `{ icon, disabled, allowDrop }`. Reordering only happens among siblings inside the same group; the consumer changes the order in the `@column-reorder` handler. |
+| `columns` | `NTable.NColumn.TColumns<any> \| undefined` | — | no | Table columns |
+| `components` | `NTable.NCustomize.TableComponents<any> \| undefined` | — | no | Override the default table components |
+| `customHeaderRow` | `NTable.NCustomize.TGetComponentProps<NTable.NColumn.IColumn<any>[]> \| undefined` | — | no | Sets the properties for every header row |
+| `customRow` | `NTable.NCustomize.TGetComponentProps<any> \| undefined` | — | no | Sets the properties for every row |
+| `data` | `any[] \| undefined` | — | no | Array of records to show in the table |
+| `defaultExpandAllRows` | `boolean \| undefined` | `false` | no | All rows are expanded by default |
+| `defaultExpandedRowKeys` | `NTable.TKey[] \| undefined` | `undefined as ITableProps['defaultExpandedRowKeys']` | no | Keys of the rows expanded by default |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `expandColumnWidth` | `number \| undefined` | — | no | Width of the expand column |
+| `expandedRowClassName` | `NTable.NRow.TClassName<any> \| undefined` | — | no | Classes for rows in the expanded state |
+| `expandedRowKeys` | `NTable.TKey[] \| undefined` | `undefined as ITableProps['expandedRowKeys']` | no | Keys of the currently expanded rows (supports v-model) |
+| `expandedRowRender` | `NTable.NExpand.TExpandedRowRender<any> \| undefined` | — | no | Render function for every expanded row |
+| `expandFixed` | `NTable.TFixed \| undefined` | — | no | Pin the expand column (left \| right \| boolean) |
+| `expandIcon` | `NTable.NExpand.TRenderExpandIcon<any> \| undefined` | — | no | Custom expand icon |
+| `expandIconColumnIndex` | `number \| undefined` | — | no | Index of the column that holds the expand icon |
+| `expandRowByClick` | `boolean \| undefined` | `false` | no | Expand the row by clicking anywhere in it |
+| `footer` | `NTable.NRender.TPanelRender<any> \| undefined` | — | no | Render function for the table footer |
+| `getPopupContainer` | `NTable.NCustomize.TGetPopupContainer \| undefined` | — | no | Container that dropdowns are rendered into |
+| `header` | `NTable.NRender.TPanelRender<any> \| undefined` | — | no | Render function for the table title |
+| `hovered` | `boolean \| undefined` | `false` | no | Highlight the row on hover |
+| `id` | `string \| undefined` | — | no | Table identifier |
+| `indentSize` | `number \| undefined` | `20` | no | Indent size in pixels for each nesting level |
+| `loading` | `boolean \| undefined` | `false` | no | Table loading state |
+| `locale` | `NTable.ILocale \| undefined` | — | no | Table localization (overrides the strings of the global locale) |
+| `pagination` | `false \| NTable.NPagination.IProps \| undefined` | — | no | Table pagination configuration |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `rowClassName` | `string \| NTable.NRow.TClassName<any> \| undefined` | — | no | Row classes |
+| `rowDraggable` | `NTable.NDraggable.TRowDraggable<any> \| undefined` | — | no | Row drag and drop. `true` or a configuration object `{ icon, disabled, allowDrop }`. Reordering only happens between siblings of the same parent; the consumer changes the order in the `@row-reorder` handler. |
+| `rowExpandable` | `((record: any) => boolean) \| undefined` | — | no | Whether the row can be expanded |
+| `rowKey` | `string \| NTable.NRow.TGetRowKey<any> \| undefined` | `'key'` | no | Unique row key — a string or a function returning a string |
+| `rowSelection` | `NTable.NRow.IRowSelection<any> \| undefined` | — | no | Row selection configuration |
+| `scroll` | `(NTable.TScroll & { scrollToFirstRowOnChange?: boolean \| undefined; }) \| undefined` | — | no | Whether the table can be scrolled |
+| `showExpandColumn` | `boolean \| undefined` | — | no | Show the expand column |
+| `showHeader` | `boolean \| undefined` | — | no | Whether to show the table header |
+| `showSorterTooltip` | `NTable.NSorter.TTooltip \| undefined` | `true` | no | Whether to show sorting tooltips in the header. You can pass an object with CdsTooltip properties. |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `sortDirection` | `string[] \| undefined` | — | no | Sorting of the table data. 'ascend' \| 'descend' |
+| `sticky` | `boolean \| NTable.NSticky.ISticky \| undefined` | — | no | Sticky behavior for the header and the scrollbar |
+| `tableLayout` | `NTable.TLayout \| undefined` | — | no | Fixed or auto layout |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `toolbar` | `NTable.NRender.TPanelRender<any> \| undefined` | — | no | Render function for the table toolbar |
+| `transformCellText` | `NTable.NCell.TTransformCellText<any> \| undefined` | — | no | Transform the text inside a cell |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `change` | `[pagination: NTable.NPagination.IProps, filters: Record<string, NTable.TFilterValue \| null>, sorter: NTable.ISorterResult<any> \| NTable.ISorterResult<any>[], extra: NTable.ICurrentData<any>]` | Fired when the pagination, the filters or the sorting change. |
+| `columnReorder` | `[info: NTable.NDraggable.IColumnReorderInfo<any>]` | Fired when a column is dragged. The consumer changes the order of the columns. |
+| `expand` | `[expanded: boolean, record: any]` | Fired when a row is expanded or collapsed. |
+| `expandedRowsChange` | `[expandedKeys: NTable.TKey[]]` | Fired when the set of expanded rows changes. |
+| `resizeColumn` | `[width: number, column: NTable.NColumn.IColumn<any>]` | Fired when a column is resized. |
+| `rowReorder` | `[info: NTable.NDraggable.IRowReorderInfo<any>]` | Fired when a row is dragged. The consumer changes the order of the data. |
+| `update:expandedRowKeys` | `[expandedKeys: NTable.TKey[]]` | Fired when the expanded rows are updated (v-model). |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `bodyCell` | `{ text: any; value: any; record: any; index: number; column: NTable.NColumn.IColumn<any>; }` | Custom render of a table body cell. |
+| `customFilterDropdown` | `NTable.NColumn.IFilterDropdownProps<any>` | Custom filter dropdown of a column (used together with the column `customFilterDropdown`). |
+| `customFilterIcon` | `{ filtered: boolean; column: NTable.NColumn.IColumn<any>; }` | Custom column filter icon. |
+| `default` | `any` | Declarative column description with CdsTableColumn / CdsTableColumnGroup. |
+| `emptyText` | `any` | Content shown when there is no data. |
+| `expandedRowRender` | `{ record: any; index: number; indent: number; expanded: boolean; }` | Render of the expanded row content. |
+| `expandIcon` | `NTable.NExpand.IRenderExpandIconProps<any>` | Custom row expand icon. |
+| `footer` | `readonly any[]` | Table footer (the panel below the table). |
+| `header` | `readonly any[]` | Table title (the panel above the table). |
+| `headerCell` | `{ title: NTable.NColumn.TTitle<any>; column: NTable.NColumn.IColumn<any>; }` | Custom render of a table header cell. |
+| `summary` | `{ pageData: readonly any[]; }` | Summary row of the table. |
+| `toolbar` | `readonly any[]` | Table toolbar (the panel above the table). |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `table` | `any` | Reference to the internal table instance — gives access to its methods and state. |
+
+---
+
+## CdsTableColumn
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `{ value: any; text: any; record: any; index?: number \| undefined; renderIndex?: number \| undefined; column: NTable.NColumn.IColumn<any>; }` | Custom render of a column cell. |
+| `filterIcon` | `{ filtered: boolean; column: NTable.NColumn.IColumn<any>; }` | Custom column filter icon. |
+| `title` | `NTable.NColumn.ITitleProps<any>` | Column title. |
+
+---
+
+## CdsTableColumnGroup
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Columns of the group (CdsTableColumn). |
+| `title` | `NTable.NColumn.ITitleProps<any>` | Title of the column group. |