flexi-datagrid 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{src/DataTable.d.ts → DataTable.d.ts} +3 -1
- package/dist/flexi-datagrid.css +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.es.js +33 -19
- package/dist/index.umd.js +1 -1
- package/package.json +3 -3
- package/dist/src/index.d.ts +0 -2
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { type ReactNode, type CSSProperties } from 'react';
|
|
2
2
|
export interface ColumnConfig<T> {
|
|
3
3
|
key: string;
|
|
4
4
|
header: string;
|
|
5
5
|
className?: string;
|
|
6
|
+
cellStyle?: CSSProperties;
|
|
7
|
+
width?: string | number;
|
|
6
8
|
render?: (value: any, record: T) => ReactNode;
|
|
7
9
|
filterable?: boolean;
|
|
8
10
|
pinned?: boolean;
|
package/dist/flexi-datagrid.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-10{top:2.5rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.table{display:table}.h-10{height:2.5rem}.h-12{height:3rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.max-h-40{max-height:10rem}.min-h-\[52px\]{min-height:52px}.w-12{width:3rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-52{width:13rem}.w-\[100px\]{width:100px}.w-full{width:100%}.table-fixed{table-layout:fixed}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.scale-\[0\.99\]{--tw-scale-x:.99;--tw-scale-y:.99;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(241 245 249/var(--tw-divide-opacity,1))}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity,1))}.bg-\[var\(--color-background-secondary\,rgba\(248\,250\,252\,1\)\)\]{background-color:var(--color-background-secondary,#f8fafc)}.bg-blue-50\/50{background-color:#eff6ff80}.bg-slate-200\/70{background-color:#e2e8f0b3}.bg-slate-50\/30{background-color:#f8fafc4d}.bg-slate-50\/50{background-color:#f8fafc80}.bg-slate-50\/60{background-color:#f8fafc99}.bg-slate-50\/90{background-color:#f8fafce6}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pr-1{padding-right:.25rem}.pt-1{padding-top:.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[-1px_0_0_rgba\(226\,232\,240\,1\)\]{--tw-shadow:-1px 0 0 #e2e8f0;--tw-shadow-colored:-1px 0 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-\[2px_0_5px_-2px_rgba\(0\,0\,0\,0\.1\)\]{--tw-shadow:2px 0 5px -2px #0000001a;--tw-shadow-colored:2px 0 5px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\:bg-slate-100\/80:hover{background-color:#f1f5f9cc}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.hover\:bg-slate-50\/80:hover{background-color:#f8fafccc}.hover\:text-slate-600:hover{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.active\:cursor-grabbing:active{cursor:grabbing}.group:hover .group-hover\:bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.group:hover .group-hover\:bg-slate-50\/80{background-color:#f8fafccc}.group\/header:hover .group-hover\/header\:opacity-100,.group:hover .group-hover\:opacity-100{opacity:1}
|
|
1
|
+
*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.collapse{visibility:collapse}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.top-10{top:2.5rem}.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}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.d.ts
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -39,7 +39,11 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
39
39
|
]), H = s(() => {
|
|
40
40
|
let e = {}, t = 0;
|
|
41
41
|
return D.length > 0 && (t += 48), V.forEach((n) => {
|
|
42
|
-
T.includes(n.key)
|
|
42
|
+
if (T.includes(n.key)) {
|
|
43
|
+
e[n.key] = t;
|
|
44
|
+
let r = typeof n.width == "number" ? n.width : parseInt(String(n.width || "150"));
|
|
45
|
+
t += isNaN(r) ? 150 : r;
|
|
46
|
+
}
|
|
43
47
|
}), e;
|
|
44
48
|
}, [
|
|
45
49
|
V,
|
|
@@ -105,16 +109,26 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
105
109
|
q,
|
|
106
110
|
k,
|
|
107
111
|
D
|
|
108
|
-
]), X = (e) =>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
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
|
+
};
|
|
118
132
|
};
|
|
119
133
|
return /* @__PURE__ */ d("div", {
|
|
120
134
|
className: "w-full space-y-3",
|
|
@@ -151,11 +165,11 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
151
165
|
children: [
|
|
152
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" }),
|
|
153
167
|
V.map((e) => {
|
|
154
|
-
let t = (x[e.key]?.length || 0) > 0, a = T.includes(e.key), o = X(e
|
|
168
|
+
let t = (x[e.key]?.length || 0) > 0, a = T.includes(e.key), o = X(e, "th");
|
|
155
169
|
return /* @__PURE__ */ u("th", {
|
|
156
170
|
draggable: !0,
|
|
157
171
|
onDragStart: (t) => I(t, e.key),
|
|
158
|
-
className: `h-12 text-left align-middle text-slate-500 font-bold text-[12px] px-4 relative cursor-grab active:cursor-grabbing ${o.className} ${a ? "bg-slate-50/90 z-30" : ""}
|
|
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" : ""}`,
|
|
159
173
|
style: o.style,
|
|
160
174
|
children: /* @__PURE__ */ d("div", {
|
|
161
175
|
className: "flex items-center justify-between gap-1 group/header",
|
|
@@ -163,7 +177,7 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
163
177
|
/* @__PURE__ */ d("div", {
|
|
164
178
|
className: "flex items-center gap-1.5 truncate",
|
|
165
179
|
children: [
|
|
166
|
-
/* @__PURE__ */ u(n, { className: "w-3 h-3 text-slate-300 opacity-0 group-hover/header:opacity-100 transition-opacity" }),
|
|
180
|
+
/* @__PURE__ */ u(n, { className: "w-3 h-3 text-slate-300 opacity-0 group-hover/header:opacity-100 transition-opacity flex-shrink-0" }),
|
|
167
181
|
/* @__PURE__ */ u("span", {
|
|
168
182
|
className: "truncate",
|
|
169
183
|
children: e.header
|
|
@@ -172,7 +186,7 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
172
186
|
onClick: (t) => {
|
|
173
187
|
t.stopPropagation(), w(""), b(y === e.key ? null : e.key);
|
|
174
188
|
},
|
|
175
|
-
className: `p-0.5 rounded hover:bg-slate-200 transition-colors ${t ? "text-blue-600" : "text-slate-400 opacity-0 group-hover/header:opacity-100"}`,
|
|
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"}`,
|
|
176
190
|
children: "Filter"
|
|
177
191
|
})
|
|
178
192
|
]
|
|
@@ -181,7 +195,7 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
181
195
|
onClick: (t) => {
|
|
182
196
|
t.stopPropagation(), F(e.key);
|
|
183
197
|
},
|
|
184
|
-
className: `p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${a ? "text-blue-500 opacity-100" : "text-slate-300"}`,
|
|
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"}`,
|
|
185
199
|
title: a ? "Unpin column" : "Pin column",
|
|
186
200
|
children: u(a ? i : r, { className: "w-3.5 h-3.5" })
|
|
187
201
|
}),
|
|
@@ -233,7 +247,7 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
233
247
|
}, e.key);
|
|
234
248
|
}),
|
|
235
249
|
h && /* @__PURE__ */ u("th", {
|
|
236
|
-
className: "h-12 align-middle font-bold text-slate-500 text-[12px] w-[100px] px-4 text-
|
|
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))]",
|
|
237
251
|
children: "Action"
|
|
238
252
|
})
|
|
239
253
|
]
|
|
@@ -286,9 +300,9 @@ function f({ columns: f, data: p, rowKey: m, actions: h, isLoading: g, onPinChan
|
|
|
286
300
|
children: [
|
|
287
301
|
D.length > 0 && /* @__PURE__ */ u("td", { className: "w-12 bg-white sticky left-0 z-10 border-r border-slate-100" }),
|
|
288
302
|
V.map((e) => {
|
|
289
|
-
let t = n[e.key], r = X(e
|
|
303
|
+
let t = n[e.key], r = X(e, "td"), i = T.includes(e.key);
|
|
290
304
|
return /* @__PURE__ */ u("td", {
|
|
291
|
-
className: `p-4 align-middle py-1 px-4 transition-colors ${r.className} ${i ? "group-hover:bg-slate-100" : ""}
|
|
305
|
+
className: `p-4 align-middle py-1 px-4 transition-colors ${r.className} ${i ? "group-hover:bg-slate-100/90" : ""}`,
|
|
292
306
|
style: r.style,
|
|
293
307
|
children: e.render ? e.render(t, n) : /* @__PURE__ */ u("span", {
|
|
294
308
|
className: "text-[12px] text-slate-600 font-medium truncate block",
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function i({columns:e,data:i,rowKey:a,actions:o,isLoading:s,onPinChange:c,onGroupChange:l}){let[u,d]=(0,n.useState)(null),[f,p]=(0,n.useState)({}),[m,h]=(0,n.useState)(``),[g,_]=(0,n.useState)(e.filter(e=>e.pinned).map(e=>e.key)),[v,y]=(0,n.useState)([]),[b,x]=(0,n.useState)({}),[S,C]=(0,n.useState)(!1),w=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){w.current&&!w.current.contains(e.target)&&(d(null),h(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let T=e=>typeof a==`function`?a(e):String(e[a]),E=e=>{let t=g.includes(e);_(t?g.filter(t=>t!==e):[...g,e]),c&&c(e,!t)},D=(e,t)=>{e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},O=e=>{e.preventDefault(),C(!0)},k=()=>{C(!1)},A=e=>{e.preventDefault(),C(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!v.includes(t)){let e=[...v,t];y(e),l&&l(e)}},j=e=>{let t=v.filter(t=>t!==e);y(t),x({}),l&&l(t)},M=(0,n.useMemo)(()=>{let t=e.filter(e=>!v.includes(e.key)),n=t.filter(e=>g.includes(e.key)),r=t.filter(e=>!g.includes(e.key));return[...n,...r]},[e,g,v]),N=(0,n.useMemo)(()=>{let e={},t=0;return v.length>0&&(t+=48),M.forEach(n=>{g.includes(n.key)&&(e[n.key]=t,t+=150)}),e},[M,g,v]),P=(0,n.useMemo)(()=>{if(!u)return[];let e=i.map(e=>e[u]),t=Array.from(new Set(e)).filter(e=>e!=null);return m.trim()?t.filter(e=>String(e).toLowerCase().includes(m.toLowerCase())):t},[i,u,m]),F=(e,t)=>{p(n=>{let r=n[e]||[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return a[e].length===0&&delete a[e],a})},I=e=>{p(t=>{let n={...t};return delete n[e],n})},L=(0,n.useMemo)(()=>i.filter(e=>Object.entries(f).every(([t,n])=>!n||n.length===0?!0:n.includes(e[t]))),[i,f]),R=(0,n.useMemo)(()=>{if(v.length===0)return L;let e=(t,n,r=``)=>{if(n>=v.length)return t;let i=v[n],a={};return t.forEach(e=>{let t=String(e[i]??`N/A`);a[t]||(a[t]=[]),a[t].push(e)}),Object.entries(a).map(([t,a])=>{let o=r?`${r}➔${t}`:t;return{isGroupRow:!0,groupKey:i,groupValue:t,path:o,depth:n,children:e(a,n+1,o),totalItemsCount:a.length}})};return e(L,0)},[L,v]),z=e=>{x(t=>({...t,[e]:!t[e]}))},B=(0,n.useMemo)(()=>{if(v.length===0)return R;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),b[n.path]&&t(n.children)):e.push(n)})};return t(R),e},[R,b,v]),V=e=>g.includes(e)?{className:`sticky left-0 z-20 bg-white shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]`,style:{left:`${N[e]}px`,minWidth:`150px`,maxWidth:`150px`}}:{className:``,style:{}};return(0,r.jsxs)(`div`,{className:`w-full space-y-3`,children:[(0,r.jsx)(`div`,{onDragOver:O,onDragLeave:k,onDrop:A,className:`w-full min-h-[52px] px-4 py-2 border rounded-xl flex items-center gap-2 transition-all duration-200 ${S?`border-blue-500 bg-blue-50/50 scale-[0.99]`:`border-dashed border-slate-200 bg-slate-50/50`}`,children:v.length===0?(0,r.jsx)(`span`,{className:`text-[12px] text-slate-400 font-medium select-none`,children:`Drag a column header here to group your records by that field`}):(0,r.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[(0,r.jsx)(`span`,{className:`text-[11px] font-bold uppercase tracking-wider text-slate-400 mr-1`,children:`Grouped By:`}),v.map(n=>(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 pl-2 pr-1 py-1 bg-white border border-slate-200 rounded-lg shadow-sm text-[12px] font-semibold text-slate-600 animate-in fade-in zoom-in-95 duration-150`,children:[(0,r.jsx)(`span`,{children:e.find(e=>e.key===n)?.header||n}),(0,r.jsx)(`button`,{onClick:()=>j(n),className:`p-0.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors`,children:(0,r.jsx)(t.X,{className:`w-3 h-3`})})]},n))]})}),(0,r.jsx)(`div`,{className:`w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm`,children:(0,r.jsxs)(`table`,{className:`w-full caption-bottom text-sm border-collapse table-fixed`,children:[(0,r.jsx)(`thead`,{className:`bg-[var(--color-background-secondary,rgba(248,250,252,1))] select-none`,children:(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-10`,children:[v.length>0&&(0,r.jsx)(`th`,{className:`w-12 h-12 sticky left-0 z-30 bg-slate-50/90 border-r border-slate-100`}),M.map(e=>{let n=(f[e.key]?.length||0)>0,i=g.includes(e.key),a=V(e.key);return(0,r.jsx)(`th`,{draggable:!0,onDragStart:t=>D(t,e.key),className:`h-12 text-left align-middle text-slate-500 font-bold text-[12px] px-4 relative cursor-grab active:cursor-grabbing ${a.className} ${i?`bg-slate-50/90 z-30`:``} ${e.className||``}`,style:a.style,children:(0,r.jsxs)(`div`,{className:`flex items-center justify-between gap-1 group/header`,children:[(0,r.jsxs)(`div`,{className:`flex items-center gap-1.5 truncate`,children:[(0,r.jsx)(t.GripVertical,{className:`w-3 h-3 text-slate-300 opacity-0 group-hover/header:opacity-100 transition-opacity`}),(0,r.jsx)(`span`,{className:`truncate`,children:e.header}),e.filterable&&(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),h(``),d(u===e.key?null:e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors ${n?`text-blue-600`:`text-slate-400 opacity-0 group-hover/header:opacity-100`}`,children:`Filter`})]}),(0,r.jsx)(`button`,{onClick:t=>{t.stopPropagation(),E(e.key)},className:`p-0.5 rounded hover:bg-slate-200 transition-colors opacity-0 group-hover/header:opacity-100 ${i?`text-blue-500 opacity-100`:`text-slate-300`}`,title:i?`Unpin column`:`Pin column`,children:i?(0,r.jsx)(t.PinOff,{className:`w-3.5 h-3.5`}):(0,r.jsx)(t.Pin,{className:`w-3.5 h-3.5`})}),u===e.key&&(0,r.jsxs)(`div`,{ref:w,className:`absolute left-4 top-10 z-50 w-52 bg-white border border-slate-200 rounded-lg shadow-lg py-2 flex flex-col font-normal text-slate-700`,children:[(0,r.jsx)(`div`,{className:`px-2 pb-2 mb-1 border-b border-slate-100`,children:(0,r.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:m,onChange:e=>h(e.target.value),className:`w-full px-2 py-1 text-[12px] border border-slate-200 rounded focus:outline-none focus:border-blue-500 font-medium text-slate-600`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`max-h-40 overflow-y-auto px-2 space-y-1`,children:P.length===0?(0,r.jsx)(`div`,{className:`text-[11px] text-slate-400 p-2 text-center`,children:`No results found`}):P.map((t,n)=>(0,r.jsxs)(`label`,{className:`flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5`,checked:f[e.key]?.includes(t)||!1,onChange:()=>F(e.key,t)}),(0,r.jsx)(`span`,{className:`truncate`,children:String(t)})]},n))}),n&&(0,r.jsx)(`div`,{className:`border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end`,children:(0,r.jsx)(`button`,{onClick:()=>I(e.key),className:`text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5`,children:`Clear Filter`})})]})]})},e.key)}),o&&(0,r.jsx)(`th`,{className:`h-12 align-middle font-bold text-slate-500 text-[12px] w-[100px] px-4 text-rightsticky right-0 z-30 shadow-[-1px_0_0_rgba(226,232,240,1)]`,children:`Action`})]})}),(0,r.jsx)(`tbody`,{className:`divide-y divide-slate-100`,children:s?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:M.length+ +!!o+ +(v.length>0),className:`p-8 text-center text-slate-400 text-[12px] font-medium`,children:`Loading records...`})}):B.length===0?(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:M.length+ +!!o+ +(v.length>0),className:`p-8 text-center text-slate-400 text-[12px] font-medium`,children:`No records found matching criteria.`})}):B.map((n,i)=>{if(n.isGroupRow){let a=!!b[n.path],s=e.find(e=>e.key===n.groupKey);return(0,r.jsxs)(`tr`,{className:`bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none`,children:[(0,r.jsx)(`td`,{className:`p-3 pl-4 font-semibold text-slate-700 text-[12px] sticky left-0 z-20 bg-slate-50/90 border-r border-slate-100`,style:{paddingLeft:`${n.depth*12+16}px`},children:(0,r.jsxs)(`button`,{onClick:()=>z(n.path),className:`flex items-center gap-1.5 text-left focus:outline-none focus:ring-1 focus:ring-blue-400 rounded p-0.5`,children:[a?(0,r.jsx)(t.ChevronDown,{className:`w-4 h-4 text-slate-500`}):(0,r.jsx)(t.ChevronRight,{className:`w-4 h-4 text-slate-500`}),(0,r.jsxs)(`span`,{className:`text-slate-400 font-normal text-[11px] uppercase tracking-wider`,children:[s?.header||n.groupKey,`:`]}),(0,r.jsx)(`span`,{className:`text-slate-800 font-bold`,children:n.groupValue}),(0,r.jsx)(`span`,{className:`bg-slate-200/70 text-slate-600 font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1`,children:n.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:M.length+ +!!o,className:`bg-slate-50/30`})]},`group-header-${n.path}-${i}`)}return(0,r.jsxs)(`tr`,{className:`border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group`,children:[v.length>0&&(0,r.jsx)(`td`,{className:`w-12 bg-white sticky left-0 z-10 border-r border-slate-100`}),M.map(e=>{let t=n[e.key],i=V(e.key),a=g.includes(e.key);return(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 transition-colors ${i.className} ${a?`group-hover:bg-slate-100`:``} ${e.className||``}`,style:i.style,children:e.render?e.render(t,n):(0,r.jsx)(`span`,{className:`text-[12px] text-slate-600 font-medium truncate block`,children:t})},e.key)}),o&&(0,r.jsx)(`td`,{className:`p-4 align-middle py-1 px-4 text-right bg-white sticky right-0 z-20 shadow-[-1px_0_0_rgba(226,232,240,1)] group-hover:bg-slate-50/80`,children:(0,r.jsx)(`div`,{className:`flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150`,children:o(n)})})]},T(n))})})]})})]})}e.DataTable=i});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function i({columns:e,data:i,rowKey:a,actions:o,isLoading:s,onPinChange:c,onGroupChange:l}){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});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flexi-datagrid",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
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",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dist"
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
|
-
"build": "vite build",
|
|
22
|
+
"build": "vite build && tsc --emitDeclarationOnly --outDir dist",
|
|
23
23
|
"preview": "vite preview",
|
|
24
24
|
"prepublishOnly": "npm run build"
|
|
25
25
|
},
|
|
@@ -52,4 +52,4 @@
|
|
|
52
52
|
"vite-plugin-dts": "^4.5.0",
|
|
53
53
|
"lucide-react": "^0.470.0"
|
|
54
54
|
}
|
|
55
|
-
}
|
|
55
|
+
}
|
package/dist/src/index.d.ts
DELETED