munza-x-data-grid 3.0.0-beta.6 → 3.0.0-beta.8
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 +272 -61
- package/dist/style.css +1 -1
- package/package.json +5 -7
package/README.md
CHANGED
|
@@ -1,77 +1,288 @@
|
|
|
1
|
-
#
|
|
1
|
+
# munza-x-data-grid
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A flexible, feature-rich React data grid component built on top of [@tanstack/react-table](https://tanstack.com/table), with Tailwind CSS v4 styling and shadcn/ui primitives.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
---
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
|
7
|
+
## Installation
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
```bash
|
|
10
|
+
npm install munza-x-data-grid
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
+
Import the stylesheet in your app entry point:
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
```js
|
|
16
|
+
import 'munza-x-data-grid/style.css';
|
|
17
|
+
```
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
### Peer Dependencies
|
|
17
20
|
|
|
18
|
-
|
|
21
|
+
```bash
|
|
22
|
+
npm install react react-dom
|
|
23
|
+
```
|
|
19
24
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
// Other configs...
|
|
36
|
-
],
|
|
37
|
-
languageOptions: {
|
|
38
|
-
parserOptions: {
|
|
39
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
40
|
-
tsconfigRootDir: import.meta.dirname,
|
|
41
|
-
},
|
|
42
|
-
// other options...
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
])
|
|
25
|
+
Requires **React 18 or 19**.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Basic Usage
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { Grid, useGridState, type ColumnDef } from 'munza-x-data-grid';
|
|
33
|
+
import 'munza-x-data-grid/style.css';
|
|
34
|
+
|
|
35
|
+
type Person = {
|
|
36
|
+
firstName: string;
|
|
37
|
+
lastName: string;
|
|
38
|
+
age: number;
|
|
39
|
+
};
|
|
46
40
|
|
|
41
|
+
const columns: ColumnDef<Person>[] = [
|
|
42
|
+
{ accessorKey: 'firstName', header: 'First Name' },
|
|
43
|
+
{ accessorKey: 'lastName', header: 'Last Name' },
|
|
44
|
+
{ accessorKey: 'age', header: 'Age' },
|
|
45
|
+
];
|
|
46
|
+
|
|
47
|
+
const data: Person[] = [{ firstName: 'Alice', lastName: 'Smith', age: 30 }];
|
|
48
|
+
|
|
49
|
+
export default function App() {
|
|
50
|
+
const { state, handlers } = useGridState();
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<Grid
|
|
54
|
+
columns={columns}
|
|
55
|
+
payload={{ data, total: data.length }}
|
|
56
|
+
state={state}
|
|
57
|
+
{...handlers}
|
|
58
|
+
/>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
47
61
|
```
|
|
48
62
|
|
|
49
|
-
|
|
63
|
+
---
|
|
50
64
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
## API Reference
|
|
66
|
+
|
|
67
|
+
### `<Grid />`
|
|
68
|
+
|
|
69
|
+
The top-level component that renders the full data grid.
|
|
70
|
+
|
|
71
|
+
| Prop | Type | Required | Description |
|
|
72
|
+
| ----------------------- | ------------------------------------------ | -------- | -------------------------------------------------------- |
|
|
73
|
+
| `columns` | `ColumnDef<T>[]` | ✅ | Column definitions (TanStack Table format) |
|
|
74
|
+
| `payload` | `{ data: T[], total: number }` | ✅ | Row data and total count for pagination |
|
|
75
|
+
| `state` | `Partial<TableState>` | ✅ | Controlled table state (from `useGridState`) |
|
|
76
|
+
| `onColumnFiltersChange` | `OnChangeFn<ColumnFiltersState>` | — | Callback for column filter changes |
|
|
77
|
+
| `onPaginationChange` | `OnChangeFn<PaginationState>` | — | Callback for pagination changes |
|
|
78
|
+
| `onSortingChange` | `OnChangeFn<SortingState>` | — | Callback for sort changes |
|
|
79
|
+
| `setGlobalFilter` | `Dispatch<SetStateAction<string>>` | — | Callback to update the global search filter |
|
|
80
|
+
| `isLoading` | `boolean` | — | Displays a loading state |
|
|
81
|
+
| `isError` | `boolean` | — | Displays an error state |
|
|
82
|
+
| `manualPagination` | `boolean` | — | Set `true` for server-side pagination (default: `false`) |
|
|
83
|
+
| `getRowCanExpand` | `(row: Row<T>) => boolean` | — | Controls which rows are expandable |
|
|
84
|
+
| `renderSubComponent` | `(props: { row: Row<T> }) => ReactElement` | — | Renders expanded row content |
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
### `useGridState()`
|
|
89
|
+
|
|
90
|
+
Hook that provides controlled state and event handlers to pass into `<Grid />`.
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
const { state, handlers } = useGridState();
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
**Returns:**
|
|
97
|
+
|
|
98
|
+
| Key | Description |
|
|
99
|
+
| ---------- | ----------------------------------------------------------------------------------------------------- |
|
|
100
|
+
| `state` | Partial `TableState` object (sorting, pagination, filters, etc.) |
|
|
101
|
+
| `handlers` | Object containing `onSortingChange`, `onPaginationChange`, `onColumnFiltersChange`, `setGlobalFilter` |
|
|
102
|
+
|
|
103
|
+
Spread `handlers` directly onto `<Grid />`:
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
<Grid state={state} {...handlers} columns={columns} payload={payload} />
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Tailwind v4 Setup
|
|
110
|
+
|
|
111
|
+
If you're using Tailwind v4, add this to your `app.css` so Tailwind scans the grid's classes:
|
|
112
|
+
|
|
113
|
+
```css
|
|
114
|
+
@source "../node_modules/munza-x-data-grid/**/*.{js,ts,jsx,tsx}";
|
|
115
|
+
@theme inline {
|
|
116
|
+
--color-background: var(--background);
|
|
117
|
+
--color-foreground: var(--foreground);
|
|
118
|
+
--color-border: var(--border);
|
|
119
|
+
--color-muted: var(--muted);
|
|
120
|
+
--color-accent: var(--accent);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:root {
|
|
124
|
+
--background: oklch(1 0 0);
|
|
125
|
+
--foreground: oklch(0.145 0 0);
|
|
126
|
+
--border: oklch(0.922 0 0);
|
|
127
|
+
--muted: oklch(0.97 0 0);
|
|
128
|
+
--accent: oklch(0.97 0 0);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.dark {
|
|
132
|
+
--background: oklch(0.145 0 0);
|
|
133
|
+
--foreground: oklch(0.985 0 0);
|
|
134
|
+
--border: oklch(1 0 0 / 10%);
|
|
135
|
+
--muted: oklch(0.269 0 0);
|
|
136
|
+
--accent: oklch(0.269 0 0);
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## Column Definitions
|
|
143
|
+
|
|
144
|
+
Columns follow the standard [TanStack Table `ColumnDef`](https://tanstack.com/table/latest/docs/api/core/column-def) format with an additional `meta` field for filter configuration.
|
|
145
|
+
|
|
146
|
+
### Filter Variants
|
|
147
|
+
|
|
148
|
+
Set `meta.filterVariant` on a column to control its filter UI:
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
{
|
|
152
|
+
accessorKey: 'status',
|
|
153
|
+
header: 'Status',
|
|
154
|
+
meta: {
|
|
155
|
+
filterVariant: 'select', // dropdown filter
|
|
74
156
|
},
|
|
75
|
-
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
{
|
|
160
|
+
accessorKey: 'age',
|
|
161
|
+
header: 'Age',
|
|
162
|
+
meta: {
|
|
163
|
+
filterVariant: 'text', // text input filter
|
|
164
|
+
},
|
|
165
|
+
}
|
|
166
|
+
```
|
|
76
167
|
|
|
168
|
+
### Row Number Column
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
{
|
|
172
|
+
accessorFn: (_row, index) => index + 1,
|
|
173
|
+
cell: ({ row }) => row.index + 1,
|
|
174
|
+
id: 'rowNumber',
|
|
175
|
+
header: '',
|
|
176
|
+
size: 54,
|
|
177
|
+
maxSize: 54,
|
|
178
|
+
enableColumnFilter: false,
|
|
179
|
+
}
|
|
77
180
|
```
|
|
181
|
+
|
|
182
|
+
### Checkbox Selection Column
|
|
183
|
+
|
|
184
|
+
```tsx
|
|
185
|
+
{
|
|
186
|
+
id: 'select',
|
|
187
|
+
header: ({ table }) => (
|
|
188
|
+
<Checkbox
|
|
189
|
+
checked={
|
|
190
|
+
table.getIsAllPageRowsSelected() ||
|
|
191
|
+
(table.getIsSomePageRowsSelected() && 'indeterminate')
|
|
192
|
+
}
|
|
193
|
+
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
|
194
|
+
aria-label="Select all"
|
|
195
|
+
/>
|
|
196
|
+
),
|
|
197
|
+
cell: ({ row }) => (
|
|
198
|
+
<Checkbox
|
|
199
|
+
checked={row.getIsSelected()}
|
|
200
|
+
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
|
201
|
+
aria-label="Select row"
|
|
202
|
+
/>
|
|
203
|
+
),
|
|
204
|
+
size: 40,
|
|
205
|
+
maxSize: 40,
|
|
206
|
+
enableColumnFilter: false,
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## Server-Side Pagination
|
|
213
|
+
|
|
214
|
+
Set `manualPagination` to `true` and pass `payload.total` as the full server-side count.
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
<Grid
|
|
218
|
+
columns={columns}
|
|
219
|
+
payload={{ data: serverData, total: serverTotal }}
|
|
220
|
+
state={state}
|
|
221
|
+
{...handlers}
|
|
222
|
+
manualPagination={true}
|
|
223
|
+
/>
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
The built-in pagination UI supports the following page sizes:
|
|
227
|
+
|
|
228
|
+
```
|
|
229
|
+
20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
234
|
+
## Expandable Rows
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
<Grid
|
|
238
|
+
columns={columns}
|
|
239
|
+
payload={payload}
|
|
240
|
+
state={state}
|
|
241
|
+
{...handlers}
|
|
242
|
+
getRowCanExpand={(row) => !!row.original.subRows?.length}
|
|
243
|
+
renderSubComponent={({ row }) => (
|
|
244
|
+
<div className="p-4">
|
|
245
|
+
<pre>{JSON.stringify(row.original, null, 2)}</pre>
|
|
246
|
+
</div>
|
|
247
|
+
)}
|
|
248
|
+
/>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
---
|
|
252
|
+
|
|
253
|
+
## Column Pinning
|
|
254
|
+
|
|
255
|
+
Column pinning is managed internally by the grid. No additional configuration is required — use the built-in toolbar UI to pin columns left or right.
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
## Default Column Sizing
|
|
260
|
+
|
|
261
|
+
| Property | Default |
|
|
262
|
+
| --------- | ------- |
|
|
263
|
+
| `size` | `180px` |
|
|
264
|
+
| `minSize` | `180px` |
|
|
265
|
+
| `maxSize` | `180px` |
|
|
266
|
+
|
|
267
|
+
Override per-column:
|
|
268
|
+
|
|
269
|
+
```tsx
|
|
270
|
+
{
|
|
271
|
+
accessorKey: 'id',
|
|
272
|
+
size: 60,
|
|
273
|
+
minSize: 60,
|
|
274
|
+
maxSize: 60,
|
|
275
|
+
}
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
## TypeScript
|
|
281
|
+
|
|
282
|
+
All props and hooks are fully typed. Import types directly from the package:
|
|
283
|
+
|
|
284
|
+
```ts
|
|
285
|
+
import type { ColumnDef } from 'munza-x-data-grid';
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
TanStack Table types (`Row`, `TableState`, `PaginationState`, etc.) are re-exported and available from `@tanstack/react-table`.
|
package/dist/style.css
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-900:oklch(39.6% .141 25.723);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.bg-red-900{background-color:var(--color-red-900)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-900:oklch(39.6% .141 25.723);--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.grid{display:grid}.inline{display:inline}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.bg-red-900{background-color:var(--color-red-900)}.p-4{padding:calc(var(--spacing) * 4)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
|
|
3
3
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "munza-x-data-grid",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.8",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
8
8
|
],
|
|
9
|
-
"main": "./dist/munza-x-data-grid.cjs.js",
|
|
10
9
|
"module": "./dist/munza-x-data-grid.es.js",
|
|
11
10
|
"types": "./dist/index.d.ts",
|
|
12
11
|
"exports": {
|
|
13
12
|
".": {
|
|
14
13
|
"types": "./dist/index.d.ts",
|
|
15
|
-
"import": "./dist/munza-x-data-grid.es.js"
|
|
16
|
-
"require": "./dist/munza-x-data-grid.cjs.js"
|
|
14
|
+
"import": "./dist/munza-x-data-grid.es.js"
|
|
17
15
|
},
|
|
18
16
|
"./style.css": "./dist/style.css"
|
|
19
17
|
},
|
|
@@ -23,9 +21,9 @@
|
|
|
23
21
|
"lint": "eslint .",
|
|
24
22
|
"preview": "vite preview"
|
|
25
23
|
},
|
|
26
|
-
"
|
|
27
|
-
"react": "^19
|
|
28
|
-
"react-dom": "^19
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"react": "^18 || ^19",
|
|
26
|
+
"react-dom": "^18 || ^19"
|
|
29
27
|
},
|
|
30
28
|
"devDependencies": {
|
|
31
29
|
"@babel/core": "^7.29.7",
|