@versini/ui-datagrid 1.5.1 → 2.0.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/README.md +23 -26
- package/dist/131.js +1 -1
- package/dist/298.js +1 -1
- package/dist/46.js +1 -1
- package/dist/511.js +1 -1
- package/dist/926.js +1 -1
- package/dist/DataGrid/index.js +1 -1
- package/dist/DataGridAnimated/index.js +1 -1
- package/dist/DataGridBody/index.js +1 -1
- package/dist/DataGridCell/index.js +1 -1
- package/dist/DataGridCellSort/index.js +1 -1
- package/dist/DataGridConstants/index.js +1 -1
- package/dist/DataGridFooter/index.js +1 -1
- package/dist/DataGridHeader/index.js +1 -1
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridRow/index.js +1 -1
- package/dist/DataGridSorting/index.js +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -179,6 +179,7 @@ function MyInfiniteTable({ data }) {
|
|
|
179
179
|
```
|
|
180
180
|
|
|
181
181
|
The `DataGridInfiniteBody` component handles all the complexity internally:
|
|
182
|
+
|
|
182
183
|
- Progressive loading with IntersectionObserver
|
|
183
184
|
- Correct marker placement for seamless scrolling (marker is placed `threshold` items before the end)
|
|
184
185
|
- Automatic data slicing and memoization
|
|
@@ -225,11 +226,7 @@ function MyInfiniteTableWithJump({ data }) {
|
|
|
225
226
|
</DataGridRow>
|
|
226
227
|
</DataGridHeader>
|
|
227
228
|
|
|
228
|
-
<DataGridInfiniteBody
|
|
229
|
-
ref={infiniteBodyRef}
|
|
230
|
-
data={data}
|
|
231
|
-
batchSize={25}
|
|
232
|
-
>
|
|
229
|
+
<DataGridInfiniteBody ref={infiniteBodyRef} data={data} batchSize={25}>
|
|
233
230
|
{(item) => (
|
|
234
231
|
<DataGridRow
|
|
235
232
|
key={item.id}
|
|
@@ -248,6 +245,7 @@ function MyInfiniteTableWithJump({ data }) {
|
|
|
248
245
|
```
|
|
249
246
|
|
|
250
247
|
The `scrollToIndex` method:
|
|
248
|
+
|
|
251
249
|
- If the row is already visible → smooth scrolls to it immediately
|
|
252
250
|
- If the row is not yet loaded → expands visible count first, then scrolls after render
|
|
253
251
|
|
|
@@ -357,11 +355,11 @@ function MySortableTable({ data }) {
|
|
|
357
355
|
|
|
358
356
|
### DataGridBody
|
|
359
357
|
|
|
360
|
-
| Prop | Type | Default
|
|
361
|
-
| ------------ | --------- |
|
|
362
|
-
| `noData` | `boolean` | `false`
|
|
363
|
-
| `noDataText` | `string` | `'No Data'` | Custom text for the empty state
|
|
364
|
-
| `className` | `string` | -
|
|
358
|
+
| Prop | Type | Default | Description |
|
|
359
|
+
| ------------ | --------- | ----------- | --------------------------------------- |
|
|
360
|
+
| `noData` | `boolean` | `false` | Display empty state instead of children |
|
|
361
|
+
| `noDataText` | `string` | `'No Data'` | Custom text for the empty state |
|
|
362
|
+
| `className` | `string` | - | CSS class for the element |
|
|
365
363
|
|
|
366
364
|
### DataGridFooter
|
|
367
365
|
|
|
@@ -397,7 +395,6 @@ function MySortableTable({ data }) {
|
|
|
397
395
|
| `sortedCell` | `string` | **required** | ID of the currently sorted column |
|
|
398
396
|
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment |
|
|
399
397
|
| `mode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Theme mode for sort button |
|
|
400
|
-
| `focusMode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Focus mode for sort button |
|
|
401
398
|
| `slotLeft` | `ReactNode` | - | Content to display left of label |
|
|
402
399
|
| `slotRight` | `ReactNode` | - | Content to display right of label |
|
|
403
400
|
| `className` | `string` | - | CSS class for the cell |
|
|
@@ -405,24 +402,24 @@ function MySortableTable({ data }) {
|
|
|
405
402
|
|
|
406
403
|
### DataGridInfiniteBody
|
|
407
404
|
|
|
408
|
-
| Prop | Type
|
|
409
|
-
| ---------------------- |
|
|
410
|
-
| `data` | `T[]`
|
|
411
|
-
| `children` | `(item: T, index: number) => ReactNode`
|
|
412
|
-
| `batchSize` | `number`
|
|
413
|
-
| `threshold` | `number`
|
|
414
|
-
| `rootMargin` | `string`
|
|
415
|
-
| `onVisibleCountChange` | `(visibleCount: number, total: number) => void` | -
|
|
416
|
-
| `noData` | `boolean`
|
|
417
|
-
| `noDataText` | `string`
|
|
418
|
-
| `className` | `string`
|
|
419
|
-
| `ref` | `React.Ref<DataGridInfiniteBodyRef>`
|
|
405
|
+
| Prop | Type | Default | Description |
|
|
406
|
+
| ---------------------- | ----------------------------------------------- | ------------ | ----------------------------------------------- |
|
|
407
|
+
| `data` | `T[]` | **required** | The full dataset to render progressively |
|
|
408
|
+
| `children` | `(item: T, index: number) => ReactNode` | **required** | Render function for each row |
|
|
409
|
+
| `batchSize` | `number` | `20` | Items to show initially and add per scroll |
|
|
410
|
+
| `threshold` | `number` | `5` | Items before marker to allow seamless scrolling |
|
|
411
|
+
| `rootMargin` | `string` | `'20px'` | IntersectionObserver margin |
|
|
412
|
+
| `onVisibleCountChange` | `(visibleCount: number, total: number) => void` | - | Callback when visible count changes |
|
|
413
|
+
| `noData` | `boolean` | `false` | Display empty state instead of infinite scroll |
|
|
414
|
+
| `noDataText` | `string` | `'No Data'` | Custom text for the empty state |
|
|
415
|
+
| `className` | `string` | - | CSS class for the body element |
|
|
416
|
+
| `ref` | `React.Ref<DataGridInfiniteBodyRef>` | - | Ref to access imperative methods |
|
|
420
417
|
|
|
421
418
|
### DataGridInfiniteBodyRef (Imperative Handle)
|
|
422
419
|
|
|
423
|
-
| Method | Signature
|
|
424
|
-
| --------------- |
|
|
425
|
-
| `scrollToIndex` | `(index: number) => void`
|
|
420
|
+
| Method | Signature | Description |
|
|
421
|
+
| --------------- | ------------------------- | ------------------------------------------------------------------------------- |
|
|
422
|
+
| `scrollToIndex` | `(index: number) => void` | Scroll to a row by index. Expands visible count if needed, then smooth scrolls. |
|
|
426
423
|
|
|
427
424
|
## License
|
|
428
425
|
|
package/dist/131.js
CHANGED
package/dist/298.js
CHANGED
package/dist/46.js
CHANGED
package/dist/511.js
CHANGED
package/dist/926.js
CHANGED
package/dist/DataGrid/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-datagrid",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -87,8 +87,8 @@
|
|
|
87
87
|
},
|
|
88
88
|
"devDependencies": {
|
|
89
89
|
"@testing-library/jest-dom": "6.9.1",
|
|
90
|
-
"@versini/ui-button": "
|
|
91
|
-
"@versini/ui-types": "
|
|
90
|
+
"@versini/ui-button": "13.0.0",
|
|
91
|
+
"@versini/ui-types": "9.0.0"
|
|
92
92
|
},
|
|
93
93
|
"dependencies": {
|
|
94
94
|
"@versini/ui-icons": "4.21.1",
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"sideEffects": [
|
|
99
99
|
"**/*.css"
|
|
100
100
|
],
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "a295349019d1512796f266bba535de383f12b6ee"
|
|
102
102
|
}
|