Table

С сортировкой

Имя		Роль
Аня	30	Дизайнер
Боря	25	Разработчик
Витя	40	Менеджер
Галя	35	Аналитик

Сортировка: age по возрастанию

С выбором строк

Имя		Роль
Аня	30	Дизайнер
Боря	25	Разработчик
Витя	40	Менеджер
Галя	35	Аналитик

Выбрано:

Пустое состояние

Имя		Роль
Строк пока нет

Без закругления

Имя		Роль
Аня	30	Дизайнер
Боря	25	Разработчик
Витя	40	Менеджер
Галя	35	Аналитик

Ограничение высоты тела

Имя		Роль
Сотрудник 1	20	Разработчик
Сотрудник 2	21	Дизайнер
Сотрудник 3	22	Аналитик
Сотрудник 4	23	Разработчик
Сотрудник 5	24	Дизайнер
Сотрудник 6	25	Аналитик
Сотрудник 7	26	Разработчик
Сотрудник 8	27	Дизайнер
Сотрудник 9	28	Аналитик
Сотрудник 10	29	Разработчик
Сотрудник 11	30	Дизайнер
Сотрудник 12	31	Аналитик
Сотрудник 13	32	Разработчик
Сотрудник 14	33	Дизайнер
Сотрудник 15	34	Аналитик
Сотрудник 16	35	Разработчик
Сотрудник 17	36	Дизайнер
Сотрудник 18	37	Аналитик
Сотрудник 19	38	Разработчик
Сотрудник 20	39	Дизайнер
Сотрудник 21	40	Аналитик
Сотрудник 22	41	Разработчик
Сотрудник 23	42	Дизайнер
Сотрудник 24	43	Аналитик
Сотрудник 25	44	Разработчик
Сотрудник 26	20	Дизайнер
Сотрудник 27	21	Аналитик
Сотрудник 28	22	Разработчик
Сотрудник 29	23	Дизайнер
Сотрудник 30	24	Аналитик
Сотрудник 31	25	Разработчик
Сотрудник 32	26	Дизайнер
Сотрудник 33	27	Аналитик
Сотрудник 34	28	Разработчик
Сотрудник 35	29	Дизайнер
Сотрудник 36	30	Аналитик
Сотрудник 37	31	Разработчик
Сотрудник 38	32	Дизайнер
Сотрудник 39	33	Аналитик
Сотрудник 40	34	Разработчик

Без бордюра

Имя		Роль
Аня	30	Дизайнер
Боря	25	Разработчик
Витя	40	Менеджер
Галя	35	Аналитик

Входные параметры

Имя	Тип	По умолчанию	Описание
`columns`	`TableColumn[]`	`[]`	Список колонок. Поля: `key`, `label?`, `sortable?`, `align?` (`'left' \| 'center' \| 'right'`), `width?` (CSS-строка).
`rows`	`Record<string, unknown>[]`	`[]`	Строки данных.
`rowKey`	`string`	`'id'`	Поле строки с уникальным значением (используется для выбора).
`selectable`	`boolean`	`false`	Включает выбор строк.
`multiple`	`boolean`	`false`	Множественный выбор строк.
`modelValue`	`string \| number \| Array<string \| number>`	`undefined`	Выбранные значения строк (через `v-model`).
`striped`	`boolean`	`true`	Полосатые строки.
`hoverable`	`boolean`	`true`	Подсветка строк при наведении.
`rounded`	`boolean`	`true`	Закруглённые углы рамки таблицы. При `false` углы становятся прямыми.
`maxHeight`	`number \| string`	`undefined`	Максимальная высота тела таблицы (число — px, строка — любое CSS-значение). По умолчанию ограничения нет; при заданном значении тело прокручивается по вертикали, а шапка остаётся закреплённой.
`bordered`	`boolean`	`true`	Бордюр вокруг таблицы. При `false` внешняя рамка убирается, разделители строк и ячеек сохраняются.
`emptyText`	`string`	`'Нет данных'`	Текст пустого состояния.
`initialSort`	`{ key: string; order: TableSortOrder }`	`undefined`	Изначально отсортированное поле и направление сортировки.

События

Имя	Аргументы	Когда срабатывает
`update:modelValue`	`value: string \| number \| Array<string \| number>`	При изменении выбора строк.
`select`	`row: Record<string, unknown>`	При выборе строки.
`sort`	`key: string`, `order: TableSortOrder`	При клике по сортируемой колонке.

Описание

Table — простая таблица для отображения наборов данных с колонками, сортировкой и выбором строк. Сортировка управляется внутри компонента (или стартует с initialSort) и дополнительно сообщается событием sort наружу.

Используйте её для компактных и средних наборов данных, когда не требуется расширенный функционал DataTable (виртуализация, закрепление колонок и т.п.).

Дополнительная информация

Слот header — scoped-slot { column } для кастомного заголовка колонки.
Слот cell — scoped-slot { column, row, value } для кастомного содержимого ячейки; при selectable в колонке rowKey показывается чекбокс «✓».
Слот empty — содержимое пустого состояния (по умолчанию emptyText).
Выбор: клик по строке вызывает update:modelValue/select; с multiple=false сохраняется только одна выбранная строка.
Заголовки сортируемых колонок — кнопки с иконкой направления и атрибутом aria-sort; выбранные строки помечаются aria-selected и role="row".
Цикл сортировки: asc → desc → отключена.
Закругление рамки включается пропом rounded (по умолчанию true); при false добавляется класс c3-table--square с border-radius: 0.
Проп maxHeight ограничивает высоту прокручиваемой области тела и добавляет класс c3-table--scrollable: ячейки заголовков становятся position: sticky, поэтому шапка не уходит при вертикальной прокрутке.
Проп bordered (по умолчанию true) управляет внешним бордюром; при false добавляется класс c3-table--borderless с border: none, при этом линии между строками и ячейками остаются.