@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
4 months ago
3 months ago
6 months ago
1 month ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
3 months ago
3 months ago
4 months ago
6 months ago
7 months ago
3 months ago
7 months ago
7 months ago
4 months ago
5 months ago
5 months ago
7 months ago
7 months ago
4 months ago
5 months ago
5 months ago
7 months ago
5 months ago
4 months ago
5 months ago
7 months ago
3 months ago
2 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
2 months ago
8 months ago
2 months ago
8 months ago
2 months ago
7 months ago
2 months ago
7 months ago
3 months ago
4 months ago
1 month ago
2 months ago
4 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
4 months ago
7 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
4 months ago
8 months ago
3 months ago
4 months ago
7 months ago
3 months ago
3 months ago
3 months ago
6 months ago
3 months ago
4 months ago
7 months ago
4 months ago
1 month ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
5 months ago
5 months ago
7 months ago
4 months ago
2 months ago
7 months ago
1 month ago
5 months ago
4 months ago
6 months ago
3 months ago
4 months ago
5 months ago
3 months ago
3 months ago
7 months ago
4 months ago
7 months ago
7 months ago
1 month ago
5 months ago
5 months ago
6 months ago
1 month ago
5 months ago
5 months ago
5 months ago
7 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
4 months ago
8 months ago
8 months ago
1 month ago
8 months ago
6 months ago
2 months ago
4 months ago
4 months ago
1 month ago
4 months ago
3 months ago
7 months ago
5 months ago
4 months ago
8 months ago
7 months ago
7 months ago
8 months ago
5 months ago
4 months ago
7 months ago
6 months ago
2 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 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
9 months ago
9 months ago
9 months ago
9 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
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
10 months ago
11 months ago
11 months ago
11 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
10 months ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
10 months ago
1 year ago
11 months ago
1 year ago
10 months ago
1 year ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
11 months ago
10 months ago
1 year ago
1 year ago
12 months ago
10 months ago
12 months 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
11 months ago
1 year ago
1 year ago
1 year ago
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
10 months ago
1 year ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 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
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