@snack-uikit/table 0.20.2 → 0.20.4-preview-503c847d.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## 0.20.3 (2024-07-19)
|
|
7
|
+
|
|
8
|
+
### Only dependencies have been changed
|
|
9
|
+
* [@snack-uikit/chips@0.14.14](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
|
|
10
|
+
* [@snack-uikit/icons@0.22.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
|
|
11
|
+
* [@snack-uikit/info-block@0.4.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/info-block/CHANGELOG.md)
|
|
12
|
+
* [@snack-uikit/list@0.14.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
|
|
13
|
+
* [@snack-uikit/pagination@0.6.10](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
|
|
14
|
+
* [@snack-uikit/toggles@0.10.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toggles/CHANGELOG.md)
|
|
15
|
+
* [@snack-uikit/toolbar@0.7.48](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
|
|
16
|
+
* [@snack-uikit/truncate-string@0.4.20](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## 0.20.2 (2024-07-19)
|
|
7
23
|
|
|
8
24
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -109,44 +109,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
|
|
|
109
109
|
### Props
|
|
110
110
|
| name | type | default value | description |
|
|
111
111
|
|------|------|---------------|-------------|
|
|
112
|
-
| columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
|
|
113
|
-
| data* | `TData[]` | - | Данные для отрисовки |
|
|
114
|
-
| keepPinnedRows | `boolean` | - | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
|
|
115
|
-
| copyPinnedRows | `boolean` | - | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
|
|
116
|
-
| enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
|
|
117
|
-
| sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
|
|
118
|
-
| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
|
|
119
|
-
| search | `{ initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
|
|
120
|
-
| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
|
|
121
|
-
| pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
|
|
122
|
-
| pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
|
|
123
|
-
| autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
|
|
124
|
-
| pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
|
|
125
|
-
| onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
|
|
126
|
-
| className | `string` | - | CSS-класс |
|
|
127
|
-
| loading | `boolean` | - | Состояние загрузки |
|
|
128
|
-
| onRefresh | `() => void` | - | Колбек обновления данных |
|
|
129
|
-
| onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
|
|
130
|
-
| outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
|
|
131
|
-
| columnFilters | `ReactNode` | - | Фильтры |
|
|
132
|
-
| dataFiltered | `boolean` | - | |
|
|
133
|
-
| dataError | `boolean` | - | |
|
|
134
|
-
| exportSettings | `{ fileName: string; format?: Format; filterData?: boolean; }` | - | Настройки экспорта в тулбаре |
|
|
135
|
-
| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
|
|
136
|
-
| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
|
|
137
|
-
| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
|
|
138
|
-
| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
|
|
139
|
-
| suppressToolbar | `boolean` | - | Отключение тулбара |
|
|
140
|
-
| toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
|
|
141
|
-
| toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
|
|
142
|
-
| suppressPagination | `boolean` | - | Отключение пагинации |
|
|
143
|
-
| manualSorting | `boolean` | - | |
|
|
144
|
-
| manualPagination | `boolean` | - | |
|
|
145
|
-
| manualFiltering | `boolean` | - | |
|
|
146
|
-
| getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
|
|
147
|
-
| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
|
|
148
|
-
| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
|
|
149
|
-
| rowPinning | `Pick<RowPinningState, "top">` | { top: [], } | Определение какие строки должны быть закреплены в таблице |
|
|
150
112
|
## Table.getStatusColumnDef
|
|
151
113
|
Вспомогательная функция для создания ячейки со статусом
|
|
152
114
|
### Props
|
|
@@ -171,39 +133,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
|
|
|
171
133
|
| name | type | default value | description |
|
|
172
134
|
|------|------|---------------|-------------|
|
|
173
135
|
| onChangePage* | `(offset: number, limit: number) => void` | - | |
|
|
174
|
-
| columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
|
|
175
|
-
| loading | `boolean` | - | Состояние загрузки |
|
|
176
|
-
| keepPinnedRows | `boolean` | false | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
|
|
177
|
-
| copyPinnedRows | `boolean` | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
|
|
178
|
-
| enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
|
|
179
|
-
| sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
|
|
180
|
-
| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
|
|
181
|
-
| enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
|
|
182
|
-
| autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
|
|
183
|
-
| onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
|
|
184
|
-
| className | `string` | - | CSS-класс |
|
|
185
|
-
| onRefresh | `() => void` | - | Колбек обновления данных |
|
|
186
|
-
| onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
|
|
187
|
-
| outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
|
|
188
|
-
| columnFilters | `ReactNode` | - | Фильтры |
|
|
189
|
-
| dataFiltered | `boolean` | - | |
|
|
190
|
-
| dataError | `boolean` | - | |
|
|
191
|
-
| exportSettings | `{ fileName: string; format?: Format; filterData?: boolean; }` | - | Настройки экспорта в тулбаре |
|
|
192
|
-
| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
|
|
193
|
-
| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
|
|
194
|
-
| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
|
|
195
|
-
| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
|
|
196
|
-
| suppressToolbar | `boolean` | - | Отключение тулбара |
|
|
197
|
-
| toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
|
|
198
|
-
| toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
|
|
199
|
-
| suppressPagination | `boolean` | - | Отключение пагинации |
|
|
200
|
-
| manualSorting | `boolean` | true | |
|
|
201
|
-
| manualPagination | `boolean` | true | |
|
|
202
|
-
| manualFiltering | `boolean` | true | |
|
|
203
|
-
| getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
|
|
204
|
-
| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
|
|
205
|
-
| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
|
|
206
|
-
| rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
|
|
207
136
|
| items | `TData[]` | - | Данные для отрисовки |
|
|
208
137
|
| total | `number` | 10 | Общее кол-во строк |
|
|
209
138
|
| limit | `number` | 10 | Кол-во строк на страницу |
|
|
@@ -25,7 +25,7 @@ function RowActionsCell({ row, actions }) {
|
|
|
25
25
|
const patchedItems = useMemo(() => actions.map(item => patchItem(item, () => setDropListOpen(false))), [actions, patchItem, setDropListOpen]);
|
|
26
26
|
return (
|
|
27
27
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
28
|
-
_jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": dropListOpened || undefined, children: !disabled && Boolean(actions.length) && (_jsx(Droplist, { trigger: '
|
|
28
|
+
_jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": dropListOpened || undefined, children: !disabled && Boolean(actions.length) && (_jsx(Droplist, { trigger: 'click', open: dropListOpened, onOpenChange: setDropListOpen, placement: 'bottom-end', size: 'm', "data-test-id": TEST_IDS.rowActions.droplist, items: patchedItems, children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger }) })) }));
|
|
29
29
|
}
|
|
30
30
|
/** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
|
|
31
31
|
export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Table",
|
|
7
|
-
"version": "0.20.
|
|
7
|
+
"version": "0.20.4-preview-503c847d.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -33,17 +33,17 @@
|
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@snack-uikit/button": "0.17.2",
|
|
36
|
-
"@snack-uikit/chips": "0.14.
|
|
36
|
+
"@snack-uikit/chips": "0.14.14",
|
|
37
37
|
"@snack-uikit/icon-predefined": "0.5.1",
|
|
38
|
-
"@snack-uikit/icons": "0.
|
|
39
|
-
"@snack-uikit/info-block": "0.4.
|
|
40
|
-
"@snack-uikit/list": "0.14.
|
|
41
|
-
"@snack-uikit/pagination": "0.6.
|
|
38
|
+
"@snack-uikit/icons": "0.22.0",
|
|
39
|
+
"@snack-uikit/info-block": "0.4.4",
|
|
40
|
+
"@snack-uikit/list": "0.14.1",
|
|
41
|
+
"@snack-uikit/pagination": "0.6.10",
|
|
42
42
|
"@snack-uikit/scroll": "0.6.0",
|
|
43
43
|
"@snack-uikit/skeleton": "0.3.4",
|
|
44
|
-
"@snack-uikit/toggles": "0.10.
|
|
45
|
-
"@snack-uikit/toolbar": "0.7.
|
|
46
|
-
"@snack-uikit/truncate-string": "0.4.
|
|
44
|
+
"@snack-uikit/toggles": "0.10.1",
|
|
45
|
+
"@snack-uikit/toolbar": "0.7.48",
|
|
46
|
+
"@snack-uikit/truncate-string": "0.4.20",
|
|
47
47
|
"@snack-uikit/typography": "0.6.2",
|
|
48
48
|
"@snack-uikit/utils": "3.3.0",
|
|
49
49
|
"@tanstack/match-sorter-utils": "8.11.8",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@snack-uikit/locale": "*"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "f92868e3d492e57dcfa852bfa6f1cf37604613af"
|
|
61
61
|
}
|
|
@@ -48,7 +48,7 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
|
|
|
48
48
|
<div onClick={stopPropagationClick} className={styles.rowActionsCellWrap} data-open={dropListOpened || undefined}>
|
|
49
49
|
{!disabled && Boolean(actions.length) && (
|
|
50
50
|
<Droplist
|
|
51
|
-
trigger='
|
|
51
|
+
trigger='click'
|
|
52
52
|
open={dropListOpened}
|
|
53
53
|
onOpenChange={setDropListOpen}
|
|
54
54
|
placement='bottom-end'
|