@snack-uikit/table v0.36.6
Table
Installation
npm i @snack-uikit/table
TODO:
- multiple row selection with Shift key pressed
Примечание
Для оптимальной работы таблицы используйте
useMemoдляcolumnDefinitionsили выносите их определение за компонент
Example
import { Table } from '@snack-uikit/table';
// ...
type TableData = {
id: string;
firstName: string;
lastName: string;
age: number;
status: string;
}
const columnDefinitions: ColumnDefinition<TableData>[] = [
Table.getStatusColumnDef<Person>({
accessorKey: 'status',
mapStatusToAppearance: {
pending: Table.statusAppearances.Blue,
success: Table.statusAppearances.Green,
// ... etc
},
header: 'Статус',
renderDescription: (value: string) => t(translations.statuses[value]),
size: 250,
}),
{
accessorKey: 'id',
},
{
// id, size - обязательны при передаче pinned
id: 'firstName',
size: 140,
pinned: 'left',
accessorKey: 'firstName',
header: 'Имя',
enableSorting: true,
sortDescFirst: true,
},
{
accessorKey: 'lastName',
header: 'Фамилия',
cell: ctx => <div className='custom'>{ctx.getValue<string>()}</div>,
maxSize: 200,
enableSorting: false,
},
{
accessorKey: 'age',
header: ctx => `Можно добавить хедер так: ${ctx.column.id}`,
minSize: 40,
},
Table.getRowActionsColumnDef({
pinned: true,
actionsGenerator: () => [
{
option: 'Действие с иконкой',
icon: <PlaceholderSVG />,
onClick: handleRowActionClick,
},
{
option: 'Другое действие',
onClick: handleRowActionClick,
},
],
})
];
// ...
<Table
columnDefinitions={columnDefinitions}
data={data}
rowSelection={{
enable: true, // false выключает выбор всех строк (состояние disabled)
// или можно передать функцию для вычисления
// enable: row => !['Pending', 'Loading'].includes(row.original.status),
onChange: handleRowSelection,
}}
/>CopyCell
Props
| name | type | default value | description |
|---|---|---|---|
| value | string \| number | - |
Table
Компонент таблицы
Props
| name | type | default value | description |
|---|---|---|---|
| columnDefinitions* | ColumnDefinition<TData>[] | - | Определение внешнего вида и функционала колонок |
| data* | TData[] | - | Данные для отрисовки |
| keepPinnedRows | boolean | - | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
| copyPinnedRows | boolean | - | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
| enableSelectPinned | boolean | - | Параметр отвечает за чекбокс выбора закрепленных строк |
| sorting | { initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; } | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние initialState: Начальное состояние сортировки state: Состояние сортировки, жестко устанавливаемое снаружи onChange: Колбэк на изменение сортировки |
| rowSelection | { initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; } | - | Параметры отвечают за возможность выбора строк initialState: Начальное состояние выбора строк state: Состояние выбора строк, жестко устанавливаемое снаружи enable: Колбэк определяющий можно ли выбрать строку multiRow: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) onChange: Колбэк на выбор строк |
| search | { initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; } | 'Search' loading: Состояние загрузки в строке поиска onChange: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице initialState: Начальное состояние строки поиска state: Состояние строки поиска, жестко устанавливаемое снаружи placeholder: Placeholder строки поиска |
| enableFuzzySearch | boolean | - | Включить нечеткий поиск |
| pageSize | number | 10 | Максимальное кол-во строк на страницу |
| pagination | { state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; } | 'Rows volume: ' onChange: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице state: Состояние строки поиска, жестко устанавливаемое снаружи options: Варианты в выпадающем селекторе для установки кол-ва строк на страницу optionsLabel: Текст для селектора кол-ва строк на страницу |
| autoResetPageIndex | boolean | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
| pageCount | number | - | Кол-во страниц (используется для внешнего управления) |
| onRowClick | RowClickHandler<TData> | - | Колбэк клика по строке |
| className | string | - | CSS-класс |
| loading | boolean | - | Состояние загрузки |
| onRefresh | () => void | - | Колбек обновления данных |
| onDelete | (selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void | - | Колбек удаления выбранных |
| outline | boolean | - | Внешний бордер для тулбара и таблицы |
| columnFilters | ReactNode | - | Фильтры |
| dataFiltered | boolean | - | |
| dataError | boolean | - | |
| exportSettings | { fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; } | - | Настройки экспорта в тулбаре |
| moreActions | Action[] | - | Элементы выпадающего списка кнопки с действиями |
| noDataState | EmptyStateProps | - | Экран при отстутствии данных |
| noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
| errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
| suppressToolbar | boolean | - | Отключение тулбара |
| toolbarBefore | ReactNode | - | Дополнительный слот в Toolbar перед строкой поиска |
| toolbarAfter | ReactNode | - | Дополнительный слот в Toolbar после строки поиска |
| suppressPagination | boolean | - | Отключение пагинации |
| manualSorting | boolean | - | |
| manualPagination | boolean | - | |
| manualFiltering | boolean | - | |
| getRowId | (originalRow: TData, index: number, parent?: Row<TData>) => string | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
| scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
| scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
| rowPinning | Pick<RowPinningState, "top"> | { top: [], } | Определение какие строки должны быть закреплены в таблице |
| savedState | { id: string; resize?: boolean; } | - | Конфиг для сохранения состояния в localStorage. Поле id должно быть уникальным для разных таблиц в рамках приложения. Для корректной работы необходимо наличие id в конфиге columnDefinitions |
Table.getStatusColumnDef
Вспомогательная функция для создания ячейки со статусом
Props
| name | type | default value | description |
|---|---|---|---|
| mapStatusToAppearance* | MapStatusToAppearanceFnType | - | Маппинг значений статуса на цвета |
| accessorKey* | string | - | Имя ключа соответствующее полю в data |
| enableSorting | boolean | true | Включение/выключение сортировки |
| renderDescription | (cellValue: string, row: TData) => string | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
| size | number | - | Размер ячейки |
| minSize | number | - | |
| maxSize | number | - | |
| header | ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string)) | - | Заголовок колонки |
| enableResizing | boolean | - | Включение/выключение ресайза колонки |
Table.getRowActionsColumnDef
Вспомогательная функция для создания ячейки с дополнительными действиями у строки
Props
| name | type | default value | description |
|---|---|---|---|
| actionsGenerator* | ActionsGenerator<TData> | - | Действия для строки |
| pinned | boolean | - | Закрепление колонки справа в таблице |
ServerTable
Props
| name | type | default value | description |
|---|---|---|---|
| onChangePage* | (offset: number, limit: number) => void | - | |
| columnDefinitions* | ColumnDefinition<TData>[] | - | Определение внешнего вида и функционала колонок |
| keepPinnedRows | boolean | false | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
| copyPinnedRows | boolean | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
| enableSelectPinned | boolean | - | Параметр отвечает за чекбокс выбора закрепленных строк |
| sorting | { initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; } | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние initialState: Начальное состояние сортировки state: Состояние сортировки, жестко устанавливаемое снаружи onChange: Колбэк на изменение сортировки |
| rowSelection | { initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; } | - | Параметры отвечают за возможность выбора строк initialState: Начальное состояние выбора строк state: Состояние выбора строк, жестко устанавливаемое снаружи enable: Колбэк определяющий можно ли выбрать строку multiRow: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) onChange: Колбэк на выбор строк |
| enableFuzzySearch | boolean | - | Включить нечеткий поиск |
| autoResetPageIndex | boolean | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
| onRowClick | RowClickHandler<TData> | - | Колбэк клика по строке |
| className | string | - | CSS-класс |
| loading | boolean | - | Состояние загрузки |
| onRefresh | () => void | - | Колбек обновления данных |
| onDelete | (selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void | - | Колбек удаления выбранных |
| outline | boolean | - | Внешний бордер для тулбара и таблицы |
| columnFilters | ReactNode | - | Фильтры |
| dataFiltered | boolean | - | |
| dataError | boolean | - | |
| exportSettings | { fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; } | - | Настройки экспорта в тулбаре |
| moreActions | Action[] | - | Элементы выпадающего списка кнопки с действиями |
| noDataState | EmptyStateProps | - | Экран при отстутствии данных |
| noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
| errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
| suppressToolbar | boolean | - | Отключение тулбара |
| toolbarBefore | ReactNode | - | Дополнительный слот в Toolbar перед строкой поиска |
| toolbarAfter | ReactNode | - | Дополнительный слот в Toolbar после строки поиска |
| suppressPagination | boolean | - | Отключение пагинации |
| manualSorting | boolean | true | |
| manualPagination | boolean | true | |
| manualFiltering | boolean | true | |
| getRowId | (originalRow: TData, index: number, parent?: Row<TData>) => string | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
| scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
| scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
| rowPinning | Pick<RowPinningState, "top"> | - | Определение какие строки должны быть закреплены в таблице |
| savedState | { id: string; resize?: boolean; } | - | Конфиг для сохранения состояния в localStorage. Поле id должно быть уникальным для разных таблиц в рамках приложения. Для корректной работы необходимо наличие id в конфиге columnDefinitions |
| items | TData[] | - | Данные для отрисовки |
| total | number | 10 | Общее кол-во строк |
| limit | number | 10 | Кол-во строк на страницу |
| offset | number | - | Смещение |
| search | { initialValue?: string; state: string; placeholder?: string; loading?: boolean; onChange(value: string): void; } | 'Search...' loading: Состояние загрузки в строке поиска onChange: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице initialState: Начальное состояние строки поиска state: Состояние строки поиска, жестко устанавливаемое снаружи placeholder: Placeholder строки поиска |
| pagination | { options?: number[]; optionsLabel?: string; } | 'Rows volume' | Параметры отвечают за пагинацию в таблице options: Варианты в выпадающем селекторе для установки кол-ва строк на страницу optionsLabel: Текст для селектора кол-ва строк на страницу |
ServerTable.getRowActionsColumnDef
Вспомогательная функция для создания ячейки с дополнительными действиями у строки
Props
| name | type | default value | description |
|---|---|---|---|
| actionsGenerator* | ActionsGenerator<TData> | - | Действия для строки |
| pinned | boolean | - | Закрепление колонки справа в таблице |
ServerTable.getStatusColumnDef
Вспомогательная функция для создания ячейки со статусом
Props
| name | type | default value | description |
|---|---|---|---|
| mapStatusToAppearance* | MapStatusToAppearanceFnType | - | Маппинг значений статуса на цвета |
| accessorKey* | string | - | Имя ключа соответствующее полю в data |
| enableSorting | boolean | true | Включение/выключение сортировки |
| renderDescription | (cellValue: string, row: TData) => string | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
| size | number | - | Размер ячейки |
| minSize | number | - | |
| maxSize | number | - | |
| header | ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string)) | - | Заголовок колонки |
| enableResizing | boolean | - | Включение/выключение ресайза колонки |
exportToCSV
Props
| name | type | default value | description |
|---|---|---|---|
| columnDefinitions* | ColumnDefinition<TData>[] | - | |
| data* | TData[] | - | |
| fileName | string | Table |
exportToXLSX
Props
| name | type | default value | description |
|---|---|---|---|
| columnDefinitions* | ColumnDefinition<TData>[] | - | |
| data* | TData[] | - | |
| fileName | string | Table |
3 months ago
5 months ago
5 months ago
3 months ago
6 months ago
2 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
4 months ago
8 months ago
8 months ago
5 months ago
6 months ago
5 months ago
8 months ago
8 months ago
5 months ago
5 months ago
5 months ago
8 months ago
5 months ago
5 months ago
5 months ago
8 months ago
3 months ago
2 months ago
8 months ago
8 months ago
6 months ago
8 months ago
8 months ago
3 months ago
8 months ago
3 months ago
8 months ago
3 months ago
8 months ago
3 months ago
8 months ago
3 months ago
5 months ago
2 months ago
2 months ago
5 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
5 months ago
7 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
9 months ago
3 months ago
5 months ago
8 months ago
3 months ago
4 months ago
4 months ago
7 months ago
4 months ago
4 months ago
8 months ago
5 months ago
2 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
5 months ago
5 months ago
8 months ago
5 months ago
3 months ago
8 months ago
2 months ago
5 months ago
5 months ago
6 months ago
4 months ago
5 months ago
5 months ago
3 months ago
3 months ago
8 months ago
5 months ago
8 months ago
7 months ago
2 months ago
6 months ago
6 months ago
6 months ago
2 months ago
6 months ago
6 months ago
6 months ago
8 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
5 months ago
9 months ago
9 months ago
2 months ago
9 months ago
7 months ago
3 months ago
5 months ago
5 months ago
2 months ago
5 months ago
4 months ago
7 months ago
6 months ago
5 months ago
9 months ago
7 months ago
7 months ago
9 months ago
6 months ago
5 months ago
8 months ago
7 months ago
3 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
12 months ago
1 year ago
11 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
10 months ago
11 months ago
1 year ago
1 year ago
11 months ago
1 year ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago