munza-x-data-grid 3.0.0-beta.16 → 3.0.0-beta.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 +61 -272
- package/dist/README.md +77 -0
- package/dist/components/ui/badge.d.ts +9 -0
- package/dist/components/ui/button.d.ts +10 -0
- package/dist/components/ui/checkbox.d.ts +4 -0
- package/dist/components/ui/input.d.ts +3 -0
- package/dist/components/ui/label.d.ts +4 -0
- package/dist/components/ui/popover.d.ts +10 -0
- package/dist/components/ui/skeleton.d.ts +2 -0
- package/dist/components/ui/spinner.d.ts +2 -0
- package/dist/components/ui/table.d.ts +10 -0
- package/dist/data/dummyVehicles.d.ts +13 -0
- package/dist/data-grid.cjs +8 -0
- package/dist/data-grid.js +3273 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/main.d.ts +0 -1
- package/dist/package/contexts/GridContext.d.ts +16 -0
- package/dist/package/grid/index.d.ts +3 -0
- package/dist/package/index.d.ts +3 -0
- package/dist/package/lib/queryBuilder.d.ts +76 -0
- package/dist/package/table/TMain.d.ts +2 -0
- package/dist/package/types/index.d.ts +8 -0
- package/package.json +88 -49
- package/dist/button/index.d.ts +0 -7
- package/dist/index.cjs +0 -1
- package/dist/index.css +0 -3
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -8
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useIsMobile(): boolean;
|
package/dist/main.d.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
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 {};
|
|
@@ -0,0 +1,76 @@
|
|
|
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;
|
package/package.json
CHANGED
|
@@ -1,49 +1,88 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "munza-x-data-grid",
|
|
3
|
-
"private": false,
|
|
4
|
-
"version": "3.0.0-beta.
|
|
5
|
-
"type": "module",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
],
|
|
9
|
-
"
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "munza-x-data-grid",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "3.0.0-beta.2",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"**/*.css"
|
|
8
|
+
],
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
13
|
+
"main": "./dist/data-grid.cjs",
|
|
14
|
+
"module": "./dist/data-grid.js",
|
|
15
|
+
"types": "./dist/package/index.d.ts",
|
|
16
|
+
"exports": {
|
|
17
|
+
".": {
|
|
18
|
+
"import": "./dist/data-grid.js",
|
|
19
|
+
"types": "./dist/package/types/index.d.ts"
|
|
20
|
+
},
|
|
21
|
+
"./style.css": "./dist/index.css"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"dev": "vite",
|
|
25
|
+
"build": "tsc -b && vite build",
|
|
26
|
+
"lint": "eslint .",
|
|
27
|
+
"preview": "vite preview"
|
|
28
|
+
},
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "git+https://github.com/jsdev-robin/munza-x-data-grid.git"
|
|
32
|
+
},
|
|
33
|
+
"bugs": {
|
|
34
|
+
"url": "https://github.com/jsdev-robin/munza-x-data-grid/issues"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"react": "^18 || ^19",
|
|
38
|
+
"react-dom": "^18 || ^19"
|
|
39
|
+
},
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"@base-ui/react": "^1.6.0",
|
|
42
|
+
"@fontsource-variable/geist": "^5.2.9",
|
|
43
|
+
"@shadcn/react": "^0.2.1",
|
|
44
|
+
"@tanstack/react-table": "^8.21.3",
|
|
45
|
+
"class-variance-authority": "^0.7.1",
|
|
46
|
+
"clsx": "^2.1.1",
|
|
47
|
+
"cmdk": "^1.1.1",
|
|
48
|
+
"date-fns": "^4.4.0",
|
|
49
|
+
"embla-carousel-react": "^8.6.0",
|
|
50
|
+
"input-otp": "^1.4.2",
|
|
51
|
+
"lucide-react": "^1.23.0",
|
|
52
|
+
"next-themes": "^0.4.6",
|
|
53
|
+
"radix-ui": "^1.6.2",
|
|
54
|
+
"react-day-picker": "^10.0.1",
|
|
55
|
+
"react-resizable-panels": "^4.12.1",
|
|
56
|
+
"recharts": "3.8.0",
|
|
57
|
+
"shadcn": "^4.13.0",
|
|
58
|
+
"sonner": "^2.0.7",
|
|
59
|
+
"tailwind-merge": "^3.6.0",
|
|
60
|
+
"tw-animate-css": "^1.4.0",
|
|
61
|
+
"vaul": "^1.1.2",
|
|
62
|
+
"zustand": "^5.0.14"
|
|
63
|
+
},
|
|
64
|
+
"devDependencies": {
|
|
65
|
+
"@babel/core": "^7.29.7",
|
|
66
|
+
"@eslint/js": "^10.0.1",
|
|
67
|
+
"@rolldown/plugin-babel": "^0.2.3",
|
|
68
|
+
"@tailwindcss/vite": "^4.3.2",
|
|
69
|
+
"@types/babel__core": "^7.20.5",
|
|
70
|
+
"@types/node": "^24.13.2",
|
|
71
|
+
"@types/react": "^19.2.17",
|
|
72
|
+
"@types/react-dom": "^19.2.3",
|
|
73
|
+
"@vitejs/plugin-react": "^6.0.3",
|
|
74
|
+
"babel-plugin-react-compiler": "^1.0.0",
|
|
75
|
+
"eslint": "^10.6.0",
|
|
76
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
77
|
+
"eslint-plugin-react-refresh": "^0.5.3",
|
|
78
|
+
"globals": "^17.7.0",
|
|
79
|
+
"react": "^19.2.7",
|
|
80
|
+
"react-dom": "^19.2.7",
|
|
81
|
+
"rollup-plugin-copy": "^3.5.0",
|
|
82
|
+
"tailwindcss": "^4.3.2",
|
|
83
|
+
"typescript": "~6.0.2",
|
|
84
|
+
"typescript-eslint": "^8.62.0",
|
|
85
|
+
"vite": "^8.1.1",
|
|
86
|
+
"vite-plugin-dts": "^5.0.3"
|
|
87
|
+
}
|
|
88
|
+
}
|
package/dist/button/index.d.ts
DELETED
package/dist/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");var t=({className:t,children:n})=>(0,e.jsx)(`button`,{className:t,children:n});exports.Button=t;
|
package/dist/index.css
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
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/dist/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Button } from './button/index';
|