@synerise/ds-table 1.11.10 → 1.11.11
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 +4 -0
- package/CLAUDE.md +325 -0
- package/package.json +30 -29
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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
|
+
## [1.11.11](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.11.10...@synerise/ds-table@1.11.11) (2026-07-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-table
|
|
9
|
+
|
|
6
10
|
## [1.11.10](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.11.9...@synerise/ds-table@1.11.10) (2026-07-16)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @synerise/ds-table
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
# Table (`@synerise/ds-table`)
|
|
2
|
+
|
|
3
|
+
> Feature-rich Ant Design 4.x table wrapper that adds a DS-styled title bar, row selection, row starring, multi-column sorting, grouped rows, tree rows, virtualized rendering, and infinite scroll.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Table.tsx — main DSTable component (default export); switches between GroupTable and DefaultTable
|
|
10
|
+
Table.types.ts — all public types (DSTableProps, DSColumnType, RowSelection, RowStar, Filter, Locale, …)
|
|
11
|
+
Table.styles.ts — styled-components for wrapper and header
|
|
12
|
+
DefaultTable/
|
|
13
|
+
DefaultTable.tsx — wraps antd Table; injects sort buttons, row-star column, row-selection column, row tooltips
|
|
14
|
+
GroupTable/
|
|
15
|
+
GroupTable.tsx — antd Table rendered with a custom body that groups rows under collapsible headers
|
|
16
|
+
GroupTable.types.ts — GroupType, GroupByType, GROUP_BY constant
|
|
17
|
+
GroupTableBody/ — renders one expanded/collapsed group with its rows
|
|
18
|
+
GroupTableHeader/ — renders a group's header row
|
|
19
|
+
TreeTable/
|
|
20
|
+
TreeTable.tsx — DSTable wrapper that renders tree-indented rows; hardcoded indent 42 px
|
|
21
|
+
VirtualTable/
|
|
22
|
+
VirtualTable.tsx — react-window FixedSizeList body injected via antd components.body; supports infinite scroll & sticky header
|
|
23
|
+
VirtualTable.types.ts — VirtualTableProps, VirtualTableRef, VirtualColumnType; Props alias is @deprecated
|
|
24
|
+
VirtualTableRow.tsx — renders one virtual row
|
|
25
|
+
constants.ts — HEADER_ROW_HEIGHT=64, EXPANDED_ROW_PROPERTY, LOAD_DATA_OFFSET=800
|
|
26
|
+
TableHeader/
|
|
27
|
+
TableHeader.tsx — title bar: count, select-all checkbox, items menu, filters, search, custom button
|
|
28
|
+
TableHeader.types.ts
|
|
29
|
+
TableLimit/ — shows "X / limit" counter when selection.limit is set
|
|
30
|
+
TableSelection.tsx — select-all / invert checkbox area
|
|
31
|
+
Cell/
|
|
32
|
+
index.ts — re-exports all cell components as TableCell namespace
|
|
33
|
+
Action/ActionCell — flex container for action buttons; gapSize, contentAlign
|
|
34
|
+
AvatarLabel/AvatarLabel — avatar + title + optional labels row
|
|
35
|
+
Copyable/CopyableCell — value with copy-to-clipboard
|
|
36
|
+
Editable/EditableCell — inline text-input cell
|
|
37
|
+
FlagLabel/FlagLabelCell — country flag + label
|
|
38
|
+
IconLabel/IconLabel — icon + label
|
|
39
|
+
IconTooltipCell/ — icon + label + tooltip icon
|
|
40
|
+
InputNumber/InputNumberCell — wraps ds-input-number
|
|
41
|
+
LabelsWithShowMore/ — shows N labels inline, rest in a modal
|
|
42
|
+
Star/StarCell — star toggle cell (standalone; not same as rowStar column)
|
|
43
|
+
StatusLabel/StatusLabel — ds-badge status dot + label
|
|
44
|
+
TagIcon/TagIcon — tag + icon cell
|
|
45
|
+
TagsGroup/TagsGroup — wraps ds-tags with loading/error states
|
|
46
|
+
ColumnSortMenu/
|
|
47
|
+
useSortState.ts — useReducer managing multi-column sort state; exposes SortStateAPI
|
|
48
|
+
columnWithSortButtons.tsx — column decorator that injects sort buttons into column header
|
|
49
|
+
groupedColumnsSort.ts — sort logic for GroupTable rows
|
|
50
|
+
SortRenderer.tsx — renders 'default' | 'string' sort UI
|
|
51
|
+
TitleWithSort.tsx
|
|
52
|
+
FilterTrigger/
|
|
53
|
+
FilterTrigger.tsx — icon-based filter trigger rendered in the title bar right side
|
|
54
|
+
InfiniteScroll/
|
|
55
|
+
InfiniteLoaderItem.tsx — shows loading/error/no-more-data row at the bottom (or top) of VirtualTable
|
|
56
|
+
InfiniteLoaderItem.types.ts — InfiniteScrollProps type
|
|
57
|
+
BackToTopButton.tsx — exported directly; floats over virtual list
|
|
58
|
+
OuterListElement.tsx — outer wrapper for react-window List
|
|
59
|
+
constants.ts — infiniteLoaderItemHeight
|
|
60
|
+
utils.ts
|
|
61
|
+
RowSelection/
|
|
62
|
+
RowSelectionColumn.tsx — single-row checkbox rendered via antd rowSelection.renderCell
|
|
63
|
+
hooks/
|
|
64
|
+
useBulkSelection/ — counts selectable/selected records including children
|
|
65
|
+
useRowKey/ — normalises rowKey string | function
|
|
66
|
+
useRowStar/ — manages starred keys, builds star column definition
|
|
67
|
+
constants/
|
|
68
|
+
Table.constants.ts — SELECTION_ALL, SELECTION_INVERT, ITEM_RENDER_TYPE
|
|
69
|
+
TableSkeleton.constants.tsx — skeleton column/row config for loading state
|
|
70
|
+
utils/
|
|
71
|
+
index.ts — re-exports all utils
|
|
72
|
+
calculateColumnWidths.ts — distributes table width across columns for VirtualTable
|
|
73
|
+
columnWithCellTooltip.tsx — wraps cell render in ds-tooltip when getCellTooltipProps is set
|
|
74
|
+
getChildrenColumnName.ts
|
|
75
|
+
getRecordSelectionStatus.ts
|
|
76
|
+
getSkeletonProps.tsx — builds skeleton columns/dataSource when loading=true
|
|
77
|
+
getValueFromPath.ts
|
|
78
|
+
isGrouped.ts
|
|
79
|
+
isRecordSelectable.ts
|
|
80
|
+
locale.ts — getDefaultLocale, useTableLocale, TableLocaleContext
|
|
81
|
+
style/
|
|
82
|
+
index.less — entry point; imports table.less
|
|
83
|
+
table.less — antd overrides and DS-specific CSS
|
|
84
|
+
modules.d.ts
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Public exports
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
// from src/index.ts
|
|
91
|
+
export default DSTable // main component
|
|
92
|
+
export { GroupedTable } // alias GroupTable
|
|
93
|
+
export { VirtualTable }
|
|
94
|
+
export { TreeTable }
|
|
95
|
+
export { TableCell } // namespace of all cell components
|
|
96
|
+
export { ItemsMenu } // styled container for bulk-action menu
|
|
97
|
+
export { BackToTopButton } // for use with VirtualTable infinite scroll
|
|
98
|
+
export { GROUP_BY } // { value, ranges, interval, disabled }
|
|
99
|
+
|
|
100
|
+
// Types
|
|
101
|
+
export type {
|
|
102
|
+
VirtualTableProps, VirtualTableRef, VirtualColumnType,
|
|
103
|
+
RowSelection, RowType, SingleColumnSort, OnSortFn,
|
|
104
|
+
Locale, DSColumnType, DSTableProps,
|
|
105
|
+
ScrollProxyType, Selection, SelectionItem, CustomizeScrollBodyInfo,
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### `DSTable` (default export)
|
|
110
|
+
|
|
111
|
+
| Prop | Type | Default | Description |
|
|
112
|
+
|------|------|---------|-------------|
|
|
113
|
+
| `title` | `ReactNode \| (() => ReactNode)` | — | Rendered in the left side of the title bar |
|
|
114
|
+
| `hideTitleBar` | `boolean` | — | Hides the entire title bar |
|
|
115
|
+
| `headerWithBorderTop` | `boolean` | — | Adds a border above the title bar |
|
|
116
|
+
| `loading` | `boolean` | `false` | When true renders skeleton rows instead of data |
|
|
117
|
+
| `skeletonProps` | `{ maxHeight?, headerHeight?, subheaderHeight?, cellHeight? }` | — | Customises the loading skeleton dimensions |
|
|
118
|
+
| `cellSize` | `'medium' \| 'small'` (or any string) | — | Adds `ds-table-cell-size-{value}` CSS class |
|
|
119
|
+
| `roundedHeader` | `boolean` | `false` | Adds `ds-table-rounded` CSS class |
|
|
120
|
+
| `columns` | `DSColumnType<T>[]` | — | Extends antd ColumnType with `sortRender`, `childRender`, `getCellTooltipProps` |
|
|
121
|
+
| `dataSource` | `T[]` | — | Row data |
|
|
122
|
+
| `dataSourceFull` | `T[]` | — | Full unfiltered data for accurate selection counts when `dataSource` is a subset |
|
|
123
|
+
| `dataSourceTotalCount` | `number` | — | Override the total count shown in title bar |
|
|
124
|
+
| `isCounterLoading` | `boolean` | — | Shows a skeleton in place of the item counter |
|
|
125
|
+
| `renderCustomCounter` | `(props: { count: number; content: ReactNode }) => ReactNode` | — | Replaces the default "N items" counter |
|
|
126
|
+
| `selection` | `RowSelection<T>` | — | See RowSelection below |
|
|
127
|
+
| `rowStar` | `RowStar<T>` | — | See RowStar below |
|
|
128
|
+
| `filters` | `Filter[]` | — | Filter trigger buttons rendered on the right of the title bar |
|
|
129
|
+
| `searchComponent` | `ReactNode` | — | Slot on the right side of the title bar |
|
|
130
|
+
| `filterComponent` | `ReactNode` | — | Slot on the right side of the title bar (before searchComponent) |
|
|
131
|
+
| `headerButton` | `ReactNode` | — | Button slot on the right side of the title bar |
|
|
132
|
+
| `itemsMenu` | `string \| ReactNode` | — | Shown in title bar when rows are selected (bulk actions) |
|
|
133
|
+
| `grouped` | `boolean` | — | When true and dataSource contains GroupType records, renders GroupTable |
|
|
134
|
+
| `hideGroupExpander` | `boolean` | — | Hides expand/collapse toggle in GroupTable |
|
|
135
|
+
| `initialGroupsCollapsed` | `boolean` | — | Groups start collapsed in GroupTable |
|
|
136
|
+
| `hideColumnNames` | `boolean` | — | Hides the column header row via CSS |
|
|
137
|
+
| `disableColumnNamesLineBreak` | `boolean` | — | Prevents column header text wrapping |
|
|
138
|
+
| `locale` | `Locale` | (react-intl defaults) | i18n overrides; merged with built-in defaults |
|
|
139
|
+
| `onSort` | `OnSortFn` | — | Called when any sort button is clicked |
|
|
140
|
+
| `renderSelectionTitle` | `(selection?, filters?) => ReactNode` | — | Replaces default selected-count title |
|
|
141
|
+
| `hideTitlePart` | `boolean` | — | Hides the count portion of the title bar (shows skeleton) |
|
|
142
|
+
| `getRowTooltipProps` | `(row: T) => TooltipProps \| false` | — | Wraps entire row in a tooltip |
|
|
143
|
+
| `emptyDataComponent` | `ReactNode` | `ds-result no-results` | Replaces default empty state |
|
|
144
|
+
| `pagination` | antd PaginationProps \| false | — | Pagination config; prev/next buttons use ds-button |
|
|
145
|
+
| + all antd TableProps | (except `title`, `subTitle`, `onSearch`, `itemsMenu`, `search`, `locale`, `columns`, `loading`) | — | Passed through to antd Table |
|
|
146
|
+
|
|
147
|
+
`DSTable.SELECTION_ALL` and `DSTable.SELECTION_INVERT` are string constants attached to the component.
|
|
148
|
+
|
|
149
|
+
### `DSColumnType<T>`
|
|
150
|
+
|
|
151
|
+
Extends antd `ColumnType<T>`:
|
|
152
|
+
|
|
153
|
+
| Added prop | Type | Description |
|
|
154
|
+
|------------|------|-------------|
|
|
155
|
+
| `fixed` | `'left' \| 'right'` | Overrides antd (removes boolean) |
|
|
156
|
+
| `sortRender` | `'default' \| 'string' \| SortButtonsRenderer<T>` | Controls sort UI; `'default'` = numeric/generic, `'string'` = A-Z/Z-A |
|
|
157
|
+
| `childRender` | `(value, row, index) => ReactNode` | VirtualTable only — alternative render for expanded child rows |
|
|
158
|
+
| `getCellTooltipProps` | `(row: T) => TooltipProps \| false` | Wraps cell content in ds-tooltip |
|
|
159
|
+
|
|
160
|
+
### `RowSelection<T>`
|
|
161
|
+
|
|
162
|
+
Extends antd `TableRowSelection<T>`:
|
|
163
|
+
|
|
164
|
+
| Prop | Type | Description |
|
|
165
|
+
|------|------|-------------|
|
|
166
|
+
| `selectedRowKeys` | `Key[]` | Required (unlike antd where it's optional) |
|
|
167
|
+
| `onChange` | `(keys: Key[], rows: T[]) => void` | Required |
|
|
168
|
+
| `selections` | `SelectionItem[]` | SELECTION_ALL / SELECTION_INVERT / custom Selection / null |
|
|
169
|
+
| `fixed` | `boolean` | Fixes selection column |
|
|
170
|
+
| `limit` | `number` | Max allowed selection count |
|
|
171
|
+
| `independentSelectionExpandedRows` | `boolean` | Allows selecting parent and child rows independently |
|
|
172
|
+
| `checkRowSelectionStatus` | `(record: T) => { disabled?: boolean; unavailable?: boolean }` | Per-row selection state |
|
|
173
|
+
| `getSelectionTooltipProps` | `(record: T) => TooltipProps \| false` | Per-row checkbox tooltip |
|
|
174
|
+
| `globalSelection` | `{ isSelected: boolean; onChange: (selected: boolean) => void }` | "Select all pages" flag for paginated/infinite tables |
|
|
175
|
+
|
|
176
|
+
### `RowStar<T>`
|
|
177
|
+
|
|
178
|
+
| Prop | Type | Description |
|
|
179
|
+
|------|------|-------------|
|
|
180
|
+
| `starredRowKeys` | `string[]` | Required — currently starred keys |
|
|
181
|
+
| `onChange` | `(starredRowKeys: string[], starredKey: string, isStarred: boolean) => void` | — |
|
|
182
|
+
| `onClick` | `(e: MouseEvent) => void` | — |
|
|
183
|
+
| `renderCell` | `ColumnType<T>['render']` | Override star column cell renderer |
|
|
184
|
+
| `className` | `string` | — |
|
|
185
|
+
| `disableForExpandedRows` | `boolean` | Hides star on child rows |
|
|
186
|
+
|
|
187
|
+
### `VirtualTable`
|
|
188
|
+
|
|
189
|
+
`DSTableProps<T>` plus:
|
|
190
|
+
|
|
191
|
+
| Prop | Type | Default | Description |
|
|
192
|
+
|------|------|---------|-------------|
|
|
193
|
+
| `cellHeight` | `number` | `52` | Fixed height of every row in px |
|
|
194
|
+
| `initialWidth` | `number` | `0` | Initial container width before ResizeObserver fires |
|
|
195
|
+
| `scroll` | `{ x?: number; y: number }` | — | `y` is required; sets visible list height |
|
|
196
|
+
| `infiniteScroll` | `InfiniteScrollProps` | — | Enables bidirectional infinite loading |
|
|
197
|
+
| `onRowClick` | `(row: T) => void` | — | Row click handler |
|
|
198
|
+
| `onListRefChange` | `(ref: RefObject<List>) => void` | — | **Deprecated** — fires on every render |
|
|
199
|
+
| `onItemsRendered` | `ListOnItemsRenderedProps => void` | — | react-window callback |
|
|
200
|
+
| `onScrollToRecordIndex` | `(index: number, callback?: () => void) => void` | — | Override scroll-to-item behaviour |
|
|
201
|
+
| `sticky` | `DSTableProps.sticky & { scrollThreshold?, offsetHeader?, getContainer: () => HTMLDivElement }` | — | Sticky header with DS-managed scrollbar |
|
|
202
|
+
|
|
203
|
+
`VirtualTable` accepts a `ref` of type `VirtualTableRef`:
|
|
204
|
+
```ts
|
|
205
|
+
{ virtualListRef, outerListRef, horizontalScrollRef, scrollToTop(), scrollTo(top) }
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### `InfiniteScrollProps`
|
|
209
|
+
|
|
210
|
+
| Prop | Type | Description |
|
|
211
|
+
|------|------|-------------|
|
|
212
|
+
| `hasMore` | `boolean` | More items available below |
|
|
213
|
+
| `isLoading` | `boolean` | Currently fetching |
|
|
214
|
+
| `hasError` | `boolean` | Fetch failed |
|
|
215
|
+
| `nextPage` | `InfiniteScrollState` | State for bottom loader |
|
|
216
|
+
| `prevPage` | `InfiniteScrollState` | State for top loader (prepend) |
|
|
217
|
+
| `maxScroll` | `number` | Max virtual scroll offset for triggering load |
|
|
218
|
+
| `showBackToTopButton` | `boolean` | — |
|
|
219
|
+
| `render` | `(state) => ReactElement` | Custom loader/error/end renderer |
|
|
220
|
+
| `onScrollEndReach` | `() => void` | Triggered near bottom |
|
|
221
|
+
| `onScrollTopReach` | `() => void` | Triggered near top (for bidirectional scroll) |
|
|
222
|
+
| `onRetryButtonClick` | `(position) => void` | — |
|
|
223
|
+
| `onBackToTop` | `() => void` | — |
|
|
224
|
+
|
|
225
|
+
### `TableCell` namespace
|
|
226
|
+
|
|
227
|
+
Accessed as `import { TableCell } from '@synerise/ds-table'`:
|
|
228
|
+
|
|
229
|
+
| Name | Key props |
|
|
230
|
+
|------|-----------|
|
|
231
|
+
| `ActionCell` | `children`, `gapSize?: number`, `contentAlign?: 'left'\|'right'\|'center'` |
|
|
232
|
+
| `AvatarLabelCell` | `avatar`, `title`, `labels?`, `icon?`, `avatarAction?`, `avatarLink?`, `ellipsis?`, `maxWidth?`, `disabled?` |
|
|
233
|
+
| `CopyableCell` | `value`, `confirmMessage`, `tooltipTimeout` |
|
|
234
|
+
| `EditableCell` | `value?`, `onChange`, `placeholder?` |
|
|
235
|
+
| `FlagLabelCell` | `countryCode`, `label` |
|
|
236
|
+
| `IconLabelCell` | `label?`, `icon?`, `disabled?` |
|
|
237
|
+
| `IconTooltipCell` | `label?`, `icon?`, `tooltipIcon?`, `tooltip?`, `disabled?` |
|
|
238
|
+
| `InputNumberCell` | `inputNumberProps?`, `disabled?` |
|
|
239
|
+
| `LabelsWithShowMore` | `items`, `numberOfVisibleItems`, `labelKey`, `renderItem`, `texts`, `loading?` |
|
|
240
|
+
| `StarCell` | `children`, `active?`, `onClick?`, `starTooltip?` |
|
|
241
|
+
| `StatusLabelCell` | `label`, `status?`, `customColor?`, `disabled?` |
|
|
242
|
+
| `TagIconCell` | `children`, `disabled?` |
|
|
243
|
+
| `TagsGroupCell` | `tagsProps?`, `disabled?`, `isLoading?`, `isError?` |
|
|
244
|
+
|
|
245
|
+
### `ItemsMenu`
|
|
246
|
+
|
|
247
|
+
Thin styled wrapper (`children: ReactNode`). Renders bulk-action menu items alongside the selection count in the title bar.
|
|
248
|
+
|
|
249
|
+
### `GroupedTable` (alias: `GroupTable`)
|
|
250
|
+
|
|
251
|
+
Use via `<Table grouped dataSource={groupedData} />` or directly as `<GroupedTable />`.
|
|
252
|
+
|
|
253
|
+
`dataSource` must be `GroupType<T>[]`:
|
|
254
|
+
```ts
|
|
255
|
+
{ column: string; key: string | number; value: string | number | boolean | object; rows: T[]; groupType: GroupByType }
|
|
256
|
+
```
|
|
257
|
+
`GROUP_BY` constant: `{ value, ranges, interval, disabled }`.
|
|
258
|
+
|
|
259
|
+
Additional props beyond `DSTableProps`: `addItem?`, `hideGroupExpander?`, `initialGroupsCollapsed?`.
|
|
260
|
+
|
|
261
|
+
## Usage patterns
|
|
262
|
+
|
|
263
|
+
```tsx
|
|
264
|
+
import Table, { TableCell, VirtualTable, TreeTable, GroupedTable, ItemsMenu } from '@synerise/ds-table';
|
|
265
|
+
import type { DSTableProps, DSColumnType, RowSelection } from '@synerise/ds-table';
|
|
266
|
+
|
|
267
|
+
// Basic table
|
|
268
|
+
const columns: DSColumnType<Row>[] = [
|
|
269
|
+
{
|
|
270
|
+
key: 'name',
|
|
271
|
+
dataIndex: 'name',
|
|
272
|
+
title: 'Name',
|
|
273
|
+
sorter: true,
|
|
274
|
+
sortRender: 'string', // renders A-Z / Z-A buttons
|
|
275
|
+
render: (value, row) => <TableCell.AvatarLabelCell avatar={<Avatar />} title={value} />,
|
|
276
|
+
},
|
|
277
|
+
];
|
|
278
|
+
|
|
279
|
+
<Table<Row>
|
|
280
|
+
title="Users"
|
|
281
|
+
columns={columns}
|
|
282
|
+
dataSource={rows}
|
|
283
|
+
rowKey="id"
|
|
284
|
+
selection={selection}
|
|
285
|
+
locale={{ pagination: { items: 'users' } }}
|
|
286
|
+
/>
|
|
287
|
+
|
|
288
|
+
// Virtual table with infinite scroll
|
|
289
|
+
<VirtualTable<Row>
|
|
290
|
+
ref={tableRef}
|
|
291
|
+
columns={columns}
|
|
292
|
+
dataSource={rows}
|
|
293
|
+
scroll={{ y: 600 }}
|
|
294
|
+
cellHeight={52}
|
|
295
|
+
initialWidth={800}
|
|
296
|
+
infiniteScroll={{
|
|
297
|
+
hasMore: true, isLoading: false, hasError: false,
|
|
298
|
+
onScrollEndReach: fetchNextPage,
|
|
299
|
+
}}
|
|
300
|
+
/>
|
|
301
|
+
|
|
302
|
+
// Tree table
|
|
303
|
+
<TreeTable<Row> columns={columns} dataSource={rows} rowKey="id" />
|
|
304
|
+
|
|
305
|
+
// Grouped table
|
|
306
|
+
<Table<GroupType<Row>>
|
|
307
|
+
grouped
|
|
308
|
+
columns={columns}
|
|
309
|
+
dataSource={[{ column: 'status', key: 'active', value: 'Active', rows: [..], groupType: 'value' }]}
|
|
310
|
+
/>
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
## Styling / Key dependencies / Implementation notes
|
|
314
|
+
|
|
315
|
+
- **Ant Design 4.x** is the rendering engine. `DefaultTable` and `GroupTable` render `antd/lib/table` directly. DSTable wraps DefaultTable/GroupTable.
|
|
316
|
+
- `VirtualTable` replaces antd's body with a `react-window` `FixedSizeList`. All rows must have the same height (`cellHeight`). Expanded rows are flattened into the list array with an `expandedChild` marker property.
|
|
317
|
+
- **Skeleton loading**: when `loading=true`, `getSkeletonProps` replaces `dataSource` with fake rows of `<Skeleton>` cells. The real data is never rendered until `loading` is false.
|
|
318
|
+
- **Sort state** is managed locally via `useSortState` (useReducer). Columns need a unique `key` when `sorter` is set; a dev-mode warning fires otherwise. Multi-column sort requires `sorter: { compare, multiple: <priority> }`.
|
|
319
|
+
- **Selection column** (64 px wide) is prepended by `DefaultTable`/`VirtualTable` via antd's `rowSelection.renderCell`, not as a real column — so it is not included in `columns`.
|
|
320
|
+
- **Row star column** is also prepended (via `useRowStar`) separately from the DS `rowStar` prop. In VirtualTable, selection and star columns are sliced off `mergedColumns` before passing to antd to avoid double-rendering.
|
|
321
|
+
- **`TableLocaleContext`** is provided by DSTable so deeply nested cell components can access locale without prop drilling.
|
|
322
|
+
- **`onListRefChange`** on VirtualTable fires on every render (missing deps array), documented internally as deprecated.
|
|
323
|
+
- **`fixed` in DSColumnType** narrows antd's `boolean | string` to `'left' | 'right'` only — passing `true` (antd shorthand for `'left'`) will cause a TypeScript error.
|
|
324
|
+
- Uses `react-intl` for all UI strings. The component must be wrapped in an `IntlProvider`.
|
|
325
|
+
- The package uses **Jest** (not Vitest) — `"test": "jest"` in package.json.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-table",
|
|
3
|
-
"version": "1.11.
|
|
3
|
+
"version": "1.11.11",
|
|
4
4
|
"description": "Table UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -41,33 +42,33 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-alert": "^1.1.
|
|
45
|
-
"@synerise/ds-badge": "^1.0.
|
|
46
|
-
"@synerise/ds-button": "^1.5.
|
|
47
|
-
"@synerise/ds-button-group": "^1.1.
|
|
48
|
-
"@synerise/ds-checkbox": "^1.2.
|
|
49
|
-
"@synerise/ds-copy-icon": "^1.2.
|
|
50
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
51
|
-
"@synerise/ds-flag": "^1.0.
|
|
52
|
-
"@synerise/ds-icon": "^1.18.
|
|
53
|
-
"@synerise/ds-input": "^1.7.
|
|
54
|
-
"@synerise/ds-input-number": "^1.2.
|
|
55
|
-
"@synerise/ds-list-item": "^1.6.
|
|
56
|
-
"@synerise/ds-loader": "^1.0.
|
|
57
|
-
"@synerise/ds-menu": "^1.4.
|
|
58
|
-
"@synerise/ds-modal": "^1.6.
|
|
59
|
-
"@synerise/ds-pagination": "^1.0.
|
|
60
|
-
"@synerise/ds-result": "^1.0.
|
|
61
|
-
"@synerise/ds-scrollbar": "^1.5.
|
|
62
|
-
"@synerise/ds-search": "^1.5.
|
|
63
|
-
"@synerise/ds-select": "^1.3.
|
|
64
|
-
"@synerise/ds-skeleton": "^1.0.
|
|
65
|
-
"@synerise/ds-status": "^1.3.
|
|
66
|
-
"@synerise/ds-tag": "^1.4.
|
|
67
|
-
"@synerise/ds-tags": "^1.5.
|
|
68
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
69
|
-
"@synerise/ds-typography": "^1.1.
|
|
70
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-alert": "^1.1.62",
|
|
46
|
+
"@synerise/ds-badge": "^1.0.58",
|
|
47
|
+
"@synerise/ds-button": "^1.5.35",
|
|
48
|
+
"@synerise/ds-button-group": "^1.1.60",
|
|
49
|
+
"@synerise/ds-checkbox": "^1.2.36",
|
|
50
|
+
"@synerise/ds-copy-icon": "^1.2.16",
|
|
51
|
+
"@synerise/ds-dropdown": "^1.3.20",
|
|
52
|
+
"@synerise/ds-flag": "^1.0.13",
|
|
53
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
54
|
+
"@synerise/ds-input": "^1.7.13",
|
|
55
|
+
"@synerise/ds-input-number": "^1.2.50",
|
|
56
|
+
"@synerise/ds-list-item": "^1.6.2",
|
|
57
|
+
"@synerise/ds-loader": "^1.0.18",
|
|
58
|
+
"@synerise/ds-menu": "^1.4.32",
|
|
59
|
+
"@synerise/ds-modal": "^1.6.6",
|
|
60
|
+
"@synerise/ds-pagination": "^1.0.71",
|
|
61
|
+
"@synerise/ds-result": "^1.0.66",
|
|
62
|
+
"@synerise/ds-scrollbar": "^1.5.2",
|
|
63
|
+
"@synerise/ds-search": "^1.5.34",
|
|
64
|
+
"@synerise/ds-select": "^1.3.34",
|
|
65
|
+
"@synerise/ds-skeleton": "^1.0.60",
|
|
66
|
+
"@synerise/ds-status": "^1.3.32",
|
|
67
|
+
"@synerise/ds-tag": "^1.4.32",
|
|
68
|
+
"@synerise/ds-tags": "^1.5.51",
|
|
69
|
+
"@synerise/ds-tooltip": "^1.5.4",
|
|
70
|
+
"@synerise/ds-typography": "^1.1.27",
|
|
71
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
71
72
|
"@types/react-window": "^1.8.8",
|
|
72
73
|
"classnames": "^2.5.1",
|
|
73
74
|
"lodash.compact": "^3.0.1",
|
|
@@ -101,5 +102,5 @@
|
|
|
101
102
|
"styled-components": "^5.3.3",
|
|
102
103
|
"vitest": "4"
|
|
103
104
|
},
|
|
104
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
|
|
105
106
|
}
|