flexi-datagrid 1.1.0 → 1.2.1

package/README.md

@@ -0,0 +1,151 @@
+# Flexi-Datagrid
+
+A modern, highly customizable, and feature-rich React data grid component designed for speed and flexibility.
+
+## ✨ Features
+
+- **Column Pinning:** Easily pin important columns to the left side of the grid.
+- **Multi-State Sorting:** Clickable column headers that support Ascending (asc), Descending (desc), and Unsorted states.
+- **Built-in Filtering:** Filter rows instantly with a clean popup search and multi-select dropdown for unique column values. The popup renders through a portal so it always floats above your grid content instead of being clipped by the table's scroll container.
+- **Row Grouping (Drag-and-Drop):** Drag column headers into the grouping zone to group your dataset hierarchically with expand/collapse support.
+- **Nested/Grouped Headers:** Columns can be nested via `children` to render multi-level header rows.
+- **Sticky Actions:** Optional custom row actions column locked to the right side.
+- **Custom Cell Rendering:** Full control over how each cell is rendered via a `render` function.
+- **Full TypeScript Support:** Strongly typed configurations for robust developer experience.
+
+---
+
+## 📦 Installation
+
+Install the package via npm:
+
+```bash
+npm install flexi-datagrid
+```
+
+`react`, `react-dom`, and `lucide-react` are peer dependencies — make sure they're installed in your project.
+
+Don't forget to import the required CSS file in your main entry file (e.g. `main.tsx` or `App.tsx`):
+
+```tsx
+import 'flexi-datagrid/dist/flexi-datagrid.css';
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import { DataTable, type ColumnConfig } from 'flexi-datagrid';
+import 'flexi-datagrid/dist/flexi-datagrid.css';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+}
+
+const data: Employee[] = [
+  { id: 1, name: 'Ava Thompson', department: 'Engineering', role: 'Frontend Developer', salary: 95000 },
+  { id: 2, name: 'Liam Carter', department: 'Engineering', role: 'Backend Developer', salary: 102000 },
+  { id: 3, name: 'Sofia Ramirez', department: 'Design', role: 'Product Designer', salary: 88000 },
+  { id: 4, name: 'Noah Patel', department: 'Sales', role: 'Account Executive', salary: 76000 },
+];
+
+const columns: ColumnConfig<Employee>[] = [
+  { key: 'name', header: 'Name', sortable: true, filterable: true, pinned: true },
+  { key: 'department', header: 'Department', sortable: true, filterable: true },
+  { key: 'role', header: 'Role', sortable: true, filterable: true },
+  {
+    key: 'salary',
+    header: 'Salary',
+    sortable: true,
+    render: (value) => `$${value.toLocaleString()}`,
+  },
+];
+
+export default function EmployeeTable() {
+  return (
+    <DataTable<Employee>
+      columns={columns}
+      data={data}
+      rowKey="id"
+      groupBy
+      defaultGroupBy={['department']}
+      actions={(record) => (
+        <button onClick={() => console.log('Edit', record.id)}>Edit</button>
+      )}
+    />
+  );
+}
+```
+
+---
+
+## ⚙️ How It Works
+
+`DataTable` is a single, self-contained component: pass it `columns` and `data`, and it manages sorting, filtering, pinning, and grouping state internally.
+
+### Columns (`ColumnConfig<T>`)
+
+Each entry in `columns` describes one column (or a group of columns, via `children`):
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `key` | `string` | Unique identifier for the column. Used to read values off each row (`record[key]`) unless `getValue` is provided. |
+| `header` | `string` | Text shown in the column header. |
+| `className` / `headerClassName` | `string` | Extra classes applied to body cells / the header cell. |
+| `style` / `headerStyle` | `CSSProperties` | Inline styles for body cells / the header cell (e.g. fixed `width`). |
+| `render` | `(value, record) => ReactNode` | Custom cell renderer. Falls back to the raw value if omitted. |
+| `getValue` | `(record) => any` | Custom accessor used for sorting, filtering, and grouping when the value isn't a simple `record[key]` lookup. |
+| `filterable` | `boolean` | Shows a filter icon in the header that opens a multi-select popup of unique column values. |
+| `sortable` | `boolean` | Makes the header clickable, cycling through ascending → descending → unsorted. |
+| `pinned` | `boolean` | Pins the column to the left edge by default (still toggleable per-column from the UI). |
+| `children` | `ColumnConfig<T>[]` | Nest columns to render a grouped, multi-row header. Only leaf columns are sortable/filterable/pinnable. |
+
+### Grid props (`DataTableProps<T>`)
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `columns` | `ColumnConfig<T>[]` | Column definitions (see above). |
+| `data` | `T[]` | Row data to render. |
+| `rowKey` | `keyof T \| (record: T) => string` | Field name or function used to derive a unique React key per row. |
+| `actions` | `(record: T) => ReactNode` | Renders a sticky, right-aligned actions cell per row (e.g. edit/delete buttons). |
+| `isLoading` | `boolean` | Shows a loading state in place of rows. |
+| `groupBy` | `boolean` | Enables drag-and-drop row grouping — drag a column header into the grouping zone above the grid. |
+| `defaultGroupBy` | `string[]` | Column keys the grid is grouped by on initial render (requires `groupBy`). |
+| `onPinChange` | `(columnKey, isPinned) => void` | Called whenever a column is pinned/unpinned. |
+| `onGroupChange` | `(groupedKeys: string[]) => void` | Called whenever the set of grouped columns changes. |
+| `containerStyle` | `CSSProperties` | Inline styles for the scrollable table container. |
+| `tableStyle` | `CSSProperties` | Inline styles for the `<table>` element itself. |
+
+### Filtering
+
+Any column with `filterable: true` gets a filter icon in its header. Clicking it opens a searchable, multi-select popup listing the column's unique values (derived from `data`, via `getValue` if provided). Selected values are combined with AND across columns and OR within a column's own selected values. The popup is rendered through a portal anchored to the grid's own root element, so it overlays the grid instead of being clipped by the table's horizontal scroll container — similar to an Excel-style filter panel.
+
+### Sorting
+
+Clicking a `sortable` column header cycles through ascending → descending → unsorted. Only one column can be actively sorted at a time.
+
+### Row Grouping
+
+Set `groupBy` to enable a drop zone above the table. Dragging a sortable/leaf column header into it groups rows by that column's value, with collapsible group rows and per-group row counts. Multiple columns can be stacked to create nested groups; use `defaultGroupBy` to pre-group on mount.
+
+### Column Pinning
+
+Hovering a header reveals a pin icon; pinning locks that column to the left with a sticky position and shadow so it stays visible while scrolling horizontally. Columns marked `pinned: true` start pinned.
+
+---
+
+## 🛠 Local Development
+
+```bash
+npm install
+npm run build   # bundles the library to dist/ and emits type declarations
+```
+
+## 📄 License
+
+ISC

package/dist/flexi-datagrid.css

@@ -1,2 +1,2 @@
-*,: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}
+.flexi-root{width:100%;position:relative}.flexi-root>*+*{margin-top:.75rem}.flexi-groupzone{box-sizing:border-box;background-color:#f8fafc80;border:1px dashed #e2e8f0;border-radius:.75rem;align-items:center;gap:.5rem;width:100%;min-height:52px;padding:.5rem 1rem;transition:all .2s;display:flex}.flexi-groupzone--dragover{background-color:#eff6ff80;border:1px solid #3b82f6;transform:scale(.99)}.flexi-groupzone-hint{color:#64748b;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:500}.flexi-groupzone-chips{flex-wrap:wrap;align-items:center;gap:.375rem;display:flex}.flexi-groupzone-label{text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-right:.25rem;font-size:11px;font-weight:700}.flexi-chip{color:#64748b;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;align-items:center;gap:.375rem;padding:.25rem .25rem .25rem .5rem;font-size:12px;font-weight:600;display:flex;box-shadow:0 1px 2px #0000000d}.flexi-chip-remove{border-radius:5px;width:18px;height:18px}.flexi-table-wrap{box-sizing:border-box;background-color:#fff;border:1px solid #f1f5f9;border-radius:.75rem;width:100%;overflow-x:auto;box-shadow:0 1px 2px #0000000d}.flexi-table{caption-side:bottom;border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;font-size:.875rem}.flexi-thead{-webkit-user-select:none;user-select:none;background-color:#f8fafc}.flexi-header-row{border-bottom:1px solid #f1f5f9}.flexi-group-spacer-th{border-right:1px solid #f1f5f9;width:48px}.flexi-th{text-align:center;vertical-align:middle;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;height:48px;padding:0 1rem;font-size:12px;font-weight:700;position:relative}.flexi-th--draggable{cursor:grab}.flexi-th--draggable:active{cursor:grabbing}.flexi-th--pinned{background-color:#f8fafce6}.flexi-th-inner{justify-content:space-between;align-items:center;gap:.25rem;width:100%;display:flex}.flexi-th-label{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:.375rem;width:100%;display:flex;overflow:hidden}.flexi-th-label--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.flexi-th-label--sortable:hover{color:#2563eb}.flexi-th-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.flexi-sort-icon{color:#94a3b8;opacity:0;transition:color .15s,opacity .15s}.flexi-sort-icon--active{color:#2563eb;opacity:1}.flexi-th-inner:hover .flexi-sort-icon{opacity:1}.flexi-th-actions{align-items:center;gap:2px;display:flex}.flexi-icon-btn{color:#64748b;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;margin:0;padding:0;transition:background-color .15s,color .15s,transform .1s;display:inline-flex}.flexi-icon-btn:hover{color:#334155;background-color:#e2e8f0}.flexi-icon-btn:active{background-color:#cbd5e1;transform:scale(.92)}.flexi-icon-btn:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-filter-btn{color:#64748b;opacity:0}.flexi-filter-btn--active{color:#2563eb;opacity:1}.flexi-filter-btn--active:hover{color:#2563eb;background-color:#dbeafe}.flexi-pin-btn{color:#cbd5e1;opacity:0}.flexi-pin-btn--pinned{color:#3b82f6;opacity:1}.flexi-pin-btn--pinned:hover{color:#2563eb;background-color:#dbeafe}.flexi-th-inner:hover .flexi-filter-btn,.flexi-th-inner:hover .flexi-pin-btn{opacity:1}.flexi-actions-th{vertical-align:middle;text-align:right;height:48px;padding:0 1rem;font-size:12px;font-weight:700;box-shadow:-1px 0 #e2e8f0}.flexi-filter-dropdown{color:#334155;text-align:left;pointer-events:auto;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;flex-direction:column;width:13rem;padding:.5rem 0;font-weight:400;display:flex;position:absolute;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.flexi-filter-search{border-bottom:1px solid #f1f5f9;margin-bottom:.25rem;padding:0 .5rem .5rem}.flexi-input{color:#475569;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem .5rem;font-size:12px;font-weight:500}.flexi-input:focus{border-color:#3b82f6;outline:none}.flexi-filter-list{flex-direction:column;gap:.25rem;max-height:10rem;padding:0 .5rem;display:flex;overflow-y:auto}.flexi-filter-empty{color:#64748b;text-align:center;padding:.5rem;font-size:11px}.flexi-filter-option{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25rem;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:12px;display:flex}.flexi-filter-option:hover{background-color:#f8fafc}.flexi-filter-option-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.flexi-checkbox{accent-color:#2563eb;border:1px solid #cbd5e1;border-radius:.25rem;width:.875rem;height:.875rem}.flexi-checkbox:focus{outline-offset:1px;outline:2px solid #3b82f6}.flexi-filter-footer{border-top:1px solid #f1f5f9;justify-content:flex-end;margin-top:.5rem;padding:.25rem .5rem 0;display:flex}.flexi-filter-clear{color:#ef4444;padding:.125rem .5rem;font-size:11px;font-weight:500}.flexi-filter-clear:hover{text-decoration:underline}.flexi-tbody{display:table-row-group}.flexi-tbody tr+tr{border-top:1px solid #f1f5f9}.flexi-empty-cell{text-align:center;color:#64748b;padding:2rem;font-size:12px;font-weight:500}.flexi-group-row{-webkit-user-select:none;user-select:none;background-color:#f8fafc99;transition:background-color .15s}.flexi-group-row:hover{background-color:#f1f5f9cc}.flexi-group-cell{color:#334155;border-right:1px solid #f1f5f9;padding:.75rem 1rem;font-size:12px;font-weight:600}.flexi-group-toggle{text-align:left;border-radius:6px;align-items:center;gap:.375rem;margin:-4px -8px -4px -4px;padding:4px 8px 4px 4px;transition:background-color .15s;display:flex}.flexi-group-toggle:hover{background-color:#e2e8f099}.flexi-group-toggle:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-icon-muted{color:#64748b}.flexi-group-value{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;width:10rem;font-weight:700;overflow:hidden}.flexi-group-count{color:#64748b;background-color:#e2e8f0b3;border-radius:9999px;margin-left:.25rem;padding:.05rem .375rem;font-size:10px;font-weight:500}.flexi-group-filler{background-color:#f8fafc4d}.flexi-row{border-bottom:1px solid #f1f5f9;height:48px;transition:background-color .15s}.flexi-row:hover{background-color:#f8fafccc}.flexi-row-indent-cell{background-color:#fff;border-right:1px solid #f1f5f9;width:48px}.flexi-cell{vertical-align:middle;padding:.25rem 1rem;transition:background-color .15s}.flexi-row:hover .flexi-cell--pinned{background-color:#f1f5f9}.flexi-cell-text{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;display:block;overflow:hidden}.flexi-actions-cell{vertical-align:middle;text-align:right;background-color:#fff;padding:.25rem 1rem;box-shadow:-1px 0 #e2e8f0}.flexi-row:hover .flexi-actions-cell{background-color:#f8fafccc}.flexi-actions-inner{opacity:0;justify-content:flex-end;gap:.25rem;transition:opacity .15s;display:flex}.flexi-row:hover .flexi-actions-inner{opacity:1}.flexi-icon-xs{width:.75rem;height:.75rem}.flexi-icon-sm{width:.875rem;height:.875rem}.flexi-icon-md{width:1rem;height:1rem}.flexi-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0;line-height:normal}.flexi-root input{font:inherit}.flexi-root table{border-collapse:collapse;border-spacing:0}
 /*$vite$:1*/

package/dist/index.es.js

@@ -1,68 +1,84 @@
-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";
-import { useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ArrowDown as e, ArrowUp as t, ArrowUpDown as n, ChevronDown as r, ChevronRight as i, Filter as a, Pin as o, PinOff as s, X as c } from "lucide-react";
+import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { createPortal as p } from "react-dom";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/DataTable.tsx
-var m = (e) => {
+var g = (e) => {
 	let t = [];
 	return e.forEach((e) => {
-		e.children && e.children.length > 0 ? t.push(...m(e.children)) : t.push(e);
+		e.children && e.children.length > 0 ? t.push(...g(e.children)) : t.push(e);
 	}), t;
-};
-function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy: y = !1, defaultGroupBy: b = [], onPinChange: x, onGroupChange: S, containerStyle: C, tableStyle: te }) {
-	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({
+}, _ = (...e) => e.filter(Boolean).join(" ");
+function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: ee, groupBy: S = !1, defaultGroupBy: C = [], onPinChange: w, onGroupChange: T, containerStyle: te, tableStyle: ne }) {
+	let [E, D] = f(null), [O, k] = f({}), [A, j] = f(""), [M, re] = f(null), N = d(/* @__PURE__ */ new Map()), [P, F] = f(C), [I, L] = f({}), [ie, R] = f(!1), [z, B] = f({
 		key: null,
 		direction: null
-	}), L = l(() => m(h), [h]), [R, z] = d(L.filter((e) => e.pinned).map((e) => e.key)), B = l(() => {
+	}), V = u(() => g(v), [v]), [H, ae] = f(V.filter((e) => e.pinned).map((e) => e.key)), U = u(() => {
 		let e = (t) => [...t].sort((e, t) => {
-			let n = R.includes(e.key), r = R.includes(t.key);
+			let n = H.includes(e.key), r = H.includes(t.key);
 			return n && !r ? -1 : !n && r ? 1 : 0;
 		}).map((t) => t.children && t.children.length > 0 ? {
 			...t,
 			children: e(t.children)
 		} : t);
-		return e(h);
-	}, [h, R]), V = l(() => {
-		let e = m(B), t = y ? A : [];
+		return e(v);
+	}, [v, H]), W = u(() => {
+		let e = g(U), t = S ? P : [];
 		return e.filter((e) => !t.includes(e.key));
 	}, [
-		B,
-		A,
-		y
-	]), H = u(null);
-	c(() => {
+		U,
+		P,
+		S
+	]), G = d(null), K = d(null);
+	l(() => {
 		function e(e) {
-			H.current && !H.current.contains(e.target) && (T(null), k(""));
+			let t = e.target, n = E ? N.current.get(E) : null;
+			K.current && !K.current.contains(t) && !(n && n.contains(t)) && (D(null), j(""));
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []);
-	let U = (e) => typeof _ == "function" ? _(e) : String(e[_]), W = (e) => {
-		let t = R.includes(e);
-		z(t ? R.filter((t) => t !== e) : [...R, e]), x && x(e, !t);
-	}, G = (e) => {
+	}, [E]), l(() => {
+		if (!E) return;
+		let e = () => {
+			let e = N.current.get(E), t = G.current;
+			if (!e || !t) return;
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+			re({
+				top: n.bottom - r.top + 4,
+				left: n.left - r.left
+			});
+		};
+		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+		};
+	}, [E]);
+	let oe = (e) => typeof b == "function" ? b(e) : String(e[b]), se = (e) => {
+		let t = H.includes(e);
+		ae(t ? H.filter((t) => t !== e) : [...H, e]), w && w(e, !t);
+	}, ce = (e) => {
 		let t = "asc";
-		F.key === e && (t = F.direction === "asc" ? "desc" : F.direction === "desc" ? null : "asc"), I({
+		z.key === e && (t = z.direction === "asc" ? "desc" : z.direction === "desc" ? null : "asc"), B({
 			key: t ? e : null,
 			direction: t
 		});
-	}, K = (e, t) => {
-		y && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
-	}, re = (e) => {
-		e.preventDefault(), P(!1);
+	}, le = (e, t) => {
+		S && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
+	}, ue = (e) => {
+		e.preventDefault(), R(!1);
 		let t = e.dataTransfer.getData("text/plain");
-		if (t && !A.includes(t)) {
-			let e = [...A, t];
-			j(e), S && S(e);
+		if (t && !P.includes(t)) {
+			let e = [...P, t];
+			F(e), T && T(e);
 		}
-	}, ie = (e) => {
-		let t = A.filter((t) => t !== e);
-		j(t), N({}), S && S(t);
-	}, q = l(() => {
+	}, de = (e) => {
+		let t = P.filter((t) => t !== e);
+		F(t), L({}), T && T(t);
+	}, q = u(() => {
 		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(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) => {
+		}, t = e(U), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? P.includes(e.key) && S ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = S ? P : [], a = (e, o) => {
 			e.forEach((e) => {
 				if (i.includes(e.key)) return;
 				let s = r(e);
@@ -77,55 +93,55 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
 				}));
 			});
 		};
-		return a(B, 0), n.filter((e) => e.length > 0);
+		return a(U, 0), n.filter((e) => e.length > 0);
 	}, [
-		B,
-		A,
-		y
-	]), ae = l(() => {
+		U,
+		P,
+		S
+	]), fe = u(() => {
 		let e = {}, t = 0;
-		return y && A.length > 0 && (t += 48), V.forEach((n) => {
-			if (R.includes(n.key)) {
+		return S && P.length > 0 && (t += 48), W.forEach((n) => {
+			if (H.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;
 	}, [
-		V,
-		R,
-		A,
-		y
-	]), oe = (e, t) => {
-		D((n) => {
+		W,
+		H,
+		P,
+		S
+	]), pe = (e, t) => {
+		k((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;
 		});
-	}, se = (e) => {
-		D((t) => {
+	}, me = (e) => {
+		k((t) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, J = l(() => {
-		if (!w) return [];
-		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);
-		return O.trim() ? n.filter((e) => String(e).toLowerCase().includes(O.toLowerCase())) : n;
+	}, J = u(() => {
+		if (!E) return [];
+		let e = V.find((e) => e.key === E), t = y.map((t) => e?.getValue ? e.getValue(t) : t[E]), n = Array.from(new Set(t)).filter((e) => e != null);
+		return A.trim() ? n.filter((e) => String(e).toLowerCase().includes(A.toLowerCase())) : n;
 	}, [
-		g,
-		w,
-		O,
-		L
-	]), Y = l(() => {
-		let e = g.filter((e) => Object.entries(E).every(([t, n]) => {
+		y,
+		E,
+		A,
+		V
+	]), Y = u(() => {
+		let e = y.filter((e) => Object.entries(O).every(([t, n]) => {
 			if (!n || n.length === 0) return !0;
-			let r = L.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
+			let r = V.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
 			return n.includes(i);
 		}));
-		if (F.key && F.direction) {
-			let { key: t, direction: n } = F, r = L.find((e) => e.key === t);
+		if (z.key && z.direction) {
+			let { key: t, direction: n } = z, r = V.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;
@@ -140,15 +156,15 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
 		}
 		return e;
 	}, [
-		g,
-		E,
-		F,
-		L
-	]), X = l(() => {
-		if (!y || A.length === 0) return Y;
+		y,
+		O,
+		z,
+		V
+	]), X = u(() => {
+		if (!S || P.length === 0) return Y;
 		let e = (t, n, r = "") => {
-			if (n >= A.length) return t;
-			let i = A[n], a = L.find((e) => e.key === i), o = {};
+			if (n >= P.length) return t;
+			let i = P[n], a = V.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);
@@ -168,84 +184,86 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
 		return e(Y, 0);
 	}, [
 		Y,
-		A,
-		y,
-		L
-	]), ce = (e) => {
-		N((t) => {
+		P,
+		S,
+		V
+	]), he = (e) => {
+		L((t) => {
 			let n = t[e] !== !1;
 			return {
 				...t,
 				[e]: !n
 			};
 		});
-	}, Z = l(() => {
-		if (!y || A.length === 0) return X;
+	}, Z = u(() => {
+		if (!S || P.length === 0) return X;
 		let e = [], t = (n) => {
 			n.forEach((n) => {
-				n.isGroupRow ? (e.push(n), M[n.path] !== !1 && t(n.children)) : e.push(n);
+				n.isGroupRow ? (e.push(n), I[n.path] !== !1 && t(n.children)) : e.push(n);
 			});
 		};
 		return t(X), e;
 	}, [
 		X,
-		M,
-		A,
-		y
-	]), Q = (e, t = !1, n) => R.includes(e) ? {
+		I,
+		P,
+		S
+	]), Q = (e, t = !1, n) => H.includes(e) ? {
 		position: "sticky",
-		left: `${ae[e]}px`,
+		left: `${fe[e]}px`,
 		zIndex: t ? 30 : 20,
 		backgroundColor: "#fff",
 		boxShadow: "2px 0 5px -2px rgba(0,0,0,0.1)",
 		...n
-	} : n || {}, $ = V.length + +!!v + (y && A.length > 0 ? 1 : 0);
-	return /* @__PURE__ */ p("div", {
-		className: "w-full space-y-3",
-		children: [y && /* @__PURE__ */ f("div", {
+	} : n || {}, $ = W.length + +!!x + (S && P.length > 0 ? 1 : 0);
+	return /* @__PURE__ */ h("div", {
+		ref: G,
+		className: "flexi-root",
+		children: [S && /* @__PURE__ */ m("div", {
 			onDragOver: (e) => {
-				e.preventDefault(), P(!0);
+				e.preventDefault(), R(!0);
 			},
-			onDragLeave: () => P(!1),
-			onDrop: re,
-			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"}`,
-			children: A.length === 0 ? /* @__PURE__ */ f("span", {
-				className: "text-[12px] text-muted-foreground font-medium select-none",
+			onDragLeave: () => R(!1),
+			onDrop: ue,
+			className: _("flexi-groupzone", ie && "flexi-groupzone--dragover"),
+			children: P.length === 0 ? /* @__PURE__ */ m("span", {
+				className: "flexi-groupzone-hint",
 				children: "Drag a column header here to group your records by that field"
-			}) : /* @__PURE__ */ p("div", {
-				className: "flex flex-wrap items-center gap-1.5",
-				children: [/* @__PURE__ */ f("span", {
-					className: "text-[11px] font-bold uppercase tracking-wider text-muted-foreground mr-1",
+			}) : /* @__PURE__ */ h("div", {
+				className: "flexi-groupzone-chips",
+				children: [/* @__PURE__ */ m("span", {
+					className: "flexi-groupzone-label",
 					children: "Grouped By:"
-				}), A.map((e) => /* @__PURE__ */ p("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: [/* @__PURE__ */ f("span", { children: L.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ f("button", {
-						onClick: () => ie(e),
-						className: "p-0.5 rounded-md hover:bg-slate-100 text-muted-foreground transition-colors",
-						children: /* @__PURE__ */ f(s, { className: "w-3 h-3" })
+				}), P.map((e) => /* @__PURE__ */ h("div", {
+					className: "flexi-chip",
+					children: [/* @__PURE__ */ m("span", { children: V.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: () => de(e),
+						className: "flexi-icon-btn flexi-chip-remove",
+						children: /* @__PURE__ */ m(c, { className: "flexi-icon-xs" })
 					})]
 				}, e))]
 			})
-		}), /* @__PURE__ */ f("div", {
-			className: "w-full overflow-x-auto border border-slate-100 rounded-xl bg-white shadow-sm",
-			style: C,
-			children: /* @__PURE__ */ p("table", {
-				className: "w-full caption-bottom text-sm border-collapse table-fixed",
-				style: te,
+		}), /* @__PURE__ */ m("div", {
+			className: "flexi-table-wrap",
+			style: te,
+			children: /* @__PURE__ */ h("table", {
+				className: "flexi-table",
+				style: ne,
 				children: [
-					/* @__PURE__ */ p("colgroup", { children: [
-						y && A.length > 0 && /* @__PURE__ */ f("col", { style: { width: "48px" } }),
-						V.map((e) => /* @__PURE__ */ f("col", { style: e.style }, e.key)),
-						v && /* @__PURE__ */ f("col", { style: { width: "100px" } })
+					/* @__PURE__ */ h("colgroup", { children: [
+						S && P.length > 0 && /* @__PURE__ */ m("col", { style: { width: "48px" } }),
+						W.map((e) => /* @__PURE__ */ m("col", { style: e.style }, e.key)),
+						x && /* @__PURE__ */ m("col", { style: { width: "100px" } })
 					] }),
-					/* @__PURE__ */ f("thead", {
-						className: "bg-slate-50 select-none",
-						children: q.map((r, i) => /* @__PURE__ */ p("tr", {
-							className: "border-b border-slate-100",
+					/* @__PURE__ */ m("thead", {
+						className: "flexi-thead",
+						children: q.map((r, i) => /* @__PURE__ */ h("tr", {
+							className: "flexi-header-row",
 							children: [
-								i === 0 && y && A.length > 0 && /* @__PURE__ */ f("th", {
+								i === 0 && S && P.length > 0 && /* @__PURE__ */ m("th", {
 									rowSpan: q.length,
-									className: "w-12 border-r border-slate-100",
+									className: "flexi-group-spacer-th",
 									style: {
 										position: "sticky",
 										left: 0,
@@ -253,98 +271,109 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
 										backgroundColor: "rgb(248, 250, 252)"
 									}
 								}),
-								r.map(({ col: r, rowSpan: i, colSpan: s }) => {
-									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;
-									return /* @__PURE__ */ f("th", {
+								r.map(({ col: r, rowSpan: i, colSpan: c }) => {
+									let l = (O[r.key]?.length || 0) > 0, u = H.includes(r.key), d = Q(r.key, !0, r.headerStyle), f = !r.children || r.children.length === 0, g = z.key === r.key, v = !!(S && f);
+									return /* @__PURE__ */ m("th", {
 										rowSpan: i,
-										colSpan: s,
-										...y && d ? {
+										colSpan: c,
+										...v ? {
 											draggable: !0,
-											onDragStart: (e) => K(e, r.key)
+											onDragStart: (e) => le(e, r.key)
 										} : {},
-										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 || ""}`,
-										style: u,
-										children: /* @__PURE__ */ p("div", {
-											className: "flex items-center gap-1 group/header w-full justify-between",
+										className: _("flexi-th", v && "flexi-th--draggable", u && "flexi-th--pinned", r.className),
+										style: d,
+										children: /* @__PURE__ */ h("div", {
+											className: "flexi-th-inner",
 											children: [
-												/* @__PURE__ */ p("div", {
-													className: `flex items-center gap-1.5 truncate w-full ${r.sortable && d ? "cursor-pointer select-none hover:text-blue-600" : ""}`,
-													onClick: () => r.sortable && d && G(r.key),
-													children: [/* @__PURE__ */ f("span", {
-														className: "truncate",
+												/* @__PURE__ */ h("div", {
+													className: _("flexi-th-label", r.sortable && f && "flexi-th-label--sortable"),
+													onClick: () => r.sortable && f && ce(r.key),
+													children: [/* @__PURE__ */ m("span", {
+														className: "flexi-th-text",
 														children: r.header
-													}), d && r.sortable && /* @__PURE__ */ f("span", {
-														className: `text-slate-400 transition-colors ${m ? "text-blue-600" : "opacity-0 group-hover/header:opacity-100"}`,
-														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" })
+													}), f && r.sortable && /* @__PURE__ */ m("span", {
+														className: _("flexi-sort-icon", g && "flexi-sort-icon--active"),
+														children: g && z.direction === "asc" ? /* @__PURE__ */ m(t, { className: "flexi-icon-sm" }) : g && z.direction === "desc" ? /* @__PURE__ */ m(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ m(n, { className: "flexi-icon-sm" })
 													})]
 												}),
-												/* @__PURE__ */ p("div", {
-													className: "flex items-center gap-1",
-													children: [d && r.filterable && /* @__PURE__ */ f("button", {
+												/* @__PURE__ */ h("div", {
+													className: "flexi-th-actions",
+													children: [f && r.filterable && /* @__PURE__ */ m("button", {
+														type: "button",
+														ref: (e) => {
+															e ? N.current.set(r.key, e) : N.current.delete(r.key);
+														},
 														onClick: (e) => {
-															e.stopPropagation(), k(""), T(w === r.key ? null : r.key);
+															e.stopPropagation(), j(""), D(E === r.key ? null : r.key);
 														},
-														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"}`,
-														children: "Filter"
-													}), d && /* @__PURE__ */ f("button", {
+														className: _("flexi-icon-btn", "flexi-filter-btn", l && "flexi-filter-btn--active"),
+														children: /* @__PURE__ */ m(a, { className: "flexi-icon-sm" })
+													}), f && /* @__PURE__ */ m("button", {
+														type: "button",
 														onClick: (e) => {
-															e.stopPropagation(), W(r.key);
+															e.stopPropagation(), se(r.key);
 														},
-														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"}`,
-														title: l ? "Unpin column" : "Pin column",
-														children: f(l ? o : a, { className: "w-3.5 h-3.5" })
+														className: _("flexi-icon-btn", "flexi-pin-btn", u && "flexi-pin-btn--pinned"),
+														title: u ? "Unpin column" : "Pin column",
+														children: m(u ? s : o, { className: "flexi-icon-sm" })
 													})]
 												}),
-												w === r.key && d && /* @__PURE__ */ p("div", {
-													ref: H,
-													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",
+												E === r.key && f && M && G.current && p(/* @__PURE__ */ h("div", {
+													ref: K,
+													className: "flexi-filter-dropdown",
+													style: {
+														top: M.top,
+														left: M.left,
+														zIndex: 9999
+													},
 													children: [
-														/* @__PURE__ */ f("div", {
-															className: "px-2 pb-2 mb-1 border-b border-slate-100",
-															children: /* @__PURE__ */ f("input", {
+														/* @__PURE__ */ m("div", {
+															className: "flexi-filter-search",
+															children: /* @__PURE__ */ m("input", {
 																type: "text",
 																placeholder: "Search values...",
-																value: O,
-																onChange: (e) => k(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",
+																value: A,
+																onChange: (e) => j(e.target.value),
+																className: "flexi-input",
 																onClick: (e) => e.stopPropagation()
 															})
 														}),
-														/* @__PURE__ */ f("div", {
-															className: "max-h-40 overflow-y-auto px-2 space-y-1",
-															children: J.length === 0 ? /* @__PURE__ */ f("div", {
-																className: "text-[11px] text-muted-foreground p-2 text-center",
+														/* @__PURE__ */ m("div", {
+															className: "flexi-filter-list",
+															children: J.length === 0 ? /* @__PURE__ */ m("div", {
+																className: "flexi-filter-empty",
 																children: "No results found"
-															}) : J.map((e, t) => /* @__PURE__ */ p("label", {
-																className: "flex items-center gap-2 px-2 py-1.5 text-[12px] rounded hover:bg-slate-50 cursor-pointer select-none",
-																children: [/* @__PURE__ */ f("input", {
+															}) : J.map((e, t) => /* @__PURE__ */ h("label", {
+																className: "flexi-filter-option",
+																children: [/* @__PURE__ */ m("input", {
 																	type: "checkbox",
-																	className: "rounded border-slate-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5",
-																	checked: E[r.key]?.includes(e) || !1,
-																	onChange: () => oe(r.key, e)
-																}), /* @__PURE__ */ f("span", {
-																	className: "truncate",
+																	className: "flexi-checkbox",
+																	checked: O[r.key]?.includes(e) || !1,
+																	onChange: () => pe(r.key, e)
+																}), /* @__PURE__ */ m("span", {
+																	className: "flexi-filter-option-text",
 																	children: String(e)
 																})]
 															}, t))
 														}),
-														c && /* @__PURE__ */ f("div", {
-															className: "border-t border-slate-100 mt-2 pt-1 px-2 flex justify-end",
-															children: /* @__PURE__ */ f("button", {
-																onClick: () => se(r.key),
-																className: "text-[11px] text-red-500 hover:underline font-medium px-2 py-0.5",
+														l && /* @__PURE__ */ m("div", {
+															className: "flexi-filter-footer",
+															children: /* @__PURE__ */ m("button", {
+																type: "button",
+																onClick: () => me(r.key),
+																className: "flexi-filter-clear",
 																children: "Clear Filter"
 															})
 														})
 													]
-												})
+												}), G.current)
 											]
 										})
 									}, r.key);
 								}),
-								i === 0 && v && /* @__PURE__ */ f("th", {
+								i === 0 && x && /* @__PURE__ */ m("th", {
 									rowSpan: q.length,
-									className: "h-12 align-middle font-bold text-[12px] px-4 text-right shadow-[-1px_0_0_rgba(226,232,240,1)]",
+									className: "flexi-actions-th",
 									style: {
 										position: "sticky",
 										right: 0,
@@ -355,23 +384,23 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
 							]
 						}, `header-row-${i}`))
 					}),
-					/* @__PURE__ */ f("tbody", {
-						className: "divide-y divide-slate-100",
-						children: ee ? /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
+					/* @__PURE__ */ m("tbody", {
+						className: "flexi-tbody",
+						children: ee ? /* @__PURE__ */ m("tr", { children: /* @__PURE__ */ m("td", {
 							colSpan: $,
-							className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
+							className: "flexi-empty-cell",
 							children: "Loading records..."
-						}) }) : Z.length === 0 ? /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
+						}) }) : Z.length === 0 ? /* @__PURE__ */ m("tr", { children: /* @__PURE__ */ m("td", {
 							colSpan: $,
-							className: "p-8 text-center text-muted-foreground text-[12px] font-medium",
+							className: "flexi-empty-cell",
 							children: "No records found matching criteria."
 						}) }) : Z.map((e, t) => {
 							if (e.isGroupRow) {
-								let n = M[e.path] !== !1;
-								return /* @__PURE__ */ p("tr", {
-									className: "bg-slate-50/60 hover:bg-slate-100/80 transition-colors select-none",
-									children: [/* @__PURE__ */ f("td", {
-										className: "p-3 pl-4 font-semibold text-slate-700 text-[12px] border-r border-slate-100",
+								let n = I[e.path] !== !1;
+								return /* @__PURE__ */ h("tr", {
+									className: "flexi-group-row",
+									children: [/* @__PURE__ */ m("td", {
+										className: "flexi-group-cell",
 										style: {
 											position: "sticky",
 											left: 0,
@@ -379,63 +408,64 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
 											backgroundColor: "rgba(248, 250, 252, 0.9)",
 											paddingLeft: `${e.depth * 12 + 16}px`
 										},
-										children: /* @__PURE__ */ p("button", {
-											onClick: () => ce(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: /* @__PURE__ */ h("button", {
+											type: "button",
+											onClick: () => he(e.path),
+											className: "flexi-group-toggle",
 											children: [
-												f(n ? r : i, { className: "w-4 h-4 text-slate-500" }),
-												/* @__PURE__ */ f("span", {
-													className: "text-slate-800 font-bold w-40 truncate",
+												m(n ? r : i, { className: "flexi-icon-md flexi-icon-muted" }),
+												/* @__PURE__ */ m("span", {
+													className: "flexi-group-value",
 													children: e.groupValue
 												}),
-												/* @__PURE__ */ f("span", {
-													className: "bg-slate-200/70 text-muted-foreground font-medium text-[10px] px-1.5 py-0.2 rounded-full ml-1",
+												/* @__PURE__ */ m("span", {
+													className: "flexi-group-count",
 													children: e.totalItemsCount
 												})
 											]
 										})
-									}), /* @__PURE__ */ f("td", {
+									}), /* @__PURE__ */ m("td", {
 										colSpan: $ - 1,
-										className: "bg-slate-50/30"
+										className: "flexi-group-filler"
 									})]
 								}, `group-header-${e.path}-${t}`);
 							}
-							return /* @__PURE__ */ p("tr", {
-								className: "border-b border-slate-100 h-12 hover:bg-slate-50/80 transition-colors group",
+							return /* @__PURE__ */ h("tr", {
+								className: "flexi-row",
 								children: [
-									y && A?.length > 0 && /* @__PURE__ */ f("td", {
-										className: "w-12 bg-white border-r border-slate-100",
+									S && P?.length > 0 && /* @__PURE__ */ m("td", {
+										className: "flexi-row-indent-cell",
 										style: {
 											position: "sticky",
 											left: 0,
 											zIndex: 10
 										}
 									}),
-									V?.map((t) => {
+									W?.map((t) => {
 										let n = e[t.key], r = Q(t.key, !1, t.style);
-										return /* @__PURE__ */ f("td", {
-											className: `p-4 align-middle py-1 px-4 transition-colors ${R.includes(t.key) ? "group-hover:bg-slate-100" : ""} ${t.className || ""}`,
+										return /* @__PURE__ */ m("td", {
+											className: _("flexi-cell", H.includes(t.key) && "flexi-cell--pinned", t.className),
 											style: r,
-											children: t.render ? t.render(n, e) : /* @__PURE__ */ f("span", {
-												className: "text-[12px] text-muted-foreground font-medium truncate block",
+											children: t.render ? t.render(n, e) : /* @__PURE__ */ m("span", {
+												className: "flexi-cell-text",
 												children: n
 											})
 										}, t.key);
 									}),
-									v && /* @__PURE__ */ f("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",
+									x && /* @__PURE__ */ m("td", {
+										className: "flexi-actions-cell",
 										style: {
 											position: "sticky",
 											right: 0,
 											zIndex: 20
 										},
-										children: /* @__PURE__ */ f("div", {
-											className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150",
-											children: v(e)
+										children: /* @__PURE__ */ m("div", {
+											className: "flexi-actions-inner",
+											children: x(e)
 										})
 									})
 								]
-							}, U(e) ?? `row-${t}`);
+							}, oe(e) ?? `row-${t}`);
 						})
 					})
 				]
@@ -444,4 +474,4 @@ function h({ columns: h, data: g, rowKey: _, actions: v, isLoading: ee, groupBy:
 	});
 }
 //#endregion
-export { h as DataTable };
+export { v as DataTable };

package/dist/index.umd.js

@@ -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`});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});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react-dom"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react-dom`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.ReactDOM,e.JSX))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};n=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(n,1);var f=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...f(e.children)):t.push(e)}),t},p=(...e)=>e.filter(Boolean).join(` `);function m({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:m,containerStyle:h,tableStyle:g}){let[_,v]=(0,n.useState)(null),[y,b]=(0,n.useState)({}),[x,S]=(0,n.useState)(``),[C,w]=(0,n.useState)(null),T=(0,n.useRef)(new Map),[E,D]=(0,n.useState)(u),[O,k]=(0,n.useState)({}),[A,j]=(0,n.useState)(!1),[M,N]=(0,n.useState)({key:null,direction:null}),P=(0,n.useMemo)(()=>f(e),[e]),[F,I]=(0,n.useState)(P.filter(e=>e.pinned).map(e=>e.key)),L=(0,n.useMemo)(()=>{let t=e=>[...e].sort((e,t)=>{let n=F.includes(e.key),r=F.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,F]),R=(0,n.useMemo)(()=>{let e=f(L),t=l?E:[];return e.filter(e=>!t.includes(e.key))},[L,E,l]),z=(0,n.useRef)(null),B=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=_?T.current.get(_):null;B.current&&!B.current.contains(t)&&!(n&&n.contains(t))&&(v(null),S(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[_]),(0,n.useEffect)(()=>{if(!_)return;let e=()=>{let e=T.current.get(_),t=z.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();w({top:n.bottom-r.top+4,left:n.left-r.left})};return e(),window.addEventListener(`scroll`,e,!0),window.addEventListener(`resize`,e),()=>{window.removeEventListener(`scroll`,e,!0),window.removeEventListener(`resize`,e)}},[_]);let V=e=>typeof o==`function`?o(e):String(e[o]),H=e=>{let t=F.includes(e);I(t?F.filter(t=>t!==e):[...F,e]),d&&d(e,!t)},U=e=>{let t=`asc`;M.key===e&&(t=M.direction===`asc`?`desc`:M.direction===`desc`?null:`asc`),N({key:t?e:null,direction:t})},W=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},G=e=>{e.preventDefault(),j(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!E.includes(t)){let e=[...E,t];D(e),m&&m(e)}},K=e=>{let t=E.filter(t=>t!==e);D(t),k({}),m&&m(t)},q=(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(L),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?E.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?E:[],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(L,0),n.filter(e=>e.length>0)},[L,E,l]),ee=(0,n.useMemo)(()=>{let e={},t=0;return l&&E.length>0&&(t+=48),R.forEach(n=>{if(F.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},[R,F,E,l]),te=(e,t)=>{b(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})},ne=e=>{b(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!_)return[];let e=P.find(e=>e.key===_),t=a.map(t=>e?.getValue?e.getValue(t):t[_]),n=Array.from(new Set(t)).filter(e=>e!=null);return x.trim()?n.filter(e=>String(e).toLowerCase().includes(x.toLowerCase())):n},[a,_,x,P]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(y).every(([t,n])=>{if(!n||n.length===0)return!0;let r=P.find(e=>e.key===t),i=r?.getValue?r.getValue(e):e[t];return n.includes(i)}));if(M.key&&M.direction){let{key:t,direction:n}=M,r=P.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},[a,y,M,P]),X=(0,n.useMemo)(()=>{if(!l||E.length===0)return Y;let e=(t,n,r=``)=>{if(n>=E.length)return t;let i=E[n],a=P.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(Y,0)},[Y,E,l,P]),re=e=>{k(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||E.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),O[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,O,E,l]),Q=(e,t=!1,n)=>F.includes(e)?{position:`sticky`,left:`${ee[e]}px`,zIndex:t?30:20,backgroundColor:`#fff`,boxShadow:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}:n||{},$=R.length+ +!!s+(l&&E.length>0?1:0);return(0,i.jsxs)(`div`,{ref:z,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),j(!0)},onDragLeave:()=>j(!1),onDrop:G,className:p(`flexi-groupzone`,A&&`flexi-groupzone--dragover`),children:E.length===0?(0,i.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,i.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,i.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),E.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:P.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>K(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{className:`flexi-table-wrap`,style:h,children:(0,i.jsxs)(`table`,{className:`flexi-table`,style:g,children:[(0,i.jsxs)(`colgroup`,{children:[l&&E.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),R.map(e=>(0,i.jsx)(`col`,{style:e.style},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:q.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&E.length>0&&(0,i.jsx)(`th`,{rowSpan:q.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(y[e.key]?.length||0)>0,s=F.includes(e.key),c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=M.key===e.key,f=!!(l&&u);return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...f?{draggable:!0,onDragStart:t=>W(t,e.key)}:{},className:p(`flexi-th`,f&&`flexi-th--draggable`,s&&`flexi-th--pinned`,e.className),style:c,children:(0,i.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,i.jsxs)(`div`,{className:p(`flexi-th-label`,e.sortable&&u&&`flexi-th-label--sortable`),onClick:()=>e.sortable&&u&&U(e.key),children:[(0,i.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),u&&e.sortable&&(0,i.jsx)(`span`,{className:p(`flexi-sort-icon`,d&&`flexi-sort-icon--active`),children:d&&M.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&M.direction===`desc`?(0,i.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,i.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,i.jsxs)(`div`,{className:`flexi-th-actions`,children:[u&&e.filterable&&(0,i.jsx)(`button`,{type:`button`,ref:t=>{t?T.current.set(e.key,t):T.current.delete(e.key)},onClick:t=>{t.stopPropagation(),S(``),v(_===e.key?null:e.key)},className:p(`flexi-icon-btn`,`flexi-filter-btn`,o&&`flexi-filter-btn--active`),children:(0,i.jsx)(t.Filter,{className:`flexi-icon-sm`})}),u&&(0,i.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),H(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:s?`Unpin column`:`Pin column`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),_===e.key&&u&&C&&z.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:B,className:`flexi-filter-dropdown`,style:{top:C.top,left:C.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:x,onChange:e=>S(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:J.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):J.map((t,n)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:y[e.key]?.includes(t)||!1,onChange:()=>te(e.key,t)}),(0,i.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},n))}),o&&(0,i.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,i.jsx)(`button`,{type:`button`,onClick:()=>ne(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),z.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:q.length,className:`flexi-actions-th`,style:{position:`sticky`,right:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}})]},`header-row-${n}`))}),(0,i.jsx)(`tbody`,{className:`flexi-tbody`,children:c?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`Loading records...`})}):Z.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):Z.map((e,n)=>{if(e.isGroupRow){let r=O[e.path]!==!1;return(0,i.jsxs)(`tr`,{className:`flexi-group-row`,children:[(0,i.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth*12+16}px`},children:(0,i.jsxs)(`button`,{type:`button`,onClick:()=>re(e.path),className:`flexi-group-toggle`,children:[r?(0,i.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,i.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,i.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,i.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,i.jsx)(`td`,{colSpan:$-1,className:`flexi-group-filler`})]},`group-header-${e.path}-${n}`)}return(0,i.jsxs)(`tr`,{className:`flexi-row`,children:[l&&E?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),R?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,F.includes(t.key)&&`flexi-cell--pinned`,t.className),style:r,children:t.render?t.render(n,e):(0,i.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),s&&(0,i.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0,zIndex:20},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},V(e)??`row-${n}`)})})]})})]})}e.DataTable=m});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexi-datagrid",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "A powerful universal datagrid with tree-grouping, column pinning, and drag-and-drop.",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -46,7 +46,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
-    "tailwindcss": "^3.4.17",
     "typescript": "^6.0.3",
     "vite": "^8.0.16",
     "vite-plugin-dts": "^4.5.0",