flexi-datagrid 1.0.6 → 1.1.0

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 +12 -3
  2. package/dist/flexi-datagrid.css +1 -1
  3. package/dist/index.es.js +382 -264
  4. package/dist/index.umd.js +1 -1
  5. package/package.json +1 -1
package/dist/DataTable.d.ts CHANGED
@@ -1,13 +1,18 @@
1
1
  import { type ReactNode, type CSSProperties } from 'react';
2
+ import React from 'react';
2
3
  export interface ColumnConfig<T> {
3
4
  key: string;
4
5
  header: string;
5
6
  className?: string;
6
- cellStyle?: CSSProperties;
7
- width?: string | number;
7
+ headerClassName?: string;
8
+ style?: CSSProperties;
9
+ headerStyle?: CSSProperties;
8
10
  render?: (value: any, record: T) => ReactNode;
9
11
  filterable?: boolean;
12
+ sortable?: boolean;
10
13
  pinned?: boolean;
14
+ children?: ColumnConfig<T>[];
15
+ getValue?: (record: T) => any;
11
16
  }
12
17
  interface DataTableProps<T> {
13
18
  columns: ColumnConfig<T>[];
@@ -15,8 +20,12 @@ interface DataTableProps<T> {
15
20
  rowKey: keyof T | ((record: T) => string);
16
21
  actions?: (record: T) => ReactNode;
17
22
  isLoading?: boolean;
23
+ groupBy?: boolean;
24
+ defaultGroupBy?: string[];
18
25
  onPinChange?: (columnKey: string, isPinned: boolean) => void;
19
26
  onGroupChange?: (groupedKeys: string[]) => void;
27
+ containerStyle?: CSSProperties;
28
+ tableStyle?: CSSProperties;
20
29
  }
21
- export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, onPinChange, onGroupChange }: DataTableProps<T>): import("react").JSX.Element;
30
+ export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, groupBy, defaultGroupBy, onPinChange, onGroupChange, containerStyle, tableStyle, }: DataTableProps<T>): React.JSX.Element;
22
31
  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}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-4{left:1rem}.top-10{top:2.5rem}.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-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-40{width:10rem}.w-52{width:13rem}.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-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-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-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-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/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}
2
2
  /*$vite$:1*/
package/dist/index.es.js CHANGED
@@ -1,84 +1,158 @@
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 { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronRight as i, Pin as a, PinOff as o, X as s } from "lucide-react";
2
+ import { useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
3
+ import { jsx as f, jsxs as p } 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
+ var m = (e) => {
6
+ let t = [];
7
+ return e.forEach((e) => {
8
+ e.children && e.children.length > 0 ? t.push(...m(e.children)) : t.push(e);
9
+ }), t;
10
+ };
11
+ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy: y = !1, defaultGroupBy: b = [], onPinChange: x, onGroupChange: S, containerStyle: C, tableStyle: te }) {
12
+ let [w, T] = d(null), [E, D] = d({}), [O, k] = d(""), [A, j] = d(b), [M, N] = d({}), [ne, P] = d(!1), [F, I] = d({
13
+ key: null,
14
+ direction: null
15
+ }), L = l(() => m(h), [h]), [R, z] = d(L.filter((e) => e.pinned).map((e) => e.key)), B = l(() => {
16
+ let e = (t) => [...t].sort((e, t) => {
17
+ let n = R.includes(e.key), r = R.includes(t.key);
18
+ return n && !r ? -1 : !n && r ? 1 : 0;
19
+ }).map((t) => t.children && t.children.length > 0 ? {
20
+ ...t,
21
+ children: e(t.children)
22
+ } : t);
23
+ return e(h);
24
+ }, [h, R]), V = l(() => {
25
+ let e = m(B), t = y ? A : [];
26
+ return e.filter((e) => !t.includes(e.key));
27
+ }, [
28
+ B,
29
+ A,
30
+ y
31
+ ]), H = u(null);
32
+ c(() => {
8
33
  function e(e) {
9
- N.current && !N.current.contains(e.target) && (b(null), w(""));
34
+ H.current && !H.current.contains(e.target) && (T(null), k(""));
10
35
  }
11
36
  return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
12
37
  }, []);
13
- let P = (e) => typeof m == "function" ? m(e) : String(e[m]), F = (e) => {
14
- let t = T.includes(e);
15
- E(t ? T.filter((t) => t !== e) : [...T, e]), _ && _(e, !t);
16
- }, I = (e, t) => {
17
- e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
18
- }, L = (e) => {
19
- e.preventDefault(), M(!0);
20
- }, R = () => {
21
- M(!1);
22
- }, z = (e) => {
23
- e.preventDefault(), M(!1);
38
+ let U = (e) => typeof _ == "function" ? _(e) : String(e[_]), W = (e) => {
39
+ let t = R.includes(e);
40
+ z(t ? R.filter((t) => t !== e) : [...R, e]), x && x(e, !t);
41
+ }, G = (e) => {
42
+ let t = "asc";
43
+ F.key === e && (t = F.direction === "asc" ? "desc" : F.direction === "desc" ? null : "asc"), I({
44
+ key: t ? e : null,
45
+ direction: t
46
+ });
47
+ }, K = (e, t) => {
48
+ y && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
49
+ }, re = (e) => {
50
+ e.preventDefault(), P(!1);
24
51
  let t = e.dataTransfer.getData("text/plain");
25
- if (t && !D.includes(t)) {
26
- let e = [...D, t];
27
- O(e), v && v(e);
52
+ if (t && !A.includes(t)) {
53
+ let e = [...A, t];
54
+ j(e), S && S(e);
28
55
  }
29
- }, B = (e) => {
30
- 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];
56
+ }, ie = (e) => {
57
+ let t = A.filter((t) => t !== e);
58
+ j(t), N({}), S && S(t);
59
+ }, q = l(() => {
60
+ let e = (t) => {
61
+ let n = 0;
62
+ return t.forEach((t) => {
63
+ n = t.children && t.children.length > 0 ? Math.max(n, 1 + e(t.children)) : Math.max(n, 1);
64
+ }), n;
65
+ }, t = e(B), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? A.includes(e.key) && y ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = y ? A : [], a = (e, o) => {
66
+ e.forEach((e) => {
67
+ if (i.includes(e.key)) return;
68
+ let s = r(e);
69
+ s !== 0 && (e.children && e.children.length > 0 ? (n[o].push({
70
+ col: e,
71
+ rowSpan: 1,
72
+ colSpan: s
73
+ }), a(e.children, o + 1)) : n[o].push({
74
+ col: e,
75
+ rowSpan: t - o,
76
+ colSpan: 1
77
+ }));
78
+ });
79
+ };
80
+ return a(B, 0), n.filter((e) => e.length > 0);
35
81
  }, [
36
- f,
37
- T,
38
- D
39
- ]), H = s(() => {
82
+ B,
83
+ A,
84
+ y
85
+ ]), ae = l(() => {
40
86
  let e = {}, t = 0;
41
- return D.length > 0 && (t += 48), V.forEach((n) => {
42
- if (T.includes(n.key)) {
87
+ return y && A.length > 0 && (t += 48), V.forEach((n) => {
88
+ if (R.includes(n.key)) {
43
89
  e[n.key] = t;
44
- let r = typeof n.width == "number" ? n.width : parseInt(String(n.width || "150"));
45
- t += isNaN(r) ? 150 : r;
90
+ let r = n.style?.width || n.headerStyle?.width || "150px";
91
+ t += typeof r == "number" ? r : parseInt(String(r), 10) || 150;
46
92
  }
47
93
  }), e;
48
94
  }, [
49
95
  V,
50
- T,
51
- D
52
- ]), U = s(() => {
53
- if (!y) return [];
54
- let e = p.map((e) => e[y]), t = Array.from(new Set(e)).filter((e) => e != null);
55
- return C.trim() ? t.filter((e) => String(e).toLowerCase().includes(C.toLowerCase())) : t;
56
- }, [
57
- p,
58
- y,
59
- C
60
- ]), W = (e, t) => {
61
- S((n) => {
96
+ R,
97
+ A,
98
+ y
99
+ ]), oe = (e, t) => {
100
+ D((n) => {
62
101
  let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
63
102
  ...n,
64
103
  [e]: i
65
104
  };
66
105
  return a[e].length === 0 && delete a[e], a;
67
106
  });
68
- }, G = (e) => {
69
- S((t) => {
107
+ }, se = (e) => {
108
+ D((t) => {
70
109
  let n = { ...t };
71
110
  return delete n[e], n;
72
111
  });
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;
112
+ }, J = l(() => {
113
+ if (!w) return [];
114
+ let e = L.find((e) => e.key === w), t = g.map((t) => e?.getValue ? e.getValue(t) : t[w]), n = Array.from(new Set(t)).filter((e) => e != null);
115
+ return O.trim() ? n.filter((e) => String(e).toLowerCase().includes(O.toLowerCase())) : n;
116
+ }, [
117
+ g,
118
+ w,
119
+ O,
120
+ L
121
+ ]), Y = l(() => {
122
+ let e = g.filter((e) => Object.entries(E).every(([t, n]) => {
123
+ if (!n || n.length === 0) return !0;
124
+ let r = L.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
125
+ return n.includes(i);
126
+ }));
127
+ if (F.key && F.direction) {
128
+ let { key: t, direction: n } = F, r = L.find((e) => e.key === t);
129
+ e = [...e].sort((e, i) => {
130
+ let a = r?.getValue ? r.getValue(e) : e[t], o = r?.getValue ? r.getValue(i) : i[t];
131
+ if (a === o) return 0;
132
+ if (a == null) return 1;
133
+ if (o == null) return -1;
134
+ let s = 0;
135
+ return s = typeof a == "number" && typeof o == "number" ? a - o : String(a).localeCompare(String(o), void 0, {
136
+ numeric: !0,
137
+ sensitivity: "base"
138
+ }), n === "asc" ? s : -s;
139
+ });
140
+ }
141
+ return e;
142
+ }, [
143
+ g,
144
+ E,
145
+ F,
146
+ L
147
+ ]), X = l(() => {
148
+ if (!y || A.length === 0) return Y;
75
149
  let e = (t, n, r = "") => {
76
- if (n >= D.length) return t;
77
- let i = D[n], a = {};
150
+ if (n >= A.length) return t;
151
+ let i = A[n], a = L.find((e) => e.key === i), o = {};
78
152
  return t.forEach((e) => {
79
- let t = String(e[i] ?? "N/A");
80
- a[t] || (a[t] = []), a[t].push(e);
81
- }), Object.entries(a).map(([t, a]) => {
153
+ let t = a?.getValue ? a.getValue(e) : e[i], n = String(t ?? "N/A");
154
+ o[n] || (o[n] = []), o[n].push(e);
155
+ }), Object.entries(o).map(([t, a]) => {
82
156
  let o = r ? `${r}➔${t}` : t;
83
157
  return {
84
158
  isGroupRow: !0,
@@ -91,239 +165,283 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
91
165
  };
92
166
  });
93
167
  };
94
- return e(K, 0);
95
- }, [K, D]), J = (e) => {
96
- A((t) => ({
97
- ...t,
98
- [e]: !t[e]
99
- }));
100
- }, Y = s(() => {
101
- if (D.length === 0) return q;
168
+ return e(Y, 0);
169
+ }, [
170
+ Y,
171
+ A,
172
+ y,
173
+ L
174
+ ]), ce = (e) => {
175
+ N((t) => {
176
+ let n = t[e] !== !1;
177
+ return {
178
+ ...t,
179
+ [e]: !n
180
+ };
181
+ });
182
+ }, Z = l(() => {
183
+ if (!y || A.length === 0) return X;
102
184
  let e = [], t = (n) => {
103
185
  n.forEach((n) => {
104
- n.isGroupRow ? (e.push(n), k[n.path] && t(n.children)) : e.push(n);
186
+ n.isGroupRow ? (e.push(n), M[n.path] !== !1 && t(n.children)) : e.push(n);
105
187
  });
106
188
  };
107
- return t(q), e;
189
+ return t(X), e;
108
190
  }, [
109
- q,
110
- k,
111
- 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
- };
132
- };
133
- return /* @__PURE__ */ d("div", {
191
+ X,
192
+ M,
193
+ A,
194
+ y
195
+ ]), Q = (e, t = !1, n) => R.includes(e) ? {
196
+ position: "sticky",
197
+ left: `${ae[e]}px`,
198
+ zIndex: t ? 30 : 20,
199
+ backgroundColor: "#fff",
200
+ boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)",
201
+ ...n
202
+ } : n || {}, $ = V.length + +!!v + (y && A.length > 0 ? 1 : 0);
203
+ return /* @__PURE__ */ p("div", {
134
204
  className: "w-full space-y-3",
135
- children: [/* @__PURE__ */ u("div", {
136
- onDragOver: L,
137
- onDragLeave: R,
138
- onDrop: z,
139
- 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", {
141
- className: "text-[12px] text-slate-400 font-medium select-none",
205
+ children: [y && /* @__PURE__ */ f("div", {
206
+ onDragOver: (e) => {
207
+ e.preventDefault(), P(!0);
208
+ },
209
+ onDragLeave: () => P(!1),
210
+ onDrop: re,
211
+ className: `w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${ne ? "border-blue-500 bg-blue-50/50 scale-[0.99]" : "border-dashed border-slate-200 bg-slate-50/50"}`,
212
+ children: A.length === 0 ? /* @__PURE__ */ f("span", {
213
+ className: "text-[12px] text-muted-foreground font-medium select-none",
142
214
  children: "Drag a column header here to group your records by that field"
143
- }) : /* @__PURE__ */ d("div", {
215
+ }) : /* @__PURE__ */ p("div", {
144
216
  className: "flex flex-wrap items-center gap-1.5",
145
- children: [/* @__PURE__ */ u("span", {
146
- className: "text-[11px] font-bold uppercase tracking-wider text-slate-400 mr-1",
217
+ children: [/* @__PURE__ */ f("span", {
218
+ className: "text-[11px] font-bold uppercase tracking-wider text-muted-foreground mr-1",
147
219
  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", {
151
- onClick: () => B(e),
152
- 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" })
220
+ }), A.map((e) => /* @__PURE__ */ p("div", {
221
+ 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-muted-foreground",
222
+ children: [/* @__PURE__ */ f("span", { children: L.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ f("button", {
223
+ onClick: () => ie(e),
224
+ className: "p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors",
225
+ children: /* @__PURE__ */ f(s, { className: "w-3 h-3" })
154
226
  })]
155
227
  }, e))]
156
228
  })
157
- }), /* @__PURE__ */ u("div", {
229
+ }), /* @__PURE__ */ f("div", {
158
230
  className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
159
- children: /* @__PURE__ */ d("table", {
231
+ style: C,
232
+ children: /* @__PURE__ */ p("table", {
160
233
  className: "w-full caption-bottom text-sm border-collapse table-fixed",
161
- 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",
165
- 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" }),
167
- 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", {
234
+ style: te,
235
+ children: [
236
+ /* @__PURE__ */ p("colgroup", { children: [
237
+ y && A.length > 0 && /* @__PURE__ */ f("col", { style: { width: "48px" } }),
238
+ V.map((e) => /* @__PURE__ */ f("col", { style: e.style }, e.key)),
239
+ v && /* @__PURE__ */ f("col", { style: { width: "100px" } })
240
+ ] }),
241
+ /* @__PURE__ */ f("thead", {
242
+ className: "bg-slate-50 select-none",
243
+ children: q.map((r, i) => /* @__PURE__ */ p("tr", {
244
+ className: "border-b border-slate-100",
245
+ children: [
246
+ i === 0 && y && A.length > 0 && /* @__PURE__ */ f("th", {
247
+ rowSpan: q.length,
248
+ className: "w-12 border-r border-slate-100",
249
+ style: {
250
+ position: "sticky",
251
+ left: 0,
252
+ zIndex: 35,
253
+ backgroundColor: "rgb(248, 250, 252)"
254
+ }
255
+ }),
256
+ r.map(({ col: r, rowSpan: i, colSpan: s }) => {
257
+ let c = (E[r.key]?.length || 0) > 0, l = R.includes(r.key), u = Q(r.key, !0, r.headerStyle), d = !r.children || r.children.length === 0, m = F.key === r.key;
258
+ return /* @__PURE__ */ f("th", {
259
+ rowSpan: i,
260
+ colSpan: s,
261
+ ...y && d ? {
262
+ draggable: !0,
263
+ onDragStart: (e) => K(e, r.key)
264
+ } : {},
265
+ className: `h-12 text-center align-middle font-bold text-[12px] px-4 border-r border-b border-slate-100 relative ${y && d ? "cursor-grab active:cursor-grabbing" : ""} ${l ? "bg-slate-50/90" : ""} ${r.className || ""}`,
266
+ style: u,
267
+ children: /* @__PURE__ */ p("div", {
268
+ className: "flex items-center gap-1 group/header w-full justify-between",
269
+ children: [
270
+ /* @__PURE__ */ p("div", {
271
+ className: `flex items-center gap-1.5 truncate w-full ${r.sortable && d ? "cursor-pointer select-none hover:text-blue-600" : ""}`,
272
+ onClick: () => r.sortable && d && G(r.key),
273
+ children: [/* @__PURE__ */ f("span", {
182
274
  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);
275
+ children: r.header
276
+ }), d && r.sortable && /* @__PURE__ */ f("span", {
277
+ className: `text-slate-400 transition-colors ${m ? "text-blue-600" : "opacity-0 group-hover/header:opacity-100"}`,
278
+ children: m && F.direction === "asc" ? /* @__PURE__ */ f(t, { className: "w-3.5 h-3.5" }) : m && F.direction === "desc" ? /* @__PURE__ */ f(e, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ f(n, { className: "w-3.5 h-3.5" })
279
+ })]
280
+ }),
281
+ /* @__PURE__ */ p("div", {
282
+ className: "flex items-center gap-1",
283
+ children: [d && r.filterable && /* @__PURE__ */ f("button", {
284
+ onClick: (e) => {
285
+ e.stopPropagation(), k(""), T(w === r.key ? null : r.key);
188
286
  },
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"}`,
287
+ className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${c ? "text-blue-600" : "text-muted-foreground opacity-0 group-hover/header:opacity-100"}`,
190
288
  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"
289
+ }), d && /* @__PURE__ */ f("button", {
290
+ onClick: (e) => {
291
+ e.stopPropagation(), W(r.key);
292
+ },
293
+ className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${l ? "text-blue-500 opacity-100" : "text-slate-300"}`,
294
+ title: l ? "Unpin column" : "Pin column",
295
+ children: f(l ? o : a, { className: "w-3.5 h-3.5" })
296
+ })]
297
+ }),
298
+ w === r.key && d && /* @__PURE__ */ p("div", {
299
+ ref: H,
300
+ 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 text-left",
301
+ children: [
302
+ /* @__PURE__ */ f("div", {
303
+ className: "px-2 pb-2 mb-1 border-b border-slate-100",
304
+ children: /* @__PURE__ */ f("input", {
305
+ type: "text",
306
+ placeholder: "Search values...",
307
+ value: O,
308
+ onChange: (e) => k(e.target.value),
309
+ 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",
310
+ onClick: (e) => e.stopPropagation()
311
+ })
312
+ }),
313
+ /* @__PURE__ */ f("div", {
314
+ className: "max-h-40 overflow-y-auto px-2 space-y-1",
315
+ children: J.length === 0 ? /* @__PURE__ */ f("div", {
316
+ className: "text-[11px] text-muted-foreground p-2 text-center",
317
+ children: "No results found"
318
+ }) : J.map((e, t) => /* @__PURE__ */ p("label", {
319
+ className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none",
320
+ children: [/* @__PURE__ */ f("input", {
321
+ type: "checkbox",
322
+ className: "rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5",
323
+ checked: E[r.key]?.includes(e) || !1,
324
+ onChange: () => oe(r.key, e)
325
+ }), /* @__PURE__ */ f("span", {
326
+ className: "truncate",
327
+ children: String(e)
328
+ })]
329
+ }, t))
330
+ }),
331
+ c && /* @__PURE__ */ f("div", {
332
+ className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
333
+ children: /* @__PURE__ */ f("button", {
334
+ onClick: () => se(r.key),
335
+ className: "text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5",
336
+ children: "Clear Filter"
337
+ })
241
338
  })
242
- })
243
- ]
244
- })
245
- ]
246
- })
247
- }, e.key);
248
- }),
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"
252
- })
253
- ]
254
- })
255
- }), /* @__PURE__ */ u("tbody", {
256
- 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",
260
- 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) => {
266
- 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",
272
- 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",
276
- 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",
280
- children: [a?.header || n.groupKey, ":"]
281
- }),
282
- /* @__PURE__ */ u("span", {
283
- className: "text-slate-800 font-bold",
284
- children: n.groupValue
285
- }),
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",
288
- children: n.totalItemsCount
289
- })
290
- ]
291
- })
292
- }), /* @__PURE__ */ u("td", {
293
- colSpan: V.length + +!!h,
294
- className: "bg-slate-50/30"
295
- })]
296
- }, `group-header-${n.path}-${r}`);
297
- }
298
- return /* @__PURE__ */ d("tr", {
299
- className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
300
- 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" : ""}`,
306
- 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",
309
- children: t
339
+ ]
340
+ })
341
+ ]
310
342
  })
311
- }, e.key);
343
+ }, r.key);
312
344
  }),
313
- h && /* @__PURE__ */ u("td", {
314
- 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)
318
- })
345
+ i === 0 && v && /* @__PURE__ */ f("th", {
346
+ rowSpan: q.length,
347
+ className: "h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]",
348
+ style: {
349
+ position: "sticky",
350
+ right: 0,
351
+ zIndex: 35,
352
+ backgroundColor: "rgb(248, 250, 252)"
353
+ }
319
354
  })
320
355
  ]
321
- }, P(n));
356
+ }, `header-row-${i}`))
357
+ }),
358
+ /* @__PURE__ */ f("tbody", {
359
+ className: "divide-y divide-slate-100",
360
+ children: ee ? /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
361
+ colSpan: $,
362
+ className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
363
+ children: "Loading records..."
364
+ }) }) : Z.length === 0 ? /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
365
+ colSpan: $,
366
+ className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
367
+ children: "No records found matching criteria."
368
+ }) }) : Z.map((e, t) => {
369
+ if (e.isGroupRow) {
370
+ let n = M[e.path] !== !1;
371
+ return /* @__PURE__ */ p("tr", {
372
+ className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none",
373
+ children: [/* @__PURE__ */ f("td", {
374
+ className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] border-r border-slate-100",
375
+ style: {
376
+ position: "sticky",
377
+ left: 0,
378
+ zIndex: 20,
379
+ backgroundColor: "rgba(248, 250, 252, 0.9)",
380
+ paddingLeft: `${e.depth * 12 + 16}px`
381
+ },
382
+ children: /* @__PURE__ */ p("button", {
383
+ onClick: () => ce(e.path),
384
+ className: "flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5",
385
+ children: [
386
+ f(n ? r : i, { className: "w-4 h-4 text-slate-500" }),
387
+ /* @__PURE__ */ f("span", {
388
+ className: "text-slate-800 font-bold w-40 truncate",
389
+ children: e.groupValue
390
+ }),
391
+ /* @__PURE__ */ f("span", {
392
+ className: "bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1",
393
+ children: e.totalItemsCount
394
+ })
395
+ ]
396
+ })
397
+ }), /* @__PURE__ */ f("td", {
398
+ colSpan: $ - 1,
399
+ className: "bg-slate-50/30"
400
+ })]
401
+ }, `group-header-${e.path}-${t}`);
402
+ }
403
+ return /* @__PURE__ */ p("tr", {
404
+ className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
405
+ children: [
406
+ y && A?.length > 0 && /* @__PURE__ */ f("td", {
407
+ className: "w-12 bg-white border-r border-slate-100",
408
+ style: {
409
+ position: "sticky",
410
+ left: 0,
411
+ zIndex: 10
412
+ }
413
+ }),
414
+ V?.map((t) => {
415
+ let n = e[t.key], r = Q(t.key, !1, t.style);
416
+ return /* @__PURE__ */ f("td", {
417
+ className: `p-4 align-middle py-1 px-4 transition-colors ${R.includes(t.key) ? "group-hover:bg-slate-100" : ""} ${t.className || ""}`,
418
+ style: r,
419
+ children: t.render ? t.render(n, e) : /* @__PURE__ */ f("span", {
420
+ className: "text-[12px] text-muted-foreground font-medium truncate block",
421
+ children: n
422
+ })
423
+ }, t.key);
424
+ }),
425
+ v && /* @__PURE__ */ f("td", {
426
+ className: "p-4 align-middle py-1 px-4 text-right bg-white shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80",
427
+ style: {
428
+ position: "sticky",
429
+ right: 0,
430
+ zIndex: 20
431
+ },
432
+ children: /* @__PURE__ */ f("div", {
433
+ className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
434
+ children: v(e)
435
+ })
436
+ })
437
+ ]
438
+ }, U(e) ?? `row-${t}`);
439
+ })
322
440
  })
323
- })]
441
+ ]
324
442
  })
325
443
  })]
326
444
  });
327
445
  }
328
446
  //#endregion
329
- export { f as DataTable };
447
+ export { h 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`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule?a(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var d=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...d(e.children)):t.push(e)}),t};function f({columns:e,data:i,rowKey:a,actions:o,isLoading:s,groupBy:c=!1,defaultGroupBy:l=[],onPinChange:u,onGroupChange:f,containerStyle:p,tableStyle:m}){let[h,g]=(0,n.useState)(null),[_,v]=(0,n.useState)({}),[y,b]=(0,n.useState)(``),[x,S]=(0,n.useState)(l),[C,w]=(0,n.useState)({}),[T,E]=(0,n.useState)(!1),[D,O]=(0,n.useState)({key:null,direction:null}),k=(0,n.useMemo)(()=>d(e),[e]),[A,j]=(0,n.useState)(k.filter(e=>e.pinned).map(e=>e.key)),M=(0,n.useMemo)(()=>{let t=e=>[...e].sort((e,t)=>{let n=A.includes(e.key),r=A.includes(t.key);return n&&!r?-1:!n&&r?1:0}).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e);return t(e)},[e,A]),N=(0,n.useMemo)(()=>{let e=d(M),t=c?x:[];return e.filter(e=>!t.includes(e.key))},[M,x,c]),P=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){P.current&&!P.current.contains(e.target)&&(g(null),b(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let F=e=>typeof a==`function`?a(e):String(e[a]),I=e=>{let t=A.includes(e);j(t?A.filter(t=>t!==e):[...A,e]),u&&u(e,!t)},L=e=>{let t=`asc`;D.key===e&&(t=D.direction===`asc`?`desc`:D.direction===`desc`?null:`asc`),O({key:t?e:null,direction:t})},R=(e,t)=>{c&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},z=e=>{e.preventDefault(),E(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!x.includes(t)){let e=[...x,t];S(e),f&&f(e)}},B=e=>{let t=x.filter(t=>t!==e);S(t),w({}),f&&f(t)},V=(0,n.useMemo)(()=>{let e=t=>{let n=0;return t.forEach(t=>{n=t.children&&t.children.length>0?Math.max(n,1+e(t.children)):Math.max(n,1)}),n},t=e(M),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?x.includes(e.key)&&c?0:1:e.children.reduce((e,t)=>e+r(t),0),i=c?x:[],a=(e,o)=>{e.forEach(e=>{if(i.includes(e.key))return;let s=r(e);s!==0&&(e.children&&e.children.length>0?(n[o].push({col:e,rowSpan:1,colSpan:s}),a(e.children,o+1)):n[o].push({col:e,rowSpan:t-o,colSpan:1}))})};return a(M,0),n.filter(e=>e.length>0)},[M,x,c]),H=(0,n.useMemo)(()=>{let e={},t=0;return c&&x.length>0&&(t+=48),N.forEach(n=>{if(A.includes(n.key)){e[n.key]=t;let r=n.style?.width||n.headerStyle?.width||`150px`;t+=typeof r==`number`?r:parseInt(String(r),10)||150}}),e},[N,A,x,c]),U=(e,t)=>{v(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})},W=e=>{v(t=>{let n={...t};return delete n[e],n})},G=(0,n.useMemo)(()=>{if(!h)return[];let e=k.find(e=>e.key===h),t=i.map(t=>e?.getValue?e.getValue(t):t[h]),n=Array.from(new Set(t)).filter(e=>e!=null);return y.trim()?n.filter(e=>String(e).toLowerCase().includes(y.toLowerCase())):n},[i,h,y,k]),K=(0,n.useMemo)(()=>{let e=i.filter(e=>Object.entries(_).every(([t,n])=>{if(!n||n.length===0)return!0;let r=k.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(D.key&&D.direction){let{key:t,direction:n}=D,r=k.find(e=>e.key===t);e=[...e].sort((e,i)=>{let a=r?.getValue?r.getValue(e):e[t],o=r?.getValue?r.getValue(i):i[t];if(a===o)return 0;if(a==null)return 1;if(o==null)return-1;let s=0;return s=typeof a==`number`&&typeof o==`number`?a-o:String(a).localeCompare(String(o),void 0,{numeric:!0,sensitivity:`base`}),n===`asc`?s:-s})}return e},[i,_,D,k]),q=(0,n.useMemo)(()=>{if(!c||x.length===0)return K;let e=(t,n,r=``)=>{if(n>=x.length)return t;let i=x[n],a=k.find(e=>e.key===i),o={};return t.forEach(e=>{let t=a?.getValue?a.getValue(e):e[i],n=String(t??`N/A`);o[n]||(o[n]=[]),o[n].push(e)}),Object.entries(o).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(K,0)},[K,x,c,k]),J=e=>{w(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Y=(0,n.useMemo)(()=>{if(!c||x.length===0)return q;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),C[n.path]!==!1&&t(n.children)):e.push(n)})};return t(q),e},[q,C,x,c]),X=(e,t=!1,n)=>A.includes(e)?{position:`sticky`,left:`${H[e]}px`,zIndex:t?30:20,backgroundColor:`#fff`,boxShadow:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}:n||{},Z=N.length+ +!!o+(c&&x.length>0?1:0);return(0,r.jsxs)(`div`,{className:`w-full space-y-3`,children:[c&&(0,r.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),E(!0)},onDragLeave:()=>E(!1),onDrop:z,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${T?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:x.length===0?(0,r.jsx)(`span`,{className:`text-[12px] text-muted-foreground 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-muted-foreground mr-1`,children:`Grouped By:`}),x.map(e=>(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-muted-foreground`,children:[(0,r.jsx)(`span`,{children:k.find(t=>t.key===e)?.header||e}),(0,r.jsx)(`button`,{onClick:()=>B(e),className:`p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors`,children:(0,r.jsx)(t.X,{className:`w-3 h-3`})})]},e))]})}),(0,r.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,style:p,children:(0,r.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,style:m,children:[(0,r.jsxs)(`colgroup`,{children:[c&&x.length>0&&(0,r.jsx)(`col`,{style:{width:`48px`}}),N.map(e=>(0,r.jsx)(`col`,{style:e.style},e.key)),o&&(0,r.jsx)(`col`,{style:{width:`100px`}})]}),(0,r.jsx)(`thead`,{className:`bg-slate-50 select-none`,children:V.map((e,n)=>(0,r.jsxs)(`tr`,{className:`border-b border-slate-100`,children:[n===0&&c&&x.length>0&&(0,r.jsx)(`th`,{rowSpan:V.length,className:`w-12 border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:i})=>{let a=(_[e.key]?.length||0)>0,o=A.includes(e.key),s=X(e.key,!0,e.headerStyle),l=!e.children||e.children.length===0,u=D.key===e.key;return(0,r.jsx)(`th`,{rowSpan:n,colSpan:i,...c&&l?{draggable:!0,onDragStart:t=>R(t,e.key)}:{},className:`h-12 text-center align-middle font-bold text-[12px] px-4 border-r border-b border-slate-100 relative ${c&&l?`cursor-grab active:cursor-grabbing`:``} ${o?`bg-slate-50/90`:``} ${e.className||``}`,style:s,children:(0,r.jsxs)(`div`,{className:`flex items-center gap-1 group/header w-full justify-between`,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 truncate w-full ${e.sortable&&l?`cursor-pointer select-none hover:text-blue-600`:``}`,onClick:()=>e.sortable&&l&&L(e.key),children:[(0,r.jsx)(`span`,{className:`truncate`,children:e.header}),l&&e.sortable&&(0,r.jsx)(`span`,{className:`text-slate-400 transition-colors ${u?`text-blue-600`:`opacity-0 group-hover/header:opacity-100`}`,children:u&&D.direction===`asc`?(0,r.jsx)(t.ArrowUp,{className:`w-3.5 h-3.5`}):u&&D.direction===`desc`?(0,r.jsx)(t.ArrowDown,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.ArrowUpDown,{className:`w-3.5 h-3.5`})})]}),(0,r.jsxs)(`div`,{className:`flex items-center gap-1`,children:[l&&e.filterable&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),b(``),g(h===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors ${a?`text-blue-600`:`text-muted-foreground opacity-0 group-hover/header:opacity-100`}`,children:`Filter`}),l&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),I(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${o?`text-blue-500 opacity-100`:`text-slate-300`}`,title:o?`Unpin column`:`Pin column`,children:o?(0,r.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.Pin,{className:`w-3.5 h-3.5`})})]}),h===e.key&&l&&(0,r.jsxs)(`div`,{ref:P,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 text-left`,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:y,onChange:e=>b(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:G.length===0?(0,r.jsx)(`div`,{className:`text-[11px] text-muted-foreground p-2 text-center`,children:`No results found`}):G.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:_[e.key]?.includes(t)||!1,onChange:()=>U(e.key,t)}),(0,r.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),a&&(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:()=>W(e.key),className:`text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5`,children:`Clear Filter`})})]})]})},e.key)}),n===0&&o&&(0,r.jsx)(`th`,{rowSpan:V.length,className:`h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]`,style:{position:`sticky`,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,r.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:s?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:Z,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`Loading records...`})}):Y.length===0?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:Z,className:`p-8 text-center text-muted-foreground text-[12px] font-medium`,children:`No records found matching criteria.`})}):Y.map((e,n)=>{if(e.isGroupRow){let i=C[e.path]!==!1;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] border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,r.jsxs)(`button`,{onClick:()=>J(e.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:[i?(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.jsx)(`span`,{className:`text-slate-800 font-bold w-40 truncate`,children:e.groupValue}),(0,r.jsx)(`span`,{className:`bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:e.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:Z-1,className:`bg-slate-50/30`})]},`group-header-${e.path}-${n}`)}return(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[c&&x?.length>0&&(0,r.jsx)(`td`,{className:`w-12 bg-white border-r border-slate-100`,style:{position:`sticky`,left:0,zIndex:10}}),N?.map(t=>{let n=e[t.key],i=X(t.key,!1,t.style);return(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 transition-colors ${A.includes(t.key)?`group-hover:bg-slate-100`:``} ${t.className||``}`,style:i,children:t.render?t.render(n,e):(0,r.jsx)(`span`,{className:`text-[12px] text-muted-foreground font-medium truncate block`,children:n})},t.key)}),o&&(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,style:{position:`sticky`,right:0,zIndex:20},children:(0,r.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150`,children:o(e)})})]},F(e)??`row-${n}`)})})]})})]})}e.DataTable=f});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flexi-datagrid",
3
- "version": "1.0.6",
3
+ "version": "1.1.0",
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",