flexi-datagrid 1.0.7 → 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 -4
  2. package/dist/flexi-datagrid.css +1 -1
  3. package/dist/index.es.js +387 -296
  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
- import { type ReactNode } from 'react';
1
+ import { type ReactNode, type CSSProperties } from 'react';
2
+ import React from 'react';
2
3
  export interface ColumnConfig<T> {
3
- key?: string;
4
+ key: string;
4
5
  header: string;
5
6
  className?: string;
6
7
  headerClassName?: string;
8
+ style?: CSSProperties;
9
+ headerStyle?: CSSProperties;
7
10
  render?: (value: any, record: T) => ReactNode;
8
11
  filterable?: boolean;
12
+ sortable?: boolean;
9
13
  pinned?: boolean;
10
14
  children?: ColumnConfig<T>[];
15
+ getValue?: (record: T) => any;
11
16
  }
12
17
  interface DataTableProps<T> {
13
18
  columns: ColumnConfig<T>[];
@@ -15,9 +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;
20
- groupBy?: boolean;
27
+ containerStyle?: CSSProperties;
28
+ tableStyle?: CSSProperties;
21
29
  }
22
- export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, onPinChange, onGroupChange, groupBy }: 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;
23
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}.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}
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,96 +1,158 @@
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";
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 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(() => {
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(() => {
15
33
  function e(e) {
16
- N.current && !N.current.contains(e.target) && (b(null), w(""));
34
+ H.current && !H.current.contains(e.target) && (T(null), k(""));
17
35
  }
18
36
  return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
19
37
  }, []);
20
- let P = (e) => typeof p == "function" ? p(e) : String(e[p]), F = (e) => {
21
- let t = T.includes(e);
22
- E(t ? T.filter((t) => t !== e) : [...T, e]), g && g(e, !t);
23
- }, I = (e, t) => {
24
- e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
25
- }, L = (e) => {
26
- e.preventDefault(), M(!0);
27
- }, R = () => {
28
- M(!1);
29
- }, z = (e) => {
30
- 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);
31
51
  let t = e.dataTransfer.getData("text/plain");
32
- if (t && !D.includes(t)) {
33
- let e = [...D, t];
34
- O(e), _ && _(e);
52
+ if (t && !A.includes(t)) {
53
+ let e = [...A, t];
54
+ j(e), S && S(e);
35
55
  }
36
- }, B = (e) => {
37
- let t = D.filter((t) => t !== e);
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];
44
- }, [
45
- d,
46
- T,
47
- D
48
- ]), H = o(() => {
49
- let e = [], t = (n) => {
50
- n.forEach((n) => {
51
- n.children ? t(n.children) : e.push(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
+ }));
52
78
  });
53
79
  };
54
- return t(V), e;
55
- }, [V]), U = o(() => d.some((e) => e.children && e.children.length > 0), [d]), W = o(() => {
80
+ return a(B, 0), n.filter((e) => e.length > 0);
81
+ }, [
82
+ B,
83
+ A,
84
+ y
85
+ ]), ae = l(() => {
56
86
  let e = {}, t = 0;
57
- return D.length > 0 && (t += 48), H.forEach((n) => {
58
- n.key && T.includes(n.key) && (e[n.key] = t, t += 150);
87
+ return y && A.length > 0 && (t += 48), V.forEach((n) => {
88
+ if (R.includes(n.key)) {
89
+ e[n.key] = t;
90
+ let r = n.style?.width || n.headerStyle?.width || "150px";
91
+ t += typeof r == "number" ? r : parseInt(String(r), 10) || 150;
92
+ }
59
93
  }), e;
60
94
  }, [
61
- H,
62
- T,
63
- D
64
- ]), G = o(() => {
65
- if (!y) return [];
66
- let e = f.map((e) => e[y]), t = Array.from(new Set(e)).filter((e) => e != null);
67
- return C.trim() ? t.filter((e) => String(e).toLowerCase().includes(C.toLowerCase())) : t;
68
- }, [
69
- f,
70
- y,
71
- C
72
- ]), K = (e, t) => {
73
- S((n) => {
95
+ V,
96
+ R,
97
+ A,
98
+ y
99
+ ]), oe = (e, t) => {
100
+ D((n) => {
74
101
  let r = n[e] || [], i = r.includes(t) ? r.filter((e) => e !== t) : [...r, t], a = {
75
102
  ...n,
76
103
  [e]: i
77
104
  };
78
105
  return a[e].length === 0 && delete a[e], a;
79
106
  });
80
- }, q = (e) => {
81
- S((t) => {
107
+ }, se = (e) => {
108
+ D((t) => {
82
109
  let n = { ...t };
83
110
  return delete n[e], n;
84
111
  });
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;
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;
87
149
  let e = (t, n, r = "") => {
88
- if (n >= D.length) return t;
89
- 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 = {};
90
152
  return t.forEach((e) => {
91
- let t = String(e[i] ?? "N/A");
92
- a[t] || (a[t] = []), a[t].push(e);
93
- }), 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]) => {
94
156
  let o = r ? `${r}➔${t}` : t;
95
157
  return {
96
158
  isGroupRow: !0,
@@ -103,254 +165,283 @@ function d({ columns: d, data: f, rowKey: p, actions: m, isLoading: h, onPinChan
103
165
  };
104
166
  });
105
167
  };
106
- return e(J, 0);
107
- }, [J, D]), X = (e) => {
108
- A((t) => ({
109
- ...t,
110
- [e]: !t[e]
111
- }));
112
- }, Z = o(() => {
113
- if (D.length === 0) return Y;
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;
114
184
  let e = [], t = (n) => {
115
185
  n.forEach((n) => {
116
- 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);
117
187
  });
118
188
  };
119
- return t(Y), e;
189
+ return t(X), e;
120
190
  }, [
121
- Y,
122
- k,
123
- D
124
- ]), Q = (e) => T.includes(e) ? {
125
- className: "sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]",
126
- style: {
127
- left: `${W[e]}px`,
128
- minWidth: "150px",
129
- maxWidth: "150px"
130
- }
131
- } : {
132
- className: "",
133
- style: {}
134
- }, $ = (e, t) => {
135
- if (!e.key) return /* @__PURE__ */ l("span", {
136
- className: "truncate",
137
- children: e.header
138
- });
139
- let i = (x[e.key]?.length || 0) > 0, a = T.includes(e.key);
140
- return /* @__PURE__ */ u("div", {
141
- className: `flex items-center justify-between gap-1 group/header w-full ${e.headerClassName}`,
142
- children: [
143
- /* @__PURE__ */ l("div", {
144
- className: "truncate",
145
- children: e.header
146
- }),
147
- e.filterable || !t && /* @__PURE__ */ u("div", {
148
- className: "flex items-center gap-1",
149
- children: [e.filterable && /* @__PURE__ */ l("button", {
150
- onClick: (t) => {
151
- t.stopPropagation(), w(""), b(y === e.key ? null : e.key);
152
- },
153
- className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${i ? "text-blue-600" : "text-slate-400 opacity-0 group-hover/header:opacity-100"}`,
154
- children: "Filter"
155
- }), !t && /* @__PURE__ */ l("button", {
156
- onClick: (t) => {
157
- t.stopPropagation(), F(e.key);
158
- },
159
- className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${a ? "text-blue-500 opacity-100" : "text-slate-300"}`,
160
- children: l(a ? r : n, { className: "w-3.5 h-3.5" })
161
- })]
162
- }),
163
- y === e.key && /* @__PURE__ */ u("div", {
164
- ref: N,
165
- className: "absolute left-4 top-9 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700",
166
- children: [
167
- /* @__PURE__ */ l("div", {
168
- className: "px-2 pb-2 mb-1 border-b border-slate-100",
169
- children: /* @__PURE__ */ l("input", {
170
- type: "text",
171
- placeholder: "Search values...",
172
- value: C,
173
- onChange: (e) => w(e.target.value),
174
- className: "w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500",
175
- onClick: (e) => e.stopPropagation()
176
- })
177
- }),
178
- /* @__PURE__ */ l("div", {
179
- className: "max-h-40 overflow-y-auto px-2 space-y-1",
180
- children: G.length === 0 ? /* @__PURE__ */ l("div", {
181
- className: "text-[11px] text-slate-400 p-2 text-center",
182
- children: "No results found"
183
- }) : G.map((t, n) => /* @__PURE__ */ u("label", {
184
- className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer",
185
- children: [/* @__PURE__ */ l("input", {
186
- type: "checkbox",
187
- className: "rounded text-blue-600 w-3.5 h-3.5",
188
- checked: x[e.key]?.includes(t) || !1,
189
- onChange: () => K(e.key, t)
190
- }), /* @__PURE__ */ l("span", {
191
- className: "truncate",
192
- children: String(t)
193
- })]
194
- }, n))
195
- }),
196
- i && /* @__PURE__ */ l("div", {
197
- className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
198
- children: /* @__PURE__ */ l("button", {
199
- onClick: () => q(e.key),
200
- className: "text-[11px] text-red-500 hover:underline",
201
- children: "Clear"
202
- })
203
- })
204
- ]
205
- })
206
- ]
207
- });
208
- };
209
- return /* @__PURE__ */ u("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", {
210
204
  className: "w-full space-y-3",
211
- children: [v && /* @__PURE__ */ l("div", {
212
- onDragOver: L,
213
- onDragLeave: R,
214
- onDrop: z,
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"}`,
216
- children: D.length === 0 ? /* @__PURE__ */ l("span", {
217
- 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",
218
214
  children: "Drag a column header here to group your records by that field"
219
- }) : /* @__PURE__ */ u("div", {
215
+ }) : /* @__PURE__ */ p("div", {
220
216
  className: "flex flex-wrap items-center gap-1.5",
221
- children: [/* @__PURE__ */ l("span", {
222
- 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",
223
219
  children: "Grouped By:"
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", {
227
- onClick: () => B(e),
228
- className: "p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors",
229
- children: /* @__PURE__ */ l(i, { 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" })
230
226
  })]
231
227
  }, e))]
232
228
  })
233
- }), /* @__PURE__ */ l("div", {
229
+ }), /* @__PURE__ */ f("div", {
234
230
  className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
235
- children: /* @__PURE__ */ u("table", {
231
+ style: C,
232
+ children: /* @__PURE__ */ p("table", {
236
233
  className: "w-full caption-bottom text-sm border-collapse table-fixed",
237
- children: [/* @__PURE__ */ u("thead", {
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",
241
- children: [
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
- }),
246
- V.map((e) => {
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);
263
- }),
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)]"
267
- })
268
- ]
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", {
283
- className: "divide-y divide-slate-100",
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]",
287
- children: "Loading records..."
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) => {
293
- if (n.isGroupRow) {
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",
299
- style: { paddingLeft: `${n.depth * 12 + 16}px` },
300
- children: /* @__PURE__ */ u("button", {
301
- onClick: () => X(n.path),
302
- className: "flex items-center gap-1.5 text-left",
303
- children: [
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",
307
- children: [a?.header || n.groupKey, ":"]
308
- }),
309
- /* @__PURE__ */ l("span", {
310
- className: "text-slate-800 font-bold",
311
- children: n.groupValue
312
- }),
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",
315
- children: n.totalItemsCount
316
- })
317
- ]
318
- })
319
- }), /* @__PURE__ */ l("td", {
320
- colSpan: H.length + +!!m,
321
- className: "bg-slate-50/30"
322
- })]
323
- }, `group-header-${n.path}-${r}`);
324
- }
325
- return /* @__PURE__ */ u("tr", {
326
- className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
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",
327
245
  children: [
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 || ""}`,
333
- style: r.style,
334
- children: e.render ? e.render(t, n) : /* @__PURE__ */ l("span", {
335
- className: "truncate block",
336
- children: t
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", {
274
+ className: "truncate",
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);
286
+ },
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"}`,
288
+ children: "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
+ })
338
+ })
339
+ ]
340
+ })
341
+ ]
337
342
  })
338
- }, e.key);
343
+ }, r.key);
339
344
  }),
340
- m && /* @__PURE__ */ l("td", {
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",
342
- children: /* @__PURE__ */ l("div", {
343
- className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
344
- children: m(n)
345
- })
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
+ }
346
354
  })
347
355
  ]
348
- }, 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
+ })
349
440
  })
350
- })]
441
+ ]
351
442
  })
352
443
  })]
353
444
  });
354
445
  }
355
446
  //#endregion
356
- export { d 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,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});
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.7",
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",