munza-x-data-grid 3.0.0-beta.5 → 3.0.0-beta.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 CHANGED
@@ -1,77 +1,288 @@
1
- # React + TypeScript + Vite
1
+ # munza-x-data-grid
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
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
- Currently, two official plugins are available:
5
+ ---
6
6
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
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
- ## React Compiler
9
+ ```bash
10
+ npm install munza-x-data-grid
11
+ ```
11
12
 
12
- The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
13
+ Import the stylesheet in your app entry point:
13
14
 
14
- Note: This will impact Vite dev & build performances.
15
+ ```js
16
+ import 'munza-x-data-grid/style.css';
17
+ ```
15
18
 
16
- ## Expanding the ESLint configuration
19
+ ### Peer Dependencies
17
20
 
18
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
21
+ ```bash
22
+ npm install react react-dom
23
+ ```
19
24
 
20
- ```js
21
- export default defineConfig([
22
- globalIgnores(['dist']),
23
- {
24
- files: ['**/*.{ts,tsx}'],
25
- extends: [
26
- // Other configs...
27
-
28
- // Remove tseslint.configs.recommended and replace with this
29
- tseslint.configs.recommendedTypeChecked,
30
- // Alternatively, use this for stricter rules
31
- tseslint.configs.strictTypeChecked,
32
- // Optionally, add this for stylistic rules
33
- tseslint.configs.stylisticTypeChecked,
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
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
63
+ ---
50
64
 
51
- ```js
52
- // eslint.config.js
53
- import reactX from 'eslint-plugin-react-x'
54
- import reactDom from 'eslint-plugin-react-dom'
55
-
56
- export default defineConfig([
57
- globalIgnores(['dist']),
58
- {
59
- files: ['**/*.{ts,tsx}'],
60
- extends: [
61
- // Other configs...
62
- // Enable lint rules for React
63
- reactX.configs['recommended-typescript'],
64
- // Enable lint rules for React DOM
65
- reactDom.configs.recommended,
66
- ],
67
- languageOptions: {
68
- parserOptions: {
69
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
70
- tsconfigRootDir: import.meta.dirname,
71
- },
72
- // other options...
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`.
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
package/dist/icons.svg ADDED
@@ -0,0 +1,24 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg">
2
+ <symbol id="bluesky-icon" viewBox="0 0 16 17">
3
+ <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
4
+ <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
5
+ </symbol>
6
+ <symbol id="discord-icon" viewBox="0 0 20 19">
7
+ <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
8
+ </symbol>
9
+ <symbol id="documentation-icon" viewBox="0 0 21 20">
10
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
11
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
12
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
13
+ </symbol>
14
+ <symbol id="github-icon" viewBox="0 0 19 19">
15
+ <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
16
+ </symbol>
17
+ <symbol id="social-icon" viewBox="0 0 20 20">
18
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
19
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
20
+ </symbol>
21
+ <symbol id="x-icon" viewBox="0 0 19 19">
22
+ <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
23
+ </symbol>
24
+ </svg>
@@ -0,0 +1,7 @@
1
+ import { ReactNode } from 'react';
2
+ interface ButtonProps {
3
+ className?: string;
4
+ children?: ReactNode;
5
+ }
6
+ declare const Button: ({ className, children }: ButtonProps) => import("react").JSX.Element;
7
+ export default Button;
package/dist/main.d.ts CHANGED
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,5 @@
1
+ var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react/jsx-runtime");var n=e((e=>{var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){return t.H.useMemoCache(e)}})),r=e((e=>{process.env.NODE_ENV!==`production`&&(function(){var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){var n=t.H;return n===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
2
+ 1. You might have mismatching versions of React and the renderer (such as React DOM)
3
+ 2. You might be breaking the Rules of Hooks
4
+ 3. You might have more than one copy of React in the same app
5
+ See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),n.useMemoCache(e)}})()})),i=e(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=n():t.exports=r()}))(),a=e=>{let n=(0,i.c)(3),{className:r,children:a}=e,o;return n[0]!==a||n[1]!==r?(o=(0,t.jsx)(`button`,{className:r,children:a}),n[0]=a,n[1]=r,n[2]=o):o=n[2],o};module.exports=a;
@@ -0,0 +1,29 @@
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ //#region \0rolldown/runtime.js
3
+ var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
4
+ if (typeof require < "u") return require.apply(this, arguments);
5
+ throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
6
+ }), r = /* @__PURE__ */ t(((e) => {
7
+ var t = n("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
8
+ e.c = function(e) {
9
+ return t.H.useMemoCache(e);
10
+ };
11
+ })), i = /* @__PURE__ */ t(((e) => {
12
+ process.env.NODE_ENV !== "production" && (function() {
13
+ var t = n("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
14
+ e.c = function(e) {
15
+ var n = t.H;
16
+ return n === null && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem."), n.useMemoCache(e);
17
+ };
18
+ })();
19
+ })), a = (/* @__PURE__ */ t(((e, t) => {
20
+ process.env.NODE_ENV === "production" ? t.exports = r() : t.exports = i();
21
+ })))(), o = (t) => {
22
+ let n = (0, a.c)(3), { className: r, children: i } = t, o;
23
+ return n[0] !== i || n[1] !== r ? (o = /* @__PURE__ */ e("button", {
24
+ className: r,
25
+ children: i
26
+ }), n[0] = i, n[1] = r, n[2] = o) : o = n[2], o;
27
+ };
28
+ //#endregion
29
+ export { o as default };
package/dist/style.css ADDED
@@ -0,0 +1,3 @@
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);--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
+ /*$vite$:1*/
package/package.json CHANGED
@@ -1,89 +1,51 @@
1
- {
2
- "name": "munza-x-data-grid",
3
- "private": false,
4
- "version": "3.0.0-beta.5",
5
- "type": "module",
6
- "sideEffects": [
7
- "**/*.css"
8
- ],
9
- "files": [
10
- "dist",
11
- "README.md"
12
- ],
13
- "module": "./dist/data-grid.js",
14
- "main": "./dist/data-grid.cjs",
15
- "types": "./dist/package/index.d.ts",
16
- "exports": {
17
- ".": {
18
- "import": "./dist/data-grid.js",
19
- "require": "./dist/data-grid.cjs",
20
- "types": "./dist/package/index.d.ts"
21
- },
22
- "./style.css": "./dist/index.css"
23
- },
24
- "scripts": {
25
- "dev": "vite",
26
- "build": "tsc -b && vite build",
27
- "lint": "eslint .",
28
- "preview": "vite preview"
29
- },
30
- "repository": {
31
- "type": "git",
32
- "url": "git+https://github.com/jsdev-robin/munza-x-data-grid.git"
33
- },
34
- "bugs": {
35
- "url": "https://github.com/jsdev-robin/munza-x-data-grid/issues"
36
- },
37
- "peerDependencies": {
38
- "react": "^18 || ^19",
39
- "react-dom": "^18 || ^19"
40
- },
41
- "dependencies": {
42
- "@base-ui/react": "^1.6.0",
43
- "@fontsource-variable/geist": "^5.2.9",
44
- "@shadcn/react": "^0.2.1",
45
- "@tanstack/react-table": "^8.21.3",
46
- "class-variance-authority": "^0.7.1",
47
- "clsx": "^2.1.1",
48
- "cmdk": "^1.1.1",
49
- "date-fns": "^4.4.0",
50
- "embla-carousel-react": "^8.6.0",
51
- "input-otp": "^1.4.2",
52
- "lucide-react": "^1.23.0",
53
- "next-themes": "^0.4.6",
54
- "radix-ui": "^1.6.2",
55
- "react-day-picker": "^10.0.1",
56
- "react-resizable-panels": "^4.12.1",
57
- "recharts": "3.8.0",
58
- "shadcn": "^4.13.0",
59
- "sonner": "^2.0.7",
60
- "tailwind-merge": "^3.6.0",
61
- "tw-animate-css": "^1.4.0",
62
- "vaul": "^1.1.2",
63
- "zustand": "^5.0.14"
64
- },
65
- "devDependencies": {
66
- "@babel/core": "^7.29.7",
67
- "@eslint/js": "^10.0.1",
68
- "@rolldown/plugin-babel": "^0.2.3",
69
- "@tailwindcss/vite": "^4.3.2",
70
- "@types/babel__core": "^7.20.5",
71
- "@types/node": "^24.13.2",
72
- "@types/react": "^19.2.17",
73
- "@types/react-dom": "^19.2.3",
74
- "@vitejs/plugin-react": "^6.0.3",
75
- "babel-plugin-react-compiler": "^1.0.0",
76
- "eslint": "^10.6.0",
77
- "eslint-plugin-react-hooks": "^7.1.1",
78
- "eslint-plugin-react-refresh": "^0.5.3",
79
- "globals": "^17.7.0",
80
- "react": "^19.2.7",
81
- "react-dom": "^19.2.7",
82
- "rollup-plugin-copy": "^3.5.0",
83
- "tailwindcss": "^4.3.2",
84
- "typescript": "~6.0.2",
85
- "typescript-eslint": "^8.62.0",
86
- "vite": "^8.1.1",
87
- "vite-plugin-dts": "^5.0.3"
88
- }
89
- }
1
+ {
2
+ "name": "munza-x-data-grid",
3
+ "private": false,
4
+ "version": "3.0.0-beta.7",
5
+ "type": "module",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "main": "./dist/munza-x-data-grid.cjs.js",
10
+ "module": "./dist/munza-x-data-grid.es.js",
11
+ "types": "./dist/index.d.ts",
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/munza-x-data-grid.es.js",
16
+ "require": "./dist/munza-x-data-grid.cjs.js"
17
+ },
18
+ "./style.css": "./dist/style.css"
19
+ },
20
+ "scripts": {
21
+ "dev": "vite",
22
+ "build": "tsc -b && vite build",
23
+ "lint": "eslint .",
24
+ "preview": "vite preview"
25
+ },
26
+ "peerDependencies": {
27
+ "react": "^18 || ^19",
28
+ "react-dom": "^18 || ^19"
29
+ },
30
+ "devDependencies": {
31
+ "@babel/core": "^7.29.7",
32
+ "@eslint/js": "^10.0.1",
33
+ "@rolldown/plugin-babel": "^0.2.3",
34
+ "@tailwindcss/vite": "^4.3.2",
35
+ "@types/babel__core": "^7.20.5",
36
+ "@types/node": "^24.13.2",
37
+ "@types/react": "^19.2.17",
38
+ "@types/react-dom": "^19.2.3",
39
+ "@vitejs/plugin-react": "^6.0.3",
40
+ "babel-plugin-react-compiler": "^1.0.0",
41
+ "eslint": "^10.6.0",
42
+ "eslint-plugin-react-hooks": "^7.1.1",
43
+ "eslint-plugin-react-refresh": "^0.5.3",
44
+ "globals": "^17.7.0",
45
+ "tailwindcss": "^4.3.2",
46
+ "typescript": "~6.0.2",
47
+ "typescript-eslint": "^8.62.0",
48
+ "vite": "^8.1.1",
49
+ "vite-plugin-dts": "^5.0.3"
50
+ }
51
+ }
package/dist/README.md DELETED
@@ -1,77 +0,0 @@
1
- # React + TypeScript + Vite
2
-
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
-
5
- Currently, two official plugins are available:
6
-
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
9
-
10
- ## React Compiler
11
-
12
- The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
13
-
14
- Note: This will impact Vite dev & build performances.
15
-
16
- ## Expanding the ESLint configuration
17
-
18
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
19
-
20
- ```js
21
- export default defineConfig([
22
- globalIgnores(['dist']),
23
- {
24
- files: ['**/*.{ts,tsx}'],
25
- extends: [
26
- // Other configs...
27
-
28
- // Remove tseslint.configs.recommended and replace with this
29
- tseslint.configs.recommendedTypeChecked,
30
- // Alternatively, use this for stricter rules
31
- tseslint.configs.strictTypeChecked,
32
- // Optionally, add this for stylistic rules
33
- tseslint.configs.stylisticTypeChecked,
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
- ])
46
-
47
- ```
48
-
49
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
50
-
51
- ```js
52
- // eslint.config.js
53
- import reactX from 'eslint-plugin-react-x'
54
- import reactDom from 'eslint-plugin-react-dom'
55
-
56
- export default defineConfig([
57
- globalIgnores(['dist']),
58
- {
59
- files: ['**/*.{ts,tsx}'],
60
- extends: [
61
- // Other configs...
62
- // Enable lint rules for React
63
- reactX.configs['recommended-typescript'],
64
- // Enable lint rules for React DOM
65
- reactDom.configs.recommended,
66
- ],
67
- languageOptions: {
68
- parserOptions: {
69
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
70
- tsconfigRootDir: import.meta.dirname,
71
- },
72
- // other options...
73
- },
74
- },
75
- ])
76
-
77
- ```
@@ -1,9 +0,0 @@
1
- import { VariantProps } from 'class-variance-authority';
2
- import * as React from 'react';
3
- declare const badgeVariants: (props?: ({
4
- variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
5
- } & import('class-variance-authority/types').ClassProp) | undefined) => string;
6
- declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
7
- asChild?: boolean;
8
- }): React.JSX.Element;
9
- export { Badge, badgeVariants };
@@ -1,10 +0,0 @@
1
- import { VariantProps } from 'class-variance-authority';
2
- import * as React from 'react';
3
- declare const buttonVariants: (props?: ({
4
- variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
5
- size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
6
- } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
- declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
8
- asChild?: boolean;
9
- }): React.JSX.Element;
10
- export { Button, buttonVariants };
@@ -1,4 +0,0 @@
1
- import { Checkbox as CheckboxPrimitive } from 'radix-ui';
2
- import * as React from "react";
3
- declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
4
- export { Checkbox };
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
3
- export { Input };
@@ -1,4 +0,0 @@
1
- import { Label as LabelPrimitive } from 'radix-ui';
2
- import * as React from "react";
3
- declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
4
- export { Label };
@@ -1,10 +0,0 @@
1
- import { Popover as PopoverPrimitive } from 'radix-ui';
2
- import * as React from "react";
3
- declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
4
- declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
5
- declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
6
- declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
7
- declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
8
- declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
9
- declare function PopoverDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
10
- export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };
@@ -1,2 +0,0 @@
1
- declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
2
- export { Skeleton };
@@ -1,2 +0,0 @@
1
- declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react").JSX.Element;
2
- export { Spinner };
@@ -1,10 +0,0 @@
1
- import * as React from "react";
2
- declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
3
- declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
4
- declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
5
- declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
6
- declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
7
- declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
8
- declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
9
- declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
10
- export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
@@ -1,13 +0,0 @@
1
- export interface Vehicle {
2
- driver: string;
3
- vehicle: string;
4
- vin: string;
5
- type: 'Car' | 'Truck' | 'Van' | 'Trailer';
6
- status: 'Active' | 'In Shop' | 'Out of Service' | 'Maintenance';
7
- currentMeter: string;
8
- fuel: string;
9
- drivingTime: string;
10
- license: string;
11
- odometer: number;
12
- }
13
- export declare const dummyVehicles: Vehicle[];
@@ -1,5 +0,0 @@
1
- "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),s=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},c=(n,r,a)=>(a=n==null?{}:e(i(n)),s(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let l=require("react");l=c(l,1);let u=require("@tanstack/react-table"),d=require("react/jsx-runtime"),f=require("clsx"),p=require("tailwind-merge");var m=o((e=>{var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){return t.H.useMemoCache(e)}})),h=o((e=>{process.env.NODE_ENV!==`production`&&(function(){var t=require("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;e.c=function(e){var n=t.H;return n===null&&console.error(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
2
- 1. You might have mismatching versions of React and the renderer (such as React DOM)
3
- 2. You might be breaking the Rules of Hooks
4
- 3. You might have more than one copy of React in the same app
5
- See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.`),n.useMemoCache(e)}})()})),g=o(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=m():t.exports=h()}))(),_=(0,l.createContext)(void 0),v=({children:e,payload:t,columns:n})=>{let r=(0,u.useReactTable)({data:t?.data??[],columns:n,getCoreRowModel:(0,u.getCoreRowModel)()});return(0,d.jsx)(_.Provider,{value:{table:r},children:e})};function y(){let e=(0,l.useContext)(_);if(!e)throw Error(`useGrid must be used within a GridContextProvider`);return e}function b(...e){return(0,p.twMerge)((0,f.clsx)(e))}function x(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`w-full caption-bottom text-sm`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`div`,{"data-slot":`table-container`,className:`relative w-full overflow-x-auto`,children:(0,d.jsx)(`table`,{"data-slot":`table`,className:i,...r})}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function S(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`[&_tr]:border-b`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`thead`,{"data-slot":`table-header`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function C(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`[&_tr:last-child]:border-0`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`tbody`,{"data-slot":`table-body`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function w(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`tr`,{"data-slot":`table-row`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function T(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`th`,{"data-slot":`table-head`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}function E(e){let t=(0,g.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=b(`p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,d.jsx)(`td`,{"data-slot":`table-cell`,className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a}var D=()=>{let e=(0,g.c)(11),{table:t}=y(),n;e[0]===t?n=e[1]:(n=t.getHeaderGroups().map(k),e[0]=t,e[1]=n);let r;e[2]===n?r=e[3]:(r=(0,d.jsx)(S,{className:`sticky top-0 z-10 bg-muted`,children:n}),e[2]=n,e[3]=r);let i;e[4]===t?i=e[5]:(i=t.getRowModel().rows.map(j),e[4]=t,e[5]=i);let a;e[6]===i?a=e[7]:(a=(0,d.jsx)(C,{children:i}),e[6]=i,e[7]=a);let o;return e[8]!==r||e[9]!==a?(o=(0,d.jsxs)(x,{children:[r,a]}),e[8]=r,e[9]=a,e[10]=o):o=e[10],o};function O(e){return(0,d.jsx)(T,{colSpan:e.colSpan,style:{width:e.getSize(),minWidth:e.getSize(),maxWidth:e.getSize()},children:e.isPlaceholder?null:(0,u.flexRender)(e.column.columnDef.header,e.getContext())},e.id)}function k(e){return(0,d.jsx)(w,{children:e.headers.map(O)},e.id)}function A(e){return(0,d.jsx)(E,{style:{width:e.column.getSize(),minWidth:e.column.getSize(),maxWidth:e.column.getSize()},children:(0,u.flexRender)(e.column.columnDef.cell,e.getContext())},e.id)}function j(e){return(0,d.jsx)(w,{"data-state":e.getIsSelected(),children:e.getVisibleCells().map(A)},e.id)}var M=e=>{let t=(0,g.c)(4),{columns:n,payload:r}=e,i;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(i=(0,d.jsx)(D,{}),t[0]=i):i=t[0];let a;return t[1]!==n||t[2]!==r?(a=(0,d.jsx)(v,{payload:r,columns:n,children:i}),t[1]=n,t[2]=r,t[3]=a):a=t[3],a};exports.Grid=M;
package/dist/data-grid.js DELETED
@@ -1,185 +0,0 @@
1
- "use client";
2
- import { createContext as e, useContext as t } from "react";
3
- import { flexRender as n, getCoreRowModel as r, useReactTable as i } from "@tanstack/react-table";
4
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
5
- import { clsx as s } from "clsx";
6
- import { twMerge as c } from "tailwind-merge";
7
- //#region \0rolldown/runtime.js
8
- var l = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
9
- if (typeof require < "u") return require.apply(this, arguments);
10
- throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
11
- }), d = /* @__PURE__ */ l(((e) => {
12
- var t = u("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
13
- e.c = function(e) {
14
- return t.H.useMemoCache(e);
15
- };
16
- })), f = /* @__PURE__ */ l(((e) => {
17
- process.env.NODE_ENV !== "production" && (function() {
18
- var t = u("react").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
19
- e.c = function(e) {
20
- var n = t.H;
21
- return n === null && console.error("Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem."), n.useMemoCache(e);
22
- };
23
- })();
24
- })), p = (/* @__PURE__ */ l(((e, t) => {
25
- process.env.NODE_ENV === "production" ? t.exports = d() : t.exports = f();
26
- })))(), m = e(void 0), h = ({ children: e, payload: t, columns: n }) => {
27
- let o = i({
28
- data: t?.data ?? [],
29
- columns: n,
30
- getCoreRowModel: r()
31
- });
32
- return /* @__PURE__ */ a(m.Provider, {
33
- value: { table: o },
34
- children: e
35
- });
36
- };
37
- function g() {
38
- let e = t(m);
39
- if (!e) throw Error("useGrid must be used within a GridContextProvider");
40
- return e;
41
- }
42
- //#endregion
43
- //#region src/lib/utils.ts
44
- function _(...e) {
45
- return c(s(e));
46
- }
47
- //#endregion
48
- //#region src/components/ui/table.tsx
49
- function v(e) {
50
- let t = (0, p.c)(8), n, r;
51
- t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
52
- let i;
53
- t[3] === n ? i = t[4] : (i = _("w-full caption-bottom text-sm", n), t[3] = n, t[4] = i);
54
- let o;
55
- return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("div", {
56
- "data-slot": "table-container",
57
- className: "relative w-full overflow-x-auto",
58
- children: /* @__PURE__ */ a("table", {
59
- "data-slot": "table",
60
- className: i,
61
- ...r
62
- })
63
- }), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
64
- }
65
- function y(e) {
66
- let t = (0, p.c)(8), n, r;
67
- t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
68
- let i;
69
- t[3] === n ? i = t[4] : (i = _("[&_tr]:border-b", n), t[3] = n, t[4] = i);
70
- let o;
71
- return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("thead", {
72
- "data-slot": "table-header",
73
- className: i,
74
- ...r
75
- }), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
76
- }
77
- function b(e) {
78
- let t = (0, p.c)(8), n, r;
79
- t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
80
- let i;
81
- t[3] === n ? i = t[4] : (i = _("[&_tr:last-child]:border-0", n), t[3] = n, t[4] = i);
82
- let o;
83
- return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("tbody", {
84
- "data-slot": "table-body",
85
- className: i,
86
- ...r
87
- }), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
88
- }
89
- function x(e) {
90
- let t = (0, p.c)(8), n, r;
91
- t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
92
- let i;
93
- t[3] === n ? i = t[4] : (i = _("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", n), t[3] = n, t[4] = i);
94
- let o;
95
- return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("tr", {
96
- "data-slot": "table-row",
97
- className: i,
98
- ...r
99
- }), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
100
- }
101
- function S(e) {
102
- let t = (0, p.c)(8), n, r;
103
- t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
104
- let i;
105
- t[3] === n ? i = t[4] : (i = _("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", n), t[3] = n, t[4] = i);
106
- let o;
107
- return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("th", {
108
- "data-slot": "table-head",
109
- className: i,
110
- ...r
111
- }), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
112
- }
113
- function C(e) {
114
- let t = (0, p.c)(8), n, r;
115
- t[0] === e ? (n = t[1], r = t[2]) : ({className: n, ...r} = e, t[0] = e, t[1] = n, t[2] = r);
116
- let i;
117
- t[3] === n ? i = t[4] : (i = _("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", n), t[3] = n, t[4] = i);
118
- let o;
119
- return t[5] !== r || t[6] !== i ? (o = /* @__PURE__ */ a("td", {
120
- "data-slot": "table-cell",
121
- className: i,
122
- ...r
123
- }), t[5] = r, t[6] = i, t[7] = o) : o = t[7], o;
124
- }
125
- //#endregion
126
- //#region src/package/table/TMain.tsx
127
- var w = () => {
128
- let e = (0, p.c)(11), { table: t } = g(), n;
129
- e[0] === t ? n = e[1] : (n = t.getHeaderGroups().map(E), e[0] = t, e[1] = n);
130
- let r;
131
- e[2] === n ? r = e[3] : (r = /* @__PURE__ */ a(y, {
132
- className: "sticky top-0 z-10 bg-muted",
133
- children: n
134
- }), e[2] = n, e[3] = r);
135
- let i;
136
- e[4] === t ? i = e[5] : (i = t.getRowModel().rows.map(O), e[4] = t, e[5] = i);
137
- let s;
138
- e[6] === i ? s = e[7] : (s = /* @__PURE__ */ a(b, { children: i }), e[6] = i, e[7] = s);
139
- let c;
140
- return e[8] !== r || e[9] !== s ? (c = /* @__PURE__ */ o(v, { children: [r, s] }), e[8] = r, e[9] = s, e[10] = c) : c = e[10], c;
141
- };
142
- function T(e) {
143
- return /* @__PURE__ */ a(S, {
144
- colSpan: e.colSpan,
145
- style: {
146
- width: e.getSize(),
147
- minWidth: e.getSize(),
148
- maxWidth: e.getSize()
149
- },
150
- children: e.isPlaceholder ? null : n(e.column.columnDef.header, e.getContext())
151
- }, e.id);
152
- }
153
- function E(e) {
154
- return /* @__PURE__ */ a(x, { children: e.headers.map(T) }, e.id);
155
- }
156
- function D(e) {
157
- return /* @__PURE__ */ a(C, {
158
- style: {
159
- width: e.column.getSize(),
160
- minWidth: e.column.getSize(),
161
- maxWidth: e.column.getSize()
162
- },
163
- children: n(e.column.columnDef.cell, e.getContext())
164
- }, e.id);
165
- }
166
- function O(e) {
167
- return /* @__PURE__ */ a(x, {
168
- "data-state": e.getIsSelected(),
169
- children: e.getVisibleCells().map(D)
170
- }, e.id);
171
- }
172
- //#endregion
173
- //#region src/package/grid/index.tsx
174
- var k = (e) => {
175
- let t = (0, p.c)(4), { columns: n, payload: r } = e, i;
176
- t[0] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ a(w, {}), t[0] = i) : i = t[0];
177
- let o;
178
- return t[1] !== n || t[2] !== r ? (o = /* @__PURE__ */ a(h, {
179
- payload: r,
180
- columns: n,
181
- children: i
182
- }), t[1] = n, t[2] = r, t[3] = o) : o = t[3], o;
183
- };
184
- //#endregion
185
- export { k as Grid };
@@ -1 +0,0 @@
1
- export declare function useIsMobile(): boolean;
@@ -1,2 +0,0 @@
1
- import { ClassValue } from 'clsx';
2
- export declare function cn(...inputs: ClassValue[]): string;
@@ -1,16 +0,0 @@
1
- import { ColumnDef, Table } from '@tanstack/react-table';
2
- import { default as React } from 'react';
3
- export interface GridContextProps<T> {
4
- table: Table<T>;
5
- }
6
- interface GridContextProviderProps<T> {
7
- children: React.ReactNode;
8
- payload?: {
9
- data: T[];
10
- total: number;
11
- };
12
- columns: ColumnDef<T>[];
13
- }
14
- export declare const GridContextProvider: <T>({ children, payload, columns, }: GridContextProviderProps<T>) => React.JSX.Element;
15
- export declare function useGrid(): GridContextProps<unknown>;
16
- export {};
@@ -1,3 +0,0 @@
1
- import { GridProps } from '../types';
2
- declare const Grid: <T>({ columns, payload }: GridProps<T>) => import("react").JSX.Element;
3
- export { Grid };
@@ -1,3 +0,0 @@
1
- export type { ColumnDef, ColumnFiltersState, PaginationState, Row, SortingState, } from '@tanstack/react-table';
2
- export { Grid } from './grid';
3
- export type { GridProps } from './types';
@@ -1,76 +0,0 @@
1
- /**
2
- * queryBuilder.ts
3
- *
4
- * Converts TanStack Table's client-side state (column filters, global filter,
5
- * sorting, pagination) into a Mongoose/MongoDB-friendly query descriptor.
6
- *
7
- * Usage:
8
- * const query = buildMongooseQuery({
9
- * columnFilters,
10
- * globalFilter,
11
- * sorting,
12
- * pagination,
13
- * searchableFields: ["name", "email"],
14
- * });
15
- *
16
- * // On the server:
17
- * const docs = await Model.find(query.filter)
18
- * .sort(query.sort)
19
- * .skip(query.skip)
20
- * .limit(query.limit);
21
- *
22
- * const total = await Model.countDocuments(query.filter);
23
- */
24
- export interface ColumnFilter {
25
- id: string;
26
- value: unknown;
27
- }
28
- export type ColumnFiltersState = ColumnFilter[];
29
- export interface SortingRule {
30
- id: string;
31
- desc: boolean;
32
- }
33
- export type SortingState = SortingRule[];
34
- export interface PaginationState {
35
- pageIndex: number;
36
- pageSize: number;
37
- }
38
- export type FilterVariant = 'text' | 'exact' | 'range' | 'dateRange' | 'select' | 'multiSelect' | 'boolean';
39
- export interface ColumnFilterConfig {
40
- /** How this column's filter value should be interpreted. Defaults to "text". */
41
- variant?: FilterVariant;
42
- /**
43
- * Override the field name used in the Mongo query if it differs from the
44
- * column id (e.g. column id "authorName" -> field "author.name").
45
- */
46
- field?: string;
47
- /** Case-insensitive regex for "text" variant. Defaults to true. */
48
- caseInsensitive?: boolean;
49
- }
50
- export interface QueryBuilderOptions {
51
- columnFilters?: ColumnFiltersState;
52
- globalFilter?: string;
53
- sorting?: SortingState;
54
- pagination?: PaginationState;
55
- /**
56
- * Per-column-id configuration controlling how each filter value is
57
- * translated into a Mongo operator. Columns not listed here default to
58
- * variant: "text".
59
- */
60
- columnConfig?: Record<string, ColumnFilterConfig>;
61
- /**
62
- * Fields to search when `globalFilter` is set. Produces an $or of
63
- * case-insensitive regex matches across these fields.
64
- */
65
- searchableFields?: string[];
66
- /** Map a sort column id to a different Mongo field name if needed. */
67
- sortFieldMap?: Record<string, string>;
68
- }
69
- export interface MongooseQuery {
70
- filter: Record<string, any>;
71
- sort: Record<string, 1 | -1>;
72
- skip: number;
73
- limit: number;
74
- }
75
- export declare function buildMongooseQuery(options: QueryBuilderOptions): MongooseQuery;
76
- export default buildMongooseQuery;
@@ -1,2 +0,0 @@
1
- declare const TMain: () => import("react").JSX.Element;
2
- export default TMain;
@@ -1,8 +0,0 @@
1
- import { ColumnDef } from '@tanstack/react-table';
2
- export interface GridProps<T> {
3
- payload?: {
4
- data: T[];
5
- total: number;
6
- };
7
- columns: ColumnDef<T>[];
8
- }