@versini/ui-datagrid 0.3.5 → 0.3.7
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 +46 -48
- package/dist/DataGrid/DataGrid.js +1 -1
- package/dist/DataGrid/DataGridContext.js +1 -1
- package/dist/DataGrid/index.js +1 -1
- package/dist/DataGrid/utilities.js +1 -1
- package/dist/DataGridAnimated/AnimatedWrapper.js +1 -1
- package/dist/DataGridAnimated/index.js +1 -1
- package/dist/DataGridAnimated/useAnimatedHeight.js +1 -1
- package/dist/DataGridBody/DataGridBody.js +1 -1
- package/dist/DataGridBody/index.js +1 -1
- package/dist/DataGridCell/DataGridCell.d.ts +2 -3
- package/dist/DataGridCell/DataGridCell.js +19 -17
- package/dist/DataGridCell/index.js +1 -1
- package/dist/DataGridCellSort/DataGridCellSort.js +1 -1
- package/dist/DataGridCellSort/index.js +1 -1
- package/dist/DataGridConstants/DataGridConstants.js +1 -1
- package/dist/DataGridConstants/index.js +1 -1
- package/dist/DataGridFooter/DataGridFooter.js +1 -1
- package/dist/DataGridFooter/index.js +1 -1
- package/dist/DataGridHeader/DataGridHeader.js +1 -1
- package/dist/DataGridHeader/index.js +1 -1
- package/dist/DataGridInfinite/InfiniteScrollMarker.js +1 -1
- package/dist/DataGridInfinite/index.js +1 -1
- package/dist/DataGridInfinite/useInfiniteScroll.js +1 -1
- package/dist/DataGridRow/DataGridRow.d.ts +1 -1
- package/dist/DataGridRow/DataGridRow.js +5 -3
- package/dist/DataGridRow/index.js +1 -1
- package/dist/DataGridSorting/index.js +1 -1
- package/dist/DataGridSorting/sortingUtils.js +1 -1
- package/dist/common/utilities.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -107,11 +107,7 @@ function MyTable({ data }) {
|
|
|
107
107
|
Use the `columns` prop to define column widths with CSS Grid track sizes:
|
|
108
108
|
|
|
109
109
|
```tsx
|
|
110
|
-
<DataGrid
|
|
111
|
-
columns={["200px", "1fr", "auto"]}
|
|
112
|
-
maxHeight="400px"
|
|
113
|
-
stickyHeader
|
|
114
|
-
>
|
|
110
|
+
<DataGrid columns={["200px", "1fr", "auto"]} maxHeight="400px" stickyHeader>
|
|
115
111
|
<DataGridHeader caption="User List">
|
|
116
112
|
<DataGridRow>
|
|
117
113
|
<DataGridCell>Name</DataGridCell>
|
|
@@ -132,6 +128,7 @@ Use the `columns` prop to define column widths with CSS Grid track sizes:
|
|
|
132
128
|
```
|
|
133
129
|
|
|
134
130
|
Supported column values include:
|
|
131
|
+
|
|
135
132
|
- Fixed sizes: `"200px"`, `"10rem"`, `"5em"`
|
|
136
133
|
- Flexible sizes: `"1fr"`, `"2fr"`
|
|
137
134
|
- Auto sizing: `"auto"`, `"min-content"`, `"max-content"`
|
|
@@ -269,66 +266,67 @@ function MySortableTable({ data }) {
|
|
|
269
266
|
|
|
270
267
|
### DataGrid
|
|
271
268
|
|
|
272
|
-
| Prop | Type | Default | Description
|
|
273
|
-
| ------------------ | ----------------------------------------------- | ---------- |
|
|
274
|
-
| `mode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'system'` | Theme mode
|
|
275
|
-
| `compact` | `boolean` | `false` | Reduced padding
|
|
276
|
-
| `stickyHeader` | `boolean` | `false` | Fixed header while scrolling
|
|
277
|
-
| `stickyFooter` | `boolean` | `false` | Fixed footer while scrolling
|
|
278
|
-
| `blurEffect` | `'none' \| 'small' \| 'medium' \| 'large'` | `'none'` | Blur intensity for sticky elements
|
|
279
|
-
| `maxHeight` | `string` | - | Max height (required for sticky)
|
|
280
|
-
| `disabled` | `boolean` | `false` | Show loading overlay with spinner
|
|
281
|
-
| `columns` | `string[]` | - | CSS Grid track sizes for column widths
|
|
282
|
-
| `summary` | `string` | - | Alternative text for screen readers
|
|
283
|
-
| `className` | `string` | - | CSS class for the grid element
|
|
284
|
-
| `wrapperClassName` | `string` | - | CSS class for the wrapper container
|
|
269
|
+
| Prop | Type | Default | Description |
|
|
270
|
+
| ------------------ | ----------------------------------------------- | ---------- | -------------------------------------- |
|
|
271
|
+
| `mode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'system'` | Theme mode |
|
|
272
|
+
| `compact` | `boolean` | `false` | Reduced padding |
|
|
273
|
+
| `stickyHeader` | `boolean` | `false` | Fixed header while scrolling |
|
|
274
|
+
| `stickyFooter` | `boolean` | `false` | Fixed footer while scrolling |
|
|
275
|
+
| `blurEffect` | `'none' \| 'small' \| 'medium' \| 'large'` | `'none'` | Blur intensity for sticky elements |
|
|
276
|
+
| `maxHeight` | `string` | - | Max height (required for sticky) |
|
|
277
|
+
| `disabled` | `boolean` | `false` | Show loading overlay with spinner |
|
|
278
|
+
| `columns` | `string[]` | - | CSS Grid track sizes for column widths |
|
|
279
|
+
| `summary` | `string` | - | Alternative text for screen readers |
|
|
280
|
+
| `className` | `string` | - | CSS class for the grid element |
|
|
281
|
+
| `wrapperClassName` | `string` | - | CSS class for the wrapper container |
|
|
285
282
|
|
|
286
283
|
### DataGridHeader
|
|
287
284
|
|
|
288
|
-
| Prop | Type | Default | Description
|
|
289
|
-
| ------------------ | ----------- | ------- |
|
|
285
|
+
| Prop | Type | Default | Description |
|
|
286
|
+
| ------------------ | ----------- | ------- | ---------------------------------------- |
|
|
290
287
|
| `caption` | `ReactNode` | - | Caption/title displayed above header row |
|
|
291
|
-
| `captionClassName` | `string` | - | CSS class for the caption element
|
|
292
|
-
| `className` | `string` | - | CSS class for the header
|
|
288
|
+
| `captionClassName` | `string` | - | CSS class for the caption element |
|
|
289
|
+
| `className` | `string` | - | CSS class for the header |
|
|
293
290
|
|
|
294
291
|
### DataGridBody / DataGridFooter
|
|
295
292
|
|
|
296
|
-
| Prop | Type | Default | Description
|
|
297
|
-
| ----------- | -------- | ------- |
|
|
293
|
+
| Prop | Type | Default | Description |
|
|
294
|
+
| ----------- | -------- | ------- | ------------------------- |
|
|
298
295
|
| `className` | `string` | - | CSS class for the element |
|
|
299
296
|
|
|
300
297
|
### DataGridRow
|
|
301
298
|
|
|
302
|
-
| Prop | Type | Default | Description
|
|
303
|
-
| ----------- | --------- | ------- |
|
|
304
|
-
| `active` | `boolean` | `false` | Show left border indicator
|
|
305
|
-
| `className` | `string` | - | CSS class for the row
|
|
299
|
+
| Prop | Type | Default | Description |
|
|
300
|
+
| ----------- | --------- | ------- | ------------------------------------------------------- |
|
|
301
|
+
| `active` | `boolean` | `false` | Show left border indicator on the first cell of the row |
|
|
302
|
+
| `className` | `string` | - | CSS class for the row |
|
|
306
303
|
|
|
307
304
|
### DataGridCell
|
|
308
305
|
|
|
309
|
-
| Prop
|
|
310
|
-
|
|
|
311
|
-
| `align`
|
|
312
|
-
| `colSpan`
|
|
313
|
-
| `
|
|
314
|
-
| `
|
|
306
|
+
| Prop | Type | Default | Description |
|
|
307
|
+
| ------------- | ------------------------------- | -------- | --------------------------------- |
|
|
308
|
+
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment |
|
|
309
|
+
| `colSpan` | `number` | `1` | Number of columns to span |
|
|
310
|
+
| `borderLeft` | `boolean` | `false` | Add vertical border on left side |
|
|
311
|
+
| `borderRight` | `boolean` | `false` | Add vertical border on right side |
|
|
312
|
+
| `className` | `string` | - | CSS class for the cell |
|
|
315
313
|
|
|
316
314
|
### DataGridCellSort
|
|
317
315
|
|
|
318
|
-
| Prop | Type | Default | Description
|
|
319
|
-
| ----------------- | ----------------------------------------------- | -------------- |
|
|
320
|
-
| `cellId` | `string` | **required** | Unique identifier for the column
|
|
321
|
-
| `children` | `string` | **required** | Label text for the column header
|
|
322
|
-
| `onSort` | `(cellId, direction?) => void` | - | Handler when sort button is clicked
|
|
323
|
-
| `sortDirection` | `'asc' \| 'desc' \| false` | **required** | Current sort direction
|
|
324
|
-
| `sortedCell` | `string` | **required** | ID of the currently sorted column
|
|
325
|
-
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment
|
|
326
|
-
| `mode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Theme mode for sort button
|
|
327
|
-
| `focusMode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Focus mode for sort button
|
|
328
|
-
| `slotLeft` | `ReactNode` | - | Content to display left of label
|
|
329
|
-
| `slotRight` | `ReactNode` | - | Content to display right of label
|
|
330
|
-
| `className` | `string` | - | CSS class for the cell
|
|
331
|
-
| `buttonClassName` | `string` | - | CSS class for the sort button
|
|
316
|
+
| Prop | Type | Default | Description |
|
|
317
|
+
| ----------------- | ----------------------------------------------- | -------------- | ----------------------------------- |
|
|
318
|
+
| `cellId` | `string` | **required** | Unique identifier for the column |
|
|
319
|
+
| `children` | `string` | **required** | Label text for the column header |
|
|
320
|
+
| `onSort` | `(cellId, direction?) => void` | - | Handler when sort button is clicked |
|
|
321
|
+
| `sortDirection` | `'asc' \| 'desc' \| false` | **required** | Current sort direction |
|
|
322
|
+
| `sortedCell` | `string` | **required** | ID of the currently sorted column |
|
|
323
|
+
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Horizontal alignment |
|
|
324
|
+
| `mode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Theme mode for sort button |
|
|
325
|
+
| `focusMode` | `'dark' \| 'light' \| 'system' \| 'alt-system'` | `'alt-system'` | Focus mode for sort button |
|
|
326
|
+
| `slotLeft` | `ReactNode` | - | Content to display left of label |
|
|
327
|
+
| `slotRight` | `ReactNode` | - | Content to display right of label |
|
|
328
|
+
| `className` | `string` | - | CSS class for the cell |
|
|
329
|
+
| `buttonClassName` | `string` | - | CSS class for the sort button |
|
|
332
330
|
|
|
333
331
|
### useInfiniteScroll
|
|
334
332
|
|
package/dist/DataGrid/index.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import type { DataGridCellProps } from "../DataGrid/DataGridTypes";
|
|
2
2
|
import { type CellWrapperType, type ThemeMode } from "../DataGridConstants";
|
|
3
|
-
export declare const getCellClasses: ({ cellWrapper, className, compact, align,
|
|
3
|
+
export declare const getCellClasses: ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight, }: {
|
|
4
4
|
cellWrapper?: CellWrapperType;
|
|
5
5
|
className?: string;
|
|
6
6
|
mode?: ThemeMode;
|
|
7
7
|
compact?: boolean;
|
|
8
8
|
align?: "left" | "center" | "right";
|
|
9
|
-
active?: boolean;
|
|
10
9
|
borderLeft?: boolean;
|
|
11
10
|
borderRight?: boolean;
|
|
12
11
|
}) => string;
|
|
13
|
-
export declare const DataGridCell: ({ className, children, align,
|
|
12
|
+
export declare const DataGridCell: ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.3.
|
|
2
|
+
@versini/ui-datagrid v0.3.7
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -21,7 +21,7 @@ import { CellWrapper } from "../DataGridConstants/index.js";
|
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
|
|
24
|
-
const getCellClasses = ({ cellWrapper, className, compact, align,
|
|
24
|
+
const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
|
|
25
25
|
const isHeader = cellWrapper === CellWrapper.HEADER;
|
|
26
26
|
const mainClasses = clsx(// Base padding.
|
|
27
27
|
{
|
|
@@ -29,25 +29,28 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
|
|
|
29
29
|
"px-4 py-3": !compact
|
|
30
30
|
}, // Text alignment.
|
|
31
31
|
{
|
|
32
|
-
"text-left": align === "left" || !align,
|
|
33
|
-
"text-center": align === "center",
|
|
34
|
-
"text-right": align === "right"
|
|
32
|
+
"text-left justify-start": align === "left" || !align,
|
|
33
|
+
"text-center justify-center": align === "center",
|
|
34
|
+
"text-right justify-end": align === "right"
|
|
35
35
|
}, // Header/footer specific styles.
|
|
36
36
|
{
|
|
37
37
|
"font-semibold": isHeader
|
|
38
|
-
},
|
|
38
|
+
}, /**
|
|
39
|
+
* Active row indicator (left border on first cell only).
|
|
40
|
+
* Uses CSS group-data-[active] to detect when parent row has data-active attribute.
|
|
41
|
+
* The `first:` variant ensures only the first cell in the row shows the indicator.
|
|
42
|
+
*/ "first:group-data-[active]:relative", "first:group-data-[active]:before:absolute first:group-data-[active]:before:left-0 first:group-data-[active]:before:top-0 first:group-data-[active]:before:bottom-0 first:group-data-[active]:before:w-1", "first:group-data-[active]:self-stretch first:group-data-[active]:flex first:group-data-[active]:items-center", // Active indicator color based on theme mode.
|
|
39
43
|
{
|
|
40
|
-
"
|
|
41
|
-
"before:bg-table-active-
|
|
42
|
-
"before:bg-table-active-light":
|
|
43
|
-
"before:bg-table-active-
|
|
44
|
-
"before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
|
|
44
|
+
"first:group-data-[active]:before:bg-table-active-dark": mode === "dark",
|
|
45
|
+
"first:group-data-[active]:before:bg-table-active-light": mode === "light",
|
|
46
|
+
"first:group-data-[active]:before:bg-table-active-dark dark:first:group-data-[active]:before:bg-table-active-light": mode === "system",
|
|
47
|
+
"first:group-data-[active]:before:bg-table-active-light dark:first:group-data-[active]:before:bg-table-active-dark": mode === "alt-system"
|
|
45
48
|
}, /**
|
|
46
|
-
* Vertical borders
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
+
* Vertical borders. self-stretch ensures border spans full row height in
|
|
50
|
+
* grid layout. When stretching, use flex + items-center to maintain
|
|
51
|
+
* vertical centering of content.
|
|
49
52
|
*/ {
|
|
50
|
-
"self-stretch flex items-center": borderLeft || borderRight
|
|
53
|
+
"self-stretch flex items-center": borderLeft || borderRight,
|
|
51
54
|
"border-l border-l-table-dark": borderLeft && mode === "dark",
|
|
52
55
|
"border-l border-l-table-light": borderLeft && mode === "light",
|
|
53
56
|
"border-l border-l-table-dark dark:border-l-table-light": borderLeft && mode === "system",
|
|
@@ -70,7 +73,7 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
|
|
|
70
73
|
};
|
|
71
74
|
/* =============================================================================
|
|
72
75
|
* DataGridCell
|
|
73
|
-
* ========================================================================== */ const DataGridCell = ({ className, children, align,
|
|
76
|
+
* ========================================================================== */ const DataGridCell = ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest })=>{
|
|
74
77
|
return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
|
|
75
78
|
children: ({ mode, compact, cellWrapper })=>{
|
|
76
79
|
const mainClasses = getCellClasses({
|
|
@@ -79,7 +82,6 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
|
|
|
79
82
|
mode,
|
|
80
83
|
compact,
|
|
81
84
|
align,
|
|
82
|
-
active,
|
|
83
85
|
borderLeft,
|
|
84
86
|
borderRight
|
|
85
87
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { DataGridRowProps } from "../DataGrid/DataGridTypes";
|
|
2
|
-
export declare const DataGridRow: ({ className, children, style: userStyle, ...rest }: DataGridRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const DataGridRow: ({ className, children, active, style: userStyle, ...rest }: DataGridRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-datagrid v0.3.
|
|
2
|
+
@versini/ui-datagrid v0.3.7
|
|
3
3
|
© 2026 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -27,7 +27,8 @@ import { CellWrapper } from "../DataGridConstants/index.js";
|
|
|
27
27
|
|
|
28
28
|
const getRowClasses = ({ mode, className, cellWrapper })=>{
|
|
29
29
|
// Always use CSS Grid for proper column alignment, with vertical centering.
|
|
30
|
-
|
|
30
|
+
// `group` enables child cells to use group-data-[active] for active row indicator.
|
|
31
|
+
const layoutClass = "group grid items-center";
|
|
31
32
|
if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
|
|
32
33
|
/**
|
|
33
34
|
* When in a sticky header/footer, don't apply background to row since the
|
|
@@ -51,7 +52,7 @@ const getRowClasses = ({ mode, className, cellWrapper })=>{
|
|
|
51
52
|
};
|
|
52
53
|
/* =============================================================================
|
|
53
54
|
* DataGridRow
|
|
54
|
-
* ========================================================================== */ const DataGridRow = ({ className, children, style: userStyle, ...rest })=>{
|
|
55
|
+
* ========================================================================== */ const DataGridRow = ({ className, children, active, style: userStyle, ...rest })=>{
|
|
55
56
|
// Count the number of direct children to determine column count.
|
|
56
57
|
const columnCount = react.Children.count(children);
|
|
57
58
|
return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
|
|
@@ -117,6 +118,7 @@ const getRowClasses = ({ mode, className, cellWrapper })=>{
|
|
|
117
118
|
...rowStyle,
|
|
118
119
|
...userStyle
|
|
119
120
|
},
|
|
121
|
+
"data-active": active || undefined,
|
|
120
122
|
...rest,
|
|
121
123
|
children: children
|
|
122
124
|
});
|
package/dist/common/utilities.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-datagrid",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"sideEffects": [
|
|
95
95
|
"**/*.css"
|
|
96
96
|
],
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "3b25e27cfdc5acb579f2a6c668265260662b5596"
|
|
98
98
|
}
|