flexi-datagrid 1.0.6 → 1.0.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.
Files changed (5) hide show
  1. package/dist/DataTable.d.ts +6 -5
  2. package/dist/flexi-datagrid.css +1 -1
  3. package/dist/index.es.js +219 -192
  4. package/dist/index.umd.js +1 -1
  5. package/package.json +1 -1
package/dist/DataTable.d.ts CHANGED
@@ -1,13 +1,13 @@
1
- import { type ReactNode, type CSSProperties } from 'react';
1
+ import { type ReactNode } from 'react';
2
2
  export interface ColumnConfig<T> {
3
- key: string;
3
+ key?: string;
4
4
  header: string;
5
5
  className?: string;
6
- cellStyle?: CSSProperties;
7
- width?: string | number;
6
+ headerClassName?: string;
8
7
  render?: (value: any, record: T) => ReactNode;
9
8
  filterable?: boolean;
10
9
  pinned?: boolean;
10
+ children?: ColumnConfig<T>[];
11
11
  }
12
12
  interface DataTableProps<T> {
13
13
  columns: ColumnConfig<T>[];
@@ -17,6 +17,7 @@ interface DataTableProps<T> {
17
17
  isLoading?: boolean;
18
18
  onPinChange?: (columnKey: string, isPinned: boolean) => void;
19
19
  onGroupChange?: (groupedKeys: string[]) => void;
20
+ groupBy?: boolean;
20
21
  }
21
- export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, onPinChange, onGroupChange }: DataTableProps<T>): import("react").JSX.Element;
22
+ export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, onPinChange, onGroupChange, groupBy }: DataTableProps<T>): import("react").JSX.Element;
22
23
  export {};
package/dist/flexi-datagrid.css CHANGED
@@ -1,2 +1,2 @@
1
- *,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;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}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-10{top:2.5rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.table{display:table}.h-10{height:2.5rem}.h-12{height:3rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.max-h-40{max-height:10rem}.min-h-\[52px\]{min-height:52px}.w-12{width:3rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-52{width:13rem}.w-\[100px\]{width:100px}.w-full{width:100%}.flex-shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.scale-\[0\.99\]{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-\[var\(--color-background-secondary\,rgba\(248\,250\,252\,1\)\)\]{background-color:var(--color-background-secondary,#f8fafc)}.bg-blue-50\/50{background-color:#eff6ff80}.bg-slate-200\/70{background-color:#e2e8f0b3}.bg-slate-50\/30{background-color:#f8fafc4d}.bg-slate-50\/50{background-color:#f8fafc80}.bg-slate-50\/60{background-color:#f8fafc99}.bg-slate-50\/90{background-color:#f8fafce6}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[-1px_0_0_rgba\(226\,232\,240\,1\)\]{--tw-shadow:-1px 0 0 #e2e8f0;--tw-shadow-colored:-1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-\[2px_0_5px_-2px_rgba\(0\,0\,0\,0\.1\)\]{--tw-shadow:2px 0 5px -2px #0000001a;--tw-shadow-colored:2px 0 5px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.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)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-100\/80:hover{background-color:#f1f5f9cc}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-50\/80:hover{background-color:#f8fafccc}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.group:hover .group-hover\:bg-slate-100\/90{background-color:#f1f5f9e6}.group:hover .group-hover\:bg-slate-50\/80{background-color:#f8fafccc}.group\/header:hover .group-hover\/header\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}
1
+ *,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;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}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-10{top:2.5rem}.top-9{top:2.25rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.table{display:table}.h-10{height:2.5rem}.h-12{height:3rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.max-h-40{max-height:10rem}.min-h-\[28px\]{min-height:28px}.min-h-\[52px\]{min-height:52px}.w-12{width:3rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-52{width:13rem}.w-\[100px\]{width:100px}.w-full{width:100%}.flex-shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.scale-\[0\.99\]{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-100\/60{border-color:#f1f5f999}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-\[var\(--color-background-secondary\,rgba\(248\,250\,252\,1\)\)\]{background-color:var(--color-background-secondary,#f8fafc)}.bg-blue-50\/50{background-color:#eff6ff80}.bg-slate-200\/70{background-color:#e2e8f0b3}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-slate-50\/30{background-color:#f8fafc4d}.bg-slate-50\/50{background-color:#f8fafc80}.bg-slate-50\/60{background-color:#f8fafc99}.bg-slate-50\/90{background-color:#f8fafce6}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[-1px_0_0_rgba\(226\,232\,240\,1\)\]{--tw-shadow:-1px 0 0 #e2e8f0;--tw-shadow-colored:-1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-\[2px_0_5px_-2px_rgba\(0\,0\,0\,0\.1\)\]{--tw-shadow:2px 0 5px -2px #0000001a;--tw-shadow-colored:2px 0 5px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.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)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-100\/80:hover{background-color:#f1f5f9cc}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-50\/80:hover{background-color:#f8fafccc}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:bg-slate-100\/90{background-color:#f1f5f9e6}.group:hover .group-hover\:bg-slate-50\/80{background-color:#f8fafccc}.group\/header:hover .group-hover\/header\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}
2
2
  /*$vite$:1*/
package/dist/index.es.js CHANGED
@@ -1,18 +1,25 @@
1
- import { ChevronDown as e, ChevronRight as t, GripVertical as n, Pin as r, PinOff as i, X as a } from "lucide-react";
2
- import { useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
3
- import { jsx as u, jsxs as d } from "react/jsx-runtime";
1
+ import { ChevronDown as e, ChevronRight as t, Pin as n, PinOff as r, X as i } from "lucide-react";
2
+ import { useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
3
+ import { jsx as l, jsxs as u } from "react/jsx-runtime";
4
4
  //#region src/DataTable.tsx
5
- function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChange: _, onGroupChange: v }) {
6
- let [y, b] = l(null), [x, S] = l({}), [C, w] = l(""), [T, E] = l(f.filter((e) => e.pinned).map((e) => e.key)), [D, O] = l([]), [k, A] = l({}), [j, M] = l(!1), N = c(null);
7
- o(() => {
5
+ function d({ columns: d, data: f, rowKey: p, actions: m, isLoading: h, onPinChange: g, onGroupChange: _, groupBy: v }) {
6
+ let [y, b] = c(null), [x, S] = c({}), [C, w] = c(""), [T, E] = c(o(() => {
7
+ let e = [], t = (n) => {
8
+ n.forEach((n) => {
9
+ n.children ? t(n.children) : n.pinned && n.key && e.push(n.key);
10
+ });
11
+ };
12
+ return t(d), e;
13
+ }, [d])), [D, O] = c([]), [k, A] = c({}), [j, M] = c(!1), N = s(null);
14
+ a(() => {
8
15
  function e(e) {
9
16
  N.current && !N.current.contains(e.target) && (b(null), w(""));
10
17
  }
11
18
  return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
12
19
  }, []);
13
- let P = (e) => typeof m == "function" ? m(e) : String(e[m]), F = (e) => {
20
+ let P = (e) => typeof p == "function" ? p(e) : String(e[p]), F = (e) => {
14
21
  let t = T.includes(e);
15
- E(t ? T.filter((t) => t !== e) : [...T, e]), _ && _(e, !t);
22
+ E(t ? T.filter((t) => t !== e) : [...T, e]), g && g(e, !t);
16
23
  }, I = (e, t) => {
17
24
  e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
18
25
  }, L = (e) => {
@@ -24,40 +31,45 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
24
31
  let t = e.dataTransfer.getData("text/plain");
25
32
  if (t && !D.includes(t)) {
26
33
  let e = [...D, t];
27
- O(e), v && v(e);
34
+ O(e), _ && _(e);
28
35
  }
29
36
  }, B = (e) => {
30
37
  let t = D.filter((t) => t !== e);
31
- O(t), A({}), v && v(t);
32
- }, V = s(() => {
33
- let e = f.filter((e) => !D.includes(e.key)), t = e.filter((e) => T.includes(e.key)), n = e.filter((e) => !T.includes(e.key));
34
- return [...t, ...n];
38
+ O(t), A({}), _ && _(t);
39
+ }, V = o(() => {
40
+ let e = d.filter((e) => !D.includes(e.key || "")), t = [], n = [];
41
+ return e.forEach((e) => {
42
+ e.children ? e.children.some((e) => T.includes(e.key || "")) ? t.push(e) : n.push(e) : T.includes(e.key || "") ? t.push(e) : n.push(e);
43
+ }), [...t, ...n];
35
44
  }, [
36
- f,
45
+ d,
37
46
  T,
38
47
  D
39
- ]), H = s(() => {
48
+ ]), H = o(() => {
49
+ let e = [], t = (n) => {
50
+ n.forEach((n) => {
51
+ n.children ? t(n.children) : e.push(n);
52
+ });
53
+ };
54
+ return t(V), e;
55
+ }, [V]), U = o(() => d.some((e) => e.children && e.children.length > 0), [d]), W = o(() => {
40
56
  let e = {}, t = 0;
41
- return D.length > 0 && (t += 48), V.forEach((n) => {
42
- if (T.includes(n.key)) {
43
- e[n.key] = t;
44
- let r = typeof n.width == "number" ? n.width : parseInt(String(n.width || "150"));
45
- t += isNaN(r) ? 150 : r;
46
- }
57
+ return D.length > 0 && (t += 48), H.forEach((n) => {
58
+ n.key && T.includes(n.key) && (e[n.key] = t, t += 150);
47
59
  }), e;
48
60
  }, [
49
- V,
61
+ H,
50
62
  T,
51
63
  D
52
- ]), U = s(() => {
64
+ ]), G = o(() => {
53
65
  if (!y) return [];
54
- let e = p.map((e) => e[y]), t = Array.from(new Set(e)).filter((e) => e != null);
66
+ let e = f.map((e) => e[y]), t = Array.from(new Set(e)).filter((e) => e != null);
55
67
  return C.trim() ? t.filter((e) => String(e).toLowerCase().includes(C.toLowerCase())) : t;
56
68
  }, [
57
- p,
69
+ f,
58
70
  y,
59
71
  C
60
- ]), W = (e, t) => {
72
+ ]), K = (e, t) => {
61
73
  S((n) => {
62
74
  let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
63
75
  ...n,
@@ -65,13 +77,13 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
65
77
  };
66
78
  return a[e].length === 0 && delete a[e], a;
67
79
  });
68
- }, G = (e) => {
80
+ }, q = (e) => {
69
81
  S((t) => {
70
82
  let n = { ...t };
71
83
  return delete n[e], n;
72
84
  });
73
- }, K = s(() => p.filter((e) => Object.entries(x).every(([t, n]) => !n || n.length === 0 ? !0 : n.includes(e[t]))), [p, x]), q = s(() => {
74
- if (D.length === 0) return K;
85
+ }, J = o(() => f.filter((e) => Object.entries(x).every(([t, n]) => !n || n.length === 0 ? !0 : n.includes(e[t]))), [f, x]), Y = o(() => {
86
+ if (D.length === 0) return J;
75
87
  let e = (t, n, r = "") => {
76
88
  if (n >= D.length) return t;
77
89
  let i = D[n], a = {};
@@ -91,230 +103,245 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
91
103
  };
92
104
  });
93
105
  };
94
- return e(K, 0);
95
- }, [K, D]), J = (e) => {
106
+ return e(J, 0);
107
+ }, [J, D]), X = (e) => {
96
108
  A((t) => ({
97
109
  ...t,
98
110
  [e]: !t[e]
99
111
  }));
100
- }, Y = s(() => {
101
- if (D.length === 0) return q;
112
+ }, Z = o(() => {
113
+ if (D.length === 0) return Y;
102
114
  let e = [], t = (n) => {
103
115
  n.forEach((n) => {
104
116
  n.isGroupRow ? (e.push(n), k[n.path] && t(n.children)) : e.push(n);
105
117
  });
106
118
  };
107
- return t(q), e;
119
+ return t(Y), e;
108
120
  }, [
109
- q,
121
+ Y,
110
122
  k,
111
123
  D
112
- ]), X = (e, t) => {
113
- let n = T.includes(e.key), r = {
114
- width: e.width,
115
- minWidth: e.width || (n ? "150px" : void 0),
116
- maxWidth: e.width || (n ? "150px" : void 0)
117
- }, i = t === "td" ? e.cellStyle : {};
118
- return n ? {
119
- className: `sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] ${e.className || ""}`,
120
- style: {
121
- left: `${H[e.key]}px`,
122
- ...r,
123
- ...i
124
- }
125
- } : {
126
- className: e.className || "",
127
- style: {
128
- ...r,
129
- ...i
130
- }
131
- };
124
+ ]), Q = (e) => T.includes(e) ? {
125
+ className: "sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]",
126
+ style: {
127
+ left: `${W[e]}px`,
128
+ minWidth: "150px",
129
+ maxWidth: "150px"
130
+ }
131
+ } : {
132
+ className: "",
133
+ style: {}
134
+ }, $ = (e, t) => {
135
+ if (!e.key) return /* @__PURE__ */ l("span", {
136
+ className: "truncate",
137
+ children: e.header
138
+ });
139
+ let i = (x[e.key]?.length || 0) > 0, a = T.includes(e.key);
140
+ return /* @__PURE__ */ u("div", {
141
+ className: `flex items-center justify-between gap-1 group/header w-full ${e.headerClassName}`,
142
+ children: [
143
+ /* @__PURE__ */ l("div", {
144
+ className: "truncate",
145
+ children: e.header
146
+ }),
147
+ e.filterable || !t && /* @__PURE__ */ u("div", {
148
+ className: "flex items-center gap-1",
149
+ children: [e.filterable && /* @__PURE__ */ l("button", {
150
+ onClick: (t) => {
151
+ t.stopPropagation(), w(""), b(y === e.key ? null : e.key);
152
+ },
153
+ className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${i ? "text-blue-600" : "text-slate-400 opacity-0 group-hover/header:opacity-100"}`,
154
+ children: "Filter"
155
+ }), !t && /* @__PURE__ */ l("button", {
156
+ onClick: (t) => {
157
+ t.stopPropagation(), F(e.key);
158
+ },
159
+ className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${a ? "text-blue-500 opacity-100" : "text-slate-300"}`,
160
+ children: l(a ? r : n, { className: "w-3.5 h-3.5" })
161
+ })]
162
+ }),
163
+ y === e.key && /* @__PURE__ */ u("div", {
164
+ ref: N,
165
+ className: "absolute left-4 top-9 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700",
166
+ children: [
167
+ /* @__PURE__ */ l("div", {
168
+ className: "px-2 pb-2 mb-1 border-b border-slate-100",
169
+ children: /* @__PURE__ */ l("input", {
170
+ type: "text",
171
+ placeholder: "Search values...",
172
+ value: C,
173
+ onChange: (e) => w(e.target.value),
174
+ className: "w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500",
175
+ onClick: (e) => e.stopPropagation()
176
+ })
177
+ }),
178
+ /* @__PURE__ */ l("div", {
179
+ className: "max-h-40 overflow-y-auto px-2 space-y-1",
180
+ children: G.length === 0 ? /* @__PURE__ */ l("div", {
181
+ className: "text-[11px] text-slate-400 p-2 text-center",
182
+ children: "No results found"
183
+ }) : G.map((t, n) => /* @__PURE__ */ u("label", {
184
+ className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer",
185
+ children: [/* @__PURE__ */ l("input", {
186
+ type: "checkbox",
187
+ className: "rounded text-blue-600 w-3.5 h-3.5",
188
+ checked: x[e.key]?.includes(t) || !1,
189
+ onChange: () => K(e.key, t)
190
+ }), /* @__PURE__ */ l("span", {
191
+ className: "truncate",
192
+ children: String(t)
193
+ })]
194
+ }, n))
195
+ }),
196
+ i && /* @__PURE__ */ l("div", {
197
+ className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
198
+ children: /* @__PURE__ */ l("button", {
199
+ onClick: () => q(e.key),
200
+ className: "text-[11px] text-red-500 hover:underline",
201
+ children: "Clear"
202
+ })
203
+ })
204
+ ]
205
+ })
206
+ ]
207
+ });
132
208
  };
133
- return /* @__PURE__ */ d("div", {
209
+ return /* @__PURE__ */ u("div", {
134
210
  className: "w-full space-y-3",
135
- children: [/* @__PURE__ */ u("div", {
211
+ children: [v && /* @__PURE__ */ l("div", {
136
212
  onDragOver: L,
137
213
  onDragLeave: R,
138
214
  onDrop: z,
139
215
  className: `w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${j ? "border-blue-500 bg-blue-50/50 scale-[0.99]" : "border-dashed border-slate-200 bg-slate-50/50"}`,
140
- children: D.length === 0 ? /* @__PURE__ */ u("span", {
216
+ children: D.length === 0 ? /* @__PURE__ */ l("span", {
141
217
  className: "text-[12px] text-slate-400 font-medium select-none",
142
218
  children: "Drag a column header here to group your records by that field"
143
- }) : /* @__PURE__ */ d("div", {
219
+ }) : /* @__PURE__ */ u("div", {
144
220
  className: "flex flex-wrap items-center gap-1.5",
145
- children: [/* @__PURE__ */ u("span", {
221
+ children: [/* @__PURE__ */ l("span", {
146
222
  className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 mr-1",
147
223
  children: "Grouped By:"
148
- }), D.map((e) => /* @__PURE__ */ d("div", {
149
- className: "flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-slate-600 animate-in fade-in zoom-in-95 duration-150",
150
- children: [/* @__PURE__ */ u("span", { children: f.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ u("button", {
224
+ }), D.map((e) => /* @__PURE__ */ u("div", {
225
+ className: "flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-slate-600",
226
+ children: [/* @__PURE__ */ l("span", { children: d.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ l("button", {
151
227
  onClick: () => B(e),
152
228
  className: "p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors",
153
- children: /* @__PURE__ */ u(a, { className: "w-3 h-3" })
229
+ children: /* @__PURE__ */ l(i, { className: "w-3 h-3" })
154
230
  })]
155
231
  }, e))]
156
232
  })
157
- }), /* @__PURE__ */ u("div", {
233
+ }), /* @__PURE__ */ l("div", {
158
234
  className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
159
- children: /* @__PURE__ */ d("table", {
235
+ children: /* @__PURE__ */ u("table", {
160
236
  className: "w-full caption-bottom text-sm border-collapse table-fixed",
161
237
  children: [/* @__PURE__ */ u("thead", {
162
- className: "bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none",
163
- children: /* @__PURE__ */ d("tr", {
164
- className: "border-b border-slate-100 h-10",
238
+ className: "bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none border-b border-slate-200",
239
+ children: [/* @__PURE__ */ u("tr", {
240
+ className: "border-b border-slate-100",
165
241
  children: [
166
- D.length > 0 && /* @__PURE__ */ u("th", { className: "w-12 h-12 sticky left-0 z-30 bg-slate-50/90 border-r border-slate-100" }),
242
+ D.length > 0 && /* @__PURE__ */ l("th", {
243
+ rowSpan: U ? 2 : 1,
244
+ className: "w-12 sticky left-0 z-40 bg-slate-50 border-r border-slate-100"
245
+ }),
167
246
  V.map((e) => {
168
- let t = (x[e.key]?.length || 0) > 0, a = T.includes(e.key), o = X(e, "th");
169
- return /* @__PURE__ */ u("th", {
170
- draggable: !0,
171
- onDragStart: (t) => I(t, e.key),
172
- className: `h-12 text-left align-middle text-slate-500 font-bold text-[12px] px-4 relative cursor-grab active:cursor-grabbing ${o.className} ${a ? "bg-slate-50/90 z-30" : ""}`,
173
- style: o.style,
174
- children: /* @__PURE__ */ d("div", {
175
- className: "flex items-center justify-between gap-1 group/header",
176
- children: [
177
- /* @__PURE__ */ d("div", {
178
- className: "flex items-center gap-1.5 truncate",
179
- children: [
180
- /* @__PURE__ */ u(n, { className: "w-3 h-3 text-slate-300 opacity-0 group-hover/header:opacity-100 transition-opacity flex-shrink-0" }),
181
- /* @__PURE__ */ u("span", {
182
- className: "truncate",
183
- children: e.header
184
- }),
185
- e.filterable && /* @__PURE__ */ u("button", {
186
- onClick: (t) => {
187
- t.stopPropagation(), w(""), b(y === e.key ? null : e.key);
188
- },
189
- className: `p-0.5 rounded hover:bg-slate-200 transition-colors flex-shrink-0 text-[11px] font-semibold ${t ? "text-blue-600" : "text-slate-400 opacity-0 group-hover/header:opacity-100"}`,
190
- children: "Filter"
191
- })
192
- ]
193
- }),
194
- /* @__PURE__ */ u("button", {
195
- onClick: (t) => {
196
- t.stopPropagation(), F(e.key);
197
- },
198
- className: `p-0.5 rounded hover:bg-slate-200 transition-colors flex-shrink-0 opacity-0 group-hover/header:opacity-100 ${a ? "text-blue-500 opacity-100" : "text-slate-300"}`,
199
- title: a ? "Unpin column" : "Pin column",
200
- children: u(a ? i : r, { className: "w-3.5 h-3.5" })
201
- }),
202
- y === e.key && /* @__PURE__ */ d("div", {
203
- ref: N,
204
- className: "absolute left-4 top-10 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700",
205
- children: [
206
- /* @__PURE__ */ u("div", {
207
- className: "px-2 pb-2 mb-1 border-b border-slate-100",
208
- children: /* @__PURE__ */ u("input", {
209
- type: "text",
210
- placeholder: "Search values...",
211
- value: C,
212
- onChange: (e) => w(e.target.value),
213
- className: "w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500 font-medium text-slate-600",
214
- onClick: (e) => e.stopPropagation()
215
- })
216
- }),
217
- /* @__PURE__ */ u("div", {
218
- className: "max-h-40 overflow-y-auto px-2 space-y-1",
219
- children: U.length === 0 ? /* @__PURE__ */ u("div", {
220
- className: "text-[11px] text-slate-400 p-2 text-center",
221
- children: "No results found"
222
- }) : U.map((t, n) => /* @__PURE__ */ d("label", {
223
- className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none",
224
- children: [/* @__PURE__ */ u("input", {
225
- type: "checkbox",
226
- className: "rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5",
227
- checked: x[e.key]?.includes(t) || !1,
228
- onChange: () => W(e.key, t)
229
- }), /* @__PURE__ */ u("span", {
230
- className: "truncate",
231
- children: String(t)
232
- })]
233
- }, n))
234
- }),
235
- t && /* @__PURE__ */ u("div", {
236
- className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
237
- children: /* @__PURE__ */ u("button", {
238
- onClick: () => G(e.key),
239
- className: "text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5",
240
- children: "Clear Filter"
241
- })
242
- })
243
- ]
244
- })
245
- ]
246
- })
247
- }, e.key);
247
+ let t = !!e.children, n = Q(t ? e.children[0].key : e.key);
248
+ return /* @__PURE__ */ l("th", {
249
+ colSpan: t ? e.children.length : 1,
250
+ rowSpan: t ? 1 : U ? 2 : 1,
251
+ draggable: !t,
252
+ onDragStart: (n) => !t && I(n, e.key),
253
+ className: `align-middle text-[12px] p-2 border-r border-slate-100/60 bg-slate-50/90 relative ${t ? "text-center font-bold text-slate-500" : "text-left font-semibold text-slate-600 px-4 cursor-grab active:cursor-grabbing"} ${n.className} ${e.headerClassName || ""}`,
254
+ style: n.style,
255
+ children: t ? /* @__PURE__ */ l("div", {
256
+ className: "flex items-center justify-center min-h-[28px]",
257
+ children: /* @__PURE__ */ l("span", {
258
+ className: "truncate tracking-wide uppercase text-[11px] text-slate-400 font-extrabold",
259
+ children: e.header
260
+ })
261
+ }) : $(e, !1)
262
+ }, e.key || e.header);
248
263
  }),
249
- h && /* @__PURE__ */ u("th", {
250
- className: "h-12 align-middle font-bold text-slate-500 text-[12px] w-[100px] px-4 text-right sticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)] bg-[var(--color-background-secondary,rgba(248,250,252,1))]",
251
- children: "Action"
264
+ m && /* @__PURE__ */ l("th", {
265
+ rowSpan: U ? 2 : 1,
266
+ className: "w-[100px] bg-white sticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)]"
252
267
  })
253
268
  ]
254
- })
255
- }), /* @__PURE__ */ u("tbody", {
269
+ }), U && /* @__PURE__ */ l("tr", {
270
+ className: "h-10",
271
+ children: V.map((e) => e.children ? e.children.map((e) => {
272
+ let t = T.includes(e.key), n = Q(e.key);
273
+ return /* @__PURE__ */ l("th", {
274
+ draggable: !0,
275
+ onDragStart: (t) => I(t, e.key),
276
+ className: `h-10 text-left align-middle text-slate-600 font-semibold text-[12px] px-4 border-r border-slate-100 relative cursor-grab active:cursor-grabbing bg-slate-50/50 ${n.className} ${t ? "z-30" : ""} ${e.headerClassName || ""}`,
277
+ style: n.style,
278
+ children: $(e, !0)
279
+ }, e.key);
280
+ }) : null)
281
+ })]
282
+ }), /* @__PURE__ */ l("tbody", {
256
283
  className: "divide-y divide-slate-100",
257
- children: g ? /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
258
- colSpan: V.length + +!!h + +(D.length > 0),
259
- className: "p-8 text-center text-slate-400 text-[12px] font-medium",
284
+ children: h ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
285
+ colSpan: H.length + +!!m + +(D.length > 0),
286
+ className: "p-8 text-center text-slate-400 text-[12px]",
260
287
  children: "Loading records..."
261
- }) }) : Y.length === 0 ? /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
262
- colSpan: V.length + +!!h + +(D.length > 0),
263
- className: "p-8 text-center text-slate-400 text-[12px] font-medium",
264
- children: "No records found matching criteria."
265
- }) }) : Y.map((n, r) => {
288
+ }) }) : Z.length === 0 ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
289
+ colSpan: H.length + +!!m + +(D.length > 0),
290
+ className: "p-8 text-center text-slate-400 text-[12px]",
291
+ children: "No records found."
292
+ }) }) : Z.map((n, r) => {
266
293
  if (n.isGroupRow) {
267
- let i = !!k[n.path], a = f.find((e) => e.key === n.groupKey);
268
- return /* @__PURE__ */ d("tr", {
269
- className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none",
270
- children: [/* @__PURE__ */ u("td", {
271
- className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50/90 border-r border-slate-100",
294
+ let i = !!k[n.path], a = d.find((e) => e.key === n.groupKey);
295
+ return /* @__PURE__ */ u("tr", {
296
+ className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors",
297
+ children: [/* @__PURE__ */ l("td", {
298
+ className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50 border-r border-slate-100",
272
299
  style: { paddingLeft: `${n.depth * 12 + 16}px` },
273
- children: /* @__PURE__ */ d("button", {
274
- onClick: () => J(n.path),
275
- className: "flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5",
300
+ children: /* @__PURE__ */ u("button", {
301
+ onClick: () => X(n.path),
302
+ className: "flex items-center gap-1.5 text-left",
276
303
  children: [
277
- u(i ? e : t, { className: "w-4 h-4 text-slate-500" }),
278
- /* @__PURE__ */ d("span", {
279
- className: "text-slate-400 font-normal text-[11px] uppercase tracking-wider",
304
+ l(i ? e : t, { className: "w-4 h-4 text-slate-500" }),
305
+ /* @__PURE__ */ u("span", {
306
+ className: "text-slate-400 font-normal text-[11px] uppercase",
280
307
  children: [a?.header || n.groupKey, ":"]
281
308
  }),
282
- /* @__PURE__ */ u("span", {
309
+ /* @__PURE__ */ l("span", {
283
310
  className: "text-slate-800 font-bold",
284
311
  children: n.groupValue
285
312
  }),
286
- /* @__PURE__ */ u("span", {
287
- className: "bg-slate-200/70 text-slate-600 font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1",
313
+ /* @__PURE__ */ l("span", {
314
+ className: "bg-slate-200/70 text-slate-600 text-[10px] px-1.5 py-0.2 rounded-full ml-1",
288
315
  children: n.totalItemsCount
289
316
  })
290
317
  ]
291
318
  })
292
- }), /* @__PURE__ */ u("td", {
293
- colSpan: V.length + +!!h,
319
+ }), /* @__PURE__ */ l("td", {
320
+ colSpan: H.length + +!!m,
294
321
  className: "bg-slate-50/30"
295
322
  })]
296
323
  }, `group-header-${n.path}-${r}`);
297
324
  }
298
- return /* @__PURE__ */ d("tr", {
325
+ return /* @__PURE__ */ u("tr", {
299
326
  className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
300
327
  children: [
301
- D.length > 0 && /* @__PURE__ */ u("td", { className: "w-12 bg-white sticky left-0 z-10 border-r border-slate-100" }),
302
- V.map((e) => {
303
- let t = n[e.key], r = X(e, "td"), i = T.includes(e.key);
304
- return /* @__PURE__ */ u("td", {
305
- className: `p-4 align-middle py-1 px-4 transition-colors ${r.className} ${i ? "group-hover:bg-slate-100/90" : ""}`,
328
+ D.length > 0 && /* @__PURE__ */ l("td", { className: "w-12 bg-white sticky left-0 z-10 border-r border-slate-100" }),
329
+ H.map((e) => {
330
+ let t = n[e.key], r = Q(e.key);
331
+ return /* @__PURE__ */ l("td", {
332
+ className: `p-4 align-middle py-1 px-4 text-[12px] text-slate-600 font-medium ${r.className} ${e.className || ""}`,
306
333
  style: r.style,
307
- children: e.render ? e.render(t, n) : /* @__PURE__ */ u("span", {
308
- className: "text-[12px] text-slate-600 font-medium truncate block",
334
+ children: e.render ? e.render(t, n) : /* @__PURE__ */ l("span", {
335
+ className: "truncate block",
309
336
  children: t
310
337
  })
311
338
  }, e.key);
312
339
  }),
313
- h && /* @__PURE__ */ u("td", {
340
+ m && /* @__PURE__ */ l("td", {
314
341
  className: "p-4 align-middle py-1 px-4 text-right bg-white sticky right-0 z-20 shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80",
315
- children: /* @__PURE__ */ u("div", {
316
- className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
317
- children: h(n)
342
+ children: /* @__PURE__ */ l("div", {
343
+ className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
344
+ children: m(n)
318
345
  })
319
346
  })
320
347
  ]
@@ -326,4 +353,4 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
326
353
  });
327
354
  }
328
355
  //#endregion
329
- export { f as DataTable };
356
+ export { d as DataTable };
package/dist/index.umd.js CHANGED
@@ -1 +1 @@
1
- (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function i({columns:e,data:i,rowKey:a,actions:o,isLoading:s,onPinChange:c,onGroupChange:l}){let[u,d]=(0,n.useState)(null),[f,p]=(0,n.useState)({}),[m,h]=(0,n.useState)(``),[g,_]=(0,n.useState)(e.filter(e=>e.pinned).map(e=>e.key)),[v,y]=(0,n.useState)([]),[b,x]=(0,n.useState)({}),[S,C]=(0,n.useState)(!1),w=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){w.current&&!w.current.contains(e.target)&&(d(null),h(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let T=e=>typeof a==`function`?a(e):String(e[a]),E=e=>{let t=g.includes(e);_(t?g.filter(t=>t!==e):[...g,e]),c&&c(e,!t)},D=(e,t)=>{e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},O=e=>{e.preventDefault(),C(!0)},k=()=>{C(!1)},A=e=>{e.preventDefault(),C(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!v.includes(t)){let e=[...v,t];y(e),l&&l(e)}},j=e=>{let t=v.filter(t=>t!==e);y(t),x({}),l&&l(t)},M=(0,n.useMemo)(()=>{let t=e.filter(e=>!v.includes(e.key)),n=t.filter(e=>g.includes(e.key)),r=t.filter(e=>!g.includes(e.key));return[...n,...r]},[e,g,v]),N=(0,n.useMemo)(()=>{let e={},t=0;return v.length>0&&(t+=48),M.forEach(n=>{if(g.includes(n.key)){e[n.key]=t;let r=typeof n.width==`number`?n.width:parseInt(String(n.width||`150`));t+=isNaN(r)?150:r}}),e},[M,g,v]),P=(0,n.useMemo)(()=>{if(!u)return[];let e=i.map(e=>e[u]),t=Array.from(new Set(e)).filter(e=>e!=null);return m.trim()?t.filter(e=>String(e).toLowerCase().includes(m.toLowerCase())):t},[i,u,m]),F=(e,t)=>{p(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},I=e=>{p(t=>{let n={...t};return delete n[e],n})},L=(0,n.useMemo)(()=>i.filter(e=>Object.entries(f).every(([t,n])=>!n||n.length===0?!0:n.includes(e[t]))),[i,f]),R=(0,n.useMemo)(()=>{if(v.length===0)return L;let e=(t,n,r=``)=>{if(n>=v.length)return t;let i=v[n],a={};return t.forEach(e=>{let t=String(e[i]??`N/A`);a[t]||(a[t]=[]),a[t].push(e)}),Object.entries(a).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(L,0)},[L,v]),z=e=>{x(t=>({...t,[e]:!t[e]}))},B=(0,n.useMemo)(()=>{if(v.length===0)return R;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),b[n.path]&&t(n.children)):e.push(n)})};return t(R),e},[R,b,v]),V=(e,t)=>{let n=g.includes(e.key),r={width:e.width,minWidth:e.width||(n?`150px`:void 0),maxWidth:e.width||(n?`150px`:void 0)},i=t===`td`?e.cellStyle:{};return n?{className:`sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] ${e.className||``}`,style:{left:`${N[e.key]}px`,...r,...i}}:{className:e.className||``,style:{...r,...i}}};return(0,r.jsxs)(`div`,{className:`w-full space-y-3`,children:[(0,r.jsx)(`div`,{onDragOver:O,onDragLeave:k,onDrop:A,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${S?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:v.length===0?(0,r.jsx)(`span`,{className:`text-[12px] text-slate-400 font-medium select-none`,children:`Drag a column header here to group your records by that field`}):(0,r.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-[11px] font-bold uppercase tracking-wider text-slate-400 mr-1`,children:`Grouped By:`}),v.map(n=>(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-slate-600 animate-in fade-in zoom-in-95 duration-150`,children:[(0,r.jsx)(`span`,{children:e.find(e=>e.key===n)?.header||n}),(0,r.jsx)(`button`,{onClick:()=>j(n),className:`p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors`,children:(0,r.jsx)(t.X,{className:`w-3 h-3`})})]},n))]})}),(0,r.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,children:(0,r.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,children:[(0,r.jsx)(`thead`,{className:`bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none`,children:(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-10`,children:[v.length>0&&(0,r.jsx)(`th`,{className:`w-12 h-12 sticky left-0 z-30 bg-slate-50/90 border-r border-slate-100`}),M.map(e=>{let n=(f[e.key]?.length||0)>0,i=g.includes(e.key),a=V(e,`th`);return(0,r.jsx)(`th`,{draggable:!0,onDragStart:t=>D(t,e.key),className:`h-12 text-left align-middle text-slate-500 font-bold text-[12px] px-4 relative cursor-grab active:cursor-grabbing ${a.className} ${i?`bg-slate-50/90 z-30`:``}`,style:a.style,children:(0,r.jsxs)(`div`,{className:`flex items-center justify-between gap-1 group/header`,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 truncate`,children:[(0,r.jsx)(t.GripVertical,{className:`w-3 h-3 text-slate-300 opacity-0 group-hover/header:opacity-100 transition-opacity flex-shrink-0`}),(0,r.jsx)(`span`,{className:`truncate`,children:e.header}),e.filterable&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),h(``),d(u===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors flex-shrink-0 text-[11px] font-semibold ${n?`text-blue-600`:`text-slate-400 opacity-0 group-hover/header:opacity-100`}`,children:`Filter`})]}),(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),E(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors flex-shrink-0 opacity-0 group-hover/header:opacity-100 ${i?`text-blue-500 opacity-100`:`text-slate-300`}`,title:i?`Unpin column`:`Pin column`,children:i?(0,r.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.Pin,{className:`w-3.5 h-3.5`})}),u===e.key&&(0,r.jsxs)(`div`,{ref:w,className:`absolute left-4 top-10 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700`,children:[(0,r.jsx)(`div`,{className:`px-2 pb-2 mb-1 border-b border-slate-100`,children:(0,r.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:m,onChange:e=>h(e.target.value),className:`w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500 font-medium text-slate-600`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`max-h-40 overflow-y-auto px-2 space-y-1`,children:P.length===0?(0,r.jsx)(`div`,{className:`text-[11px] text-slate-400 p-2 text-center`,children:`No results found`}):P.map((t,n)=>(0,r.jsxs)(`label`,{className:`flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5`,checked:f[e.key]?.includes(t)||!1,onChange:()=>F(e.key,t)}),(0,r.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),n&&(0,r.jsx)(`div`,{className:`border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end`,children:(0,r.jsx)(`button`,{onClick:()=>I(e.key),className:`text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5`,children:`Clear Filter`})})]})]})},e.key)}),o&&(0,r.jsx)(`th`,{className:`h-12 align-middle font-bold text-slate-500 text-[12px] w-[100px] px-4 text-right sticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)] bg-[var(--color-background-secondary,rgba(248,250,252,1))]`,children:`Action`})]})}),(0,r.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:s?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:M.length+ +!!o+ +(v.length>0),className:`p-8 text-center text-slate-400 text-[12px] font-medium`,children:`Loading records...`})}):B.length===0?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:M.length+ +!!o+ +(v.length>0),className:`p-8 text-center text-slate-400 text-[12px] font-medium`,children:`No records found matching criteria.`})}):B.map((n,i)=>{if(n.isGroupRow){let a=!!b[n.path],s=e.find(e=>e.key===n.groupKey);return(0,r.jsxs)(`tr`,{className:`bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none`,children:[(0,r.jsx)(`td`,{className:`p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50/90 border-r border-slate-100`,style:{paddingLeft:`${n.depth*12+16}px`},children:(0,r.jsxs)(`button`,{onClick:()=>z(n.path),className:`flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5`,children:[a?(0,r.jsx)(t.ChevronDown,{className:`w-4 h-4 text-slate-500`}):(0,r.jsx)(t.ChevronRight,{className:`w-4 h-4 text-slate-500`}),(0,r.jsxs)(`span`,{className:`text-slate-400 font-normal text-[11px] uppercase tracking-wider`,children:[s?.header||n.groupKey,`:`]}),(0,r.jsx)(`span`,{className:`text-slate-800 font-bold`,children:n.groupValue}),(0,r.jsx)(`span`,{className:`bg-slate-200/70 text-slate-600 font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:n.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:M.length+ +!!o,className:`bg-slate-50/30`})]},`group-header-${n.path}-${i}`)}return(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[v.length>0&&(0,r.jsx)(`td`,{className:`w-12 bg-white sticky left-0 z-10 border-r border-slate-100`}),M.map(e=>{let t=n[e.key],i=V(e,`td`),a=g.includes(e.key);return(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 transition-colors ${i.className} ${a?`group-hover:bg-slate-100/90`:``}`,style:i.style,children:e.render?e.render(t,n):(0,r.jsx)(`span`,{className:`text-[12px] text-slate-600 font-medium truncate block`,children:t})},e.key)}),o&&(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white sticky right-0 z-20 shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,children:(0,r.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150`,children:o(n)})})]},T(n))})})]})})]})}e.DataTable=i});
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function i({columns:e,data:i,rowKey:a,actions:o,isLoading:s,onPinChange:c,onGroupChange:l,groupBy:u}){let[d,f]=(0,n.useState)(null),[p,m]=(0,n.useState)({}),[h,g]=(0,n.useState)(``),[_,v]=(0,n.useState)((0,n.useMemo)(()=>{let t=[],n=e=>{e.forEach(e=>{e.children?n(e.children):e.pinned&&e.key&&t.push(e.key)})};return n(e),t},[e])),[y,b]=(0,n.useState)([]),[x,S]=(0,n.useState)({}),[C,w]=(0,n.useState)(!1),T=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){T.current&&!T.current.contains(e.target)&&(f(null),g(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let E=e=>typeof a==`function`?a(e):String(e[a]),D=e=>{let t=_.includes(e);v(t?_.filter(t=>t!==e):[..._,e]),c&&c(e,!t)},O=(e,t)=>{e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},k=e=>{e.preventDefault(),w(!0)},A=()=>{w(!1)},j=e=>{e.preventDefault(),w(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!y.includes(t)){let e=[...y,t];b(e),l&&l(e)}},M=e=>{let t=y.filter(t=>t!==e);b(t),S({}),l&&l(t)},N=(0,n.useMemo)(()=>{let t=e.filter(e=>!y.includes(e.key||``)),n=[],r=[];return t.forEach(e=>{e.children?e.children.some(e=>_.includes(e.key||``))?n.push(e):r.push(e):_.includes(e.key||``)?n.push(e):r.push(e)}),[...n,...r]},[e,_,y]),P=(0,n.useMemo)(()=>{let e=[],t=n=>{n.forEach(n=>{n.children?t(n.children):e.push(n)})};return t(N),e},[N]),F=(0,n.useMemo)(()=>e.some(e=>e.children&&e.children.length>0),[e]),I=(0,n.useMemo)(()=>{let e={},t=0;return y.length>0&&(t+=48),P.forEach(n=>{n.key&&_.includes(n.key)&&(e[n.key]=t,t+=150)}),e},[P,_,y]),L=(0,n.useMemo)(()=>{if(!d)return[];let e=i.map(e=>e[d]),t=Array.from(new Set(e)).filter(e=>e!=null);return h.trim()?t.filter(e=>String(e).toLowerCase().includes(h.toLowerCase())):t},[i,d,h]),R=(e,t)=>{m(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},z=e=>{m(t=>{let n={...t};return delete n[e],n})},B=(0,n.useMemo)(()=>i.filter(e=>Object.entries(p).every(([t,n])=>!n||n.length===0?!0:n.includes(e[t]))),[i,p]),V=(0,n.useMemo)(()=>{if(y.length===0)return B;let e=(t,n,r=``)=>{if(n>=y.length)return t;let i=y[n],a={};return t.forEach(e=>{let t=String(e[i]??`N/A`);a[t]||(a[t]=[]),a[t].push(e)}),Object.entries(a).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(B,0)},[B,y]),H=e=>{S(t=>({...t,[e]:!t[e]}))},U=(0,n.useMemo)(()=>{if(y.length===0)return V;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),x[n.path]&&t(n.children)):e.push(n)})};return t(V),e},[V,x,y]),W=e=>_.includes(e)?{className:`sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]`,style:{left:`${I[e]}px`,minWidth:`150px`,maxWidth:`150px`}}:{className:``,style:{}},G=(e,n)=>{if(!e.key)return(0,r.jsx)(`span`,{className:`truncate`,children:e.header});let i=(p[e.key]?.length||0)>0,a=_.includes(e.key);return(0,r.jsxs)(`div`,{className:`flex items-center justify-between gap-1 group/header w-full ${e.headerClassName}`,children:[(0,r.jsx)(`div`,{className:`truncate`,children:e.header}),e.filterable||!n&&(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.filterable&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),g(``),f(d===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors ${i?`text-blue-600`:`text-slate-400 opacity-0 group-hover/header:opacity-100`}`,children:`Filter`}),!n&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),D(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${a?`text-blue-500 opacity-100`:`text-slate-300`}`,children:a?(0,r.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.Pin,{className:`w-3.5 h-3.5`})})]}),d===e.key&&(0,r.jsxs)(`div`,{ref:T,className:`absolute left-4 top-9 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700`,children:[(0,r.jsx)(`div`,{className:`px-2 pb-2 mb-1 border-b border-slate-100`,children:(0,r.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:h,onChange:e=>g(e.target.value),className:`w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`max-h-40 overflow-y-auto px-2 space-y-1`,children:L.length===0?(0,r.jsx)(`div`,{className:`text-[11px] text-slate-400 p-2 text-center`,children:`No results found`}):L.map((t,n)=>(0,r.jsxs)(`label`,{className:`flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`rounded text-blue-600 w-3.5 h-3.5`,checked:p[e.key]?.includes(t)||!1,onChange:()=>R(e.key,t)}),(0,r.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),i&&(0,r.jsx)(`div`,{className:`border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end`,children:(0,r.jsx)(`button`,{onClick:()=>z(e.key),className:`text-[11px] text-red-500 hover:underline`,children:`Clear`})})]})]})};return(0,r.jsxs)(`div`,{className:`w-full space-y-3`,children:[u&&(0,r.jsx)(`div`,{onDragOver:k,onDragLeave:A,onDrop:j,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${C?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:y.length===0?(0,r.jsx)(`span`,{className:`text-[12px] text-slate-400 font-medium select-none`,children:`Drag a column header here to group your records by that field`}):(0,r.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-[11px] font-bold uppercase tracking-wider text-slate-400 mr-1`,children:`Grouped By:`}),y.map(n=>(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-slate-600`,children:[(0,r.jsx)(`span`,{children:e.find(e=>e.key===n)?.header||n}),(0,r.jsx)(`button`,{onClick:()=>M(n),className:`p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors`,children:(0,r.jsx)(t.X,{className:`w-3 h-3`})})]},n))]})}),(0,r.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,children:(0,r.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,children:[(0,r.jsxs)(`thead`,{className:`bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none border-b border-slate-200`,children:[(0,r.jsxs)(`tr`,{className:`border-b border-slate-100`,children:[y.length>0&&(0,r.jsx)(`th`,{rowSpan:F?2:1,className:`w-12 sticky left-0 z-40 bg-slate-50 border-r border-slate-100`}),N.map(e=>{let t=!!e.children,n=W(t?e.children[0].key:e.key);return(0,r.jsx)(`th`,{colSpan:t?e.children.length:1,rowSpan:t?1:F?2:1,draggable:!t,onDragStart:n=>!t&&O(n,e.key),className:`align-middle text-[12px] p-2 border-r border-slate-100/60 bg-slate-50/90 relative ${t?`text-center font-bold text-slate-500`:`text-left font-semibold text-slate-600 px-4 cursor-grab active:cursor-grabbing`} ${n.className} ${e.headerClassName||``}`,style:n.style,children:t?(0,r.jsx)(`div`,{className:`flex items-center justify-center min-h-[28px]`,children:(0,r.jsx)(`span`,{className:`truncate tracking-wide uppercase text-[11px] text-slate-400 font-extrabold`,children:e.header})}):G(e,!1)},e.key||e.header)}),o&&(0,r.jsx)(`th`,{rowSpan:F?2:1,className:`w-[100px] bg-white sticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)]`})]}),F&&(0,r.jsx)(`tr`,{className:`h-10`,children:N.map(e=>e.children?e.children.map(e=>{let t=_.includes(e.key),n=W(e.key);return(0,r.jsx)(`th`,{draggable:!0,onDragStart:t=>O(t,e.key),className:`h-10 text-left align-middle text-slate-600 font-semibold text-[12px] px-4 border-r border-slate-100 relative cursor-grab active:cursor-grabbing bg-slate-50/50 ${n.className} ${t?`z-30`:``} ${e.headerClassName||``}`,style:n.style,children:G(e,!0)},e.key)}):null)})]}),(0,r.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:s?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:P.length+ +!!o+ +(y.length>0),className:`p-8 text-center text-slate-400 text-[12px]`,children:`Loading records...`})}):U.length===0?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:P.length+ +!!o+ +(y.length>0),className:`p-8 text-center text-slate-400 text-[12px]`,children:`No records found.`})}):U.map((n,i)=>{if(n.isGroupRow){let a=!!x[n.path],s=e.find(e=>e.key===n.groupKey);return(0,r.jsxs)(`tr`,{className:`bg-slate-50/60 hover:bg-slate-100/80 transition-colors`,children:[(0,r.jsx)(`td`,{className:`p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50 border-r border-slate-100`,style:{paddingLeft:`${n.depth*12+16}px`},children:(0,r.jsxs)(`button`,{onClick:()=>H(n.path),className:`flex items-center gap-1.5 text-left`,children:[a?(0,r.jsx)(t.ChevronDown,{className:`w-4 h-4 text-slate-500`}):(0,r.jsx)(t.ChevronRight,{className:`w-4 h-4 text-slate-500`}),(0,r.jsxs)(`span`,{className:`text-slate-400 font-normal text-[11px] uppercase`,children:[s?.header||n.groupKey,`:`]}),(0,r.jsx)(`span`,{className:`text-slate-800 font-bold`,children:n.groupValue}),(0,r.jsx)(`span`,{className:`bg-slate-200/70 text-slate-600 text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:n.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:P.length+ +!!o,className:`bg-slate-50/30`})]},`group-header-${n.path}-${i}`)}return(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[y.length>0&&(0,r.jsx)(`td`,{className:`w-12 bg-white sticky left-0 z-10 border-r border-slate-100`}),P.map(e=>{let t=n[e.key],i=W(e.key);return(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-[12px] text-slate-600 font-medium ${i.className} ${e.className||``}`,style:i.style,children:e.render?e.render(t,n):(0,r.jsx)(`span`,{className:`truncate block`,children:t})},e.key)}),o&&(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white sticky right-0 z-20 shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,children:(0,r.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity`,children:o(n)})})]},E(n))})})]})})]})}e.DataTable=i});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flexi-datagrid",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "A powerful universal datagrid with tree-grouping, column pinning, and drag-and-drop.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.umd.js",