flexi-datagrid 1.0.5 → 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 +5 -2
  2. package/dist/flexi-datagrid.css +1 -1
  3. package/dist/index.es.js +211 -170
  4. package/dist/index.umd.js +1 -1
  5. package/package.json +1 -1
package/dist/DataTable.d.ts CHANGED
@@ -1,11 +1,13 @@
1
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
+ headerClassName?: string;
6
7
  render?: (value: any, record: T) => ReactNode;
7
8
  filterable?: boolean;
8
9
  pinned?: boolean;
10
+ children?: ColumnConfig<T>[];
9
11
  }
10
12
  interface DataTableProps<T> {
11
13
  columns: ColumnConfig<T>[];
@@ -15,6 +17,7 @@ interface DataTableProps<T> {
15
17
  isLoading?: boolean;
16
18
  onPinChange?: (columnKey: string, isPinned: boolean) => void;
17
19
  onGroupChange?: (groupedKeys: string[]) => void;
20
+ groupBy?: boolean;
18
21
  }
19
- 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;
20
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}.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%}.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-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,36 +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
- T.includes(n.key) && (e[n.key] = t, t += 150);
57
+ return D.length > 0 && (t += 48), H.forEach((n) => {
58
+ n.key && T.includes(n.key) && (e[n.key] = t, t += 150);
43
59
  }), e;
44
60
  }, [
45
- V,
61
+ H,
46
62
  T,
47
63
  D
48
- ]), U = s(() => {
64
+ ]), G = o(() => {
49
65
  if (!y) return [];
50
- 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);
51
67
  return C.trim() ? t.filter((e) => String(e).toLowerCase().includes(C.toLowerCase())) : t;
52
68
  }, [
53
- p,
69
+ f,
54
70
  y,
55
71
  C
56
- ]), W = (e, t) => {
72
+ ]), K = (e, t) => {
57
73
  S((n) => {
58
74
  let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
59
75
  ...n,
@@ -61,13 +77,13 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
61
77
  };
62
78
  return a[e].length === 0 && delete a[e], a;
63
79
  });
64
- }, G = (e) => {
80
+ }, q = (e) => {
65
81
  S((t) => {
66
82
  let n = { ...t };
67
83
  return delete n[e], n;
68
84
  });
69
- }, K = s(() => p.filter((e) => Object.entries(x).every(([t, n]) => !n || n.length === 0 ? !0 : n.includes(e[t]))), [p, x]), q = s(() => {
70
- 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;
71
87
  let e = (t, n, r = "") => {
72
88
  if (n >= D.length) return t;
73
89
  let i = D[n], a = {};
@@ -87,220 +103,245 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
87
103
  };
88
104
  });
89
105
  };
90
- return e(K, 0);
91
- }, [K, D]), J = (e) => {
106
+ return e(J, 0);
107
+ }, [J, D]), X = (e) => {
92
108
  A((t) => ({
93
109
  ...t,
94
110
  [e]: !t[e]
95
111
  }));
96
- }, Y = s(() => {
97
- if (D.length === 0) return q;
112
+ }, Z = o(() => {
113
+ if (D.length === 0) return Y;
98
114
  let e = [], t = (n) => {
99
115
  n.forEach((n) => {
100
116
  n.isGroupRow ? (e.push(n), k[n.path] && t(n.children)) : e.push(n);
101
117
  });
102
118
  };
103
- return t(q), e;
119
+ return t(Y), e;
104
120
  }, [
105
- q,
121
+ Y,
106
122
  k,
107
123
  D
108
- ]), X = (e) => T.includes(e) ? {
124
+ ]), Q = (e) => T.includes(e) ? {
109
125
  className: "sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]",
110
126
  style: {
111
- left: `${H[e]}px`,
127
+ left: `${W[e]}px`,
112
128
  minWidth: "150px",
113
129
  maxWidth: "150px"
114
130
  }
115
131
  } : {
116
132
  className: "",
117
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
+ });
118
208
  };
119
- return /* @__PURE__ */ d("div", {
209
+ return /* @__PURE__ */ u("div", {
120
210
  className: "w-full space-y-3",
121
- children: [/* @__PURE__ */ u("div", {
211
+ children: [v && /* @__PURE__ */ l("div", {
122
212
  onDragOver: L,
123
213
  onDragLeave: R,
124
214
  onDrop: z,
125
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"}`,
126
- children: D.length === 0 ? /* @__PURE__ */ u("span", {
216
+ children: D.length === 0 ? /* @__PURE__ */ l("span", {
127
217
  className: "text-[12px] text-slate-400 font-medium select-none",
128
218
  children: "Drag a column header here to group your records by that field"
129
- }) : /* @__PURE__ */ d("div", {
219
+ }) : /* @__PURE__ */ u("div", {
130
220
  className: "flex flex-wrap items-center gap-1.5",
131
- children: [/* @__PURE__ */ u("span", {
221
+ children: [/* @__PURE__ */ l("span", {
132
222
  className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 mr-1",
133
223
  children: "Grouped By:"
134
- }), D.map((e) => /* @__PURE__ */ d("div", {
135
- 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",
136
- 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", {
137
227
  onClick: () => B(e),
138
228
  className: "p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors",
139
- children: /* @__PURE__ */ u(a, { className: "w-3 h-3" })
229
+ children: /* @__PURE__ */ l(i, { className: "w-3 h-3" })
140
230
  })]
141
231
  }, e))]
142
232
  })
143
- }), /* @__PURE__ */ u("div", {
233
+ }), /* @__PURE__ */ l("div", {
144
234
  className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
145
- children: /* @__PURE__ */ d("table", {
235
+ children: /* @__PURE__ */ u("table", {
146
236
  className: "w-full caption-bottom text-sm border-collapse table-fixed",
147
237
  children: [/* @__PURE__ */ u("thead", {
148
- className: "bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none",
149
- children: /* @__PURE__ */ d("tr", {
150
- 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",
151
241
  children: [
152
- 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
+ }),
153
246
  V.map((e) => {
154
- let t = (x[e.key]?.length || 0) > 0, a = T.includes(e.key), o = X(e.key);
155
- return /* @__PURE__ */ u("th", {
156
- draggable: !0,
157
- onDragStart: (t) => I(t, e.key),
158
- 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" : ""} ${e.className || ""}`,
159
- style: o.style,
160
- children: /* @__PURE__ */ d("div", {
161
- className: "flex items-center justify-between gap-1 group/header",
162
- children: [
163
- /* @__PURE__ */ d("div", {
164
- className: "flex items-center gap-1.5 truncate",
165
- children: [
166
- /* @__PURE__ */ u(n, { className: "w-3 h-3 text-slate-300 opacity-0 group-hover/header:opacity-100 transition-opacity" }),
167
- /* @__PURE__ */ u("span", {
168
- className: "truncate",
169
- children: e.header
170
- }),
171
- e.filterable && /* @__PURE__ */ u("button", {
172
- onClick: (t) => {
173
- t.stopPropagation(), w(""), b(y === e.key ? null : e.key);
174
- },
175
- className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${t ? "text-blue-600" : "text-slate-400 opacity-0 group-hover/header:opacity-100"}`,
176
- children: "Filter"
177
- })
178
- ]
179
- }),
180
- /* @__PURE__ */ u("button", {
181
- onClick: (t) => {
182
- t.stopPropagation(), F(e.key);
183
- },
184
- 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"}`,
185
- title: a ? "Unpin column" : "Pin column",
186
- children: u(a ? i : r, { className: "w-3.5 h-3.5" })
187
- }),
188
- y === e.key && /* @__PURE__ */ d("div", {
189
- ref: N,
190
- 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",
191
- children: [
192
- /* @__PURE__ */ u("div", {
193
- className: "px-2 pb-2 mb-1 border-b border-slate-100",
194
- children: /* @__PURE__ */ u("input", {
195
- type: "text",
196
- placeholder: "Search values...",
197
- value: C,
198
- onChange: (e) => w(e.target.value),
199
- 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",
200
- onClick: (e) => e.stopPropagation()
201
- })
202
- }),
203
- /* @__PURE__ */ u("div", {
204
- className: "max-h-40 overflow-y-auto px-2 space-y-1",
205
- children: U.length === 0 ? /* @__PURE__ */ u("div", {
206
- className: "text-[11px] text-slate-400 p-2 text-center",
207
- children: "No results found"
208
- }) : U.map((t, n) => /* @__PURE__ */ d("label", {
209
- className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none",
210
- children: [/* @__PURE__ */ u("input", {
211
- type: "checkbox",
212
- className: "rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5",
213
- checked: x[e.key]?.includes(t) || !1,
214
- onChange: () => W(e.key, t)
215
- }), /* @__PURE__ */ u("span", {
216
- className: "truncate",
217
- children: String(t)
218
- })]
219
- }, n))
220
- }),
221
- t && /* @__PURE__ */ u("div", {
222
- className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
223
- children: /* @__PURE__ */ u("button", {
224
- onClick: () => G(e.key),
225
- className: "text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5",
226
- children: "Clear Filter"
227
- })
228
- })
229
- ]
230
- })
231
- ]
232
- })
233
- }, 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);
234
263
  }),
235
- h && /* @__PURE__ */ u("th", {
236
- className: "h-12 align-middle font-bold text-slate-500 text-[12px] w-[100px] px-4 text-rightsticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)]",
237
- 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)]"
238
267
  })
239
268
  ]
240
- })
241
- }), /* @__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", {
242
283
  className: "divide-y divide-slate-100",
243
- children: g ? /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
244
- colSpan: V.length + +!!h + +(D.length > 0),
245
- 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]",
246
287
  children: "Loading records..."
247
- }) }) : Y.length === 0 ? /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
248
- colSpan: V.length + +!!h + +(D.length > 0),
249
- className: "p-8 text-center text-slate-400 text-[12px] font-medium",
250
- children: "No records found matching criteria."
251
- }) }) : 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) => {
252
293
  if (n.isGroupRow) {
253
- let i = !!k[n.path], a = f.find((e) => e.key === n.groupKey);
254
- return /* @__PURE__ */ d("tr", {
255
- className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none",
256
- children: [/* @__PURE__ */ u("td", {
257
- 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",
258
299
  style: { paddingLeft: `${n.depth * 12 + 16}px` },
259
- children: /* @__PURE__ */ d("button", {
260
- onClick: () => J(n.path),
261
- 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",
262
303
  children: [
263
- u(i ? e : t, { className: "w-4 h-4 text-slate-500" }),
264
- /* @__PURE__ */ d("span", {
265
- 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",
266
307
  children: [a?.header || n.groupKey, ":"]
267
308
  }),
268
- /* @__PURE__ */ u("span", {
309
+ /* @__PURE__ */ l("span", {
269
310
  className: "text-slate-800 font-bold",
270
311
  children: n.groupValue
271
312
  }),
272
- /* @__PURE__ */ u("span", {
273
- 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",
274
315
  children: n.totalItemsCount
275
316
  })
276
317
  ]
277
318
  })
278
- }), /* @__PURE__ */ u("td", {
279
- colSpan: V.length + +!!h,
319
+ }), /* @__PURE__ */ l("td", {
320
+ colSpan: H.length + +!!m,
280
321
  className: "bg-slate-50/30"
281
322
  })]
282
323
  }, `group-header-${n.path}-${r}`);
283
324
  }
284
- return /* @__PURE__ */ d("tr", {
325
+ return /* @__PURE__ */ u("tr", {
285
326
  className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
286
327
  children: [
287
- D.length > 0 && /* @__PURE__ */ u("td", { className: "w-12 bg-white sticky left-0 z-10 border-r border-slate-100" }),
288
- V.map((e) => {
289
- let t = n[e.key], r = X(e.key), i = T.includes(e.key);
290
- return /* @__PURE__ */ u("td", {
291
- className: `p-4 align-middle py-1 px-4 transition-colors ${r.className} ${i ? "group-hover:bg-slate-100" : ""} ${e.className || ""}`,
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 || ""}`,
292
333
  style: r.style,
293
- children: e.render ? e.render(t, n) : /* @__PURE__ */ u("span", {
294
- 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",
295
336
  children: t
296
337
  })
297
338
  }, e.key);
298
339
  }),
299
- h && /* @__PURE__ */ u("td", {
340
+ m && /* @__PURE__ */ l("td", {
300
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",
301
- children: /* @__PURE__ */ u("div", {
302
- className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
303
- 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)
304
345
  })
305
346
  })
306
347
  ]
@@ -312,4 +353,4 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
312
353
  });
313
354
  }
314
355
  //#endregion
315
- 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=>{g.includes(n.key)&&(e[n.key]=t,t+=150)}),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=>g.includes(e)?{className:`sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]`,style:{left:`${N[e]}px`,minWidth:`150px`,maxWidth:`150px`}}:{className:``,style:{}};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.key);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`:``} ${e.className||``}`,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`}),(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 ${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 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-rightsticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,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.key),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`:``} ${e.className||``}`,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.5",
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",