API таблицы

Эта страница предоставляет обзор API компонента Table, детализируя его свойства, события, слоты и предоставляемые методы/состояния.

Свойства

Компонент Table принимает следующие свойства:

Свойство	По умолчанию	Тип	Описание
`mode`	`"outlined"`	`StyleMode`	Режим стилизации таблицы.
`dataSource`	`[]`	`Array<any>`	Источник данных для таблицы.
`toolbar`	`undefined`	`IToolbar` или `boolean`	Конфигурация панели инструментов или переключатель видимости.
`edit`	`undefined`	`boolean`	Включает встроенное редактирование ячеек таблицы.
`sort`	`undefined`	`ISort` или `boolean`	Конфигурация сортировки или переключатель видимости.
`filter`	`undefined`	`IFilter` или `boolean`	Конфигурация фильтрации или переключатель видимости.
`grouping`	`undefined`	`IGrouping` или `string`	Конфигурация группировки или имя поля группировки.
`resizedColumns`	`undefined`	`boolean`	Включает изменение размера столбцов.
`pagination`	`undefined`	`TablePagination` или `boolean`	Конфигурация пагинации или переключатель видимости.
`search`	`undefined`	`boolean`	Включает функцию поиска.
`columns`	`undefined`	`Array<IColumn>` или `boolean`	Конфигурация столбцов таблицы.
`summary`	`undefined`	`Array<ISummary>` или `boolean`	Конфигурация итоговых строк.
`countVisibleRows`	`0`	`number`	Количество видимых строк в таблице.
`sizeLoadingRows`	`5`	`number`	Количество строк загрузки, отображаемых при получении данных.
`noData`	`"No data"`	`string`	Сообщение, отображаемое при отсутствии данных.
`noColumn`	`"No columns"`	`string`	Сообщение, отображаемое при отсутствии определённых столбцов.
`countDataOnLoading`	`1000`	`number`	Количество строк, имитируемых во время загрузки данных.
`totalCount`	`undefined`	`number`	Общее количество строк в источнике данных.
`class`	`""`	`StyleClass`	Пользовательский CSS-класс для контейнера таблицы.
`styles`	`undefined`	`ITableStyles`	Конфигурация пользовательских стилей для таблицы.

IToolbar

Интерфейс IToolbar определяет конфигурацию панели инструментов в компоненте Table.

Свойство	Тип	Описание
`visible`	`boolean` или `undefined`	Указывает, видима ли панель инструментов.
`search`	`boolean` или `undefined`	Включает или отключает поле поиска на панели инструментов.

ISort

Интерфейс ISort определяет конфигурацию сортировки для компонента Table.

Свойство	Тип	Описание
`visible`	`boolean` или `undefined`	Указывает, включена ли сортировка.
`icon`	`"Bars"`, `"Arrow"` или `undefined`	Указывает иконку, используемую для сортировки (например, Bars или Arrow).

IFilter

Интерфейс IFilter определяет конфигурацию фильтрации для компонента Table.

Свойство	Тип	Описание
`visible`	`boolean` или `undefined`	Указывает, включена ли фильтрация.
`noFilter`	`string` или `undefined`	Сообщение, отображаемое, когда фильтры не применены.
`isClearAllFilter`	`boolean` или `undefined`	Включает опцию "очистить все фильтры".

IGrouping

Интерфейс IGrouping определяет конфигурацию группировки для компонента Table.

Свойство	Тип	Описание
`visible`	`boolean` или `undefined`	Указывает, включена ли группировка.
`groupField`	`string` или `undefined`	Указывает поле, используемое для группировки данных.

TablePagination

Интерфейс TablePagination определяет конфигурацию пагинации для компонента Table.

Свойство	Тип	Описание
`visible`	`boolean` или `undefined`	Указывает, видима ли пагинация.
`startPage`	`number` или `undefined`	Начальная страница для пагинации.
Другие унаследованные свойства	Исключены из `PaginationProps`	Исключает `total` и `modelValue` из `PaginationProps`.

IColumn

Тип IColumn представляет конфигурацию столбца в компоненте Table.

Свойство	Тип	Описание
`dataField`	`DataField` или `undefined`	Поле в источнике данных, соответствующее этому столбцу.
`name`	`string` или `undefined`	Внутреннее имя столбца.
`caption`	`string` или `undefined`	Заголовок, отображаемый в заголовке столбца.
`visible`	`boolean` или `undefined`	Управляет видимостью столбца.
`width`	`number` или `undefined`	Ширина столбца в пикселях.
`minWidth`	`number` или `undefined`	Минимальная ширина столбца в пикселях.
`maxWidth`	`number` или `undefined`	Максимальная ширина столбца в пикселях.
`isFilter`	`boolean` или `undefined`	Указывает, включена ли фильтрация для столбца.
`isSort`	`boolean` или `undefined`	Указывает, включена ли сортировка для столбца.
`isResized`	`boolean` или `undefined`	Указывает, можно ли изменять размер столбца.
`defaultFilter`	`any` или `undefined`	Значение фильтра по умолчанию для столбца.
`defaultSort`	`Sort` или `undefined`	Порядок сортировки по умолчанию для столбца.
`mask`	`BaseInputProps["maskInput"]` или `undefined`	Маска ввода, применяемая к значениям столбца.
`cellTemplate`	`string` или `undefined`	Шаблон для рендеринга содержимого ячейки в столбце.
`setCellValue`	`(column: IColumn, value: any, data?: any) => any`	Устанавливает значение ячейки в столбце.
`class`	`object`	Пользовательские CSS-классы для различных частей столбца (заголовок, ячейки и т.д.).
`type`	`"string"`, `"number"`, `"select"` или `"date"`	Тип данных, представленных столбцом.
`edit`	`EditInput`, `EditSelect`, `EditDate`, `boolean` или `undefined`	Конфигурация встроенного редактирования в столбце.

ISummary

Интерфейс ISummary определяет конфигурацию итоговых строк в компоненте Table.

Свойство	Тип	Описание
`dataField`	`string` или `undefined`	Поле, для которого рассчитывается итог.
`name`	`string` или `undefined`	Имя итога.
`displayFormat`	`string`, `"Sum: {0}"`, `"Min: {0}"`, `"Max: {0}"`, `"Avg: {0}"`, `"Count: {0}"` или `undefined`	Формат отображения итога.
`type`	`"sum"`, `"min"`, `"max"`, `"avg"`, `"count"` или `undefined`	Тип вычисления итога (например, сумма, минимум, максимум и т.д.).
`dataType`	`DataType` или `undefined`	Тип данных для итога.
`customizeText`	`(summary: ISummary, result: string) => string` или `undefined`	Функция для настройки текста итога.

ITableStyles

Интерфейс ITableStyles определяет общие стили и конфигурацию для компонента Table.

Свойство	Тип	Описание
`class`	`ITableStylesClass` или `undefined`	CSS-классы для различных частей компонента `Table`.
`width`	`TWidth` или `undefined`	Ширина таблицы.
`height`	`THeight` или `undefined`	Высота таблицы.
`animation`	`"transition-all duration-500"`, `"transition-none"`, `string` или `undefined`	Стиль анимации, применяемый к таблице.
`hoverRows`	`string`, `"hover:bg-neutral-100/90 dark:hover:bg-neutral-900/50"`, `boolean` или `undefined`	Стили наведения для строк таблицы.
`isStripedRows`	`boolean` или `undefined`	Указывает, включены ли чередующиеся строки.
`horizontalLines`	`boolean` или `undefined`	Указывает, отображаются ли горизонтальные линии между строками.
`verticalLines`	`boolean` или `undefined`	Указывает, отображаются ли вертикальные линии между столбцами.
`borderRadiusPx`	`number` или `undefined`	Радиус границы, применяемый к таблице.
`heightCell`	`number` или `undefined`	Высота ячеек таблицы.
`filterLines`	`boolean` или `undefined`	Указывает, отображаются ли линии фильтров.
`defaultWidthColumn`	`"max-width: 600px;min-width:100px;width:auto"`, `string` или `undefined`	Ширина столбцов по умолчанию.
`maskQuery`	`"font-bold text-theme-700 dark:text-theme-300"`, `string` или `undefined`	Маска текста запроса, применяемая к содержимому таблицы.
`border`	`border`, `ITableStylesBorder`, `"border-0 border-b-0 border-t-0 border-r-0"` или `undefined`	Стили границы для различных частей таблицы.

События

Компонент Table генерирует следующие события:

Событие	Полезная нагрузка	Описание
`sort`	`{ dataColumns: Array<IColumnPrivate>; sortedFields: Sorted }`	Генерируется при применении сортировки.
`filter`	`{ dataColumns: Array<IColumnPrivate>; filteredFields: Filters }`	Генерируется при применении фильтрации.
`search`	`string`	Генерируется при применении поискового запроса.
`result-data`	`ResultData`	Генерируется с результирующими данными после обработки.
`switch-page`	`number`	Генерируется при переключении страницы.
`switch-size-page`	`number`	Генерируется при изменении размера страницы.
`before-edit-cell`	`{ newValue: any; oldValue: any; _key: string; column: IColumnPrivate }`	Генерируется перед редактированием ячейки.
`after-edit-cell`	`{ newValue: any; oldValue: any; _key: string; column: IColumnPrivate }`	Генерируется после редактирования ячейки.
`before-edit-row`	`{ newValue: any; oldValue: any; _key: string }`	Генерируется перед редактированием строки.
`after-edit-row`	`{ newValue: any; oldValue: any; _key: string }`	Генерируется после редактирования строки.
`add-row`	`{ value: any; index: number; _key: string }`	Генерируется при добавлении строки.
`delete-row`	`{ value: any; index: number; _key: string }`	Генерируется при удалении строки.
`click-row`	`{ eventEl: HTMLElement; data: any; indexRow: number }`	Генерируется при клике на строку.
`click-cell`	`{ eventEl: HTMLElement; column: IColumnPrivate; value: any; valueWithMarker: any; data: any; indexRow: number }`	Генерируется при клике на ячейку.
`loading`	`boolean`	Генерируется, когда таблица входит в состояние загрузки или выходит из него.
`clear-filter`	`void`	Генерируется при очистке всех фильтров.

Слоты

Компонент Table предоставляет следующие слоты:

Слот	Полезная нагрузка	Описание
`toolbar`	`VNode[]`	Слот для пользовательского содержимого панели инструментов.
`header`	`VNode[]`	Слот для пользовательского содержимого заголовка.
`group`	`{ item: string; length: number }`	Слот для пользовательского содержимого группы.
`default`	`DynamicSlots`	Слот для рендеринга динамических шаблонов ячеек для каждого столбца.
`footer`	`VNode[]`	Слот для пользовательского содержимого нижнего колонтитула.

Интерфейс DynamicSlots определяет структуру для динамических слотов в компоненте Table. Каждый слот соответствует столбцу или ключу и предоставляет пользовательский шаблон рендеринга для содержимого ячейки.

Свойство	Тип	Описание
`key`	`string`	Уникальный идентификатор слота или столбца.
`column`	`IColumn`	Объект конфигурации текущего столбца.
`rowData`	`Record<string, any>`	Объект данных текущей строки.
`value`	`string`	Исходное значение ячейки.
`valueWithMarker`	`string`	Форматированное или помеченное значение ячейки.
`isCloseEditor`	`(isActive: boolean) => boolean`	Функция для закрытия редактора ячейки, требующая аргумент `boolean` для указания состояния редактора.
`editValue`	`(value: any) => false` или `any`	Функция для обновления значения ячейки. Возвращает `false`, если обновление не удалось.

Предоставляемые методы и состояния

Компонент Table предоставляет следующие методы и состояния через ref:

Предоставляемое	Значение	Описание
`sortColumns`	`Sorted`	Текущее состояние сортировки для всех столбцов.
`filterColumns`	`Filters`	Текущее состояние фильтрации для всех столбцов.
`widthsColumns`	`Widths`	Текущие ширины всех столбцов.
`queryTable`	`Search`	Текущий поисковый запрос.
`pageTable`	`Page`	Текущий номер страницы.
`sizeTable`	`Page`	Текущий размер страницы.
`allData`	`TableProps["dataSource"]`	Весь источник данных таблицы.
`isLoading`	`boolean`	Указывает, находится ли таблица в состоянии загрузки.
`mode`	`TableProps["mode"]`	Текущий режим стилизации таблицы.
`isVisibleToolbar`	`boolean`	Указывает, видима ли панель инструментов.
`isSearch`	`boolean`	Указывает, включена ли функция поиска.
`isFilterClear`	`boolean`	Указывает, включена ли кнопка "очистить все фильтры".
`isColumns`	`boolean`	Указывает, определены ли столбцы.
`isSummary`	`boolean`	Указывает, определены ли итоговые строки.
`countDataOnLoading`	`TableProps["countDataOnLoading"]`	Количество строк для имитации во время загрузки данных.
`classMaskQuery`	`ITableStyles["maskQuery"]`	Маска, применяемая к тексту запроса.
`noData`	`TableProps["noData"]`	Сообщение, отображаемое при отсутствии данных.
`noColumn`	`TableProps["noData"]`	Сообщение, отображаемое при отсутствии определённых столбцов.
`noFilter`	`IFilter["noFilter"]`	Сообщение, отображаемое, когда фильтры не применены.
`iconSort`	`ISort["icon"]`	Иконка, используемая для сортировки.
`resizedColumns`	`TableProps["resizedColumns"]`	Указывает, включено ли изменение размера столбцов.
`lengthData`	`number`	Общее количество строк в источнике данных.
`groupField`	`IGrouping["groupField"]` или `null`	Поле, используемое для группировки данных.
`isFilter`	`boolean`	Указывает, включена ли фильтрация.
`isSort`	`boolean`	Указывает, включена ли сортировка.
`isGroup`	`boolean`	Указывает, включена ли группировка.
`isPagination`	`boolean`	Указывает, включена ли пагинация.
`addRow`	`(data: any) => false` или `number`	Добавляет новую строку в таблицу.
`deleteRow`	`(_key: string) => false` или `any`	Удаляет строку из таблицы.
`updateRow`	`(_key: string, data: any) => false` или `any`	Обновляет строку в таблице.
`updateCell`	`(_key: string, column: IColumnPrivate, value: any) => false` или `any`	Обновляет определённую ячейку в таблице.
`getColumn`	`(dataField: IColumn["dataField"], index?: number) => IColumnPrivate` или `undefined`	Получает столбец по его полю данных.
`updateDataSource`	`() => Array<Record<string, any>>`	Обновляет источник данных таблицы.
`sorting`	`(dataField: IColumn["dataField"], value?: Sort) => void`	Сортирует таблицу по указанному столбцу.
`filtering`	`(dataField: IColumn["dataField"], value: any) => void`	Фильтрует таблицу по указанному столбцу.
`searching`	`(value: Search) => void`	Выполняет поиск в таблице с использованием запроса.
`switchPage`	`(page: Page) => void`	Переключает таблицу на указанную страницу.
`switchSizePage`	`(sizePage: Page) => void`	Изменяет размер страницы таблицы.
`clearFilter`	`() => void`	Очищает все применённые фильтры в таблице.
`startLoading`	`() => void`	Запускает состояние загрузки для таблицы.
`stopLoading`	`() => void`	Останавливает состояние загрузки для таблицы.
`updateHeightTable`	`() => void`	Динамически обновляет высоту таблицы.