flexi-datagrid 1.2.5 → 1.2.6

package/README.md

@@ -11,9 +11,14 @@ A modern, highly customizable, and feature-rich React data grid component design
 - **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.
+- **Column Reordering (Drag-and-Drop):** Drag any header and drop it on another to reorder columns, AG Grid-style. Column groups move as a unit; columns can be reordered within their own group or at the top level.
+- **Column Resizing:** Drag the handle on the right edge of a header to resize a column live. Supports per-column `minWidth`/`maxWidth`, opt-out via `resizable: false`, and an `onColumnResize` callback.
 - **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.
+- **Conditional Row Styling (AG Grid-style `rowClassRules`):** Map class names to predicates evaluated per row to highlight/style rows based on their data.
+- **Row Click Events:** Pass `onRowClick` to react to clicks anywhere on a data row.
+- **Virtualized Rows for Large Datasets:** Only the rows in (and just around) the visible viewport are mounted, so grids with thousands of rows stay smooth to scroll and filter.
 - **Full TypeScript Support:** Strongly typed configurations for robust developer experience.
 
 ---
@@ -58,10 +63,11 @@ const data: Employee[] = [
 ];
 
 const columns: ColumnConfig<Employee>[] = [
-  { key: 'name', header: 'Name', sortable: true, filterable: true, pinned: 'left',style: { width: "400px", backgroundColor: "#f9f9f9" },
+  { key: 'name', header: 'Name', sortable: true, filterable: true, pinned: 'left', minWidth: 160, maxWidth: 500,
+    style: { width: "400px", backgroundColor: "#f9f9f9" },
     headerStyle: { fontWeight: "bold", color: "#333" } },
   { key: 'department', header: 'Department', sortable: true, filterable: true },
-  { key: 'role', header: 'Role', sortable: true, filterable: true },
+  { key: 'role', header: 'Role', sortable: true, filterable: true, resizable: false },
   {
     key: 'salary',
     header: 'Salary',
@@ -84,14 +90,24 @@ export default function EmployeeTable() {
         { id: -1, name: '', department: '', role: 'Total', salary: data.reduce((sum, r) => sum + r.salary, 0) },
       ]}
       containerStyle={{ maxHeight: 480 }}
+      rowHeight={48}
+      overscan={8}
+      onColumnResize={(key, width) => console.log('resized', key, width)}
+      onColumnReorder={(orderedKeys) => console.log('reordered', orderedKeys)}
+      rowClassRules={{
+        'row-high-earner': (record) => record.salary > 100000,
+      }}
+      onRowClick={(record) => console.log('clicked', record.id)}
       actions={(record) => (
-        <button onClick={() => console.log('Edit', record.id)}>Edit</button>
+        <button onClick={(e) => { e.stopPropagation(); console.log('Edit', record.id); }}>Edit</button>
       )}
     />
   );
 }
 ```
 
+`name` demonstrates a constrained resize range (`minWidth`/`maxWidth`), `role` opts out of resizing entirely (`resizable: false`), and dragging any header reorders columns — `onColumnResize`/`onColumnReorder` let you persist the user's layout. `rowClassRules` highlights any row with `salary > 100000`, and `onRowClick` logs the clicked row (the `Edit` button calls `stopPropagation` so clicking it doesn't also fire the row click). `containerStyle`'s bounded `maxHeight` (paired with `rowHeight`/`overscan`) is also what enables virtualized scrolling for large `data` arrays — see [Performance with Large Datasets](#performance-with-large-datasets).
+
 ---
 
 ## How It Works
@@ -114,7 +130,9 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
 | `sortable` | `boolean` | Makes the header clickable, cycling through ascending → descending → unsorted. |
 | `pinned` | `boolean \| 'left' \| 'right'` | Pins the column to an edge by default (`true` is shorthand for `'left'`). Still toggleable per-column from the UI. |
 | `pinnedRender` | `(value, record) => ReactNode` | Overrides `render` specifically for rows supplied via `pinnedBottomRowData` (e.g. render a "Total" label or bold sum). Falls back to `render` when omitted. |
-| `children` | `ColumnConfig<T>[]` | Nest columns to render a grouped, multi-row header. Only leaf columns are sortable/filterable/pinnable. |
+| `children` | `ColumnConfig<T>[]` | Nest columns to render a grouped, multi-row header. Only leaf columns are sortable/filterable/pinnable/resizable. |
+| `resizable` | `boolean` | Set to `false` to hide the resize handle and lock the column's width. Defaults to `true` for leaf columns. |
+| `minWidth` / `maxWidth` | `number` | Clamps how far a column can be resized, in pixels. |
 
 ### Grid props (`DataTableProps<T>`)
 
@@ -134,6 +152,12 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
 | `bordered` | `boolean` | Draws full grid borders (all four sides of every cell) instead of the default minimal row/column dividers. |
 | `pinnedBottomRowData` | `T[]` | Rows rendered in a section fixed to the bottom of the grid (e.g. totals/summary rows). Independent of `data` — not affected by sorting, filtering, or grouping. |
 | `pinnedRowClassName` | `string \| (record: T, index: number) => string` | Extra class name(s) applied to each pinned-bottom row, for styling a totals/summary template. |
+| `rowHeight` | `number` | Row height in pixels used for virtualized row rendering. Defaults to `48`, matching the built-in CSS row height — change both together if you customize row height. |
+| `overscan` | `number` | Number of extra off-screen rows rendered above/below the viewport, to smooth fast scrolling. Defaults to `8`. |
+| `onColumnResize` | `(columnKey: string, width: number) => void` | Called once a column resize drag ends, with the column's new width in pixels. |
+| `onColumnReorder` | `(orderedLeafKeys: string[]) => void` | Called whenever columns are reordered via drag-and-drop, with the full leaf column order. |
+| `rowClassRules` | `Record<string, (record: T, index: number) => boolean>` | AG Grid-style conditional row classes: maps a class name to a predicate. Every rule whose predicate returns `true` for a row is applied to that row's `<tr>`. Does not apply to `pinnedBottomRowData` rows (use `pinnedRowClassName` for those). |
+| `onRowClick` | `(record: T, index: number, event: React.MouseEvent) => void` | Called when a data row is clicked, with the row's record, its index in the currently rendered (filtered/sorted/grouped) rows, and the click event. Adds a pointer cursor to rows when set. |
 
 ### Filtering
 
@@ -143,10 +167,72 @@ Any column with `filterable: true` gets a filter icon in its header. Clicking it
 
 Clicking a `sortable` column header cycles through ascending → descending → unsorted. Only one column can be actively sorted at a time.
 
+### Conditional Row Styling (`rowClassRules`)
+
+`rowClassRules` mirrors AG Grid's API: an object mapping a CSS class name to a predicate function `(record, index) => boolean`. On every render, each rule is evaluated against each row, and every class whose predicate returns `true` is applied to that row's `<tr>` (multiple rules can match the same row at once). `index` is the row's position within the currently filtered/sorted/grouped rows, not the original `data` array.
+
+```tsx
+const rowClassRules: Record<string, (record: Employee, index: number) => boolean> = {
+  'row-high-earner': (record) => record.salary > 100000,
+  'row-even': (_record, index) => index % 2 === 0,
+};
+
+<DataTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  rowClassRules={rowClassRules}
+/>
+```
+
+```css
+.row-high-earner { background-color: #fef3c7; }
+.row-even { background-color: #f8fafc; }
+```
+
+Rules only apply to regular data rows — group header rows and `pinnedBottomRowData` rows are unaffected (style the latter with `pinnedRowClassName`).
+
+### Row Click Events
+
+Pass `onRowClick` to be notified when a data row is clicked; the grid adds a pointer cursor to rows automatically once it's set. The handler receives the row's record, its index within the currently rendered rows, and the underlying `MouseEvent` — call `event.stopPropagation()` inside interactive cell content (e.g. an actions button) if you don't want that click to also bubble up as a row click.
+
+```tsx
+<DataTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  onRowClick={(record, index, event) => console.log('clicked row', index, record)}
+/>
+```
+
 ### 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 Reordering
+
+Drag any header cell and drop it on another to reorder columns, similar to AG Grid. Dragging a leaf column reorders it among its siblings; dragging a grouped-header cell moves the whole group. A column can only be dropped among its own siblings — you can't drag a column out of one group and into another. Pass `onColumnReorder` to be notified of the resulting leaf column order (e.g. to persist a user's layout).
+
+Reordering composes with pinning: pinned-left and pinned-right columns still sort to their respective edges regardless of drag order.
+
+### Column Resizing
+
+Hover the right edge of a resizable header to reveal a resize handle; drag it to resize the column live. All leaf columns are resizable by default — set `resizable: false` on a `ColumnConfig` to disable it for that column, and use `minWidth` / `maxWidth` to constrain how far it can be dragged. Pass `onColumnResize` to persist widths (e.g. to `localStorage`) between sessions.
+
+```tsx
+const columns: ColumnConfig<Employee>[] = [
+  { key: 'name', header: 'Name', minWidth: 120, maxWidth: 400 },
+  { key: 'role', header: 'Role', resizable: false }, // fixed width, no handle
+];
+
+<DataTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  onColumnResize={(key, width) => console.log('resized', key, width)}
+/>
+```
+
 ### Column Pinning
 
 Hovering a header reveals a pin icon. Clicking it cycles the column through unpinned → pinned left → pinned right → unpinned, locking it to the corresponding edge with a sticky position and shadow so it stays visible while scrolling horizontally. Columns marked `pinned: true` (or `pinned: 'left'`) start pinned left; `pinned: 'right'` starts pinned right.
@@ -194,6 +280,18 @@ The header row is always fixed in place (`position: sticky; top: 0`) relative to
 
 Pass `bordered` to draw full borders around every cell instead of the default minimal row/column dividers, for a classic spreadsheet look.
 
+### Performance with Large Datasets
+
+Row rendering is virtualized: only the rows visible inside the scrollable container (plus a small `overscan` buffer) are ever mounted as actual `<tr>` elements, regardless of how many rows are in `data`. This keeps scrolling, sorting, and filtering smooth for grids with thousands of rows.
+
+Virtualization requires a bounded, scrollable container and a known row height:
+
+- Give the grid a `maxHeight` via `containerStyle` so `flexi-table-wrap` actually scrolls (see [Sticky Header](#sticky-header)) — without a bounded height, the browser page itself scrolls and every row has to be rendered.
+- The default row height is `48px`, matching the built-in CSS. If you override row height via custom CSS, pass the same value through the `rowHeight` prop so the virtualizer's scroll math stays accurate.
+- Tune `overscan` (default `8`) if you see blank flashes on very fast scrolling — a higher value trades a bit of extra rendering for smoother scroll.
+
+Filtering is also optimized for large datasets: a filter column's unique values are computed once per column (not on every keystroke), and column lookups used during filtering/sorting/grouping are indexed by key instead of scanned linearly.
+
 ---
 
 ## 🛠 Local Development

package/dist/DataTable.d.ts

@@ -14,6 +14,9 @@ export interface ColumnConfig<T> {
     pinned?: boolean | 'left' | 'right';
     children?: ColumnConfig<T>[];
     getValue?: (record: T) => any;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
 }
 type PinSide = 'left' | 'right';
 interface DataTableProps<T> {
@@ -31,6 +34,20 @@ interface DataTableProps<T> {
     bordered?: boolean;
     pinnedBottomRowData?: T[];
     pinnedRowClassName?: string | ((record: T, index: number) => string);
+    /** Row height in px, used for virtualized row rendering. Must match the CSS row height. */
+    rowHeight?: number;
+    /** Number of off-screen rows rendered above/below the viewport to smooth scrolling. */
+    overscan?: number;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    onColumnReorder?: (orderedLeafKeys: string[]) => void;
+    /**
+     * AG Grid-style conditional row classes: maps a class name to a predicate that receives
+     * the row's record and its index within the currently rendered (filtered/sorted/flattened)
+     * rows. Every rule whose predicate returns true is applied; rules are re-evaluated whenever
+     * `data` or its derived filtered/sorted/grouped order changes.
+     */
+    rowClassRules?: Record<string, (record: T, index: number) => boolean>;
+    onRowClick?: (record: T, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
 }
-export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, groupBy, defaultGroupBy, onPinChange, onGroupChange, containerStyle, tableStyle, bordered, pinnedBottomRowData, pinnedRowClassName, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ columns, data, rowKey, actions, isLoading, groupBy, defaultGroupBy, onPinChange, onGroupChange, containerStyle, tableStyle, bordered, pinnedBottomRowData, pinnedRowClassName, rowHeight, overscan, onColumnResize, onColumnReorder, rowClassRules, onRowClick, }: DataTableProps<T>): React.JSX.Element;
 export {};

package/dist/flexi-datagrid.css

@@ -1,2 +1,2 @@
-.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: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;position:relative}.flexi-table--bordered th,.flexi-table--bordered td{border:1px solid #e2e8f0}.flexi-thead{-webkit-user-select:none;user-select:none;z-index:40;position:sticky}.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;z-index:25;background-color:#f8fafc;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;height:48px;padding:0 1rem;font-size:12px;font-weight:700;position:sticky;top:0}.flexi-th--draggable{cursor:grab}.flexi-th--draggable:active{cursor:grabbing}.flexi-th--pinned{background-color:#f8fafc}.flexi-th-inner{justify-content:space-between;align-items:center;gap:.25rem;width:100%;min-width:0;display:flex}.flexi-th-label{white-space:nowrap;text-overflow:ellipsis;flex:auto;align-items:center;gap:.375rem;min-width:0;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;flex:auto;min-width:0;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{flex:none;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-tbody--pinned-bottom{box-shadow:0 -2px 5px -2px #0000001a}.flexi-row--pinned-bottom{background-color:#f8fafc;font-weight:600}.flexi-row--pinned-bottom:hover,.flexi-row--pinned-bottom .flexi-cell,.flexi-row--pinned-bottom .flexi-actions-cell{background-color:#f8fafc}.flexi-row--pinned-bottom .flexi-cell-text{color:#334155}.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}
+.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: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;position:relative}.flexi-table--bordered th,.flexi-table--bordered td{border:1px solid #e2e8f0}.flexi-thead{-webkit-user-select:none;user-select:none;z-index:40;position:sticky}.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;z-index:25;background-color:#f8fafc;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;height:48px;padding:0 1rem;font-size:12px;font-weight:700;position:sticky;top:0}.flexi-th--draggable{cursor:grab}.flexi-th--draggable:active{cursor:grabbing}.flexi-th--pinned{background-color:#f8fafc}.flexi-th-inner{justify-content:space-between;align-items:center;gap:.25rem;width:100%;min-width:0;display:flex}.flexi-th-label{white-space:nowrap;text-overflow:ellipsis;flex:auto;align-items:center;gap:.375rem;min-width:0;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;flex:auto;min-width:0;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{flex:none;align-items:center;gap:2px;display:flex}.flexi-th-resizer{cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;z-index:5;width:6px;position:absolute;top:0;bottom:0;right:0}.flexi-th-resizer:hover,.flexi-th-resizer:active{background-color:#93c5fd}.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;height:48px;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--clickable{cursor:pointer}.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-tbody--pinned-bottom{box-shadow:0 -2px 5px -2px #0000001a}.flexi-row--pinned-bottom{background-color:#f8fafc;font-weight:600}.flexi-row--pinned-bottom:hover,.flexi-row--pinned-bottom .flexi-cell,.flexi-row--pinned-bottom .flexi-actions-cell{background-color:#f8fafc}.flexi-row--pinned-bottom .flexi-cell-text{color:#334155}.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,60 +1,67 @@
-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 ee } from "react-dom";
-import { jsx as p, jsxs as m } 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 ee } from "lucide-react";
+import { useEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { createPortal as te } from "react-dom";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/DataTable.tsx
 var h = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		e.children && e.children.length > 0 ? t.push(...h(e.children)) : t.push(e);
 	}), t;
-}, g = (...e) => e.filter(Boolean).join(" "), _ = (e) => {
+}, g = (...e) => e.filter(Boolean).join(" "), ne = (e) => {
 	if (e === !0) return "left";
 	if (e === "left" || e === "right") return e;
-};
-function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy: S = !1, defaultGroupBy: ne = [], onPinChange: C, onGroupChange: w, containerStyle: re, tableStyle: ie, bordered: ae = !1, pinnedBottomRowData: T = [], pinnedRowClassName: E }) {
-	let [D, O] = f(null), [k, A] = f({}), [j, M] = f(""), [N, oe] = f(null), P = d(/* @__PURE__ */ new Map()), [F, I] = f(ne), [L, se] = f({}), [ce, R] = f(!1), [z, le] = f({
+}, re = (e, t, n) => {
+	let r = (e) => {
+		let n = t[e];
+		return n === "left" ? 0 : n === "right" ? 2 : 1;
+	}, i = (e) => e.map((e, t) => ({
+		col: e,
+		idx: t
+	})).sort((e, t) => {
+		let i = r(e.col.key) - r(t.col.key);
+		return i === 0 ? (n[e.col.key] ?? e.idx) - (n[t.col.key] ?? t.idx) : i;
+	}).map(({ col: e }) => e.children && e.children.length > 0 ? {
+		...e,
+		children: i(e.children)
+	} : e);
+	return i(e);
+}, ie = 48, ae = 150, oe = 60;
+function _({ columns: _, data: v, rowKey: y, actions: b, isLoading: se, groupBy: x = !1, defaultGroupBy: ce = [], onPinChange: le, onGroupChange: S, containerStyle: ue, tableStyle: de, bordered: fe = !1, pinnedBottomRowData: C = [], pinnedRowClassName: pe, rowHeight: w = ie, overscan: me = 8, onColumnResize: he, onColumnReorder: ge, rowClassRules: _e, onRowClick: T }) {
+	let [E, ve] = d(null), [D, ye] = d({}), [O, k] = d(""), [A, be] = d(null), j = u(/* @__PURE__ */ new Map()), [M, xe] = d(ce), [N, Se] = d({}), [Ce, P] = d(!1), [F, we] = d({
 		key: null,
 		direction: null
-	}), B = u(() => h(v), [v]), [V, ue] = f(() => {
+	}), [I, Te] = d({}), [L, Ee] = d({}), R = u(null), z = u(!1), B = u(null), V = l(() => h(_), [_]), [H, De] = d(() => {
 		let e = {};
-		return B.forEach((t) => {
-			let n = _(t.pinned);
+		return V.forEach((t) => {
+			let n = ne(t.pinned);
 			n && (e[t.key] = n);
 		}), e;
-	}), H = u(() => {
-		let e = (t) => {
-			let n = (e) => {
-				let t = V[e];
-				return t === "left" ? 0 : t === "right" ? 2 : 1;
-			};
-			return [...t].sort((e, t) => n(e.key) - n(t.key)).map((t) => t.children && t.children.length > 0 ? {
-				...t,
-				children: e(t.children)
-			} : t);
-		};
-		return e(v);
-	}, [v, V]), U = u(() => {
-		let e = h(H), t = S ? F : [];
+	}), U = l(() => re(_, H, L), [
+		_,
+		H,
+		L
+	]), W = l(() => {
+		let e = h(U), t = x ? M : [];
 		return e.filter((e) => !t.includes(e.key));
 	}, [
-		H,
-		F,
-		S
-	]), W = d(null), G = d(null);
-	l(() => {
+		U,
+		M,
+		x
+	]), G = u(null), K = u(null);
+	c(() => {
 		function e(e) {
-			let t = e.target, n = D ? P.current.get(D) : null;
-			G.current && !G.current.contains(t) && !(n && n.contains(t)) && (O(null), M(""));
+			let t = e.target, n = E ? j.current.get(E) : null;
+			K.current && !K.current.contains(t) && !(n && n.contains(t)) && (ve(null), k(""));
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [D]), l(() => {
-		if (!D) return;
+	}, [E]), c(() => {
+		if (!E) return;
 		let e = () => {
-			let e = P.current.get(D), t = W.current;
+			let e = j.current.get(E), t = G.current;
 			if (!e || !t) return;
 			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
-			oe({
+			be({
 				top: n.bottom - r.top + 4,
 				left: n.left - r.left
 			});
@@ -62,37 +69,87 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 		return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
-	}, [D]);
-	let de = (e) => typeof b == "function" ? b(e) : String(e[b]), fe = (e) => {
-		ue((t) => {
+	}, [E]);
+	let Oe = (e) => typeof y == "function" ? y(e) : String(e[y]), ke = (e, t) => {
+		if (!_e) return;
+		let n;
+		for (let r in _e) _e[r](e, t) && (n = n ? `${n} ${r}` : r);
+		return n;
+	}, Ae = (e) => {
+		De((t) => {
 			let n = t[e], r = n ? n === "left" ? "right" : void 0 : "left", i = { ...t };
-			return r ? i[e] = r : delete i[e], C && C(e, !!r, r), i;
+			return r ? i[e] = r : delete i[e], le && le(e, !!r, r), i;
 		});
-	}, pe = (e) => {
+	}, je = (e) => {
 		let t = "asc";
-		z.key === e && (t = z.direction === "asc" ? "desc" : z.direction === "desc" ? null : "asc"), le({
+		F.key === e && (t = F.direction === "asc" ? "desc" : F.direction === "desc" ? null : "asc"), we({
 			key: t ? e : null,
 			direction: t
 		});
-	}, me = (e, t) => {
-		S && (e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
-	}, he = (e) => {
-		e.preventDefault(), R(!1);
+	}, Me = (e, t, n) => {
+		if (z.current) {
+			e.preventDefault();
+			return;
+		}
+		R.current = t, n && e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move";
+	}, Ne = (e, t, n) => {
+		let r = e.map((e) => e.key);
+		if (r.includes(t) && r.includes(n)) return e;
+		for (let r of e) if (r.children && r.children.length > 0) {
+			let e = Ne(r.children, t, n);
+			if (e) return e;
+		}
+		return null;
+	}, Pe = (e, t) => {
+		e.preventDefault(), e.stopPropagation();
+		let n = R.current;
+		if (R.current = null, !n || n === t) return;
+		let r = Ne(U, n, t);
+		if (!r) return;
+		let i = r.map((e) => e.key), a = i.indexOf(n), o = i.indexOf(t);
+		i.splice(o, 0, i.splice(a, 1)[0]);
+		let s = { ...L };
+		i.forEach((e, t) => {
+			s[e] = t;
+		}), Ee(s), ge && ge(h(re(_, H, s)).map((e) => e.key));
+	}, Fe = (e, t) => {
+		e.preventDefault(), e.stopPropagation(), z.current = !0, B.current = {
+			key: t.key,
+			startX: e.clientX,
+			startWidth: J(t)
+		};
+		let n = t.minWidth ?? oe, r = t.maxWidth, i = (e) => {
+			let t = B.current;
+			if (!t) return;
+			let i = t.startWidth + (e.clientX - t.startX);
+			i = Math.max(n, i), r && (i = Math.min(r, i)), Te((e) => e[t.key] === i ? e : {
+				...e,
+				[t.key]: i
+			});
+		}, a = () => {
+			let e = B.current;
+			B.current = null, window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", a), requestAnimationFrame(() => {
+				z.current = !1;
+			}), e && he && Te((t) => (t[e.key] !== void 0 && he(e.key, t[e.key]), t));
+		};
+		window.addEventListener("mousemove", i), window.addEventListener("mouseup", a);
+	}, Ie = (e) => {
+		e.preventDefault(), P(!1);
 		let t = e.dataTransfer.getData("text/plain");
-		if (t && !F.includes(t)) {
-			let e = [...F, t];
-			I(e), w && w(e);
+		if (t && !M.includes(t)) {
+			let e = [...M, t];
+			xe(e), S && S(e);
 		}
-	}, ge = (e) => {
-		let t = F.filter((t) => t !== e);
-		I(t), se({}), w && w(t);
-	}, K = u(() => {
+	}, Le = (e) => {
+		let t = M.filter((t) => t !== e);
+		xe(t), Se({}), S && S(t);
+	}, q = l(() => {
 		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(H), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? F.includes(e.key) && S ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = S ? F : [], a = (e, o) => {
+		}, t = e(U), n = Array.from({ length: t }, () => []), r = (e) => !e.children || e.children.length === 0 ? M.includes(e.key) && x ? 0 : 1 : e.children.reduce((e, t) => e + r(t), 0), i = x ? M : [], a = (e, o) => {
 			e.forEach((e) => {
 				if (i.includes(e.key)) return;
 				let s = r(e);
@@ -107,69 +164,76 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				}));
 			});
 		};
-		return a(H, 0), n.filter((e) => e.length > 0);
+		return a(U, 0), n.filter((e) => e.length > 0);
 	}, [
-		H,
-		F,
-		S
-	]), q = (e) => {
-		let t = e.style?.width || e.headerStyle?.width || "150px";
-		return typeof t == "number" ? t : parseInt(String(t), 10) || 150;
-	}, _e = u(() => {
+		U,
+		M,
+		x
+	]), J = (e) => {
+		if (I[e.key] !== void 0) return I[e.key];
+		let t = e.style?.width || e.headerStyle?.width || `${ae}px`;
+		return typeof t == "number" ? t : parseInt(String(t), 10) || ae;
+	}, Re = l(() => {
 		let e = {}, t = 0;
-		S && F.length > 0 && (t += 48), U.forEach((n) => {
-			V[n.key] === "left" && (e[n.key] = {
+		x && M.length > 0 && (t += 48), W.forEach((n) => {
+			H[n.key] === "left" && (e[n.key] = {
 				side: "left",
 				offset: t
-			}, t += q(n));
+			}, t += J(n));
 		});
-		let n = x ? 100 : 0;
-		for (let t = U.length - 1; t >= 0; t--) {
-			let r = U[t];
-			V[r.key] === "right" && (e[r.key] = {
+		let n = b ? 100 : 0;
+		for (let t = W.length - 1; t >= 0; t--) {
+			let r = W[t];
+			H[r.key] === "right" && (e[r.key] = {
 				side: "right",
 				offset: n
-			}, n += q(r));
+			}, n += J(r));
 		}
 		return e;
 	}, [
-		U,
-		V,
-		F,
-		S,
-		x
-	]), ve = (e, t) => {
-		A((n) => {
+		W,
+		H,
+		M,
+		x,
+		b,
+		I
+	]), ze = (e, t) => {
+		ye((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;
 		});
-	}, ye = (e) => {
-		A((t) => {
+	}, Be = (e) => {
+		ye((t) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, J = u(() => {
-		if (!D) return [];
-		let e = B.find((e) => e.key === D), t = y.map((t) => e?.getValue ? e.getValue(t) : t[D]), n = Array.from(new Set(t)).filter((e) => e != null);
-		return j.trim() ? n.filter((e) => String(e).toLowerCase().includes(j.toLowerCase())) : n;
+	}, Y = l(() => {
+		let e = /* @__PURE__ */ new Map();
+		return V.forEach((t) => e.set(t.key, t)), e;
+	}, [V]), Ve = l(() => {
+		if (!E) return [];
+		let e = Y.get(E), t = v.map((t) => e?.getValue ? e.getValue(t) : t[E]);
+		return Array.from(new Set(t)).filter((e) => e != null);
 	}, [
-		y,
-		D,
-		j,
-		B
-	]), Y = u(() => {
-		let e = y.filter((e) => Object.entries(k).every(([t, n]) => {
-			if (!n || n.length === 0) return !0;
-			let r = B.find((e) => e.key === t), i = r?.getValue ? r.getValue(e) : e[t];
+		v,
+		E,
+		Y
+	]), He = l(() => {
+		if (!O.trim()) return Ve;
+		let e = O.toLowerCase();
+		return Ve.filter((t) => String(t).toLowerCase().includes(e));
+	}, [Ve, O]), Ue = l(() => {
+		let e = Object.entries(D).filter(([, e]) => e && e.length > 0), t = e.length === 0 ? v : v.filter((t) => e.every(([e, n]) => {
+			let r = Y.get(e), i = r?.getValue ? r.getValue(t) : t[e];
 			return n.includes(i);
 		}));
-		if (z.key && z.direction) {
-			let { key: t, direction: n } = z, r = B.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 (F.key && F.direction) {
+			let { key: e, direction: n } = F, r = Y.get(e);
+			t = [...t].sort((t, i) => {
+				let a = r?.getValue ? r.getValue(t) : t[e], o = r?.getValue ? r.getValue(i) : i[e];
 				if (a === o) return 0;
 				if (a == null) return 1;
 				if (o == null) return -1;
@@ -180,17 +244,17 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				}), n === "asc" ? s : -s;
 			});
 		}
-		return e;
+		return t;
 	}, [
-		y,
-		k,
-		z,
-		B
-	]), X = u(() => {
-		if (!S || F.length === 0) return Y;
+		v,
+		D,
+		F,
+		Y
+	]), We = l(() => {
+		if (!x || M.length === 0) return Ue;
 		let e = (t, n, r = "") => {
-			if (n >= F.length) return t;
-			let i = F[n], a = B.find((e) => e.key === i), o = {};
+			if (n >= M.length) return t;
+			let i = M[n], a = Y.get(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);
@@ -207,35 +271,70 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				};
 			});
 		};
-		return e(Y, 0);
+		return e(Ue, 0);
 	}, [
-		Y,
-		F,
-		S,
-		B
-	]), be = (e) => {
-		se((t) => {
+		Ue,
+		M,
+		x,
+		Y
+	]), Ge = (e) => {
+		Se((t) => {
 			let n = t[e] !== !1;
 			return {
 				...t,
 				[e]: !n
 			};
 		});
-	}, Z = u(() => {
-		if (!S || F.length === 0) return X;
+	}, X = l(() => {
+		if (!x || M.length === 0) return We;
 		let e = [], t = (n) => {
 			n.forEach((n) => {
-				n.isGroupRow ? (e.push(n), L[n.path] !== !1 && t(n.children)) : e.push(n);
+				n.isGroupRow ? (e.push(n), N[n.path] !== !1 && t(n.children)) : e.push(n);
 			});
 		};
-		return t(X), e;
+		return t(We), e;
 	}, [
+		We,
+		N,
+		M,
+		x
+	]), Ke = u(null), [qe, Je] = d(0), [Ye, Xe] = d(0);
+	c(() => {
+		let e = Ke.current;
+		if (!e) return;
+		let t = () => Je(e.scrollTop);
+		Xe(e.clientHeight), Je(e.scrollTop), e.addEventListener("scroll", t, { passive: !0 });
+		let n;
+		return typeof ResizeObserver < "u" && (n = new ResizeObserver(() => Xe(e.clientHeight)), n.observe(e)), () => {
+			e.removeEventListener("scroll", t), n?.disconnect();
+		};
+	}, []);
+	let Z = X.length, { startIndex: Ze, endIndex: Qe, topSpacerHeight: Q, bottomSpacerHeight: $e } = l(() => {
+		if (Ye === 0) return {
+			startIndex: 0,
+			endIndex: Z,
+			topSpacerHeight: 0,
+			bottomSpacerHeight: 0
+		};
+		let e = Math.floor(qe / w), t = Math.ceil(Ye / w), n = Math.max(0, e - me), r = Math.min(Z, e + t + me);
+		return {
+			startIndex: n,
+			endIndex: r,
+			topSpacerHeight: n * w,
+			bottomSpacerHeight: (Z - r) * w
+		};
+	}, [
+		qe,
+		Ye,
+		Z,
+		w,
+		me
+	]), et = l(() => X.slice(Ze, Qe), [
 		X,
-		L,
-		F,
-		S
-	]), Q = (e, t = !1, n) => {
-		let r = _e[e];
+		Ze,
+		Qe
+	]), tt = (e, t = !1, n) => {
+		let r = Re[e];
 		if (!r) return n || {};
 		let i = r.side === "right";
 		return {
@@ -247,18 +346,18 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 			boxShadow: i ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
 			...n
 		};
-	}, xe = u(() => T.map((e, t) => (T.length - 1 - t) * 48), [T]), $ = U.length + +!!x + (S && F.length > 0 ? 1 : 0);
+	}, nt = l(() => C.map((e, t) => (C.length - 1 - t) * 48), [C]), $ = W.length + +!!b + (x && M.length > 0 ? 1 : 0);
 	return /* @__PURE__ */ m("div", {
-		ref: W,
+		ref: G,
 		className: "flexi-root",
-		children: [S && /* @__PURE__ */ p("div", {
+		children: [x && /* @__PURE__ */ p("div", {
 			onDragOver: (e) => {
-				e.preventDefault(), R(!0);
+				e.preventDefault(), P(!0);
 			},
-			onDragLeave: () => R(!1),
-			onDrop: he,
-			className: g("flexi-groupzone", ce && "flexi-groupzone--dragover"),
-			children: F.length === 0 ? /* @__PURE__ */ p("span", {
+			onDragLeave: () => P(!1),
+			onDrop: Ie,
+			className: g("flexi-groupzone", Ce && "flexi-groupzone--dragover"),
+			children: M.length === 0 ? /* @__PURE__ */ p("span", {
 				className: "flexi-groupzone-hint",
 				children: "Drag a column header here to group your records by that field"
 			}) : /* @__PURE__ */ m("div", {
@@ -266,35 +365,39 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				children: [/* @__PURE__ */ p("span", {
 					className: "flexi-groupzone-label",
 					children: "Grouped By:"
-				}), F.map((e) => /* @__PURE__ */ m("div", {
+				}), M.map((e) => /* @__PURE__ */ m("div", {
 					className: "flexi-chip",
-					children: [/* @__PURE__ */ p("span", { children: B.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
+					children: [/* @__PURE__ */ p("span", { children: V.find((t) => t.key === e)?.header || e }), /* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: () => ge(e),
+						onClick: () => Le(e),
 						className: "flexi-icon-btn flexi-chip-remove",
-						children: /* @__PURE__ */ p(c, { className: "flexi-icon-xs" })
+						children: /* @__PURE__ */ p(ee, { className: "flexi-icon-xs" })
 					})]
 				}, e))]
 			})
 		}), /* @__PURE__ */ p("div", {
+			ref: Ke,
 			className: "flexi-table-wrap",
-			style: re,
+			style: ue,
 			children: /* @__PURE__ */ m("table", {
-				className: g("flexi-table", ae && "flexi-table--bordered"),
-				style: ie,
+				className: g("flexi-table", fe && "flexi-table--bordered"),
+				style: de,
 				children: [
 					/* @__PURE__ */ m("colgroup", { children: [
-						S && F.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
-						U.map((e) => /* @__PURE__ */ p("col", { style: e.style }, e.key)),
-						x && /* @__PURE__ */ p("col", { style: { width: "100px" } })
+						x && M.length > 0 && /* @__PURE__ */ p("col", { style: { width: "48px" } }),
+						W.map((e) => /* @__PURE__ */ p("col", { style: {
+							...e.style,
+							width: J(e)
+						} }, e.key)),
+						b && /* @__PURE__ */ p("col", { style: { width: "100px" } })
 					] }),
 					/* @__PURE__ */ p("thead", {
 						className: "flexi-thead",
-						children: K.map((r, i) => /* @__PURE__ */ m("tr", {
+						children: q.map((r, i) => /* @__PURE__ */ m("tr", {
 							className: "flexi-header-row",
 							children: [
-								i === 0 && S && F.length > 0 && /* @__PURE__ */ p("th", {
-									rowSpan: K.length,
+								i === 0 && x && M.length > 0 && /* @__PURE__ */ p("th", {
+									rowSpan: q.length,
 									className: "flexi-group-spacer-th",
 									style: {
 										position: "sticky",
@@ -304,59 +407,59 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 										backgroundColor: "rgb(248, 250, 252)"
 									}
 								}),
-								r.map(({ col: r, rowSpan: i, colSpan: c }) => {
-									let l = (k[r.key]?.length || 0) > 0, u = !!V[r.key], d = Q(r.key, !0, r.headerStyle), f = !r.children || r.children.length === 0, h = z.key === r.key, _ = !!(S && f);
-									return /* @__PURE__ */ p("th", {
+								r.map(({ col: r, rowSpan: i, colSpan: ee }) => {
+									let c = (D[r.key]?.length || 0) > 0, l = !!H[r.key], u = tt(r.key, !0, r.headerStyle), d = !r.children || r.children.length === 0, f = F.key === r.key, h = !!(x && d), ne = d && r.resizable !== !1;
+									return /* @__PURE__ */ m("th", {
 										rowSpan: i,
-										colSpan: c,
-										..._ ? {
-											draggable: !0,
-											onDragStart: (e) => me(e, r.key)
-										} : {},
-										className: g("flexi-th", _ && "flexi-th--draggable", u && "flexi-th--pinned", r.className),
-										style: d,
-										children: /* @__PURE__ */ m("div", {
+										colSpan: ee,
+										draggable: !0,
+										onDragStart: (e) => Me(e, r.key, d),
+										onDragOver: (e) => e.preventDefault(),
+										onDrop: (e) => Pe(e, r.key),
+										className: g("flexi-th", "flexi-th--draggable", h && "flexi-th--group-draggable", l && "flexi-th--pinned", r.className, r.headerClassName),
+										style: u,
+										children: [/* @__PURE__ */ m("div", {
 											className: "flexi-th-inner",
 											children: [
 												/* @__PURE__ */ m("div", {
-													className: g("flexi-th-label", r.sortable && f && "flexi-th-label--sortable"),
-													onClick: () => r.sortable && f && pe(r.key),
+													className: g("flexi-th-label", r.sortable && d && "flexi-th-label--sortable"),
+													onClick: () => r.sortable && d && je(r.key),
 													children: [/* @__PURE__ */ p("span", {
 														className: "flexi-th-text",
 														children: r.header
-													}), f && r.sortable && /* @__PURE__ */ p("span", {
-														className: g("flexi-sort-icon", h && "flexi-sort-icon--active"),
-														children: h && z.direction === "asc" ? /* @__PURE__ */ p(t, { className: "flexi-icon-sm" }) : h && z.direction === "desc" ? /* @__PURE__ */ p(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ p(n, { className: "flexi-icon-sm" })
+													}), d && r.sortable && /* @__PURE__ */ p("span", {
+														className: g("flexi-sort-icon", f && "flexi-sort-icon--active"),
+														children: f && F.direction === "asc" ? /* @__PURE__ */ p(t, { className: "flexi-icon-sm" }) : f && F.direction === "desc" ? /* @__PURE__ */ p(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ p(n, { className: "flexi-icon-sm" })
 													})]
 												}),
 												/* @__PURE__ */ m("div", {
 													className: "flexi-th-actions",
-													children: [f && r.filterable && /* @__PURE__ */ p("button", {
+													children: [d && r.filterable && /* @__PURE__ */ p("button", {
 														type: "button",
 														ref: (e) => {
-															e ? P.current.set(r.key, e) : P.current.delete(r.key);
+															e ? j.current.set(r.key, e) : j.current.delete(r.key);
 														},
 														onClick: (e) => {
-															e.stopPropagation(), M(""), O(D === r.key ? null : r.key);
+															e.stopPropagation(), k(""), ve(E === r.key ? null : r.key);
 														},
-														className: g("flexi-icon-btn", "flexi-filter-btn", l && "flexi-filter-btn--active"),
+														className: g("flexi-icon-btn", "flexi-filter-btn", c && "flexi-filter-btn--active"),
 														children: /* @__PURE__ */ p(a, { className: "flexi-icon-sm" })
-													}), f && /* @__PURE__ */ p("button", {
+													}), d && /* @__PURE__ */ p("button", {
 														type: "button",
 														onClick: (e) => {
-															e.stopPropagation(), fe(r.key);
+															e.stopPropagation(), Ae(r.key);
 														},
-														className: g("flexi-icon-btn", "flexi-pin-btn", u && "flexi-pin-btn--pinned"),
-														title: V[r.key] === "left" ? "Pinned left (click to pin right)" : V[r.key] === "right" ? "Pinned right (click to unpin)" : "Pin column left",
-														children: p(u ? s : o, { className: "flexi-icon-sm" })
+														className: g("flexi-icon-btn", "flexi-pin-btn", l && "flexi-pin-btn--pinned"),
+														title: H[r.key] === "left" ? "Pinned left (click to pin right)" : H[r.key] === "right" ? "Pinned right (click to unpin)" : "Pin column left",
+														children: p(l ? s : o, { className: "flexi-icon-sm" })
 													})]
 												}),
-												D === r.key && f && N && W.current && ee(/* @__PURE__ */ m("div", {
-													ref: G,
+												E === r.key && d && A && G.current && te(/* @__PURE__ */ m("div", {
+													ref: K,
 													className: "flexi-filter-dropdown",
 													style: {
-														top: N.top,
-														left: N.left,
+														top: A.top,
+														left: A.left,
 														zIndex: 9999
 													},
 													children: [
@@ -365,47 +468,52 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 															children: /* @__PURE__ */ p("input", {
 																type: "text",
 																placeholder: "Search values...",
-																value: j,
-																onChange: (e) => M(e.target.value),
+																value: O,
+																onChange: (e) => k(e.target.value),
 																className: "flexi-input",
 																onClick: (e) => e.stopPropagation()
 															})
 														}),
 														/* @__PURE__ */ p("div", {
 															className: "flexi-filter-list",
-															children: J.length === 0 ? /* @__PURE__ */ p("div", {
+															children: He.length === 0 ? /* @__PURE__ */ p("div", {
 																className: "flexi-filter-empty",
 																children: "No results found"
-															}) : J.map((e, t) => /* @__PURE__ */ m("label", {
+															}) : He.map((e, t) => /* @__PURE__ */ m("label", {
 																className: "flexi-filter-option",
 																children: [/* @__PURE__ */ p("input", {
 																	type: "checkbox",
 																	className: "flexi-checkbox",
-																	checked: k[r.key]?.includes(e) || !1,
-																	onChange: () => ve(r.key, e)
+																	checked: D[r.key]?.includes(e) || !1,
+																	onChange: () => ze(r.key, e)
 																}), /* @__PURE__ */ p("span", {
 																	className: "flexi-filter-option-text",
 																	children: String(e)
 																})]
 															}, t))
 														}),
-														l && /* @__PURE__ */ p("div", {
+														c && /* @__PURE__ */ p("div", {
 															className: "flexi-filter-footer",
 															children: /* @__PURE__ */ p("button", {
 																type: "button",
-																onClick: () => ye(r.key),
+																onClick: () => Be(r.key),
 																className: "flexi-filter-clear",
 																children: "Clear Filter"
 															})
 														})
 													]
-												}), W.current)
+												}), G.current)
 											]
-										})
+										}), ne && /* @__PURE__ */ p("div", {
+											className: "flexi-th-resizer",
+											onMouseDown: (e) => Fe(e, r),
+											onClick: (e) => e.stopPropagation(),
+											onDragStart: (e) => e.preventDefault()
+										})]
 									}, r.key);
 								}),
-								i === 0 && x && /* @__PURE__ */ p("th", {
-									rowSpan: K.length,
+								i === 0 && b && /* @__PURE__ */ p("th", {
+									rowSpan: q.length,
 									className: "flexi-actions-th",
 									style: {
 										position: "sticky",
@@ -420,27 +528,53 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 					}),
 					/* @__PURE__ */ p("tbody", {
 						className: "flexi-tbody",
-						children: te ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
+						children: se ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
 							colSpan: $,
 							className: "flexi-empty-cell",
 							children: "Loading records..."
-						}) }) : Z.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
+						}) }) : X.length === 0 ? /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
 							colSpan: $,
 							className: "flexi-empty-cell",
 							children: "No records found matching criteria."
-						}) }) : Z.map((e, t) => Se(e, t))
+						}) }) : /* @__PURE__ */ m(f, { children: [
+							Q > 0 && /* @__PURE__ */ p("tr", {
+								"aria-hidden": "true",
+								style: { height: Q },
+								children: /* @__PURE__ */ p("td", {
+									colSpan: $,
+									style: {
+										padding: 0,
+										border: "none",
+										height: Q
+									}
+								})
+							}),
+							et.map((e, t) => rt(e, Ze + t)),
+							$e > 0 && /* @__PURE__ */ p("tr", {
+								"aria-hidden": "true",
+								style: { height: $e },
+								children: /* @__PURE__ */ p("td", {
+									colSpan: $,
+									style: {
+										padding: 0,
+										border: "none",
+										height: $e
+									}
+								})
+							})
+						] })
 					}),
-					T.length > 0 && /* @__PURE__ */ p("tbody", {
+					C.length > 0 && /* @__PURE__ */ p("tbody", {
 						className: "flexi-tbody flexi-tbody--pinned-bottom",
-						children: T.map((e, t) => Ce(e, t))
+						children: C.map((e, t) => it(e, t))
 					})
 				]
 			})
 		})]
 	});
-	function Se(e, t) {
+	function rt(e, t) {
 		if (e.isGroupRow) {
-			let n = L[e.path] !== !1;
+			let n = N[e.path] !== !1;
 			return /* @__PURE__ */ m("tr", {
 				className: "flexi-group-row",
 				children: [/* @__PURE__ */ p("td", {
@@ -454,7 +588,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 					},
 					children: /* @__PURE__ */ m("button", {
 						type: "button",
-						onClick: () => be(e.path),
+						onClick: () => Ge(e.path),
 						className: "flexi-group-toggle",
 						children: [
 							p(n ? r : i, { className: "flexi-icon-md flexi-icon-muted" }),
@@ -474,11 +608,12 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 				})]
 			}, `group-header-${e.path}-${t}`);
 		}
-		let n = de(e);
+		let n = Oe(e);
 		return /* @__PURE__ */ m("tr", {
-			className: "flexi-row",
+			className: g("flexi-row", T && "flexi-row--clickable", ke(e, t)),
+			onClick: T ? (n) => T(e, t, n) : void 0,
 			children: [
-				S && F?.length > 0 && /* @__PURE__ */ p("td", {
+				x && M?.length > 0 && /* @__PURE__ */ p("td", {
 					className: "flexi-row-indent-cell",
 					style: {
 						position: "sticky",
@@ -486,10 +621,10 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 						zIndex: 10
 					}
 				}),
-				U?.map((t) => {
-					let n = e[t.key], r = Q(t.key, !1, t.style);
+				W?.map((t) => {
+					let n = e[t.key], r = tt(t.key, !1, t.style);
 					return /* @__PURE__ */ p("td", {
-						className: g("flexi-cell", !!V[t.key] && "flexi-cell--pinned", t.className),
+						className: g("flexi-cell", !!H[t.key] && "flexi-cell--pinned", t.className),
 						style: r,
 						children: t.render ? t.render(n, e) : /* @__PURE__ */ p("span", {
 							className: "flexi-cell-text",
@@ -497,7 +632,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 						})
 					}, t.key);
 				}),
-				x && /* @__PURE__ */ p("td", {
+				b && /* @__PURE__ */ p("td", {
 					className: "flexi-actions-cell",
 					style: {
 						position: "sticky",
@@ -505,16 +640,16 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 					},
 					children: /* @__PURE__ */ p("div", {
 						className: "flexi-actions-inner",
-						children: x(e)
+						children: b(e)
 					})
 				})
 			]
 		}, n ?? `row-${t}`);
 	}
-	function Ce(e, t) {
-		let n = typeof E == "function" ? E(e, t) : E, r = {
+	function it(e, t) {
+		let n = typeof pe == "function" ? pe(e, t) : pe, r = {
 			position: "sticky",
-			bottom: `${xe[t]}px`,
+			bottom: `${nt[t]}px`,
 			background: "#",
 			zIndex: 45
 		};
@@ -522,7 +657,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 			className: g("flexi-row", "flexi-row--pinned-bottom", n),
 			style: r,
 			children: [
-				S && F?.length > 0 && /* @__PURE__ */ p("td", {
+				x && M?.length > 0 && /* @__PURE__ */ p("td", {
 					className: "flexi-row-indent-cell",
 					style: {
 						position: "sticky",
@@ -530,8 +665,8 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 						zIndex: 10
 					}
 				}),
-				U?.map((t) => {
-					let n = e[t.key], r = Q(t.key, !1, t.style), i = !!V[t.key], a = t.pinnedRender ?? t.render;
+				W?.map((t) => {
+					let n = e[t.key], r = tt(t.key, !1, t.style), i = !!H[t.key], a = t.pinnedRender ?? t.render;
 					return /* @__PURE__ */ p("td", {
 						className: g("flexi-cell", i && "flexi-cell--pinned", t.className),
 						style: r,
@@ -541,7 +676,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 						})
 					}, t.key);
 				}),
-				x && /* @__PURE__ */ p("td", {
+				b && /* @__PURE__ */ p("td", {
 					className: "flexi-actions-cell",
 					style: {
 						position: "sticky",
@@ -549,7 +684,7 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 					},
 					children: /* @__PURE__ */ p("div", {
 						className: "flexi-actions-inner",
-						children: x(e)
+						children: b(e)
 					})
 				})
 			]
@@ -557,4 +692,4 @@ function v({ columns: v, data: y, rowKey: b, actions: x, isLoading: te, groupBy:
 	}
 }
 //#endregion
-export { v as DataTable };
+export { _ 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-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(` `),m=e=>{if(e===!0)return`left`;if(e===`left`||e===`right`)return e};function h({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:h,containerStyle:g,tableStyle:ee,bordered:te=!1,pinnedBottomRowData:_=[],pinnedRowClassName:v}){let[y,b]=(0,n.useState)(null),[x,S]=(0,n.useState)({}),[C,w]=(0,n.useState)(``),[T,E]=(0,n.useState)(null),D=(0,n.useRef)(new Map),[O,k]=(0,n.useState)(u),[A,j]=(0,n.useState)({}),[ne,M]=(0,n.useState)(!1),[N,re]=(0,n.useState)({key:null,direction:null}),P=(0,n.useMemo)(()=>f(e),[e]),[F,ie]=(0,n.useState)(()=>{let e={};return P.forEach(t=>{let n=m(t.pinned);n&&(e[t.key]=n)}),e}),I=(0,n.useMemo)(()=>{let t=e=>{let n=e=>{let t=F[e];return t===`left`?0:t===`right`?2:1};return[...e].sort((e,t)=>n(e.key)-n(t.key)).map(e=>e.children&&e.children.length>0?{...e,children:t(e.children)}:e)};return t(e)},[e,F]),L=(0,n.useMemo)(()=>{let e=f(I),t=l?O:[];return e.filter(e=>!t.includes(e.key))},[I,O,l]),R=(0,n.useRef)(null),z=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=y?D.current.get(y):null;z.current&&!z.current.contains(t)&&!(n&&n.contains(t))&&(b(null),w(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[y]),(0,n.useEffect)(()=>{if(!y)return;let e=()=>{let e=D.current.get(y),t=R.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();E({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)}},[y]);let ae=e=>typeof o==`function`?o(e):String(e[o]),oe=e=>{ie(t=>{let n=t[e],r=n?n===`left`?`right`:void 0:`left`,i={...t};return r?i[e]=r:delete i[e],d&&d(e,!!r,r),i})},B=e=>{let t=`asc`;N.key===e&&(t=N.direction===`asc`?`desc`:N.direction===`desc`?null:`asc`),re({key:t?e:null,direction:t})},V=(e,t)=>{l&&(e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`)},H=e=>{e.preventDefault(),M(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!O.includes(t)){let e=[...O,t];k(e),h&&h(e)}},U=e=>{let t=O.filter(t=>t!==e);k(t),j({}),h&&h(t)},W=(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(I),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?O.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?O:[],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(I,0),n.filter(e=>e.length>0)},[I,O,l]),G=e=>{let t=e.style?.width||e.headerStyle?.width||`150px`;return typeof t==`number`?t:parseInt(String(t),10)||150},K=(0,n.useMemo)(()=>{let e={},t=0;l&&O.length>0&&(t+=48),L.forEach(n=>{F[n.key]===`left`&&(e[n.key]={side:`left`,offset:t},t+=G(n))});let n=s?100:0;for(let t=L.length-1;t>=0;t--){let r=L[t];F[r.key]===`right`&&(e[r.key]={side:`right`,offset:n},n+=G(r))}return e},[L,F,O,l,s]),se=(e,t)=>{S(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})},q=e=>{S(t=>{let n={...t};return delete n[e],n})},J=(0,n.useMemo)(()=>{if(!y)return[];let e=P.find(e=>e.key===y),t=a.map(t=>e?.getValue?e.getValue(t):t[y]),n=Array.from(new Set(t)).filter(e=>e!=null);return C.trim()?n.filter(e=>String(e).toLowerCase().includes(C.toLowerCase())):n},[a,y,C,P]),Y=(0,n.useMemo)(()=>{let e=a.filter(e=>Object.entries(x).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(N.key&&N.direction){let{key:t,direction:n}=N,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,x,N,P]),X=(0,n.useMemo)(()=>{if(!l||O.length===0)return Y;let e=(t,n,r=``)=>{if(n>=O.length)return t;let i=O[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,O,l,P]),ce=e=>{j(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},Z=(0,n.useMemo)(()=>{if(!l||O.length===0)return X;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),A[n.path]!==!1&&t(n.children)):e.push(n)})};return t(X),e},[X,A,O,l]),Q=(e,t=!1,n)=>{let r=K[e];if(!r)return n||{};let i=r.side===`right`;return{position:`sticky`,[i?`right`:`left`]:`${r.offset}px`,...t?{top:0}:{},zIndex:t?30:20,background:`#f8fafc`,boxShadow:i?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}},le=(0,n.useMemo)(()=>_.map((e,t)=>(_.length-1-t)*48),[_]),$=L.length+ +!!s+(l&&O.length>0?1:0);return(0,i.jsxs)(`div`,{ref:R,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),M(!0)},onDragLeave:()=>M(!1),onDrop:H,className:p(`flexi-groupzone`,ne&&`flexi-groupzone--dragover`),children:O.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:`}),O.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:()=>U(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:g,children:(0,i.jsxs)(`table`,{className:p(`flexi-table`,te&&`flexi-table--bordered`),style:ee,children:[(0,i.jsxs)(`colgroup`,{children:[l&&O.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),L.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:W.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&O.length>0&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(x[e.key]?.length||0)>0,s=!!F[e.key],c=Q(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=N.key===e.key,f=!!(l&&u);return(0,i.jsx)(`th`,{rowSpan:n,colSpan:a,...f?{draggable:!0,onDragStart:t=>V(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&&B(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&&N.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&N.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?D.current.set(e.key,t):D.current.delete(e.key)},onClick:t=>{t.stopPropagation(),w(``),b(y===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(),oe(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:F[e.key]===`left`?`Pinned left (click to pin right)`:F[e.key]===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),y===e.key&&u&&T&&R.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:z,className:`flexi-filter-dropdown`,style:{top:T.top,left:T.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:C,onChange:e=>w(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:x[e.key]?.includes(t)||!1,onChange:()=>se(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:()=>q(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),R.current)]})},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:W.length,className:`flexi-actions-th`,style:{position:`sticky`,top:0,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,t)=>ue(e,t))}),_.length>0&&(0,i.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:_.map((e,t)=>de(e,t))})]})})]});function ue(e,n){if(e.isGroupRow){let r=A[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:()=>ce(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}`)}let r=ae(e);return(0,i.jsxs)(`tr`,{className:`flexi-row`,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,!!F[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},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},r??`row-${n}`)}function de(e,t){let n=typeof v==`function`?v(e,t):v,r={position:`sticky`,bottom:`${le[t]}px`,background:`#`,zIndex:45};return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,`flexi-row--pinned-bottom`,n),style:r,children:[l&&O?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),L?.map(t=>{let n=e[t.key],r=Q(t.key,!1,t.style),a=!!F[t.key],o=t.pinnedRender??t.render;return(0,i.jsx)(`td`,{className:p(`flexi-cell`,a&&`flexi-cell--pinned`,t.className),style:r,children:o?o(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},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},`pinned-bottom-row-${t}`)}}e.DataTable=h});
+(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(` `),ee=e=>{if(e===!0)return`left`;if(e===`left`||e===`right`)return e},te=(e,t,n)=>{let r=e=>{let n=t[e];return n===`left`?0:n===`right`?2:1},i=e=>e.map((e,t)=>({col:e,idx:t})).sort((e,t)=>{let i=r(e.col.key)-r(t.col.key);return i===0?(n[e.col.key]??e.idx)-(n[t.col.key]??t.idx):i}).map(({col:e})=>e.children&&e.children.length>0?{...e,children:i(e.children)}:e);return i(e)},ne=48,re=150,ie=60;function m({columns:e,data:a,rowKey:o,actions:s,isLoading:c,groupBy:l=!1,defaultGroupBy:u=[],onPinChange:d,onGroupChange:m,containerStyle:ae,tableStyle:oe,bordered:se=!1,pinnedBottomRowData:h=[],pinnedRowClassName:g,rowHeight:_=ne,overscan:v=8,onColumnResize:ce,onColumnReorder:le,rowClassRules:y,onRowClick:b}){let[x,ue]=(0,n.useState)(null),[S,de]=(0,n.useState)({}),[C,w]=(0,n.useState)(``),[T,fe]=(0,n.useState)(null),E=(0,n.useRef)(new Map),[D,pe]=(0,n.useState)(u),[O,me]=(0,n.useState)({}),[he,k]=(0,n.useState)(!1),[A,ge]=(0,n.useState)({key:null,direction:null}),[j,_e]=(0,n.useState)({}),[M,ve]=(0,n.useState)({}),N=(0,n.useRef)(null),P=(0,n.useRef)(!1),F=(0,n.useRef)(null),I=(0,n.useMemo)(()=>f(e),[e]),[L,ye]=(0,n.useState)(()=>{let e={};return I.forEach(t=>{let n=ee(t.pinned);n&&(e[t.key]=n)}),e}),R=(0,n.useMemo)(()=>te(e,L,M),[e,L,M]),z=(0,n.useMemo)(()=>{let e=f(R),t=l?D:[];return e.filter(e=>!t.includes(e.key))},[R,D,l]),B=(0,n.useRef)(null),V=(0,n.useRef)(null);(0,n.useEffect)(()=>{function e(e){let t=e.target,n=x?E.current.get(x):null;V.current&&!V.current.contains(t)&&!(n&&n.contains(t))&&(ue(null),w(``))}return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[x]),(0,n.useEffect)(()=>{if(!x)return;let e=()=>{let e=E.current.get(x),t=B.current;if(!e||!t)return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();fe({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)}},[x]);let be=e=>typeof o==`function`?o(e):String(e[o]),xe=(e,t)=>{if(!y)return;let n;for(let r in y)y[r](e,t)&&(n=n?`${n} ${r}`:r);return n},Se=e=>{ye(t=>{let n=t[e],r=n?n===`left`?`right`:void 0:`left`,i={...t};return r?i[e]=r:delete i[e],d&&d(e,!!r,r),i})},Ce=e=>{let t=`asc`;A.key===e&&(t=A.direction===`asc`?`desc`:A.direction===`desc`?null:`asc`),ge({key:t?e:null,direction:t})},we=(e,t,n)=>{if(P.current){e.preventDefault();return}N.current=t,n&&e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},Te=(e,t,n)=>{let r=e.map(e=>e.key);if(r.includes(t)&&r.includes(n))return e;for(let r of e)if(r.children&&r.children.length>0){let e=Te(r.children,t,n);if(e)return e}return null},Ee=(t,n)=>{t.preventDefault(),t.stopPropagation();let r=N.current;if(N.current=null,!r||r===n)return;let i=Te(R,r,n);if(!i)return;let a=i.map(e=>e.key),o=a.indexOf(r),s=a.indexOf(n);a.splice(s,0,a.splice(o,1)[0]);let c={...M};a.forEach((e,t)=>{c[e]=t}),ve(c),le&&le(f(te(e,L,c)).map(e=>e.key))},De=(e,t)=>{e.preventDefault(),e.stopPropagation(),P.current=!0,F.current={key:t.key,startX:e.clientX,startWidth:U(t)};let n=t.minWidth??ie,r=t.maxWidth,i=e=>{let t=F.current;if(!t)return;let i=t.startWidth+(e.clientX-t.startX);i=Math.max(n,i),r&&(i=Math.min(r,i)),_e(e=>e[t.key]===i?e:{...e,[t.key]:i})},a=()=>{let e=F.current;F.current=null,window.removeEventListener(`mousemove`,i),window.removeEventListener(`mouseup`,a),requestAnimationFrame(()=>{P.current=!1}),e&&ce&&_e(t=>(t[e.key]!==void 0&&ce(e.key,t[e.key]),t))};window.addEventListener(`mousemove`,i),window.addEventListener(`mouseup`,a)},Oe=e=>{e.preventDefault(),k(!1);let t=e.dataTransfer.getData(`text/plain`);if(t&&!D.includes(t)){let e=[...D,t];pe(e),m&&m(e)}},ke=e=>{let t=D.filter(t=>t!==e);pe(t),me({}),m&&m(t)},H=(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(R),n=Array.from({length:t},()=>[]),r=e=>!e.children||e.children.length===0?D.includes(e.key)&&l?0:1:e.children.reduce((e,t)=>e+r(t),0),i=l?D:[],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(R,0),n.filter(e=>e.length>0)},[R,D,l]),U=e=>{if(j[e.key]!==void 0)return j[e.key];let t=e.style?.width||e.headerStyle?.width||`${re}px`;return typeof t==`number`?t:parseInt(String(t),10)||re},Ae=(0,n.useMemo)(()=>{let e={},t=0;l&&D.length>0&&(t+=48),z.forEach(n=>{L[n.key]===`left`&&(e[n.key]={side:`left`,offset:t},t+=U(n))});let n=s?100:0;for(let t=z.length-1;t>=0;t--){let r=z[t];L[r.key]===`right`&&(e[r.key]={side:`right`,offset:n},n+=U(r))}return e},[z,L,D,l,s,j]),je=(e,t)=>{de(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})},Me=e=>{de(t=>{let n={...t};return delete n[e],n})},W=(0,n.useMemo)(()=>{let e=new Map;return I.forEach(t=>e.set(t.key,t)),e},[I]),G=(0,n.useMemo)(()=>{if(!x)return[];let e=W.get(x),t=a.map(t=>e?.getValue?e.getValue(t):t[x]);return Array.from(new Set(t)).filter(e=>e!=null)},[a,x,W]),Ne=(0,n.useMemo)(()=>{if(!C.trim())return G;let e=C.toLowerCase();return G.filter(t=>String(t).toLowerCase().includes(e))},[G,C]),K=(0,n.useMemo)(()=>{let e=Object.entries(S).filter(([,e])=>e&&e.length>0),t=e.length===0?a:a.filter(t=>e.every(([e,n])=>{let r=W.get(e),i=r?.getValue?r.getValue(t):t[e];return n.includes(i)}));if(A.key&&A.direction){let{key:e,direction:n}=A,r=W.get(e);t=[...t].sort((t,i)=>{let a=r?.getValue?r.getValue(t):t[e],o=r?.getValue?r.getValue(i):i[e];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 t},[a,S,A,W]),q=(0,n.useMemo)(()=>{if(!l||D.length===0)return K;let e=(t,n,r=``)=>{if(n>=D.length)return t;let i=D[n],a=W.get(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,D,l,W]),Pe=e=>{me(t=>{let n=t[e]!==!1;return{...t,[e]:!n}})},J=(0,n.useMemo)(()=>{if(!l||D.length===0)return q;let e=[],t=n=>{n.forEach(n=>{n.isGroupRow?(e.push(n),O[n.path]!==!1&&t(n.children)):e.push(n)})};return t(q),e},[q,O,D,l]),Fe=(0,n.useRef)(null),[Ie,Le]=(0,n.useState)(0),[Y,Re]=(0,n.useState)(0);(0,n.useEffect)(()=>{let e=Fe.current;if(!e)return;let t=()=>Le(e.scrollTop);Re(e.clientHeight),Le(e.scrollTop),e.addEventListener(`scroll`,t,{passive:!0});let n;return typeof ResizeObserver<`u`&&(n=new ResizeObserver(()=>Re(e.clientHeight)),n.observe(e)),()=>{e.removeEventListener(`scroll`,t),n?.disconnect()}},[]);let X=J.length,{startIndex:Z,endIndex:ze,topSpacerHeight:Q,bottomSpacerHeight:Be}=(0,n.useMemo)(()=>{if(Y===0)return{startIndex:0,endIndex:X,topSpacerHeight:0,bottomSpacerHeight:0};let e=Math.floor(Ie/_),t=Math.ceil(Y/_),n=Math.max(0,e-v),r=Math.min(X,e+t+v);return{startIndex:n,endIndex:r,topSpacerHeight:n*_,bottomSpacerHeight:(X-r)*_}},[Ie,Y,X,_,v]),Ve=(0,n.useMemo)(()=>J.slice(Z,ze),[J,Z,ze]),He=(e,t=!1,n)=>{let r=Ae[e];if(!r)return n||{};let i=r.side===`right`;return{position:`sticky`,[i?`right`:`left`]:`${r.offset}px`,...t?{top:0}:{},zIndex:t?30:20,background:`#f8fafc`,boxShadow:i?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...n}},Ue=(0,n.useMemo)(()=>h.map((e,t)=>(h.length-1-t)*48),[h]),$=z.length+ +!!s+(l&&D.length>0?1:0);return(0,i.jsxs)(`div`,{ref:B,className:`flexi-root`,children:[l&&(0,i.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),k(!0)},onDragLeave:()=>k(!1),onDrop:Oe,className:p(`flexi-groupzone`,he&&`flexi-groupzone--dragover`),children:D.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:`}),D.map(e=>(0,i.jsxs)(`div`,{className:`flexi-chip`,children:[(0,i.jsx)(`span`,{children:I.find(t=>t.key===e)?.header||e}),(0,i.jsx)(`button`,{type:`button`,onClick:()=>ke(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,i.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})}),(0,i.jsx)(`div`,{ref:Fe,className:`flexi-table-wrap`,style:ae,children:(0,i.jsxs)(`table`,{className:p(`flexi-table`,se&&`flexi-table--bordered`),style:oe,children:[(0,i.jsxs)(`colgroup`,{children:[l&&D.length>0&&(0,i.jsx)(`col`,{style:{width:`48px`}}),z.map(e=>(0,i.jsx)(`col`,{style:{...e.style,width:U(e)}},e.key)),s&&(0,i.jsx)(`col`,{style:{width:`100px`}})]}),(0,i.jsx)(`thead`,{className:`flexi-thead`,children:H.map((e,n)=>(0,i.jsxs)(`tr`,{className:`flexi-header-row`,children:[n===0&&l&&D.length>0&&(0,i.jsx)(`th`,{rowSpan:H.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),e.map(({col:e,rowSpan:n,colSpan:a})=>{let o=(S[e.key]?.length||0)>0,s=!!L[e.key],c=He(e.key,!0,e.headerStyle),u=!e.children||e.children.length===0,d=A.key===e.key,f=!!(l&&u),ee=u&&e.resizable!==!1;return(0,i.jsxs)(`th`,{rowSpan:n,colSpan:a,draggable:!0,onDragStart:t=>we(t,e.key,u),onDragOver:e=>e.preventDefault(),onDrop:t=>Ee(t,e.key),className:p(`flexi-th`,`flexi-th--draggable`,f&&`flexi-th--group-draggable`,s&&`flexi-th--pinned`,e.className,e.headerClassName),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&&Ce(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&&A.direction===`asc`?(0,i.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):d&&A.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?E.current.set(e.key,t):E.current.delete(e.key)},onClick:t=>{t.stopPropagation(),w(``),ue(x===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(),Se(e.key)},className:p(`flexi-icon-btn`,`flexi-pin-btn`,s&&`flexi-pin-btn--pinned`),title:L[e.key]===`left`?`Pinned left (click to pin right)`:L[e.key]===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:s?(0,i.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,i.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),x===e.key&&u&&T&&B.current&&(0,r.createPortal)((0,i.jsxs)(`div`,{ref:V,className:`flexi-filter-dropdown`,style:{top:T.top,left:T.left,zIndex:9999},children:[(0,i.jsx)(`div`,{className:`flexi-filter-search`,children:(0,i.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:C,onChange:e=>w(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,i.jsx)(`div`,{className:`flexi-filter-list`,children:Ne.length===0?(0,i.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):Ne.map((t,n)=>(0,i.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,i.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:S[e.key]?.includes(t)||!1,onChange:()=>je(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:()=>Me(e.key),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),B.current)]}),ee&&(0,i.jsx)(`div`,{className:`flexi-th-resizer`,onMouseDown:t=>De(t,e),onClick:e=>e.stopPropagation(),onDragStart:e=>e.preventDefault()})]},e.key)}),n===0&&s&&(0,i.jsx)(`th`,{rowSpan:H.length,className:`flexi-actions-th`,style:{position:`sticky`,top:0,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...`})}):J.length===0?(0,i.jsx)(`tr`,{children:(0,i.jsx)(`td`,{colSpan:$,className:`flexi-empty-cell`,children:`No records found matching criteria.`})}):(0,i.jsxs)(i.Fragment,{children:[Q>0&&(0,i.jsx)(`tr`,{"aria-hidden":`true`,style:{height:Q},children:(0,i.jsx)(`td`,{colSpan:$,style:{padding:0,border:`none`,height:Q}})}),Ve.map((e,t)=>We(e,Z+t)),Be>0&&(0,i.jsx)(`tr`,{"aria-hidden":`true`,style:{height:Be},children:(0,i.jsx)(`td`,{colSpan:$,style:{padding:0,border:`none`,height:Be}})})]})}),h.length>0&&(0,i.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:h.map((e,t)=>Ge(e,t))})]})})]});function We(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:()=>Pe(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}`)}let r=be(e);return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,b&&`flexi-row--clickable`,xe(e,n)),onClick:b?t=>b(e,n,t):void 0,children:[l&&D?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),z?.map(t=>{let n=e[t.key],r=He(t.key,!1,t.style);return(0,i.jsx)(`td`,{className:p(`flexi-cell`,!!L[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},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},r??`row-${n}`)}function Ge(e,t){let n=typeof g==`function`?g(e,t):g,r={position:`sticky`,bottom:`${Ue[t]}px`,background:`#`,zIndex:45};return(0,i.jsxs)(`tr`,{className:p(`flexi-row`,`flexi-row--pinned-bottom`,n),style:r,children:[l&&D?.length>0&&(0,i.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}}),z?.map(t=>{let n=e[t.key],r=He(t.key,!1,t.style),a=!!L[t.key],o=t.pinnedRender??t.render;return(0,i.jsx)(`td`,{className:p(`flexi-cell`,a&&`flexi-cell--pinned`,t.className),style:r,children:o?o(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},children:(0,i.jsx)(`div`,{className:`flexi-actions-inner`,children:s(e)})})]},`pinned-bottom-row-${t}`)}}e.DataTable=m});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexi-datagrid",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A powerful universal datagrid with tree-grouping, column pinning, and drag-and-drop.",
   "type": "module",
   "main": "./dist/index.umd.js",