@versini/ui-datagrid 0.2.1 → 0.2.2
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 +101 -11
- 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.js +1 -1
- 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.js +1 -1
- 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
|
@@ -4,6 +4,7 @@ A data grid component library for React built with div-based ARIA grid layout fo
|
|
|
4
4
|
|
|
5
5
|
- **Accessible**: Uses ARIA grid roles for screen reader support
|
|
6
6
|
- **Flexible Layout**: Div-based structure allows for complex styling
|
|
7
|
+
- **CSS Grid Columns**: Define column widths with CSS Grid track sizes
|
|
7
8
|
- **Infinite Scrolling**: Progressive loading with IntersectionObserver
|
|
8
9
|
- **Animated Height**: Smooth height transitions when content changes
|
|
9
10
|
- **Sorting**: Built-in sorting utilities and sortable column headers
|
|
@@ -56,7 +57,9 @@ import {
|
|
|
56
57
|
getNextSortConfig,
|
|
57
58
|
getOppositeSortDirection,
|
|
58
59
|
toggleSortDirection,
|
|
59
|
-
SortDirections
|
|
60
|
+
SortDirections,
|
|
61
|
+
type SortConfig,
|
|
62
|
+
type SortComparator
|
|
60
63
|
} from "@versini/ui-datagrid/sorting";
|
|
61
64
|
|
|
62
65
|
// Constants
|
|
@@ -99,6 +102,43 @@ function MyTable({ data }) {
|
|
|
99
102
|
}
|
|
100
103
|
```
|
|
101
104
|
|
|
105
|
+
## CSS Grid Columns
|
|
106
|
+
|
|
107
|
+
Use the `columns` prop to define column widths with CSS Grid track sizes:
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
<DataGrid
|
|
111
|
+
columns={["200px", "1fr", "auto"]}
|
|
112
|
+
maxHeight="400px"
|
|
113
|
+
stickyHeader
|
|
114
|
+
>
|
|
115
|
+
<DataGridHeader caption="User List">
|
|
116
|
+
<DataGridRow>
|
|
117
|
+
<DataGridCell>Name</DataGridCell>
|
|
118
|
+
<DataGridCell>Email</DataGridCell>
|
|
119
|
+
<DataGridCell>Actions</DataGridCell>
|
|
120
|
+
</DataGridRow>
|
|
121
|
+
</DataGridHeader>
|
|
122
|
+
<DataGridBody>
|
|
123
|
+
{data.map((item) => (
|
|
124
|
+
<DataGridRow key={item.id}>
|
|
125
|
+
<DataGridCell>{item.name}</DataGridCell>
|
|
126
|
+
<DataGridCell>{item.email}</DataGridCell>
|
|
127
|
+
<DataGridCell>Edit</DataGridCell>
|
|
128
|
+
</DataGridRow>
|
|
129
|
+
))}
|
|
130
|
+
</DataGridBody>
|
|
131
|
+
</DataGrid>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Supported column values include:
|
|
135
|
+
- Fixed sizes: `"200px"`, `"10rem"`, `"5em"`
|
|
136
|
+
- Flexible sizes: `"1fr"`, `"2fr"`
|
|
137
|
+
- Auto sizing: `"auto"`, `"min-content"`, `"max-content"`
|
|
138
|
+
- Functions: `"minmax(100px, 1fr)"`, `"fit-content(200px)"`
|
|
139
|
+
- Repeat: `"repeat(3, 1fr)"`, `"repeat(auto-fill, minmax(100px, 1fr))"`
|
|
140
|
+
- CSS variables and calc: `"var(--col-width)"`, `"calc(100% - 200px)"`
|
|
141
|
+
|
|
102
142
|
## Infinite Scroll
|
|
103
143
|
|
|
104
144
|
For datasets with hundreds to thousands of rows, use progressive loading:
|
|
@@ -229,16 +269,66 @@ function MySortableTable({ data }) {
|
|
|
229
269
|
|
|
230
270
|
### DataGrid
|
|
231
271
|
|
|
232
|
-
| Prop
|
|
233
|
-
|
|
|
234
|
-
| `mode`
|
|
235
|
-
| `compact`
|
|
236
|
-
| `stickyHeader`
|
|
237
|
-
| `stickyFooter`
|
|
238
|
-
| `blurEffect`
|
|
239
|
-
| `maxHeight`
|
|
240
|
-
| `disabled`
|
|
241
|
-
| `
|
|
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 |
|
|
285
|
+
|
|
286
|
+
### DataGridHeader
|
|
287
|
+
|
|
288
|
+
| Prop | Type | Default | Description |
|
|
289
|
+
| ------------------ | ----------- | ------- | --------------------------------- |
|
|
290
|
+
| `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 |
|
|
293
|
+
|
|
294
|
+
### DataGridBody / DataGridFooter
|
|
295
|
+
|
|
296
|
+
| Prop | Type | Default | Description |
|
|
297
|
+
| ----------- | -------- | ------- | ------------------------ |
|
|
298
|
+
| `className` | `string` | - | CSS class for the element |
|
|
299
|
+
|
|
300
|
+
### DataGridRow
|
|
301
|
+
|
|
302
|
+
| Prop | Type | Default | Description |
|
|
303
|
+
| ----------- | --------- | ------- | ------------------------------------ |
|
|
304
|
+
| `active` | `boolean` | `false` | Show left border indicator |
|
|
305
|
+
| `className` | `string` | - | CSS class for the row |
|
|
306
|
+
|
|
307
|
+
### DataGridCell
|
|
308
|
+
|
|
309
|
+
| Prop | Type | Default | Description |
|
|
310
|
+
| ----------- | ------------------------------ | ------- | ----------------------------- |
|
|
311
|
+
| `align` | `'left' \| 'center' \| 'right'`| `'left'`| Horizontal alignment |
|
|
312
|
+
| `colSpan` | `number` | `1` | Number of columns to span |
|
|
313
|
+
| `active` | `boolean` | `false` | Show left border indicator |
|
|
314
|
+
| `className` | `string` | - | CSS class for the cell |
|
|
315
|
+
|
|
316
|
+
### DataGridCellSort
|
|
317
|
+
|
|
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 |
|
|
242
332
|
|
|
243
333
|
### useInfiniteScroll
|
|
244
334
|
|
package/dist/DataGrid/index.js
CHANGED
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.2.
|
|
3
|
+
"version": "0.2.2",
|
|
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": "f23e7cccc6798893b412edd01aec4d767ec94c9f"
|
|
98
98
|
}
|