@versini/ui-datagrid 3.1.1 → 4.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 +18 -18
- package/dist/197.js +56 -34
- package/dist/430.js +1 -1
- package/dist/799.js +1 -1
- package/dist/91.js +1 -1
- package/dist/DataGrid/DataGrid.d.ts +1 -1
- package/dist/DataGrid/DataGridTypes.d.ts +52 -0
- package/dist/DataGrid/index.js +53 -9
- package/dist/DataGridAnimated/AnimatedWrapper.d.ts +1 -2
- package/dist/DataGridAnimated/index.js +16 -3
- package/dist/DataGridBody/DataGridBody.d.ts +1 -1
- package/dist/DataGridBody/index.js +1 -1
- package/dist/DataGridCell/DataGridCell.d.ts +1 -1
- package/dist/DataGridCell/index.js +1 -1
- package/dist/DataGridCellSort/ButtonSort.d.ts +1 -1
- package/dist/DataGridCellSort/DataGridCellSort.d.ts +1 -1
- package/dist/DataGridCellSort/index.js +1 -1
- package/dist/DataGridConstants/index.js +1 -1
- package/dist/DataGridFooter/DataGridFooter.d.ts +1 -1
- package/dist/DataGridFooter/index.js +4 -2
- package/dist/DataGridHeader/DataGridHeader.d.ts +1 -1
- package/dist/DataGridHeader/index.js +4 -2
- package/dist/DataGridInfinite/DataGridInfiniteBody.d.ts +33 -44
- package/dist/DataGridInfinite/index.js +220 -225
- package/dist/DataGridRow/DataGridRow.d.ts +2 -1
- package/dist/DataGridRow/index.js +5 -2
- package/dist/DataGridSorting/index.js +1 -1
- package/package.json +6 -5
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export type DataGridInfiniteBodyProps<T> = ({
|
|
2
2
|
/**
|
|
3
|
-
* If true, displays an empty state instead of
|
|
4
|
-
*
|
|
3
|
+
* If true, displays an empty state instead of the grid rows. When noData
|
|
4
|
+
* is true, data and children are optional.
|
|
5
5
|
*/
|
|
6
6
|
noData: true;
|
|
7
7
|
/**
|
|
8
|
-
* The full dataset to
|
|
8
|
+
* The full dataset to virtualize.
|
|
9
9
|
*/
|
|
10
10
|
data?: T[];
|
|
11
11
|
/**
|
|
@@ -20,12 +20,12 @@ export type DataGridInfiniteBodyProps<T> = ({
|
|
|
20
20
|
noDataText?: string;
|
|
21
21
|
} | {
|
|
22
22
|
/**
|
|
23
|
-
* If true, displays an empty state instead of
|
|
23
|
+
* If true, displays an empty state instead of the grid rows.
|
|
24
24
|
* @default false
|
|
25
25
|
*/
|
|
26
26
|
noData?: false;
|
|
27
27
|
/**
|
|
28
|
-
* The full dataset to
|
|
28
|
+
* The full dataset to virtualize.
|
|
29
29
|
*/
|
|
30
30
|
data: T[];
|
|
31
31
|
/**
|
|
@@ -37,23 +37,20 @@ export type DataGridInfiniteBodyProps<T> = ({
|
|
|
37
37
|
noDataText?: never;
|
|
38
38
|
}) & {
|
|
39
39
|
/**
|
|
40
|
-
*
|
|
41
|
-
* @default
|
|
40
|
+
* Rows rendered beyond the viewport on each side.
|
|
41
|
+
* @default 8
|
|
42
42
|
*/
|
|
43
|
-
|
|
43
|
+
overscan?: number;
|
|
44
44
|
/**
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
45
|
+
* Initial row-height estimate (px) used before rows are measured. Real heights
|
|
46
|
+
* are always measured from the DOM; a value near the average row height
|
|
47
|
+
* minimizes scrollbar drift and improves scrollToIndex accuracy. Defaults to
|
|
48
|
+
* the grid's density: 44 normally, 29 when the DataGrid is `compact`.
|
|
48
49
|
*/
|
|
49
|
-
|
|
50
|
+
estimatedRowHeight?: number;
|
|
50
51
|
/**
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*/
|
|
54
|
-
rootMargin?: string;
|
|
55
|
-
/**
|
|
56
|
-
* Callback when visible count changes. Useful for displaying count in header.
|
|
52
|
+
* Callback reporting a monotonic high-water mark: the furthest row index
|
|
53
|
+
* scrolled into view, plus one. Useful for a "showing N of M" caption.
|
|
57
54
|
*/
|
|
58
55
|
onVisibleCountChange?: (visibleCount: number, totalItems: number) => void;
|
|
59
56
|
/**
|
|
@@ -66,48 +63,40 @@ export type DataGridInfiniteBodyProps<T> = ({
|
|
|
66
63
|
*/
|
|
67
64
|
export type DataGridInfiniteBodyRef = {
|
|
68
65
|
/**
|
|
69
|
-
* Scroll
|
|
70
|
-
* visible, it will expand the visible count first.
|
|
66
|
+
* Scroll a row into view (centered). Works for any index, mounted or not.
|
|
71
67
|
* @param index - The index of the row to scroll to
|
|
72
68
|
*/
|
|
73
69
|
scrollToIndex: (index: number) => void;
|
|
74
70
|
};
|
|
75
71
|
/**
|
|
76
|
-
* A
|
|
72
|
+
* A virtualized DataGrid body for large datasets.
|
|
73
|
+
*
|
|
74
|
+
* Only the rows near the viewport stay mounted (windowing via
|
|
75
|
+
* `@tanstack/react-virtual`), so the DOM stays small and scrolling stays smooth
|
|
76
|
+
* at any row count. Rows are rendered in normal grid flow between two full-span
|
|
77
|
+
* spacer elements, so `columns`/subgrid (including intrinsic `auto` tracks) keep
|
|
78
|
+
* working without any consumer change. The virtualizer windows against the
|
|
79
|
+
* DataGrid's own scroll container (created by `maxHeight` or a sticky
|
|
80
|
+
* header/footer), or the page (window scroll) when the grid has neither.
|
|
77
81
|
*
|
|
78
|
-
*
|
|
79
|
-
* -
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
* - Programmatic scroll-to-row with smooth animation
|
|
82
|
+
* Because off-screen rows are removed from the DOM, the grid exposes
|
|
83
|
+
* `aria-rowcount`/`aria-rowindex` and keeps keyboard focus on the grid if a
|
|
84
|
+
* focused row recycles out. Browser find-in-page and uncontrolled per-row state
|
|
85
|
+
* do not persist across recycling (inherent to DOM virtualization).
|
|
83
86
|
*
|
|
84
87
|
* @example
|
|
85
88
|
* ```tsx
|
|
86
|
-
* const infiniteBodyRef = useRef<DataGridInfiniteBodyRef>(null);
|
|
87
|
-
*
|
|
88
|
-
* // Jump to a specific row
|
|
89
|
-
* const handleJumpToRow = () => {
|
|
90
|
-
* infiniteBodyRef.current?.scrollToIndex(134);
|
|
91
|
-
* };
|
|
92
|
-
*
|
|
93
89
|
* <DataGrid maxHeight="400px" stickyHeader>
|
|
94
|
-
* <DataGridHeader caption={`Showing ${
|
|
90
|
+
* <DataGridHeader caption={`Showing ${reached} of ${data.length}`}>
|
|
95
91
|
* <DataGridRow>
|
|
96
92
|
* <DataGridCell>Name</DataGridCell>
|
|
97
|
-
* <DataGridCell>Role</DataGridCell>
|
|
98
93
|
* </DataGridRow>
|
|
99
94
|
* </DataGridHeader>
|
|
100
95
|
*
|
|
101
|
-
* <DataGridInfiniteBody
|
|
102
|
-
* ref={infiniteBodyRef}
|
|
103
|
-
* data={largeData}
|
|
104
|
-
* batchSize={25}
|
|
105
|
-
* onVisibleCountChange={(count) => setVisibleCount(count)}
|
|
106
|
-
* >
|
|
96
|
+
* <DataGridInfiniteBody data={largeData} estimatedRowHeight={56}>
|
|
107
97
|
* {(row) => (
|
|
108
98
|
* <DataGridRow key={row.id}>
|
|
109
99
|
* <DataGridCell>{row.name}</DataGridCell>
|
|
110
|
-
* <DataGridCell>{row.role}</DataGridCell>
|
|
111
100
|
* </DataGridRow>
|
|
112
101
|
* )}
|
|
113
102
|
* </DataGridInfiniteBody>
|
|
@@ -115,6 +104,6 @@ export type DataGridInfiniteBodyRef = {
|
|
|
115
104
|
* ```
|
|
116
105
|
*
|
|
117
106
|
*/
|
|
118
|
-
export declare function DataGridInfiniteBody<T>({ data, children: renderRow,
|
|
107
|
+
export declare function DataGridInfiniteBody<T>({ data, children: renderRow, overscan, estimatedRowHeight, onVisibleCountChange, className, noData, noDataText, ref, }: DataGridInfiniteBodyProps<T> & {
|
|
119
108
|
ref?: React.Ref<DataGridInfiniteBodyRef>;
|
|
120
|
-
}): import("react
|
|
109
|
+
}): import("react").JSX.Element;
|