DataTable

Базовое использование

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

Фильтрация и экспорт CSV

	Возраст	Роль

Сотрудник 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	Разработчик
Сотрудник 41	35	Дизайнер
Сотрудник 42	36	Аналитик
Сотрудник 43	37	Разработчик
Сотрудник 44	38	Дизайнер
Сотрудник 45	39	Аналитик
Сотрудник 46	40	Разработчик
Сотрудник 47	41	Дизайнер
Сотрудник 48	42	Аналитик
Сотрудник 49	43	Разработчик
Сотрудник 50	44	Дизайнер
Сотрудник 51	20	Аналитик
Сотрудник 52	21	Разработчик
Сотрудник 53	22	Дизайнер
Сотрудник 54	23	Аналитик
Сотрудник 55	24	Разработчик
Сотрудник 56	25	Дизайнер
Сотрудник 57	26	Аналитик
Сотрудник 58	27	Разработчик
Сотрудник 59	28	Дизайнер
Сотрудник 60	29	Аналитик
Сотрудник 61	30	Разработчик
Сотрудник 62	31	Дизайнер
Сотрудник 63	32	Аналитик
Сотрудник 64	33	Разработчик
Сотрудник 65	34	Дизайнер
Сотрудник 66	35	Аналитик
Сотрудник 67	36	Разработчик
Сотрудник 68	37	Дизайнер
Сотрудник 69	38	Аналитик
Сотрудник 70	39	Разработчик
Сотрудник 71	40	Дизайнер
Сотрудник 72	41	Аналитик
Сотрудник 73	42	Разработчик
Сотрудник 74	43	Дизайнер
Сотрудник 75	44	Аналитик
Сотрудник 76	20	Разработчик
Сотрудник 77	21	Дизайнер
Сотрудник 78	22	Аналитик
Сотрудник 79	23	Разработчик
Сотрудник 80	24	Дизайнер
Сотрудник 81	25	Аналитик
Сотрудник 82	26	Разработчик
Сотрудник 83	27	Дизайнер
Сотрудник 84	28	Аналитик
Сотрудник 85	29	Разработчик
Сотрудник 86	30	Дизайнер
Сотрудник 87	31	Аналитик
Сотрудник 88	32	Разработчик
Сотрудник 89	33	Дизайнер
Сотрудник 90	34	Аналитик
Сотрудник 91	35	Разработчик
Сотрудник 92	36	Дизайнер
Сотрудник 93	37	Аналитик
Сотрудник 94	38	Разработчик
Сотрудник 95	39	Дизайнер
Сотрудник 96	40	Аналитик
Сотрудник 97	41	Разработчик
Сотрудник 98	42	Дизайнер
Сотрудник 99	43	Аналитик
Сотрудник 100	44	Разработчик

Поиск: — · фильтры: {}

CSV собирается из отфильтрованных строк и видимых колонок, с экранированием запятых и кавычек и BOM для Excel.

Фильтры ничего не нашли

	Возраст	Роль

Подходящих сотрудников нет

Сортировка, выбор, загрузка

Имя			Статус
Аня	30	Дизайнер	Активен
Боря	25	Разработчик	Не активен
Витя	40	Менеджер	Активен
Галя	35	Аналитик	Активен
Выбрано строк: 0 · Сортировка: age asc

Переключатель колонок и закрепление строк

ID	Имя	Роль	Статус
1	Аня	Дизайнер	ok
2	Боря	Разработчик	paused
3	Витя	Менеджер	ok
4	Галя	Аналитик	ok

Выбор ячеек и колонки-группы

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

Выбрано ячеек: 0

Виртуализация

Имя			Статус
Сотрудник 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	Аналитик	Активен

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

Имя			Статус
Аня	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	Разработчик	Активен
Сотрудник 41	35	Дизайнер	Не активен
Сотрудник 42	36	Аналитик	Активен
Сотрудник 43	37	Разработчик	Не активен
Сотрудник 44	38	Дизайнер	Активен
Сотрудник 45	39	Аналитик	Не активен
Сотрудник 46	40	Разработчик	Активен
Сотрудник 47	41	Дизайнер	Не активен
Сотрудник 48	42	Аналитик	Активен
Сотрудник 49	43	Разработчик	Не активен
Сотрудник 50	44	Дизайнер	Активен
Сотрудник 51	20	Аналитик	Не активен
Сотрудник 52	21	Разработчик	Активен
Сотрудник 53	22	Дизайнер	Не активен
Сотрудник 54	23	Аналитик	Активен
Сотрудник 55	24	Разработчик	Не активен
Сотрудник 56	25	Дизайнер	Активен
Сотрудник 57	26	Аналитик	Не активен
Сотрудник 58	27	Разработчик	Активен
Сотрудник 59	28	Дизайнер	Не активен
Сотрудник 60	29	Аналитик	Активен
Сотрудник 61	30	Разработчик	Не активен
Сотрудник 62	31	Дизайнер	Активен
Сотрудник 63	32	Аналитик	Не активен
Сотрудник 64	33	Разработчик	Активен
Сотрудник 65	34	Дизайнер	Не активен
Сотрудник 66	35	Аналитик	Активен
Сотрудник 67	36	Разработчик	Не активен
Сотрудник 68	37	Дизайнер	Активен
Сотрудник 69	38	Аналитик	Не активен
Сотрудник 70	39	Разработчик	Активен
Сотрудник 71	40	Дизайнер	Не активен
Сотрудник 72	41	Аналитик	Активен
Сотрудник 73	42	Разработчик	Не активен
Сотрудник 74	43	Дизайнер	Активен
Сотрудник 75	44	Аналитик	Не активен
Сотрудник 76	20	Разработчик	Активен
Сотрудник 77	21	Дизайнер	Не активен
Сотрудник 78	22	Аналитик	Активен
Сотрудник 79	23	Разработчик	Не активен
Сотрудник 80	24	Дизайнер	Активен
Сотрудник 81	25	Аналитик	Не активен
Сотрудник 82	26	Разработчик	Активен
Сотрудник 83	27	Дизайнер	Не активен
Сотрудник 84	28	Аналитик	Активен
Сотрудник 85	29	Разработчик	Не активен
Сотрудник 86	30	Дизайнер	Активен
Сотрудник 87	31	Аналитик	Не активен
Сотрудник 88	32	Разработчик	Активен
Сотрудник 89	33	Дизайнер	Не активен
Сотрудник 90	34	Аналитик	Активен
Сотрудник 91	35	Разработчик	Не активен
Сотрудник 92	36	Дизайнер	Активен
Сотрудник 93	37	Аналитик	Не активен
Сотрудник 94	38	Разработчик	Активен
Сотрудник 95	39	Дизайнер	Не активен
Сотрудник 96	40	Аналитик	Активен
Сотрудник 97	41	Разработчик	Не активен
Сотрудник 98	42	Дизайнер	Активен
Сотрудник 99	43	Аналитик	Не активен
Сотрудник 100	44	Разработчик	Активен

Без бордюра

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

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

Имя	Тип	По умолчанию	Описание
`columns`	`DataTableColumn[]`	`[]`	Список колонок. Поля колонки: `key`, `label?`, `width?`, `minWidth?`, `maxWidth?`, `align?`, `sortable?`, `resizable?`, `frozen?`, `group?`, `visible?`, `value?`, `formatter?`, `filterable?` (разрешает фильтрацию), `filter?` (собственный предикат `(value, row) => boolean`).
`rows`	`Record<string, unknown>[]`	`[]`	Строки данных.
`rowKey`	`string`	`'id'`	Поле строки с уникальным значением (используется для выбора).
`loading`	`boolean`	`false`	Показывает скелетон вместо строк.
`skeletonRows`	`number`	`5`	Количество скелетон-строк при загрузке.
`noResultsText`	`string`	`'Ничего не найдено'`	Текст состояния «фильтры ничего не нашли». Показывается вместо `emptyText`, когда данные есть, но отфильтрованы полностью.
`searchable`	`boolean`	`false`	Показывать поле глобального поиска в панели инструментов.
`searchPlaceholder`	`string`	`'Поиск'`	Подпись поля глобального поиска (и его `aria-label`).
`globalFilter`	`string`	`''`	Глобальный поиск по всем видимым колонкам (внешнее состояние, через `v-model:global-filter`).
`filters`	`Record<string, string>`	`{}`	Значения фильтров по колонкам: ключ колонки → подстрока (внешнее состояние, через `v-model:filters`). Пустая строка означает отсутствие фильтра.
`exportable`	`boolean`	`false`	Показывать кнопку экспорта отфильтрованных строк в CSV.
`exportFilename`	`string`	`'export'`	Имя файла при экспорте в CSV. Расширение `.csv` добавляется автоматически.
`emptyText`	`string`	`'Нет данных'`	Текст пустого состояния.
`selectable`	`boolean`	`false`	Включает выбор строк.
`multiple`	`boolean`	`false`	Множественный выбор строк.
`modelValue`	`string \| number \| Array<string \| number>`	`undefined`	Выбранные значения строк (через `v-model`).
`cellSelectable`	`boolean`	`false`	Включает выбор отдельных ячеек.
`selectedCells`	`string[]`	`[]`	Выбранные ячейки в формате «`rowIndex:key`» (через `v-model:selected-cells`).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер строк таблицы.
`striped`	`boolean`	`false`	Полосатые строки.
`gridLines`	`boolean`	`false`	Сетка между ячейками.
`rounded`	`boolean`	`true`	Закруглённые углы рамки таблицы. При `false` углы становятся прямыми.
`maxHeight`	`number \| string`	`undefined`	Максимальная высота тела таблицы (число — px, строка — любое CSS-значение). По умолчанию ограничения нет; при заданном значении тело прокручивается по вертикали, а шапка остаётся закреплённой.
`bordered`	`boolean`	`true`	Бордюр вокруг таблицы. При `false` внешняя рамка убирается, разделители строк и ячеек сохраняются.
`columnToggle`	`boolean`	`false`	Показывать переключатель видимости колонок.
`pagination`	`DataTablePagination?`	`undefined`	Внешняя пагинация: `page`, `pageSize`, `total`.
`sortBy`	`string \| null`	`null`	Отсортированное поле (управляется снаружи).
`sortOrder`	`'asc' \| 'desc' \| null`	`null`	Направление сортировки (управляется снаружи).
`frozenRows`	`boolean`	`false`	Показывает кнопку закрепления первых строк.
`virtual`	`boolean`	`false`	Включает виртуализацию (фиксированная высота строки).
`rowHeight`	`number`	`40`	Высота строки для виртуализации (px).
`virtualHeight`	`number`	`400`	Высота видимой области при виртуализации (px).

События

Имя	Аргументы	Когда срабатывает
`update:modelValue`	`value: string \| number \| Array<string \| number>`	При изменении выбора строк.
`select`	`row: Record<string, unknown>`	При выборе строки.
`select-all`	`checked: boolean`	При выборе/снятии выбора всех видимых строк.
`update:selectedCells`	`cells: string[]`	При изменении выбора ячеек.
`sort`	`key: string`, `order: DataTableSortOrder`	При клике по сортируемой колонке.
`page-change`	`page: number`	При смене страницы внешней пагинации.
`reorder`	`columns: DataTableColumn[]`	После перетаскивания колонок.
`resize`	`key: string`, `width: number`	После изменения ширины колонки.
`toggle-column`	`column: DataTableColumn`, `visible: boolean`	При переключении видимости колонки.
`toggle-frozen-rows`	—	При нажатии кнопки закрепления строк.
`update:globalFilter`	`value: string`	При вводе в поле глобального поиска.
`update:filters`	`filters: Record<string, string>`	При вводе в поле фильтра колонки. Содержит все фильтры, а не только изменённый.
`export-csv`	`filename: string`	После скачивания CSV-файла.

Описание

DataTable — расширенная таблица данных для больших и сложных наборов строк: сортировка (внешняя), выбор строк и ячеек, закрепление колонок и строк, изменение ширины и перетаскивание колонок, многоуровневые заголовки, виртуализация, состояние загрузки и пустое состояние.

Сортировка управляется снаружи: клик по заголовку эмитит sort, а поле и направление задаются пропсами sortBy/sortOrder. Для больших списков включите virtual — рендерятся только видимые строки.

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

Слот cell — scoped-slot { column, row, value } для кастомного содержимого ячейки; по умолчанию использует formatter или аксессор value.
Слот empty — содержимое пустого состояния (по умолчанию emptyText).
Слот footer — подвал таблицы (рендерится при его наличии).
Колонки описываются через DataTableColumn (см. таблицу props). group создаёт многоуровневые заголовки, frozen закрепляет колонку по краю.
Клавиатурная навигация: стрелки перемещают активную ячейку, Enter/Space переключают выбранную ячейку/строку, Shift+стрелки расширяют выбор строк.
Заголовки имеют role="columnheader" и aria-sort; тело с cellSelectable получает role="grid", ячейки — role="gridcell" и tabindex активной ячейки.
Перетаскивание колонок (drag-and-drop) и изменение ширины доступны при соответствующих флагах колонок.
Фильтрация внешняя: поля фильтров только эмитят update:filters и update:globalFilter, а саму фильтрацию компонент применяет к присланным значениям. Это позволяет считать фильтрацию на бэкенде — компонент умеет и локально, по данным в rows.
По умолчанию фильтр колонки ищет подстроку без учёта регистра; если в ячейке массив, проверяется вхождение в любой элемент. Проп filter у колонки заменяет сравнение собственным предикатом (value, row) => boolean.
Фильтрация применяется до виртуализации, поэтому data-cell и высота полосы прокрутки считаются по отфильтрованному набору.
Скрытые колонки не участвуют ни в фильтрации, ни в экспорте.
Экспорт CSV: разделитель-запятая, перевод строки CRLF, значения с запятой/кавычкой/переводом строки оборачиваются в кавычки, массивы склеиваются точкой с запятой, в начало добавляется BOM — чтобы файл корректно открывался в Excel. Скачиваются именно отфильтрованные строки.
Закругление рамки включается пропом rounded (по умолчанию true); при false добавляется класс c3-data-table--square с border-radius: 0.
Проп maxHeight ограничивает высоту прокручиваемой области тела: шапка остаётся закреплённой (position: sticky). Можно сочетать с virtual — тогда virtualHeight задаёт фиксированную высоту, а maxHeight дополнительно ограничивает её.
Проп bordered (по умолчанию true) управляет внешним бордюром; при false добавляется класс c3-data-table--borderless с border: none, при этом линии между строками и ячейками (включая gridLines) остаются.