npm - flexi-datagrid - Versions diffs - 1.2.9 → 1.2.11 - Mend

flexi-datagrid 1.2.9 → 1.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md +4 -3
package/dist/DataTable/constants.d.ts +1 -1
package/dist/DataTable/hooks/useDataTableState.d.ts +2 -0
package/dist/flexi-datagrid.css +1 -1
package/dist/index.es.js +267 -254
package/dist/index.umd.js +1 -1
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -148,7 +148,7 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
 | `rowKey` | `keyof T \| (record: T) => string` | Field name or function used to derive a unique React key per row. |
 | `actions` | `(record: T) => ReactNode` | Renders a sticky, right-aligned actions cell per row (e.g. edit/delete buttons). |
 | `isLoading` | `boolean` | Shows a loading state in place of rows. |
-| `groupBy` | `boolean` | Enables drag-and-drop row grouping — drag a column header into the grouping zone above the grid. |
+| `groupBy` | `boolean` | Enables drag-and-drop row grouping — drag a column header into the grouping zone above the grid. It also sets the initial state of the **Group By** checkbox in the settings menu (shown whenever `controlPanel` is on), which lets users turn grouping on or off at runtime. Defaults to `false`. |
 | `defaultGroupBy` | `string[]` | Column keys the grid is grouped by on initial render (requires `groupBy`). |
 | `onPinChange` | `(columnKey, isPinned, side?) => void` | Called whenever a column is pinned/unpinned, with the side (`'left'` \| `'right'`) it was pinned to. |
 | `onGroupChange` | `(groupedKeys: string[]) => void` | Called whenever the set of grouped columns changes. |
@@ -253,8 +253,9 @@ Notes:
 Pass `controlPanel` to render a small toolbar above the grid (and above the grouping drop zone, if `groupBy` is also on) with a single **Settings** menu button. Clicking it opens a dropdown with every display option in one place, instead of a row of separate buttons:
 - **Show pin/filter icons on hover** — toggles `displayPinnedIcon`. When off, neither the pin button nor the filter button reveals on hovering a column header, regardless of whether the column is `filterable`; when on, hovering a leaf column header's action area reveals its filter icon (if `filterable`) and pin icon.
+- **Group By** — always listed in the dropdown. Its checked state comes from the `groupBy` prop (`groupBy` → checked, otherwise unchecked), and it follows the prop if that value changes. Checking it shows the grouping drop zone and makes leaf column headers draggable into it; unchecking it hides the drop zone and renders the rows ungrouped. Columns the user had grouped by are remembered, so re-checking restores them.
 - **Columns** — a checklist of every leaf column (by `header` label) to show or hide it. Hiding a column removes it from both the header and body, and adjusts any parent group header's `colSpan` automatically.
-- **Reset to defaults** — restores pin/filter icon hover visibility and hidden columns to the values passed via `defaultDisplayPinnedIcon` / `defaultHiddenColumns` (not to "all columns visible" — it resets to *your configured defaults*, so a column you deliberately hid by default stays hidden after reset).
+- **Reset to defaults** — restores pin/filter icon hover visibility, hidden columns and the Group By checkbox to the values passed via `defaultDisplayPinnedIcon` / `defaultHiddenColumns` / `groupBy` (not to "all columns visible" — it resets to *your configured defaults*, so a column you deliberately hid by default stays hidden after reset).
 ```tsx
 <DataTable
@@ -289,7 +290,7 @@ Pagination is applied after filtering and sorting, and before row grouping — s
 ### 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.
+Set `groupBy` to enable a drop zone above the table. With `controlPanel` on, the settings menu always shows a **Group By** checkbox whose initial state follows this prop; unchecking it hides the drop zone and ungroups the rows (the chosen group columns are kept for when it's re-checked). 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

package/dist/DataTable/constants.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export declare const DEFAULT_ROW_HEIGHT = 48;
+export declare const DEFAULT_ROW_HEIGHT = 40;
 export declare const DEFAULT_COL_WIDTH = 150;
 export declare const MIN_COL_WIDTH = 60;
 export declare const ACTIONS_WIDTH = 100;

package/dist/DataTable/hooks/useDataTableState.d.ts CHANGED Viewed

@@ -10,6 +10,8 @@ export declare function useDataTableState<T>({ columns, data, rowKey, actions, i
     actions: ((record: T) => import("react").ReactNode) | undefined;
     isLoading: boolean;
     groupBy: boolean;
+    showGroupBy: boolean;
+    toggleShowGroupBy: () => void;
     controlPanel: boolean;
     rowHeight: number;
     rowSpanColumns: string[] | undefined;

package/dist/flexi-datagrid.css CHANGED Viewed

@@ -1,2 +1,2 @@
-.flexi-root{width:100%;position:relative}.flexi-root>*+*{margin-top:.75rem}.flexi-settings-menu{z-index:50;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;flex-direction:column;width:13rem;max-height:20rem;padding:.5rem;font-weight:400;display:flex;position:absolute;top:calc(100% + 4px);overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.flexi-settings-section{flex-direction:column;gap:.125rem;display:flex}.flexi-settings-heading{text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;padding:.25rem .5rem;font-size:11px;font-weight:700}.flexi-settings-divider{background-color:#f1f5f9;height:1px;margin:.375rem 0}.flexi-settings-reset{color:#ef4444;border-radius:.375rem;align-items:center;gap:.375rem;padding:.375rem .5rem;font-size:12px;font-weight:600;display:inline-flex}.flexi-settings-reset:hover{background-color:#fef2f2}.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%;position:relative;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,.flexi-filter-btn,.flexi-pin-btn{color:#94a3b8;opacity:0;transition:color .15s,opacity .15s}.flexi-sort-icon--active{color:#2563eb;opacity:1}.flexi-th-inner:hover .flexi-sort-icon,.flexi-th-inner:hover .flexi-filter-btn,.flexi-th-inner:hover .flexi-pin-btn{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--active{color:#2563eb;opacity:1}.flexi-filter-btn--active:hover{color:#2563eb;opacity:1;background-color:#dbeafe}.flexi-pin-btn--pinned{color:#3b82f6;opacity:1}.flexi-pin-btn--pinned:hover{color:#2563eb;opacity:1;background-color:#dbeafe}.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-pagination{color:#475569;box-sizing:border-box;background-color:#f8fafc80;border:1px solid #e2e8f0;border-radius:.75rem;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.5rem .75rem;font-size:12px;font-weight:500;display:flex}.flexi-pagination-size{align-items:center;gap:.5rem;display:flex}.flexi-pagination-select{color:#334155;background-color:#fff;border:1px solid #e2e8f0;border-radius:.375rem;padding:.25rem .5rem;font-size:12px;font-weight:500}.flexi-pagination-info{text-align:center;flex:auto}.flexi-pagination-controls{align-items:center;gap:.25rem;display:flex}.flexi-pagination-controls .flexi-icon-btn:disabled{opacity:.4;cursor:not-allowed}.flexi-pagination-controls .flexi-icon-btn:disabled:hover{background-color:#0000}.flexi-pagination-page{white-space:nowrap;padding:0 .5rem}.flexi-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0 5px;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-settings-menu{z-index:50;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;flex-direction:column;width:13rem;max-height:20rem;padding:.5rem;font-weight:400;display:flex;position:absolute;top:calc(100% + 4px);overflow-y:auto;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.flexi-settings-section{flex-direction:column;gap:.125rem;display:flex}.flexi-settings-heading{text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;padding:.25rem .5rem;font-size:11px;font-weight:700}.flexi-settings-divider{background-color:#f1f5f9;height:1px;margin:.375rem 0}.flexi-settings-reset{color:#ef4444;border-radius:.375rem;align-items:center;gap:.375rem;padding:.375rem .5rem;font-size:12px;font-weight:600;display:inline-flex}.flexi-settings-reset:hover{background-color:#fef2f2}.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%;position:relative;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,.flexi-filter-btn,.flexi-pin-btn{color:#94a3b8;opacity:0;transition:color .15s,opacity .15s}.flexi-sort-icon--active{color:#2563eb;opacity:1}.flexi-th-inner:hover .flexi-sort-icon,.flexi-th-inner:hover .flexi-filter-btn,.flexi-th-inner:hover .flexi-pin-btn{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--active{color:#2563eb;opacity:1}.flexi-filter-btn--active:hover{color:#2563eb;opacity:1;background-color:#dbeafe}.flexi-pin-btn--pinned{color:#3b82f6;opacity:1}.flexi-pin-btn--pinned:hover{color:#2563eb;opacity:1;background-color:#dbeafe}.flexi-settings-corner{z-index:60;width:100%;height:0;position:sticky;top:0;left:0}.flexi-settings-corner-inner{background:#f8fafc;border-bottom:1px solid #e3e4e3;border-left:1px solid #e3e4e3;align-items:center;height:48px;padding:0 .5rem 0 1rem;display:flex;position:absolute;top:0;right:0}.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-pagination{color:#475569;box-sizing:border-box;background-color:#f8fafc80;border:1px solid #e2e8f0;border-radius:.75rem;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:.5rem .75rem;font-size:12px;font-weight:500;display:flex}.flexi-pagination-size{align-items:center;gap:.5rem;display:flex}.flexi-pagination-select{color:#334155;background-color:#fff;border:1px solid #e2e8f0;border-radius:.375rem;padding:.25rem .5rem;font-size:12px;font-weight:500}.flexi-pagination-info{text-align:center;flex:auto}.flexi-pagination-controls{align-items:center;gap:.25rem;display:flex}.flexi-pagination-controls .flexi-icon-btn:disabled{opacity:.4;cursor:not-allowed}.flexi-pagination-controls .flexi-icon-btn:disabled:hover{background-color:#0000}.flexi-pagination-page{white-space:nowrap;padding:0 .5rem}.flexi-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0 5px;line-height:normal}.flexi-root input{font:inherit}.flexi-root table{border-collapse:collapse;border-spacing:0}
 /*$vite$:1*/

package/dist/index.es.js CHANGED Viewed

@@ -4,24 +4,24 @@ import { jsx as x, jsxs as S } from "react/jsx-runtime";
 import { createPortal as C } from "react-dom";
 //#region src/DataTable/context/DataTableContext.tsx
 var w = m(null);
-function T({ value: e, children: t }) {
+function ee({ value: e, children: t }) {
 	return /* @__PURE__ */ x(w.Provider, {
 		value: e,
 		children: t
 	});
 }
-function E() {
+function T() {
 	let e = g(w);
 	if (!e) throw Error("DataTable components must be rendered inside <DataTable>.");
 	return e;
 }
 //#endregion
 //#region src/DataTable/utils/classNames.ts
-var D = (...e) => e.filter(Boolean).join(" ");
+var E = (...e) => e.filter(Boolean).join(" ");
 //#endregion
 //#region src/DataTable/components/GroupZone.tsx
-function O() {
-	let { groupedColumns: e, columnsByKey: t, addGroup: n, removeGroup: r } = E(), [i, a] = b(!1);
+function D() {
+	let { groupedColumns: e, columnsByKey: t, addGroup: n, removeGroup: r } = T(), [i, a] = b(!1);
 	return /* @__PURE__ */ x("div", {
 		onDragOver: (e) => {
 			e.preventDefault(), a(!0);
@@ -32,7 +32,7 @@ function O() {
 			let r = e.dataTransfer.getData("text/plain");
 			r && t.has(r) && n(r);
 		},
-		className: D("flexi-groupzone", i && "flexi-groupzone--dragover"),
+		className: E("flexi-groupzone", i && "flexi-groupzone--dragover"),
 		children: e.length === 0 ? /* @__PURE__ */ x("span", {
 			className: "flexi-groupzone-hint",
 			children: "Drag a column header here to group your records by that field"
@@ -55,8 +55,8 @@ function O() {
 }
 //#endregion
 //#region src/DataTable/components/Pagination.tsx
-function k() {
-	let { currentPage: e, pageSize: t, totalPages: n, totalCount: r, pageSizeOptions: c, goToPage: l, changePageSize: u } = E();
+function O() {
+	let { currentPage: e, pageSize: t, totalPages: n, totalCount: r, pageSizeOptions: c, goToPage: l, changePageSize: u } = T();
 	return /* @__PURE__ */ S("div", {
 		className: "flexi-pagination",
 		children: [
@@ -127,26 +127,26 @@ function k() {
 }
 //#endregion
 //#region src/DataTable/constants.ts
-var ee = [
+var te = [
 	10,
 	25,
 	50,
 	100
-], A = [], j = [], M = (e) => {
+], k = [], A = [], j = (e) => {
 	let t = [];
 	return e.forEach((e) => {
-		e.children && e.children.length > 0 ? t.push(...M(e.children)) : t.push(e);
+		e.children && e.children.length > 0 ? t.push(...j(e.children)) : t.push(e);
 	}), t;
-}, N = (e) => {
+}, ne = (e) => {
 	if (e === !0) return "left";
 	if (e === "left" || e === "right") return e;
-}, P = (e) => {
+}, M = (e) => {
 	let t = {};
 	return e.forEach((e) => {
-		let n = N(e.pinned);
+		let n = ne(e.pinned);
 		n && (t[e.key] = n);
 	}), t;
-}, F = (e, t, n) => {
+}, N = (e, t, n) => {
 	let r = (e) => {
 		let n = t[e];
 		return n === "left" ? 0 : n === "right" ? 2 : 1;
@@ -161,22 +161,22 @@ var ee = [
 		children: i(e.children)
 	} : e);
 	return i(e);
-}, te = (e, t, n) => {
+}, P = (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);
+		let e = P(r.children, t, n);
 		if (e) return e;
 	}
 	return null;
-}, I = (e, t) => {
+}, F = (e, t) => {
 	let n = t[e.key];
 	if (n !== void 0) return n;
 	let r = e.style?.width || e.headerStyle?.width || "150px";
 	if (typeof r == "number") return r;
 	let i = String(r).trim();
 	return /^\d+(\.\d+)?(px)?$/i.test(i) && parseInt(i, 10) || 150;
-}, ne = (e, t, n) => {
+}, re = (e, t, n) => {
 	let r = (e) => {
 		let t = 0;
 		return e.forEach((e) => {
@@ -203,13 +203,13 @@ var ee = [
 		...e,
 		rowSpan: Math.min(e.rowSpan, c.length - t)
 	})));
-}, re = ({ visibleLeafColumns: e, pinnedColumns: t, columnWidths: n, hasGroups: r, hasActions: i }) => {
+}, ie = ({ visibleLeafColumns: e, pinnedColumns: t, columnWidths: n, hasGroups: r, hasActions: i }) => {
 	let a = {}, o = r ? 48 : 0;
 	e.forEach((e) => {
 		t[e.key] === "left" && (a[e.key] = {
 			side: "left",
 			offset: o
-		}, o += I(e, n));
+		}, o += F(e, n));
 	});
 	let s = i ? 100 : 0;
 	for (let r = e.length - 1; r >= 0; r--) {
@@ -217,10 +217,10 @@ var ee = [
 		t[i.key] === "right" && (a[i.key] = {
 			side: "right",
 			offset: s
-		}, s += I(i, n));
+		}, s += F(i, n));
 	}
 	return a;
-}, L = (e, t, n = !1, r) => {
+}, I = (e, t, n = !1, r) => {
 	let i = e[t];
 	if (!i) return r || {};
 	let a = i.side === "right";
@@ -233,7 +233,7 @@ var ee = [
 		boxShadow: a ? "-2px 0 5px -2px rgba(0,0,0,0.1)" : "2px 0 5px -2px rgba(0,0,0,0.1)",
 		...r
 	};
-}, ie = () => /* @__PURE__ */ x("td", {
+}, ae = () => /* @__PURE__ */ x("td", {
 	className: "flexi-row-indent-cell",
 	style: {
 		position: "sticky",
@@ -241,7 +241,7 @@ var ee = [
 		zIndex: 10
 	}
 });
-function R({ children: e }) {
+function L({ children: e }) {
 	return /* @__PURE__ */ x("td", {
 		className: "flexi-actions-cell",
 		style: {
@@ -254,8 +254,8 @@ function R({ children: e }) {
 		})
 	});
 }
-function ae({ node: e }) {
-	let { rowHeight: t, expandedGroups: n, toggleGroupExpansion: i, totalColumnsCount: o } = E(), s = n[e.path] !== !1;
+function oe({ node: e }) {
+	let { rowHeight: t, expandedGroups: n, toggleGroupExpansion: i, totalColumnsCount: o } = T(), s = n[e.path] !== !1;
 	return /* @__PURE__ */ S("tr", {
 		className: "flexi-group-row",
 		style: { height: t },
@@ -290,65 +290,65 @@ function ae({ node: e }) {
 		})]
 	});
 }
-function oe({ record: e, rowIndex: t, className: n }) {
-	let { rowHeight: r, hasGroups: i, hasActions: a, actions: o, onRowClick: s, visibleLeafColumns: c, pinnedColumns: l, pinOffsets: u, rowSpanColumns: d, rowSpanInfo: f } = E(), p = f.get(t);
+function se({ record: e, rowIndex: t, className: n }) {
+	let { rowHeight: r, hasGroups: i, hasActions: a, actions: o, onRowClick: s, visibleLeafColumns: c, pinnedColumns: l, pinOffsets: u, rowSpanColumns: d, rowSpanInfo: f } = T(), p = f.get(t);
 	return /* @__PURE__ */ S("tr", {
-		className: D("flexi-row", s && "flexi-row--clickable", n),
+		className: E("flexi-row", s && "flexi-row--clickable", n),
 		style: { height: r },
 		onClick: s ? (n) => s(e, t, n) : void 0,
 		children: [
-			i && /* @__PURE__ */ x(ie, {}),
+			i && /* @__PURE__ */ x(ae, {}),
 			c.map((t) => {
 				let n = d?.includes(t.key) ? p?.[t.key] : void 0;
 				if (n === "skip") return null;
 				let r = e[t.key];
 				return /* @__PURE__ */ x("td", {
 					rowSpan: typeof n == "number" ? n : void 0,
-					className: D("flexi-cell", !!l[t.key] && "flexi-cell--pinned", t.className),
-					style: L(u, t.key, !1, t.style),
+					className: E("flexi-cell", !!l[t.key] && "flexi-cell--pinned", t.className),
+					style: I(u, t.key, !1, t.style),
 					children: t.render ? t.render(r, e) : /* @__PURE__ */ x("span", {
 						className: "flexi-cell-text",
 						children: r
 					})
 				}, t.key);
 			}),
-			a && o && /* @__PURE__ */ x(R, { children: o(e) })
+			a && o && /* @__PURE__ */ x(L, { children: o(e) })
 		]
 	});
 }
-function se({ record: e, index: t, className: n }) {
-	let { hasGroups: r, hasActions: i, actions: a, pinnedBottomRowData: o, visibleLeafColumns: s, pinnedColumns: c, pinOffsets: l } = E(), u = {
+function R({ record: e, index: t, className: n }) {
+	let { hasGroups: r, hasActions: i, actions: a, pinnedBottomRowData: o, visibleLeafColumns: s, pinnedColumns: c, pinOffsets: l } = T(), u = {
 		position: "sticky",
 		bottom: `${(o.length - 1 - t) * 48}px`,
 		zIndex: 45
 	};
 	return /* @__PURE__ */ S("tr", {
-		className: D("flexi-row", "flexi-row--pinned-bottom", n),
+		className: E("flexi-row", "flexi-row--pinned-bottom", n),
 		style: u,
 		children: [
-			r && /* @__PURE__ */ x(ie, {}),
+			r && /* @__PURE__ */ x(ae, {}),
 			s.map((t) => {
 				let n = e[t.key], r = t.pinnedRender ?? t.render;
 				return /* @__PURE__ */ x("td", {
-					className: D("flexi-cell", !!c[t.key] && "flexi-cell--pinned", t.className),
-					style: L(l, t.key, !1, t.style),
+					className: E("flexi-cell", !!c[t.key] && "flexi-cell--pinned", t.className),
+					style: I(l, t.key, !1, t.style),
 					children: r ? r(n, e) : /* @__PURE__ */ x("span", {
 						className: "flexi-cell-text",
 						children: n
 					})
 				}, t.key);
 			}),
-			i && a && /* @__PURE__ */ x(R, { children: a(e) })
+			i && a && /* @__PURE__ */ x(L, { children: a(e) })
 		]
 	});
 }
 //#endregion
 //#region src/DataTable/components/PinnedBottomBody.tsx
-function z() {
-	let { pinnedBottomRowData: e, pinnedRowClassName: t } = E();
+function ce() {
+	let { pinnedBottomRowData: e, pinnedRowClassName: t } = T();
 	return e.length === 0 ? null : /* @__PURE__ */ x("tbody", {
 		className: "flexi-tbody flexi-tbody--pinned-bottom",
-		children: e.map((e, n) => /* @__PURE__ */ x(se, {
+		children: e.map((e, n) => /* @__PURE__ */ x(R, {
 			record: e,
 			index: n,
 			className: typeof t == "function" ? t(e, n) : t
@@ -357,22 +357,22 @@ function z() {
 }
 //#endregion
 //#region src/DataTable/components/SettingsMenu.tsx
-function B() {
-	let { settingsMenu: e } = E();
+function le() {
+	let { settingsMenu: e } = T();
 	return /* @__PURE__ */ x("button", {
 		type: "button",
 		ref: e.buttonRef,
 		onClick: (t) => {
 			t.stopPropagation(), e.toggle();
 		},
-		className: D("flexi-icon-btn", e.isOpen && "flexi-settings-btn--active"),
+		className: E("flexi-icon-btn", e.isOpen && "flexi-settings-btn--active"),
 		title: "Grid display settings",
 		children: /* @__PURE__ */ x(f, { className: "flexi-icon-sm" })
 	});
 }
-function V() {
-	let { gridRootRef: e, settingsMenu: t, displayPinnedIcon: n, toggleDisplayPinnedIcon: r, initialLeafColumns: i, hiddenColumns: a, toggleColumnVisibility: o, resetControlPanelDefaults: s } = E(), c = e.current;
-	return !t.isOpen || !t.position || !c ? null : C(/* @__PURE__ */ S("div", {
+function ue() {
+	let { gridRootRef: e, settingsMenu: t, displayPinnedIcon: n, toggleDisplayPinnedIcon: r, showGroupBy: i, toggleShowGroupBy: a, initialLeafColumns: o, hiddenColumns: s, toggleColumnVisibility: c, resetControlPanelDefaults: l } = T(), u = e.current;
+	return !t.isOpen || !t.position || !u ? null : C(/* @__PURE__ */ S("div", {
 		ref: t.menuRef,
 		className: "flexi-settings-menu",
 		style: {
@@ -383,21 +383,36 @@ function V() {
 		children: [
 			/* @__PURE__ */ S("div", {
 				className: "flexi-settings-section",
-				children: [/* @__PURE__ */ x("span", {
-					className: "flexi-settings-heading",
-					children: "Action Icons"
-				}), /* @__PURE__ */ S("label", {
-					className: "flexi-filter-option",
-					children: [/* @__PURE__ */ x("input", {
-						type: "checkbox",
-						className: "flexi-checkbox",
-						checked: n,
-						onChange: r
-					}), /* @__PURE__ */ x("span", {
-						className: "flexi-filter-option-text",
-						children: "Show pin icon on hover"
-					})]
-				})]
+				children: [
+					/* @__PURE__ */ x("span", {
+						className: "flexi-settings-heading",
+						children: "Action Icons"
+					}),
+					/* @__PURE__ */ S("label", {
+						className: "flexi-filter-option",
+						children: [/* @__PURE__ */ x("input", {
+							type: "checkbox",
+							className: "flexi-checkbox",
+							checked: n,
+							onChange: r
+						}), /* @__PURE__ */ x("span", {
+							className: "flexi-filter-option-text",
+							children: "Show pin icon on hover"
+						})]
+					}),
+					/* @__PURE__ */ S("label", {
+						className: "flexi-filter-option",
+						children: [/* @__PURE__ */ x("input", {
+							type: "checkbox",
+							className: "flexi-checkbox",
+							checked: i,
+							onChange: a
+						}), /* @__PURE__ */ x("span", {
+							className: "flexi-filter-option-text",
+							children: "Group By"
+						})]
+					})
+				]
 			}),
 			/* @__PURE__ */ x("div", { className: "flexi-settings-divider" }),
 			/* @__PURE__ */ S("div", {
@@ -405,13 +420,13 @@ function V() {
 				children: [/* @__PURE__ */ x("span", {
 					className: "flexi-settings-heading",
 					children: "Columns"
-				}), i.map((e) => /* @__PURE__ */ S("label", {
+				}), o.map((e) => /* @__PURE__ */ S("label", {
 					className: "flexi-filter-option",
 					children: [/* @__PURE__ */ x("input", {
 						type: "checkbox",
 						className: "flexi-checkbox",
-						checked: !a.includes(e.key),
-						onChange: () => o(e.key)
+						checked: !s.includes(e.key),
+						onChange: () => c(e.key)
 					}), /* @__PURE__ */ x("span", {
 						className: "flexi-filter-option-text",
 						children: e.header
@@ -421,47 +436,47 @@ function V() {
 			/* @__PURE__ */ x("div", { className: "flexi-settings-divider" }),
 			/* @__PURE__ */ S("button", {
 				type: "button",
-				onClick: s,
+				onClick: l,
 				className: "flexi-settings-reset",
 				title: "Reset pin icon visibility and hidden columns to their defaults",
 				children: [/* @__PURE__ */ x(d, { className: "flexi-icon-sm" }), /* @__PURE__ */ x("span", { children: "Reset to defaults" })]
 			})
 		]
-	}), c);
+	}), u);
 }
 //#endregion
 //#region src/DataTable/utils/records.ts
-var H = (e, t, n) => n?.getValue ? n.getValue(e) : e[t], U = (e, t) => {
+var z = (e, t, n) => n?.getValue ? n.getValue(e) : e[t], B = (e, t) => {
 	let n = typeof t == "function" ? t(e) : e[t];
 	return n == null ? void 0 : String(n);
-}, W = (e, t, n) => {
+}, V = (e, t, n) => {
 	if (!n) return;
 	let r;
 	for (let i in n) n[i](e, t) && (r = r ? `${r} ${i}` : i);
 	return r;
-}, G = (e, t, n) => {
-	let r = e.map((e) => H(e, t, n));
+}, de = (e, t, n) => {
+	let r = e.map((e) => z(e, t, n));
 	return Array.from(new Set(r)).filter((e) => e != null);
-}, ce = (e, t, n) => {
+}, fe = (e, t, n) => {
 	let r = Object.entries(t).filter(([, e]) => e && e.length > 0);
-	return r.length === 0 ? e : e.filter((e) => r.every(([t, r]) => r.includes(H(e, t, n.get(t)))));
-}, K = (e) => e == null || typeof e == "number" && Number.isNaN(e), q = (e, t) => typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : String(e).localeCompare(String(t), void 0, {
+	return r.length === 0 ? e : e.filter((e) => r.every(([t, r]) => r.includes(z(e, t, n.get(t)))));
+}, H = (e) => e == null || typeof e == "number" && Number.isNaN(e), pe = (e, t) => typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : String(e).localeCompare(String(t), void 0, {
 	numeric: !0,
 	sensitivity: "base"
-}), le = (e, t, n, r) => [...e].sort((e, i) => {
-	let a = H(e, t, r), o = H(i, t, r);
+}), me = (e, t, n, r) => [...e].sort((e, i) => {
+	let a = z(e, t, r), o = z(i, t, r);
 	if (a === o) return 0;
-	let s = K(a), c = K(o);
+	let s = H(a), c = H(o);
 	if (s && c) return 0;
 	if (s) return 1;
 	if (c) return -1;
-	let l = q(a, o);
+	let l = pe(a, o);
 	return n === "asc" ? l : -l;
 });
 //#endregion
 //#region src/DataTable/components/TableBody.tsx
-function ue() {
-	let { isLoading: e, visibleRows: t, startIndex: n, totalRowCount: r, topSpacerHeight: i, bottomSpacerHeight: a, totalColumnsCount: o, rowKey: s, rowClassRules: c } = E(), l = Math.max(1, o);
+function U() {
+	let { isLoading: e, visibleRows: t, startIndex: n, totalRowCount: r, topSpacerHeight: i, bottomSpacerHeight: a, totalColumnsCount: o, rowKey: s, rowClassRules: c } = T(), l = Math.max(1, o);
 	return e || r === 0 ? /* @__PURE__ */ x("tbody", {
 		className: "flexi-tbody",
 		children: /* @__PURE__ */ x("tr", { children: /* @__PURE__ */ x("td", {
@@ -486,11 +501,11 @@ function ue() {
 			}),
 			t.map((e, t) => {
 				let r = n + t;
-				return e.kind === "group" ? /* @__PURE__ */ x(ae, { node: e }, `group-header-${e.path}-${r}`) : /* @__PURE__ */ x(oe, {
+				return e.kind === "group" ? /* @__PURE__ */ x(oe, { node: e }, `group-header-${e.path}-${r}`) : /* @__PURE__ */ x(se, {
 					record: e.record,
 					rowIndex: r,
-					className: W(e.record, r, c)
-				}, U(e.record, s) ?? `row-${r}`);
+					className: V(e.record, r, c)
+				}, B(e.record, s) ?? `row-${r}`);
 			}),
 			a > 0 && /* @__PURE__ */ x("tr", {
 				"aria-hidden": "true",
@@ -509,21 +524,21 @@ function ue() {
 }
 //#endregion
 //#region src/DataTable/components/TableColGroup.tsx
-function de() {
-	let { hasGroups: e, hasActions: t, visibleLeafColumns: n, columnWidths: r } = E();
+function he() {
+	let { hasGroups: e, hasActions: t, visibleLeafColumns: n, columnWidths: r } = T();
 	return /* @__PURE__ */ S("colgroup", { children: [
 		e && /* @__PURE__ */ x("col", { style: { width: "48px" } }),
 		n.map((e) => /* @__PURE__ */ x("col", { style: {
 			...e.style,
-			width: I(e, r)
+			width: F(e, r)
 		} }, e.key)),
 		t && /* @__PURE__ */ x("col", { style: { width: "100px" } })
 	] });
 }
 //#endregion
 //#region src/DataTable/components/FilterDropdown.tsx
-function J({ columnKey: e }) {
-	let { gridRootRef: t, filters: n } = E(), r = t.current, { filterPosition: i } = n;
+function ge({ columnKey: e }) {
+	let { gridRootRef: t, filters: n } = T(), r = t.current, { filterPosition: i } = n;
 	if (!r || !i) return null;
 	let a = n.selectedFilters[e], o = (a?.length || 0) > 0, s = n.filteredUniqueValues;
 	return C(/* @__PURE__ */ S("div", {
@@ -578,55 +593,55 @@ function J({ columnKey: e }) {
 }
 //#endregion
 //#region src/DataTable/components/HeaderCell.tsx
-function Y({ col: r, rowSpan: i, colSpan: a }) {
-	let { groupBy: o, pinnedColumns: s, pinOffsets: d, displayPinnedIcon: f, togglePin: p, sortState: m, handleSort: h, filters: g, handleDragStart: _, handleDragEnd: v, handleDrop: y, startResize: b } = E(), C = s[r.key], w = !!C, T = (g.selectedFilters[r.key]?.length || 0) > 0, O = !r.children || r.children.length === 0, k = m.key === r.key, ee = o && O, A = O && r.resizable !== !1, j = !!r.sortable && O;
+function _e({ col: r, rowSpan: i, colSpan: a }) {
+	let { groupBy: o, pinnedColumns: s, pinOffsets: d, displayPinnedIcon: f, togglePin: p, sortState: m, handleSort: h, filters: g, handleDragStart: _, handleDragEnd: v, handleDrop: y, startResize: b } = T(), C = s[r.key], w = !!C, ee = (g.selectedFilters[r.key]?.length || 0) > 0, D = !r.children || r.children.length === 0, O = m.key === r.key, te = o && D, k = D && r.resizable !== !1, A = !!r.sortable && D;
 	return /* @__PURE__ */ S("th", {
 		rowSpan: i,
 		colSpan: a,
 		draggable: !0,
-		onDragStart: (e) => _(e, r.key, O),
+		onDragStart: (e) => _(e, r.key, D),
 		onDragEnd: v,
 		onDragOver: (e) => e.preventDefault(),
 		onDrop: (e) => y(e, r.key),
-		className: D("flexi-th", "flexi-th--draggable", ee && "flexi-th--group-draggable", w && "flexi-th--pinned", r.className, r.headerClassName),
-		style: L(d, r.key, !0, r.headerStyle),
+		className: E("flexi-th", "flexi-th--draggable", te && "flexi-th--group-draggable", w && "flexi-th--pinned", r.className, r.headerClassName),
+		style: I(d, r.key, !0, r.headerStyle),
 		children: [/* @__PURE__ */ S("div", {
 			className: "flexi-th-inner",
 			children: [
 				/* @__PURE__ */ S("div", {
-					className: D("flexi-th-label", j && "flexi-th-label--sortable"),
-					onClick: () => j && h(r.key),
+					className: E("flexi-th-label", A && "flexi-th-label--sortable"),
+					onClick: () => A && h(r.key),
 					children: [/* @__PURE__ */ x("span", {
 						className: "flexi-th-text",
 						children: r.header
-					}), j && /* @__PURE__ */ x("span", {
-						className: D("flexi-sort-icon", k && "flexi-sort-icon--active"),
-						children: k && m.direction === "asc" ? /* @__PURE__ */ x(t, { className: "flexi-icon-sm" }) : k && m.direction === "desc" ? /* @__PURE__ */ x(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ x(n, { className: "flexi-icon-sm" })
+					}), A && /* @__PURE__ */ x("span", {
+						className: E("flexi-sort-icon", O && "flexi-sort-icon--active"),
+						children: O && m.direction === "asc" ? /* @__PURE__ */ x(t, { className: "flexi-icon-sm" }) : O && m.direction === "desc" ? /* @__PURE__ */ x(e, { className: "flexi-icon-sm" }) : /* @__PURE__ */ x(n, { className: "flexi-icon-sm" })
 					})]
 				}),
 				/* @__PURE__ */ S("div", {
 					className: "flexi-th-actions",
-					children: [O && r.filterable && /* @__PURE__ */ x("button", {
+					children: [D && r.filterable && /* @__PURE__ */ x("button", {
 						type: "button",
 						ref: (e) => g.registerFilterButton(r.key, e),
 						onClick: (e) => {
 							e.stopPropagation(), g.toggleFilterDropdown(r.key);
 						},
-						className: D("flexi-icon-btn", "flexi-filter-btn", T && "flexi-filter-btn--active"),
+						className: E("flexi-icon-btn", "flexi-filter-btn", ee && "flexi-filter-btn--active"),
 						children: /* @__PURE__ */ x(c, { className: "flexi-icon-sm" })
-					}), O && f && /* @__PURE__ */ x("button", {
+					}), D && f && /* @__PURE__ */ x("button", {
 						type: "button",
 						onClick: (e) => {
 							e.stopPropagation(), p(r.key);
 						},
-						className: D("flexi-icon-btn", "flexi-pin-btn", w && "flexi-pin-btn--pinned"),
+						className: E("flexi-icon-btn", "flexi-pin-btn", w && "flexi-pin-btn--pinned"),
 						title: C === "left" ? "Pinned left (click to pin right)" : C === "right" ? "Pinned right (click to unpin)" : "Pin column left",
 						children: x(w ? u : l, { className: "flexi-icon-sm" })
 					})]
 				}),
-				O && g.activeFilterKey === r.key && /* @__PURE__ */ x(J, { columnKey: r.key })
+				D && g.activeFilterKey === r.key && /* @__PURE__ */ x(ge, { columnKey: r.key })
 			]
-		}), A && /* @__PURE__ */ x("div", {
+		}), k && /* @__PURE__ */ x("div", {
 			className: "flexi-th-resizer",
 			onMouseDown: (e) => b(e, r),
 			onClick: (e) => e.stopPropagation(),
@@ -636,54 +651,40 @@ function Y({ col: r, rowSpan: i, colSpan: a }) {
 }
 //#endregion
 //#region src/DataTable/components/TableHeader.tsx
-function fe() {
-	let { headerRows: e, hasGroups: t, controlPanel: n } = E(), r = e.length === 0 && n ? [[]] : e;
+function ve() {
+	let { headerRows: e, hasGroups: t } = T();
 	return /* @__PURE__ */ x("thead", {
 		className: "flexi-thead",
-		children: r.map((e, i) => /* @__PURE__ */ S("tr", {
+		children: e.map((n, r) => /* @__PURE__ */ S("tr", {
 			className: "flexi-header-row",
-			children: [
-				i === 0 && t && /* @__PURE__ */ x("th", {
-					rowSpan: r.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: t, colSpan: n }) => /* @__PURE__ */ x(Y, {
-					col: e,
-					rowSpan: t,
-					colSpan: n
-				}, e.key)),
-				n && i === 0 && /* @__PURE__ */ x("th", {
-					className: "flexi-actions-th flexi-th ",
-					style: {
-						right: 0,
-						zIndex: 55,
-						display: "flex",
-						justifyContent: "center",
-						alignItems: "center"
-					},
-					children: /* @__PURE__ */ x(B, {})
-				})
-			]
-		}, `header-row-${i}`))
+			children: [r === 0 && t && /* @__PURE__ */ x("th", {
+				rowSpan: e.length,
+				className: "flexi-group-spacer-th",
+				style: {
+					position: "sticky",
+					top: 0,
+					left: 0,
+					zIndex: 35,
+					backgroundColor: "rgb(248, 250, 252)"
+				}
+			}), n.map(({ col: e, rowSpan: t, colSpan: n }) => /* @__PURE__ */ x(_e, {
+				col: e,
+				rowSpan: t,
+				colSpan: n
+			}, e.key))]
+		}, `header-row-${r}`))
 	});
 }
 //#endregion
 //#region src/DataTable/utils/grouping.ts
-var pe = (e, t, n, r = 0, i = "") => {
+var ye = (e, t, n, r = 0, i = "") => {
 	if (r >= t.length) return e.map((e) => ({
 		kind: "record",
 		record: e
 	}));
 	let a = t[r], o = n.get(a), s = /* @__PURE__ */ new Map();
 	return e.forEach((e) => {
-		let t = String(H(e, a, o) ?? "N/A"), n = s.get(t);
+		let t = String(z(e, a, o) ?? "N/A"), n = s.get(t);
 		n ? n.push(e) : s.set(t, [e]);
 	}), Array.from(s.entries()).sort(([e], [t]) => e.localeCompare(t, void 0, {
 		numeric: !0,
@@ -696,18 +697,18 @@ var pe = (e, t, n, r = 0, i = "") => {
 			groupValue: e,
 			path: s,
 			depth: r,
-			children: pe(o, t, n, r + 1, s),
+			children: ye(o, t, n, r + 1, s),
 			totalItemsCount: o.length
 		};
 	});
-}, me = (e, t) => {
+}, be = (e, t) => {
 	let n = [], r = (e) => {
 		e.forEach((e) => {
 			n.push(e), e.kind === "group" && t[e.path] !== !1 && r(e.children);
 		});
 	};
 	return r(e), n;
-}, he = (e, t, n, r) => {
+}, xe = (e, t, n, r) => {
 	let i = /* @__PURE__ */ new Map();
 	if (!t || t.length === 0) return i;
 	let a = e.map(() => t.map(() => !0)), o = null;
@@ -722,7 +723,7 @@ var pe = (e, t, n, r = 0, i = "") => {
 			let e = !0;
 			for (let o = 0; o < t.length; o++) {
 				let c = t[o], l = n.get(c);
-				e && H(i.record, c, l) === H(s.record, c, l) ? a[r][o] = !1 : (e = !1, a[r][o] = !0);
+				e && z(i.record, c, l) === z(s.record, c, l) ? a[r][o] = !1 : (e = !1, a[r][o] = !0);
 			}
 		}
 		o = r;
@@ -750,7 +751,7 @@ var pe = (e, t, n, r = 0, i = "") => {
 };
 //#endregion
 //#region src/DataTable/hooks/useAnchoredPosition.ts
-function X({ active: e, resetKey: t, rootRef: n, getAnchor: r, compute: i }) {
+function W({ active: e, resetKey: t, rootRef: n, getAnchor: r, compute: i }) {
 	let [a, o] = b(null), s = y(r), c = y(i);
 	return s.current = r, c.current = i, _(() => {
 		if (!e) {
@@ -772,7 +773,7 @@ function X({ active: e, resetKey: t, rootRef: n, getAnchor: r, compute: i }) {
 }
 //#endregion
 //#region src/DataTable/hooks/useClickOutside.ts
-function Z(e, t, n) {
+function G(e, t, n) {
 	let r = y(t), i = y(n);
 	r.current = t, i.current = n, _(() => {
 		if (!e) return;
@@ -785,7 +786,7 @@ function Z(e, t, n) {
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnFilters.ts
-function ge({ data: e, columnsByKey: t, gridRootRef: n }) {
+function Se({ data: e, columnsByKey: t, gridRootRef: n }) {
 	let [r, i] = b(null), [a, o] = b({}), [s, c] = b(""), l = y(/* @__PURE__ */ new Map()), u = y(null), d = h((e, t) => {
 		t ? l.current.set(e, t) : l.current.delete(e);
 	}, []), f = h(() => {
@@ -793,8 +794,8 @@ function ge({ data: e, columnsByKey: t, gridRootRef: n }) {
 	}, []), p = h((e) => {
 		c(""), i((t) => t === e ? null : e);
 	}, []);
-	Z(r !== null, () => [u.current, r ? l.current.get(r) : null], f);
-	let m = X({
+	G(r !== null, () => [u.current, r ? l.current.get(r) : null], f);
+	let m = W({
 		active: r !== null,
 		resetKey: r,
 		rootRef: n,
@@ -816,7 +817,7 @@ function ge({ data: e, columnsByKey: t, gridRootRef: n }) {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, []), x = v(() => r ? G(e, r, t.get(r)) : [], [
+	}, []), x = v(() => r ? de(e, r, t.get(r)) : [], [
 		e,
 		r,
 		t
@@ -841,8 +842,8 @@ function ge({ data: e, columnsByKey: t, gridRootRef: n }) {
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnReorder.ts
-function _e({ columns: e, pinnedColumns: t, isResizingRef: n, onColumnReorder: r }) {
-	let [i, a] = b({}), o = y(null), s = v(() => F(e, t, i), [
+function Ce({ columns: e, pinnedColumns: t, isResizingRef: n, onColumnReorder: r }) {
+	let [i, a] = b({}), o = y(null), s = v(() => N(e, t, i), [
 		e,
 		t,
 		i
@@ -863,14 +864,14 @@ function _e({ columns: e, pinnedColumns: t, isResizingRef: n, onColumnReorder: r
 			n.preventDefault(), n.stopPropagation();
 			let l = o.current;
 			if (o.current = null, !l || l === c) return;
-			let u = te(s, l, c);
+			let u = P(s, l, c);
 			if (!u) return;
 			let d = u.map((e) => e.key), f = d.indexOf(l), p = d.indexOf(c);
 			d.splice(p, 0, d.splice(f, 1)[0]);
 			let m = { ...i };
 			d.forEach((e, t) => {
 				m[e] = t;
-			}), a(m), r && r(M(F(e, t, m)).map((e) => e.key));
+			}), a(m), r && r(j(N(e, t, m)).map((e) => e.key));
 		}, [
 			s,
 			i,
@@ -882,14 +883,14 @@ function _e({ columns: e, pinnedColumns: t, isResizingRef: n, onColumnReorder: r
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnResize.ts
-function ve(e) {
+function we(e) {
 	let [t, n] = b({}), r = y(!1), i = y(null), a = y(e);
 	return a.current = e, _(() => () => i.current?.(), []), {
 		columnWidths: t,
 		isResizingRef: r,
 		startResize: h((e, o) => {
 			e.preventDefault(), e.stopPropagation(), i.current?.(), r.current = !0;
-			let s = e.clientX, c = I(o, t), l = o.minWidth ?? 60, u = o.maxWidth, d = t[o.key], f = (e) => {
+			let s = e.clientX, c = F(o, t), l = o.minWidth ?? 60, u = o.maxWidth, d = t[o.key], f = (e) => {
 				let t = Math.max(l, c + (e.clientX - s));
 				u && (t = Math.min(u, t)), d = t, n((e) => e[o.key] === t ? e : {
 					...e,
@@ -910,7 +911,7 @@ function ve(e) {
 }
 //#endregion
 //#region src/DataTable/hooks/useColumnVisibility.ts
-function ye({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: t, onColumnVisibilityChange: n }) {
+function Te({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: t, onColumnVisibilityChange: n }) {
 	let [r, i] = b(e), [a, o] = b(t);
 	return {
 		hiddenColumns: r,
@@ -931,7 +932,7 @@ function ye({ defaultHiddenColumns: e, defaultDisplayPinnedIcon: t, onColumnVisi
 }
 //#endregion
 //#region src/DataTable/hooks/usePagination.ts
-function be({ items: e, enabled: t, defaultPageSize: n, onPageChange: r, resetOn: i }) {
+function Ee({ items: e, enabled: t, defaultPageSize: n, onPageChange: r, resetOn: i }) {
 	let [a, o] = b(1), [s, c] = b(Math.max(1, Math.floor(n) || 1)), l = e.length, u = t ? Math.max(1, Math.ceil(l / s)) : 1;
 	return _(() => {
 		o(1);
@@ -971,8 +972,8 @@ function be({ items: e, enabled: t, defaultPageSize: n, onPageChange: r, resetOn
 }
 //#endregion
 //#region src/DataTable/hooks/usePinnedColumns.ts
-function xe(e, t) {
-	let [n, r] = b(() => P(e));
+function De(e, t) {
+	let [n, r] = b(() => M(e));
 	return {
 		pinnedColumns: n,
 		togglePin: h((e) => {
@@ -983,7 +984,7 @@ function xe(e, t) {
 }
 //#endregion
 //#region src/DataTable/hooks/useRowGrouping.ts
-function Se(e, t) {
+function Oe(e, t) {
 	let [n, r] = b(e), [i, a] = b({});
 	return {
 		groupedColumns: n,
@@ -1007,11 +1008,11 @@ function Se(e, t) {
 }
 //#endregion
 //#region src/DataTable/hooks/useSettingsMenu.ts
-function Ce(e) {
+function ke(e) {
 	let [t, n] = b(!1), r = y(null), i = y(null), a = h(() => n((e) => !e), []);
-	return Z(t, () => [r.current, i.current], h(() => n(!1), [])), {
+	return G(t, () => [r.current, i.current], h(() => n(!1), [])), {
 		isOpen: t,
-		position: X({
+		position: W({
 			active: t,
 			rootRef: e,
 			getAnchor: () => i.current,
@@ -1027,7 +1028,7 @@ function Ce(e) {
 }
 //#endregion
 //#region src/DataTable/hooks/useSorting.ts
-function we() {
+function Ae() {
 	let [e, t] = b({
 		key: null,
 		direction: null
@@ -1047,7 +1048,7 @@ function we() {
 }
 //#endregion
 //#region src/DataTable/hooks/useVirtualRows.ts
-function Te({ containerRef: e, totalRowCount: t, rowHeight: n, overscan: r }) {
+function je({ containerRef: e, totalRowCount: t, rowHeight: n, overscan: r }) {
 	let [i, a] = b(0), [o, s] = b(0);
 	return _(() => {
 		let t = e.current;
@@ -1082,119 +1083,125 @@ function Te({ containerRef: e, totalRowCount: t, rowHeight: n, overscan: r }) {
 }
 //#endregion
 //#region src/DataTable/hooks/useDataTableState.ts
-function Q({ columns: e, data: t, rowKey: n, actions: r, isLoading: i, groupBy: a = !1, defaultGroupBy: o = A, onPinChange: s, onGroupChange: c, pinnedBottomRowData: l = j, pinnedRowClassName: u, rowHeight: d = 48, overscan: f = 8, onColumnResize: p, onColumnReorder: m, rowClassRules: h, onRowClick: g, rowSpanColumns: _, controlPanel: b = !1, defaultDisplayPinnedIcon: x = !0, defaultHiddenColumns: S = A, onColumnVisibilityChange: C, pagination: w = !1, defaultPageSize: T = 10, pageSizeOptions: E = ee, onPageChange: D }) {
-	let O = y(null), k = y(null), N = v(() => M(e), [e]), P = v(() => {
+function K({ columns: e, data: t, rowKey: n, actions: r, isLoading: i, groupBy: a = !1, defaultGroupBy: o = k, onPinChange: s, onGroupChange: c, pinnedBottomRowData: l = A, pinnedRowClassName: u, rowHeight: d = 40, overscan: f = 8, onColumnResize: p, onColumnReorder: m, rowClassRules: g, onRowClick: x, rowSpanColumns: S, controlPanel: C = !1, defaultDisplayPinnedIcon: w = !0, defaultHiddenColumns: ee = k, onColumnVisibilityChange: T, pagination: E = !1, defaultPageSize: D = 10, pageSizeOptions: O = te, onPageChange: ne }) {
+	let M = y(null), N = y(null), P = v(() => j(e), [e]), F = v(() => {
 		let e = /* @__PURE__ */ new Map();
-		return N.forEach((t) => e.set(t.key, t)), e;
-	}, [N]), { pinnedColumns: F, togglePin: te } = xe(N, s), { columnWidths: I, isResizingRef: L, startResize: ie } = ve(p), { reorderedColumns: R, handleDragStart: ae, handleDragEnd: oe, handleDrop: se } = _e({
+		return P.forEach((t) => e.set(t.key, t)), e;
+	}, [P]), { pinnedColumns: I, togglePin: ae } = De(P, s), { columnWidths: L, isResizingRef: oe, startResize: se } = we(p), { reorderedColumns: R, handleDragStart: ce, handleDragEnd: le, handleDrop: ue } = Ce({
 		columns: e,
-		pinnedColumns: F,
-		isResizingRef: L,
+		pinnedColumns: I,
+		isResizingRef: oe,
 		onColumnReorder: m
-	}), z = ye({
-		defaultHiddenColumns: S,
-		defaultDisplayPinnedIcon: x,
-		onColumnVisibilityChange: C
-	}), { hiddenColumns: B } = z, V = Se(o, c), { groupedColumns: H, expandedGroups: U } = V, W = a ? H : A, G = W.length > 0, K = !!r, q = v(() => M(R).filter((e) => !W.includes(e.key) && !B.includes(e.key)), [
+	}), z = Te({
+		defaultHiddenColumns: ee,
+		defaultDisplayPinnedIcon: w,
+		onColumnVisibilityChange: T
+	}), { hiddenColumns: B } = z, V = Oe(o, c), { groupedColumns: de, expandedGroups: H } = V, [pe, U] = b(a);
+	_(() => U(a), [a]);
+	let he = h(() => U((e) => !e), []), { resetControlPanelDefaults: ge } = z, _e = h(() => {
+		ge(), U(a);
+	}, [ge, a]), ve = pe, W = ve ? de : k, G = W.length > 0, K = !!r, q = v(() => j(R).filter((e) => !W.includes(e.key) && !B.includes(e.key)), [
 		R,
 		W,
 		B
-	]), ue = v(() => ne(R, W, B), [
+	]), Me = v(() => re(R, W, B), [
 		R,
 		W,
 		B
-	]), de = v(() => re({
+	]), Ne = v(() => ie({
 		visibleLeafColumns: q,
-		pinnedColumns: F,
-		columnWidths: I,
+		pinnedColumns: I,
+		columnWidths: L,
 		hasGroups: G,
 		hasActions: K
 	}), [
 		q,
-		F,
 		I,
+		L,
 		G,
 		K
-	]), J = ge({
+	]), J = Se({
 		data: t,
-		columnsByKey: P,
-		gridRootRef: O
-	}), { sortState: Y, handleSort: fe } = we(), X = be({
+		columnsByKey: F,
+		gridRootRef: M
+	}), { sortState: Y, handleSort: Pe } = Ae(), X = Ee({
 		items: v(() => {
-			let e = ce(t, J.selectedFilters, P);
-			return !Y.key || !Y.direction ? e : le(e, Y.key, Y.direction, P.get(Y.key));
+			let e = fe(t, J.selectedFilters, F);
+			return !Y.key || !Y.direction ? e : me(e, Y.key, Y.direction, F.get(Y.key));
 		}, [
 			t,
 			J.selectedFilters,
 			Y,
-			P
+			F
 		]),
-		enabled: w,
-		defaultPageSize: T,
-		onPageChange: D,
+		enabled: E,
+		defaultPageSize: D,
+		onPageChange: ne,
 		resetOn: [J.selectedFilters, Y]
-	}), Z = v(() => pe(X.pagedItems, W, P), [
+	}), Fe = v(() => ye(X.pagedItems, W, F), [
 		X.pagedItems,
 		W,
-		P
-	]), Q = v(() => me(Z, U), [Z, U]), Ee = Q.length, { startIndex: $, endIndex: De, topSpacerHeight: Oe, bottomSpacerHeight: ke } = Te({
-		containerRef: k,
-		totalRowCount: Ee,
+		F
+	]), Z = v(() => be(Fe, H), [Fe, H]), Ie = Z.length, { startIndex: Q, endIndex: Le, topSpacerHeight: Re, bottomSpacerHeight: ze } = je({
+		containerRef: N,
+		totalRowCount: Ie,
 		rowHeight: d,
 		overscan: f
-	}), Ae = v(() => Q.slice($, De), [
+	}), $ = v(() => Z.slice(Q, Le), [
+		Z,
 		Q,
+		Le
+	]), Be = v(() => xe($, S, F, Q), [
 		$,
-		De
-	]), je = v(() => he(Ae, _, P, $), [
-		Ae,
-		_,
-		P,
-		$
-	]), Me = Ce(O), Ne = q.length + +!!K + +!!G;
+		S,
+		F,
+		Q
+	]), Ve = ke(M), He = q.length + +!!K + +!!G;
 	return {
-		gridRootRef: O,
-		tableWrapRef: k,
+		gridRootRef: M,
+		tableWrapRef: N,
 		rowKey: n,
 		actions: r,
 		isLoading: !!i,
-		groupBy: a,
-		controlPanel: b,
+		groupBy: ve,
+		showGroupBy: pe,
+		toggleShowGroupBy: he,
+		controlPanel: C,
 		rowHeight: d,
-		rowSpanColumns: _,
-		rowClassRules: h,
-		onRowClick: g,
+		rowSpanColumns: S,
+		rowClassRules: g,
+		onRowClick: x,
 		pinnedBottomRowData: l,
 		pinnedRowClassName: u,
-		pageSizeOptions: E,
-		paginationEnabled: w,
-		initialLeafColumns: N,
-		columnsByKey: P,
+		pageSizeOptions: O,
+		paginationEnabled: E,
+		initialLeafColumns: P,
+		columnsByKey: F,
 		visibleLeafColumns: q,
-		headerRows: ue,
-		pinnedColumns: F,
-		pinOffsets: de,
-		columnWidths: I,
-		togglePin: te,
-		startResize: ie,
-		handleDragStart: ae,
-		handleDragEnd: oe,
-		handleDrop: se,
+		headerRows: Me,
+		pinnedColumns: I,
+		pinOffsets: Ne,
+		columnWidths: L,
+		togglePin: ae,
+		startResize: se,
+		handleDragStart: ce,
+		handleDragEnd: le,
+		handleDrop: ue,
 		hiddenColumns: B,
 		displayPinnedIcon: z.displayPinnedIcon,
 		toggleColumnVisibility: z.toggleColumnVisibility,
 		toggleDisplayPinnedIcon: z.toggleDisplayPinnedIcon,
-		resetControlPanelDefaults: z.resetControlPanelDefaults,
-		settingsMenu: Me,
-		groupedColumns: H,
-		expandedGroups: U,
+		resetControlPanelDefaults: _e,
+		settingsMenu: Ve,
+		groupedColumns: de,
+		expandedGroups: H,
 		addGroup: V.addGroup,
 		removeGroup: V.removeGroup,
 		toggleGroupExpansion: V.toggleGroupExpansion,
 		hasGroups: G,
 		hasActions: K,
 		sortState: Y,
-		handleSort: fe,
+		handleSort: Pe,
 		filters: J,
 		currentPage: X.currentPage,
 		pageSize: X.pageSize,
@@ -1202,46 +1209,52 @@ function Q({ columns: e, data: t, rowKey: n, actions: r, isLoading: i, groupBy:
 		totalCount: X.totalCount,
 		goToPage: X.goToPage,
 		changePageSize: X.changePageSize,
-		visibleRows: Ae,
-		startIndex: $,
-		totalRowCount: Ee,
-		topSpacerHeight: Oe,
-		bottomSpacerHeight: ke,
-		rowSpanInfo: je,
-		totalColumnsCount: Ne
+		visibleRows: $,
+		startIndex: Q,
+		totalRowCount: Ie,
+		topSpacerHeight: Re,
+		bottomSpacerHeight: ze,
+		rowSpanInfo: Be,
+		totalColumnsCount: He
 	};
 }
 //#endregion
 //#region src/DataTable/DataTable.tsx
-function Ee(e) {
-	let t = Q(e), { containerStyle: n, tableStyle: r, bordered: i = !1 } = e;
-	return /* @__PURE__ */ x(T, {
+function q(e) {
+	let t = K(e), { containerStyle: n, tableStyle: r, bordered: i = !1 } = e;
+	return /* @__PURE__ */ x(ee, {
 		value: t,
 		children: /* @__PURE__ */ S("div", {
 			ref: t.gridRootRef,
 			className: "flexi-root",
 			children: [
-				t.groupBy && /* @__PURE__ */ x(O, {}),
-				/* @__PURE__ */ x("div", {
+				t.groupBy && /* @__PURE__ */ x(D, {}),
+				/* @__PURE__ */ S("div", {
 					ref: t.tableWrapRef,
 					className: "flexi-table-wrap",
 					style: n,
-					children: /* @__PURE__ */ S("table", {
-						className: D("flexi-table", i && "flexi-table--bordered"),
+					children: [t.controlPanel && /* @__PURE__ */ x("div", {
+						className: "flexi-settings-corner",
+						children: /* @__PURE__ */ x("div", {
+							className: "flexi-settings-corner-inner",
+							children: /* @__PURE__ */ x(le, {})
+						})
+					}), /* @__PURE__ */ S("table", {
+						className: E("flexi-table", i && "flexi-table--bordered"),
 						style: r,
 						children: [
-							/* @__PURE__ */ x(de, {}),
-							/* @__PURE__ */ x(fe, {}),
-							/* @__PURE__ */ x(ue, {}),
-							/* @__PURE__ */ x(z, {})
+							/* @__PURE__ */ x(he, {}),
+							/* @__PURE__ */ x(ve, {}),
+							/* @__PURE__ */ x(U, {}),
+							/* @__PURE__ */ x(ce, {})
 						]
-					})
+					})]
 				}),
-				/* @__PURE__ */ x(V, {}),
-				t.paginationEnabled && /* @__PURE__ */ x(k, {})
+				/* @__PURE__ */ x(ue, {}),
+				t.paginationEnabled && /* @__PURE__ */ x(O, {})
 			]
 		})
 	});
 }
 //#endregion
-export { Ee as DataTable };
+export { q as DataTable };

package/dist/index.umd.js CHANGED Viewed

	@@ -1 +1 @@
1	- (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react/jsx-runtime"),require("react-dom")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`,`react-dom`],t):(e=typeof globalThis<`u`?globalThis:e\|\|self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX,e.ReactDOM))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=(0,n.createContext)(null);function o({value:e,children:t}){return(0,r.jsx)(a.Provider,{value:e,children:t})}function s(){let e=(0,n.useContext)(a);if(!e)throw Error(`DataTable components must be rendered inside <DataTable>.`);return e}var c=(...e)=>e.filter(Boolean).join(` `);function l(){let{groupedColumns:e,columnsByKey:i,addGroup:a,removeGroup:o}=s(),[l,u]=(0,n.useState)(!1);return(0,r.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),u(!0)},onDragLeave:()=>u(!1),onDrop:e=>{e.preventDefault(),u(!1);let t=e.dataTransfer.getData(`text/plain`);t&&i.has(t)&&a(t)},className:c(`flexi-groupzone`,l&&`flexi-groupzone--dragover`),children:e.length===0?(0,r.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,r.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,r.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),e.map(e=>(0,r.jsxs)(`div`,{className:`flexi-chip`,children:[(0,r.jsx)(`span`,{children:i.get(e)?.header\|\|e}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>o(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,r.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})})}function u(){let{currentPage:e,pageSize:n,totalPages:i,totalCount:a,pageSizeOptions:o,goToPage:c,changePageSize:l}=s();return(0,r.jsxs)(`div`,{className:`flexi-pagination`,children:[(0,r.jsxs)(`div`,{className:`flexi-pagination-size`,children:[(0,r.jsx)(`span`,{children:`Rows per page`}),(0,r.jsx)(`select`,{value:n,onChange:e=>l(Number(e.target.value)),className:`flexi-pagination-select`,children:o.map(e=>(0,r.jsx)(`option`,{value:e,children:e},e))})]}),(0,r.jsx)(`div`,{className:`flexi-pagination-info`,children:a===0?`0 of 0`:`${(e-1)n+1}–${Math.min(en,a)} of ${a}`}),(0,r.jsxs)(`div`,{className:`flexi-pagination-controls`,children:[(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(1),disabled:e===1,className:`flexi-icon-btn`,title:`First page`,children:(0,r.jsx)(t.ChevronsLeft,{className:`flexi-icon-sm`})}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(e-1),disabled:e===1,className:`flexi-icon-btn`,title:`Previous page`,children:(0,r.jsx)(t.ChevronLeft,{className:`flexi-icon-sm`})}),(0,r.jsxs)(`span`,{className:`flexi-pagination-page`,children:[`Page `,e,` of `,i]}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(e+1),disabled:e===i,className:`flexi-icon-btn`,title:`Next page`,children:(0,r.jsx)(t.ChevronRight,{className:`flexi-icon-sm`})}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(i),disabled:e===i,className:`flexi-icon-btn`,title:`Last page`,children:(0,r.jsx)(t.ChevronsRight,{className:`flexi-icon-sm`})})]})]})}var d=[10,25,50,100],f=[],p=[],m=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...m(e.children)):t.push(e)}),t},h=e=>{if(e===!0)return`left`;if(e===`left`\|\|e===`right`)return e},g=e=>{let t={};return e.forEach(e=>{let n=h(e.pinned);n&&(t[e.key]=n)}),t},_=(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)},v=(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=v(r.children,t,n);if(e)return e}return null},y=(e,t)=>{let n=t[e.key];if(n!==void 0)return n;let r=e.style?.width\|\|e.headerStyle?.width\|\|`150px`;if(typeof r==`number`)return r;let i=String(r).trim();return/^\d+(\.\d+)?(px)?$/i.test(i)&&parseInt(i,10)\|\|150},b=(e,t,n)=>{let r=e=>{let t=0;return e.forEach(e=>{t=e.children&&e.children.length>0?Math.max(t,1+r(e.children)):Math.max(t,1)}),t},i=r(e),a=Array.from({length:i},()=>[]),o=e=>!e.children\|\|e.children.length===0?t.includes(e.key)\|\|n.includes(e.key)?0:1:e.children.reduce((e,t)=>e+o(t),0),s=(e,n)=>{e.forEach(e=>{if(t.includes(e.key))return;let r=o(e);r!==0&&(e.children&&e.children.length>0?(a[n].push({col:e,rowSpan:1,colSpan:r}),s(e.children,n+1)):a[n].push({col:e,rowSpan:i-n,colSpan:1}))})};s(e,0);let c=a.filter(e=>e.length>0);return c.map((e,t)=>e.map(e=>({...e,rowSpan:Math.min(e.rowSpan,c.length-t)})))},ee=({visibleLeafColumns:e,pinnedColumns:t,columnWidths:n,hasGroups:r,hasActions:i})=>{let a={},o=r?48:0;e.forEach(e=>{t[e.key]===`left`&&(a[e.key]={side:`left`,offset:o},o+=y(e,n))});let s=i?100:0;for(let r=e.length-1;r>=0;r--){let i=e[r];t[i.key]===`right`&&(a[i.key]={side:`right`,offset:s},s+=y(i,n))}return a},x=(e,t,n=!1,r)=>{let i=e[t];if(!i)return r\|\|{};let a=i.side===`right`;return{position:`sticky`,[a?`right`:`left`]:`${i.offset}px`,...n?{top:0}:{},zIndex:n?30:20,background:`#f8fafc`,boxShadow:a?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...r}},S=()=>(0,r.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}});function C({children:e}){return(0,r.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,r.jsx)(`div`,{className:`flexi-actions-inner`,children:e})})}function w({node:e}){let{rowHeight:n,expandedGroups:i,toggleGroupExpansion:a,totalColumnsCount:o}=s(),c=i[e.path]!==!1;return(0,r.jsxs)(`tr`,{className:`flexi-group-row`,style:{height:n},children:[(0,r.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth12+16}px`},children:(0,r.jsxs)(`button`,{type:`button`,onClick:()=>a(e.path),className:`flexi-group-toggle`,children:[c?(0,r.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,r.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,r.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,r.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:Math.max(1,o-1),className:`flexi-group-filler`})]})}function T({record:e,rowIndex:t,className:n}){let{rowHeight:i,hasGroups:a,hasActions:o,actions:l,onRowClick:u,visibleLeafColumns:d,pinnedColumns:f,pinOffsets:p,rowSpanColumns:m,rowSpanInfo:h}=s(),g=h.get(t);return(0,r.jsxs)(`tr`,{className:c(`flexi-row`,u&&`flexi-row--clickable`,n),style:{height:i},onClick:u?n=>u(e,t,n):void 0,children:[a&&(0,r.jsx)(S,{}),d.map(t=>{let n=m?.includes(t.key)?g?.[t.key]:void 0;if(n===`skip`)return null;let i=e[t.key];return(0,r.jsx)(`td`,{rowSpan:typeof n==`number`?n:void 0,className:c(`flexi-cell`,!!f[t.key]&&`flexi-cell--pinned`,t.className),style:x(p,t.key,!1,t.style),children:t.render?t.render(i,e):(0,r.jsx)(`span`,{className:`flexi-cell-text`,children:i})},t.key)}),o&&l&&(0,r.jsx)(C,{children:l(e)})]})}function E({record:e,index:t,className:n}){let{hasGroups:i,hasActions:a,actions:o,pinnedBottomRowData:l,visibleLeafColumns:u,pinnedColumns:d,pinOffsets:f}=s(),p={position:`sticky`,bottom:`${(l.length-1-t)48}px`,zIndex:45};return(0,r.jsxs)(`tr`,{className:c(`flexi-row`,`flexi-row--pinned-bottom`,n),style:p,children:[i&&(0,r.jsx)(S,{}),u.map(t=>{let n=e[t.key],i=t.pinnedRender??t.render;return(0,r.jsx)(`td`,{className:c(`flexi-cell`,!!d[t.key]&&`flexi-cell--pinned`,t.className),style:x(f,t.key,!1,t.style),children:i?i(n,e):(0,r.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),a&&o&&(0,r.jsx)(C,{children:o(e)})]})}function te(){let{pinnedBottomRowData:e,pinnedRowClassName:t}=s();return e.length===0?null:(0,r.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:e.map((e,n)=>(0,r.jsx)(E,{record:e,index:n,className:typeof t==`function`?t(e,n):t},`pinned-bottom-row-${n}`))})}function D(){let{settingsMenu:e}=s();return(0,r.jsx)(`button`,{type:`button`,ref:e.buttonRef,onClick:t=>{t.stopPropagation(),e.toggle()},className:c(`flexi-icon-btn`,e.isOpen&&`flexi-settings-btn--active`),title:`Grid display settings`,children:(0,r.jsx)(t.Settings,{className:`flexi-icon-sm`})})}function ne(){let{gridRootRef:e,settingsMenu:n,displayPinnedIcon:a,toggleDisplayPinnedIcon:o,initialLeafColumns:c,hiddenColumns:l,toggleColumnVisibility:u,resetControlPanelDefaults:d}=s(),f=e.current;return!n.isOpen\|\|!n.position\|\|!f?null:(0,i.createPortal)((0,r.jsxs)(`div`,{ref:n.menuRef,className:`flexi-settings-menu`,style:{top:n.position.top,right:n.position.right,zIndex:9999},children:[(0,r.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,r.jsx)(`span`,{className:`flexi-settings-heading`,children:`Action Icons`}),(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:a,onChange:o}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:`Show pin icon on hover`})]})]}),(0,r.jsx)(`div`,{className:`flexi-settings-divider`}),(0,r.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,r.jsx)(`span`,{className:`flexi-settings-heading`,children:`Columns`}),c.map(e=>(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:!l.includes(e.key),onChange:()=>u(e.key)}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:e.header})]},e.key))]}),(0,r.jsx)(`div`,{className:`flexi-settings-divider`}),(0,r.jsxs)(`button`,{type:`button`,onClick:d,className:`flexi-settings-reset`,title:`Reset pin icon visibility and hidden columns to their defaults`,children:[(0,r.jsx)(t.RotateCcw,{className:`flexi-icon-sm`}),(0,r.jsx)(`span`,{children:`Reset to defaults`})]})]}),f)}var O=(e,t,n)=>n?.getValue?n.getValue(e):e[t],re=(e,t)=>{let n=typeof t==`function`?t(e):e[t];return n==null?void 0:String(n)},k=(e,t,n)=>{if(!n)return;let r;for(let i in n)n[i](e,t)&&(r=r?`${r} ${i}`:i);return r},A=(e,t,n)=>{let r=e.map(e=>O(e,t,n));return Array.from(new Set(r)).filter(e=>e!=null)},ie=(e,t,n)=>{let r=Object.entries(t).filter(([,e])=>e&&e.length>0);return r.length===0?e:e.filter(e=>r.every(([t,r])=>r.includes(O(e,t,n.get(t)))))},j=e=>e==null\|\|typeof e==`number`&&Number.isNaN(e),M=(e,t)=>typeof e==`number`&&typeof t==`number`?e-t:e instanceof Date&&t instanceof Date?e.getTime()-t.getTime():String(e).localeCompare(String(t),void 0,{numeric:!0,sensitivity:`base`}),ae=(e,t,n,r)=>[...e].sort((e,i)=>{let a=O(e,t,r),o=O(i,t,r);if(a===o)return 0;let s=j(a),c=j(o);if(s&&c)return 0;if(s)return 1;if(c)return-1;let l=M(a,o);return n===`asc`?l:-l});function N(){let{isLoading:e,visibleRows:t,startIndex:n,totalRowCount:i,topSpacerHeight:a,bottomSpacerHeight:o,totalColumnsCount:c,rowKey:l,rowClassRules:u}=s(),d=Math.max(1,c);return e\|\|i===0?(0,r.jsx)(`tbody`,{className:`flexi-tbody`,children:(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:d,className:`flexi-empty-cell`,children:e?`Loading records...`:`No records found matching criteria.`})})}):(0,r.jsxs)(`tbody`,{className:`flexi-tbody`,children:[a>0&&(0,r.jsx)(`tr`,{"aria-hidden":`true`,style:{height:a},children:(0,r.jsx)(`td`,{colSpan:d,style:{padding:0,border:`none`,height:a}})}),t.map((e,t)=>{let i=n+t;return e.kind===`group`?(0,r.jsx)(w,{node:e},`group-header-${e.path}-${i}`):(0,r.jsx)(T,{record:e.record,rowIndex:i,className:k(e.record,i,u)},re(e.record,l)??`row-${i}`)}),o>0&&(0,r.jsx)(`tr`,{"aria-hidden":`true`,style:{height:o},children:(0,r.jsx)(`td`,{colSpan:d,style:{padding:0,border:`none`,height:o}})})]})}function oe(){let{hasGroups:e,hasActions:t,visibleLeafColumns:n,columnWidths:i}=s();return(0,r.jsxs)(`colgroup`,{children:[e&&(0,r.jsx)(`col`,{style:{width:`48px`}}),n.map(e=>(0,r.jsx)(`col`,{style:{...e.style,width:y(e,i)}},e.key)),t&&(0,r.jsx)(`col`,{style:{width:`100px`}})]})}function P({columnKey:e}){let{gridRootRef:t,filters:n}=s(),a=t.current,{filterPosition:o}=n;if(!a\|\|!o)return null;let c=n.selectedFilters[e],l=(c?.length\|\|0)>0,u=n.filteredUniqueValues;return(0,i.createPortal)((0,r.jsxs)(`div`,{ref:n.dropdownRef,className:`flexi-filter-dropdown`,style:{top:o.top,left:o.left,zIndex:9999},children:[(0,r.jsx)(`div`,{className:`flexi-filter-search`,children:(0,r.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:n.filterSearchQuery,onChange:e=>n.setFilterSearchQuery(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`flexi-filter-list`,children:u.length===0?(0,r.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):u.map((t,i)=>(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:c?.includes(t)\|\|!1,onChange:()=>n.handleFilterChange(e,t)}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},i))}),l&&(0,r.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,r.jsx)(`button`,{type:`button`,onClick:()=>n.clearFilter(e),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),a)}function se({col:e,rowSpan:n,colSpan:i}){let{groupBy:a,pinnedColumns:o,pinOffsets:l,displayPinnedIcon:u,togglePin:d,sortState:f,handleSort:p,filters:m,handleDragStart:h,handleDragEnd:g,handleDrop:_,startResize:v}=s(),y=o[e.key],b=!!y,ee=(m.selectedFilters[e.key]?.length\|\|0)>0,S=!e.children\|\|e.children.length===0,C=f.key===e.key,w=a&&S,T=S&&e.resizable!==!1,E=!!e.sortable&&S;return(0,r.jsxs)(`th`,{rowSpan:n,colSpan:i,draggable:!0,onDragStart:t=>h(t,e.key,S),onDragEnd:g,onDragOver:e=>e.preventDefault(),onDrop:t=>_(t,e.key),className:c(`flexi-th`,`flexi-th--draggable`,w&&`flexi-th--group-draggable`,b&&`flexi-th--pinned`,e.className,e.headerClassName),style:x(l,e.key,!0,e.headerStyle),children:[(0,r.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,r.jsxs)(`div`,{className:c(`flexi-th-label`,E&&`flexi-th-label--sortable`),onClick:()=>E&&p(e.key),children:[(0,r.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),E&&(0,r.jsx)(`span`,{className:c(`flexi-sort-icon`,C&&`flexi-sort-icon--active`),children:C&&f.direction===`asc`?(0,r.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):C&&f.direction===`desc`?(0,r.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,r.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,r.jsxs)(`div`,{className:`flexi-th-actions`,children:[S&&e.filterable&&(0,r.jsx)(`button`,{type:`button`,ref:t=>m.registerFilterButton(e.key,t),onClick:t=>{t.stopPropagation(),m.toggleFilterDropdown(e.key)},className:c(`flexi-icon-btn`,`flexi-filter-btn`,ee&&`flexi-filter-btn--active`),children:(0,r.jsx)(t.Filter,{className:`flexi-icon-sm`})}),S&&u&&(0,r.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),d(e.key)},className:c(`flexi-icon-btn`,`flexi-pin-btn`,b&&`flexi-pin-btn--pinned`),title:y===`left`?`Pinned left (click to pin right)`:y===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:b?(0,r.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,r.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),S&&m.activeFilterKey===e.key&&(0,r.jsx)(P,{columnKey:e.key})]}),T&&(0,r.jsx)(`div`,{className:`flexi-th-resizer`,onMouseDown:t=>v(t,e),onClick:e=>e.stopPropagation(),onDragStart:e=>e.preventDefault()})]})}function ce(){let{headerRows:e,hasGroups:t,controlPanel:n}=s(),i=e.length===0&&n?[[]]:e;return(0,r.jsx)(`thead`,{className:`flexi-thead`,children:i.map((e,a)=>(0,r.jsxs)(`tr`,{className:`flexi-header-row`,children:[a===0&&t&&(0,r.jsx)(`th`,{rowSpan:i.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:t,colSpan:n})=>(0,r.jsx)(se,{col:e,rowSpan:t,colSpan:n},e.key)),n&&a===0&&(0,r.jsx)(`th`,{className:`flexi-actions-th flexi-th `,style:{right:0,zIndex:55,display:`flex`,justifyContent:`center`,alignItems:`center`},children:(0,r.jsx)(D,{})})]},`header-row-${a}`))})}var F=(e,t,n,r=0,i=``)=>{if(r>=t.length)return e.map(e=>({kind:`record`,record:e}));let a=t[r],o=n.get(a),s=new Map;return e.forEach(e=>{let t=String(O(e,a,o)??`N/A`),n=s.get(t);n?n.push(e):s.set(t,[e])}),Array.from(s.entries()).sort(([e],[t])=>e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})).map(([e,o])=>{let s=i?`${i}➔${e}`:e;return{kind:`group`,groupKey:a,groupValue:e,path:s,depth:r,children:F(o,t,n,r+1,s),totalItemsCount:o.length}})},le=(e,t)=>{let n=[],r=e=>{e.forEach(e=>{n.push(e),e.kind===`group`&&t[e.path]!==!1&&r(e.children)})};return r(e),n},ue=(e,t,n,r)=>{let i=new Map;if(!t\|\|t.length===0)return i;let a=e.map(()=>t.map(()=>!0)),o=null;for(let r=0;r<e.length;r++){let i=e[r];if(i.kind===`group`){o=null;continue}let s=o===null?null:e[o];if(s&&s.kind===`record`){let e=!0;for(let o=0;o<t.length;o++){let c=t[o],l=n.get(c);e&&O(i.record,c,l)===O(s.record,c,l)?a[r][o]=!1:(e=!1,a[r][o]=!0)}}o=r}return t.forEach((t,n)=>{let o=0;for(;o<e.length;){if(e[o].kind===`group`\|\|!a[o][n]){o++;continue}let s=o+1;for(;s<e.length&&e[s].kind!==`group`&&!a[s][n];)s++;if(s-o>1){let e=i.get(r+o)\|\|{};e[t]=s-o,i.set(r+o,e);for(let e=o+1;e<s;e++){let n=i.get(r+e)\|\|{};n[t]=`skip`,i.set(r+e,n)}}o=s}}),i};function I({active:e,resetKey:t,rootRef:r,getAnchor:i,compute:a}){let[o,s]=(0,n.useState)(null),c=(0,n.useRef)(i),l=(0,n.useRef)(a);return c.current=i,l.current=a,(0,n.useEffect)(()=>{if(!e){s(null);return}let t=()=>{let e=c.current(),t=r.current;!e\|\|!t\|\|s(l.current(e.getBoundingClientRect(),t.getBoundingClientRect()))};return t(),window.addEventListener(`scroll`,t,!0),window.addEventListener(`resize`,t),()=>{window.removeEventListener(`scroll`,t,!0),window.removeEventListener(`resize`,t)}},[e,t,r]),o}function L(e,t,r){let i=(0,n.useRef)(t),a=(0,n.useRef)(r);i.current=t,a.current=r,(0,n.useEffect)(()=>{if(!e)return;let t=e=>{let t=e.target,[n,...r]=i.current();n&&(n.contains(t)\|\|r.some(e=>e?.contains(t))\|\|a.current())};return document.addEventListener(`mousedown`,t),()=>document.removeEventListener(`mousedown`,t)},[e])}function de({data:e,columnsByKey:t,gridRootRef:r}){let[i,a]=(0,n.useState)(null),[o,s]=(0,n.useState)({}),[c,l]=(0,n.useState)(``),u=(0,n.useRef)(new Map),d=(0,n.useRef)(null),f=(0,n.useCallback)((e,t)=>{t?u.current.set(e,t):u.current.delete(e)},[]),p=(0,n.useCallback)(()=>{a(null),l(``)},[]),m=(0,n.useCallback)(e=>{l(``),a(t=>t===e?null:e)},[]);L(i!==null,()=>[d.current,i?u.current.get(i):null],p);let h=I({active:i!==null,resetKey:i,rootRef:r,getAnchor:()=>i?u.current.get(i):null,compute:(e,t)=>({top:e.bottom-t.top+4,left:e.left-t.left})}),g=(0,n.useCallback)((e,t)=>{s(n=>{let r=n[e]\|\|[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return i.length===0&&delete a[e],a})},[]),_=(0,n.useCallback)(e=>{s(t=>{let n={...t};return delete n[e],n})},[]),v=(0,n.useMemo)(()=>i?A(e,i,t.get(i)):[],[e,i,t]);return{activeFilterKey:i,selectedFilters:o,filterSearchQuery:c,setFilterSearchQuery:l,filterPosition:h,dropdownRef:d,filteredUniqueValues:(0,n.useMemo)(()=>{if(!c.trim())return v;let e=c.toLowerCase();return v.filter(t=>String(t).toLowerCase().includes(e))},[v,c]),registerFilterButton:f,toggleFilterDropdown:m,handleFilterChange:g,clearFilter:_}}function fe({columns:e,pinnedColumns:t,isResizingRef:r,onColumnReorder:i}){let[a,o]=(0,n.useState)({}),s=(0,n.useRef)(null),c=(0,n.useMemo)(()=>_(e,t,a),[e,t,a]);return{reorderedColumns:c,handleDragStart:(0,n.useCallback)((e,t,n)=>{if(r.current){e.preventDefault();return}s.current=t,n&&e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},[r]),handleDragEnd:(0,n.useCallback)(()=>{s.current=null},[]),handleDrop:(0,n.useCallback)((n,r)=>{n.preventDefault(),n.stopPropagation();let l=s.current;if(s.current=null,!l\|\|l===r)return;let u=v(c,l,r);if(!u)return;let d=u.map(e=>e.key),f=d.indexOf(l),p=d.indexOf(r);d.splice(p,0,d.splice(f,1)[0]);let h={...a};d.forEach((e,t)=>{h[e]=t}),o(h),i&&i(m(_(e,t,h)).map(e=>e.key))},[c,a,e,t,i])}}function pe(e){let[t,r]=(0,n.useState)({}),i=(0,n.useRef)(!1),a=(0,n.useRef)(null),o=(0,n.useRef)(e);return o.current=e,(0,n.useEffect)(()=>()=>a.current?.(),[]),{columnWidths:t,isResizingRef:i,startResize:(0,n.useCallback)((e,n)=>{e.preventDefault(),e.stopPropagation(),a.current?.(),i.current=!0;let s=e.clientX,c=y(n,t),l=n.minWidth??60,u=n.maxWidth,d=t[n.key],f=e=>{let t=Math.max(l,c+(e.clientX-s));u&&(t=Math.min(u,t)),d=t,r(e=>e[n.key]===t?e:{...e,[n.key]:t})},p=()=>{window.removeEventListener(`mousemove`,f),window.removeEventListener(`mouseup`,m),a.current=null},m=()=>{p(),requestAnimationFrame(()=>{i.current=!1}),d!==void 0&&o.current?.(n.key,d)};window.addEventListener(`mousemove`,f),window.addEventListener(`mouseup`,m),a.current=()=>{p(),i.current=!1}},[t])}}function me({defaultHiddenColumns:e,defaultDisplayPinnedIcon:t,onColumnVisibilityChange:r}){let[i,a]=(0,n.useState)(e),[o,s]=(0,n.useState)(t);return{hiddenColumns:i,displayPinnedIcon:o,toggleColumnVisibility:(0,n.useCallback)(e=>{let t=i.includes(e)?i.filter(t=>t!==e):[...i,e];a(t),r?.(t)},[i,r]),toggleDisplayPinnedIcon:(0,n.useCallback)(()=>s(e=>!e),[]),resetControlPanelDefaults:(0,n.useCallback)(()=>{s(t),a(e),r?.(e)},[t,e,r])}}function he({items:e,enabled:t,defaultPageSize:r,onPageChange:i,resetOn:a}){let[o,s]=(0,n.useState)(1),[c,l]=(0,n.useState)(Math.max(1,Math.floor(r)\|\|1)),u=e.length,d=t?Math.max(1,Math.ceil(u/c)):1;return(0,n.useEffect)(()=>{s(1)},[...a,c,t]),(0,n.useEffect)(()=>{o>d&&s(d)},[o,d]),{currentPage:o,pageSize:c,totalPages:d,totalCount:u,pagedItems:(0,n.useMemo)(()=>{if(!t)return e;let n=(o-1)c;return e.slice(n,n+c)},[e,t,o,c]),goToPage:(0,n.useCallback)(e=>{let t=Math.min(Math.max(1,e),d);s(t),i?.(t,c)},[d,c,i]),changePageSize:(0,n.useCallback)(e=>{l(e),s(1),i?.(1,e)},[i])}}function ge(e,t){let[r,i]=(0,n.useState)(()=>g(e));return{pinnedColumns:r,togglePin:(0,n.useCallback)(e=>{let n=r[e],a=n?n===`left`?`right`:void 0:`left`,o={...r};a?o[e]=a:delete o[e],i(o),t?.(e,!!a,a)},[r,t])}}function _e(e,t){let[r,i]=(0,n.useState)(e),[a,o]=(0,n.useState)({});return{groupedColumns:r,expandedGroups:a,addGroup:(0,n.useCallback)(e=>{if(!e\|\|r.includes(e))return;let n=[...r,e];i(n),t?.(n)},[r,t]),removeGroup:(0,n.useCallback)(e=>{let n=r.filter(t=>t!==e);i(n),o({}),t?.(n)},[r,t]),toggleGroupExpansion:(0,n.useCallback)(e=>{o(t=>({...t,[e]:t[e]===!1}))},[])}}function ve(e){let[t,r]=(0,n.useState)(!1),i=(0,n.useRef)(null),a=(0,n.useRef)(null),o=(0,n.useCallback)(()=>r(e=>!e),[]);return L(t,()=>[i.current,a.current],(0,n.useCallback)(()=>r(!1),[])),{isOpen:t,position:I({active:t,rootRef:e,getAnchor:()=>a.current,compute:(e,t)=>({top:e.bottom-t.top+4,right:t.right-e.right})}),menuRef:i,buttonRef:a,toggle:o}}function ye(){let[e,t]=(0,n.useState)({key:null,direction:null});return{sortState:e,handleSort:(0,n.useCallback)(e=>{t(t=>{let n=`asc`;return t.key===e&&(t.direction===`asc`?n=`desc`:t.direction===`desc`&&(n=null)),{key:n?e:null,direction:n}})},[])}}function be({containerRef:e,totalRowCount:t,rowHeight:r,overscan:i}){let[a,o]=(0,n.useState)(0),[s,c]=(0,n.useState)(0);return(0,n.useEffect)(()=>{let t=e.current;if(!t)return;let n=()=>o(t.scrollTop);c(t.clientHeight),o(t.scrollTop),t.addEventListener(`scroll`,n,{passive:!0});let r;return typeof ResizeObserver<`u`&&(r=new ResizeObserver(()=>c(t.clientHeight)),r.observe(t)),()=>{t.removeEventListener(`scroll`,n),r?.disconnect()}},[e]),(0,n.useMemo)(()=>{if(s===0)return{startIndex:0,endIndex:t,topSpacerHeight:0,bottomSpacerHeight:0};let e=r>0?r:1,n=Math.max(0,t-1),o=Math.min(n,Math.floor(a/e)),c=Math.ceil(s/e)+1,l=Math.max(0,o-i),u=Math.min(t,o+c+i);return{startIndex:l,endIndex:u,topSpacerHeight:le,bottomSpacerHeight:(t-u)*e}},[a,s,t,r,i])}function R({columns:e,data:t,rowKey:r,actions:i,isLoading:a,groupBy:o=!1,defaultGroupBy:s=f,onPinChange:c,onGroupChange:l,pinnedBottomRowData:u=p,pinnedRowClassName:h,rowHeight:g=48,overscan:_=8,onColumnResize:v,onColumnReorder:y,rowClassRules:x,onRowClick:S,rowSpanColumns:C,controlPanel:w=!1,defaultDisplayPinnedIcon:T=!0,defaultHiddenColumns:E=f,onColumnVisibilityChange:te,pagination:D=!1,defaultPageSize:ne=10,pageSizeOptions:O=d,onPageChange:re}){let k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>m(e),[e]),M=(0,n.useMemo)(()=>{let e=new Map;return j.forEach(t=>e.set(t.key,t)),e},[j]),{pinnedColumns:N,togglePin:oe}=ge(j,c),{columnWidths:P,isResizingRef:se,startResize:ce}=pe(v),{reorderedColumns:I,handleDragStart:L,handleDragEnd:R,handleDrop:xe}=fe({columns:e,pinnedColumns:N,isResizingRef:se,onColumnReorder:y}),z=me({defaultHiddenColumns:E,defaultDisplayPinnedIcon:T,onColumnVisibilityChange:te}),{hiddenColumns:B}=z,V=_e(s,l),{groupedColumns:Se,expandedGroups:H}=V,U=o?Se:f,W=U.length>0,G=!!i,K=(0,n.useMemo)(()=>m(I).filter(e=>!U.includes(e.key)&&!B.includes(e.key)),[I,U,B]),Ce=(0,n.useMemo)(()=>b(I,U,B),[I,U,B]),we=(0,n.useMemo)(()=>ee({visibleLeafColumns:K,pinnedColumns:N,columnWidths:P,hasGroups:W,hasActions:G}),[K,N,P,W,G]),q=de({data:t,columnsByKey:M,gridRootRef:k}),{sortState:J,handleSort:Te}=ye(),Y=he({items:(0,n.useMemo)(()=>{let e=ie(t,q.selectedFilters,M);return!J.key\|\|!J.direction?e:ae(e,J.key,J.direction,M.get(J.key))},[t,q.selectedFilters,J,M]),enabled:D,defaultPageSize:ne,onPageChange:re,resetOn:[q.selectedFilters,J]}),Ee=(0,n.useMemo)(()=>F(Y.pagedItems,U,M),[Y.pagedItems,U,M]),X=(0,n.useMemo)(()=>le(Ee,H),[Ee,H]),De=X.length,{startIndex:Z,endIndex:Q,topSpacerHeight:Oe,bottomSpacerHeight:ke}=be({containerRef:A,totalRowCount:De,rowHeight:g,overscan:_}),$=(0,n.useMemo)(()=>X.slice(Z,Q),[X,Z,Q]),Ae=(0,n.useMemo)(()=>ue($,C,M,Z),[$,C,M,Z]),je=ve(k),Me=K.length+ +!!G+ +!!W;return{gridRootRef:k,tableWrapRef:A,rowKey:r,actions:i,isLoading:!!a,groupBy:o,controlPanel:w,rowHeight:g,rowSpanColumns:C,rowClassRules:x,onRowClick:S,pinnedBottomRowData:u,pinnedRowClassName:h,pageSizeOptions:O,paginationEnabled:D,initialLeafColumns:j,columnsByKey:M,visibleLeafColumns:K,headerRows:Ce,pinnedColumns:N,pinOffsets:we,columnWidths:P,togglePin:oe,startResize:ce,handleDragStart:L,handleDragEnd:R,handleDrop:xe,hiddenColumns:B,displayPinnedIcon:z.displayPinnedIcon,toggleColumnVisibility:z.toggleColumnVisibility,toggleDisplayPinnedIcon:z.toggleDisplayPinnedIcon,resetControlPanelDefaults:z.resetControlPanelDefaults,settingsMenu:je,groupedColumns:Se,expandedGroups:H,addGroup:V.addGroup,removeGroup:V.removeGroup,toggleGroupExpansion:V.toggleGroupExpansion,hasGroups:W,hasActions:G,sortState:J,handleSort:Te,filters:q,currentPage:Y.currentPage,pageSize:Y.pageSize,totalPages:Y.totalPages,totalCount:Y.totalCount,goToPage:Y.goToPage,changePageSize:Y.changePageSize,visibleRows:$,startIndex:Z,totalRowCount:De,topSpacerHeight:Oe,bottomSpacerHeight:ke,rowSpanInfo:Ae,totalColumnsCount:Me}}function xe(e){let t=R(e),{containerStyle:n,tableStyle:i,bordered:a=!1}=e;return(0,r.jsx)(o,{value:t,children:(0,r.jsxs)(`div`,{ref:t.gridRootRef,className:`flexi-root`,children:[t.groupBy&&(0,r.jsx)(l,{}),(0,r.jsx)(`div`,{ref:t.tableWrapRef,className:`flexi-table-wrap`,style:n,children:(0,r.jsxs)(`table`,{className:c(`flexi-table`,a&&`flexi-table--bordered`),style:i,children:[(0,r.jsx)(oe,{}),(0,r.jsx)(ce,{}),(0,r.jsx)(N,{}),(0,r.jsx)(te,{})]})}),(0,r.jsx)(ne,{}),t.paginationEnabled&&(0,r.jsx)(u,{})]})})}e.DataTable=xe});
1	+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lucide-react"),require("react"),require("react/jsx-runtime"),require("react-dom")):typeof define==`function`&&define.amd?define([`exports`,`lucide-react`,`react`,`react/jsx-runtime`,`react-dom`],t):(e=typeof globalThis<`u`?globalThis:e\|\|self,t(e.FlexiDataGrid={},e.LucideReact,e.React,e.JSX,e.ReactDOM))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=(0,n.createContext)(null);function o({value:e,children:t}){return(0,r.jsx)(a.Provider,{value:e,children:t})}function s(){let e=(0,n.useContext)(a);if(!e)throw Error(`DataTable components must be rendered inside <DataTable>.`);return e}var c=(...e)=>e.filter(Boolean).join(` `);function l(){let{groupedColumns:e,columnsByKey:i,addGroup:a,removeGroup:o}=s(),[l,u]=(0,n.useState)(!1);return(0,r.jsx)(`div`,{onDragOver:e=>{e.preventDefault(),u(!0)},onDragLeave:()=>u(!1),onDrop:e=>{e.preventDefault(),u(!1);let t=e.dataTransfer.getData(`text/plain`);t&&i.has(t)&&a(t)},className:c(`flexi-groupzone`,l&&`flexi-groupzone--dragover`),children:e.length===0?(0,r.jsx)(`span`,{className:`flexi-groupzone-hint`,children:`Drag a column header here to group your records by that field`}):(0,r.jsxs)(`div`,{className:`flexi-groupzone-chips`,children:[(0,r.jsx)(`span`,{className:`flexi-groupzone-label`,children:`Grouped By:`}),e.map(e=>(0,r.jsxs)(`div`,{className:`flexi-chip`,children:[(0,r.jsx)(`span`,{children:i.get(e)?.header\|\|e}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>o(e),className:`flexi-icon-btn flexi-chip-remove`,children:(0,r.jsx)(t.X,{className:`flexi-icon-xs`})})]},e))]})})}function u(){let{currentPage:e,pageSize:n,totalPages:i,totalCount:a,pageSizeOptions:o,goToPage:c,changePageSize:l}=s();return(0,r.jsxs)(`div`,{className:`flexi-pagination`,children:[(0,r.jsxs)(`div`,{className:`flexi-pagination-size`,children:[(0,r.jsx)(`span`,{children:`Rows per page`}),(0,r.jsx)(`select`,{value:n,onChange:e=>l(Number(e.target.value)),className:`flexi-pagination-select`,children:o.map(e=>(0,r.jsx)(`option`,{value:e,children:e},e))})]}),(0,r.jsx)(`div`,{className:`flexi-pagination-info`,children:a===0?`0 of 0`:`${(e-1)n+1}–${Math.min(en,a)} of ${a}`}),(0,r.jsxs)(`div`,{className:`flexi-pagination-controls`,children:[(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(1),disabled:e===1,className:`flexi-icon-btn`,title:`First page`,children:(0,r.jsx)(t.ChevronsLeft,{className:`flexi-icon-sm`})}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(e-1),disabled:e===1,className:`flexi-icon-btn`,title:`Previous page`,children:(0,r.jsx)(t.ChevronLeft,{className:`flexi-icon-sm`})}),(0,r.jsxs)(`span`,{className:`flexi-pagination-page`,children:[`Page `,e,` of `,i]}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(e+1),disabled:e===i,className:`flexi-icon-btn`,title:`Next page`,children:(0,r.jsx)(t.ChevronRight,{className:`flexi-icon-sm`})}),(0,r.jsx)(`button`,{type:`button`,onClick:()=>c(i),disabled:e===i,className:`flexi-icon-btn`,title:`Last page`,children:(0,r.jsx)(t.ChevronsRight,{className:`flexi-icon-sm`})})]})]})}var d=[10,25,50,100],f=[],p=[],m=e=>{let t=[];return e.forEach(e=>{e.children&&e.children.length>0?t.push(...m(e.children)):t.push(e)}),t},h=e=>{if(e===!0)return`left`;if(e===`left`\|\|e===`right`)return e},g=e=>{let t={};return e.forEach(e=>{let n=h(e.pinned);n&&(t[e.key]=n)}),t},_=(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)},v=(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=v(r.children,t,n);if(e)return e}return null},y=(e,t)=>{let n=t[e.key];if(n!==void 0)return n;let r=e.style?.width\|\|e.headerStyle?.width\|\|`150px`;if(typeof r==`number`)return r;let i=String(r).trim();return/^\d+(\.\d+)?(px)?$/i.test(i)&&parseInt(i,10)\|\|150},b=(e,t,n)=>{let r=e=>{let t=0;return e.forEach(e=>{t=e.children&&e.children.length>0?Math.max(t,1+r(e.children)):Math.max(t,1)}),t},i=r(e),a=Array.from({length:i},()=>[]),o=e=>!e.children\|\|e.children.length===0?t.includes(e.key)\|\|n.includes(e.key)?0:1:e.children.reduce((e,t)=>e+o(t),0),s=(e,n)=>{e.forEach(e=>{if(t.includes(e.key))return;let r=o(e);r!==0&&(e.children&&e.children.length>0?(a[n].push({col:e,rowSpan:1,colSpan:r}),s(e.children,n+1)):a[n].push({col:e,rowSpan:i-n,colSpan:1}))})};s(e,0);let c=a.filter(e=>e.length>0);return c.map((e,t)=>e.map(e=>({...e,rowSpan:Math.min(e.rowSpan,c.length-t)})))},ee=({visibleLeafColumns:e,pinnedColumns:t,columnWidths:n,hasGroups:r,hasActions:i})=>{let a={},o=r?48:0;e.forEach(e=>{t[e.key]===`left`&&(a[e.key]={side:`left`,offset:o},o+=y(e,n))});let s=i?100:0;for(let r=e.length-1;r>=0;r--){let i=e[r];t[i.key]===`right`&&(a[i.key]={side:`right`,offset:s},s+=y(i,n))}return a},x=(e,t,n=!1,r)=>{let i=e[t];if(!i)return r\|\|{};let a=i.side===`right`;return{position:`sticky`,[a?`right`:`left`]:`${i.offset}px`,...n?{top:0}:{},zIndex:n?30:20,background:`#f8fafc`,boxShadow:a?`-2px 0 5px -2px rgba(0,0,0,0.1)`:`2px 0 5px -2px rgba(0,0,0,0.1)`,...r}},S=()=>(0,r.jsx)(`td`,{className:`flexi-row-indent-cell`,style:{position:`sticky`,left:0,zIndex:10}});function C({children:e}){return(0,r.jsx)(`td`,{className:`flexi-actions-cell`,style:{position:`sticky`,right:0},children:(0,r.jsx)(`div`,{className:`flexi-actions-inner`,children:e})})}function w({node:e}){let{rowHeight:n,expandedGroups:i,toggleGroupExpansion:a,totalColumnsCount:o}=s(),c=i[e.path]!==!1;return(0,r.jsxs)(`tr`,{className:`flexi-group-row`,style:{height:n},children:[(0,r.jsx)(`td`,{className:`flexi-group-cell`,style:{position:`sticky`,left:0,zIndex:20,backgroundColor:`rgba(248, 250, 252, 0.9)`,paddingLeft:`${e.depth12+16}px`},children:(0,r.jsxs)(`button`,{type:`button`,onClick:()=>a(e.path),className:`flexi-group-toggle`,children:[c?(0,r.jsx)(t.ChevronDown,{className:`flexi-icon-md flexi-icon-muted`}):(0,r.jsx)(t.ChevronRight,{className:`flexi-icon-md flexi-icon-muted`}),(0,r.jsx)(`span`,{className:`flexi-group-value`,children:e.groupValue}),(0,r.jsx)(`span`,{className:`flexi-group-count`,children:e.totalItemsCount})]})}),(0,r.jsx)(`td`,{colSpan:Math.max(1,o-1),className:`flexi-group-filler`})]})}function T({record:e,rowIndex:t,className:n}){let{rowHeight:i,hasGroups:a,hasActions:o,actions:l,onRowClick:u,visibleLeafColumns:d,pinnedColumns:f,pinOffsets:p,rowSpanColumns:m,rowSpanInfo:h}=s(),g=h.get(t);return(0,r.jsxs)(`tr`,{className:c(`flexi-row`,u&&`flexi-row--clickable`,n),style:{height:i},onClick:u?n=>u(e,t,n):void 0,children:[a&&(0,r.jsx)(S,{}),d.map(t=>{let n=m?.includes(t.key)?g?.[t.key]:void 0;if(n===`skip`)return null;let i=e[t.key];return(0,r.jsx)(`td`,{rowSpan:typeof n==`number`?n:void 0,className:c(`flexi-cell`,!!f[t.key]&&`flexi-cell--pinned`,t.className),style:x(p,t.key,!1,t.style),children:t.render?t.render(i,e):(0,r.jsx)(`span`,{className:`flexi-cell-text`,children:i})},t.key)}),o&&l&&(0,r.jsx)(C,{children:l(e)})]})}function E({record:e,index:t,className:n}){let{hasGroups:i,hasActions:a,actions:o,pinnedBottomRowData:l,visibleLeafColumns:u,pinnedColumns:d,pinOffsets:f}=s(),p={position:`sticky`,bottom:`${(l.length-1-t)48}px`,zIndex:45};return(0,r.jsxs)(`tr`,{className:c(`flexi-row`,`flexi-row--pinned-bottom`,n),style:p,children:[i&&(0,r.jsx)(S,{}),u.map(t=>{let n=e[t.key],i=t.pinnedRender??t.render;return(0,r.jsx)(`td`,{className:c(`flexi-cell`,!!d[t.key]&&`flexi-cell--pinned`,t.className),style:x(f,t.key,!1,t.style),children:i?i(n,e):(0,r.jsx)(`span`,{className:`flexi-cell-text`,children:n})},t.key)}),a&&o&&(0,r.jsx)(C,{children:o(e)})]})}function te(){let{pinnedBottomRowData:e,pinnedRowClassName:t}=s();return e.length===0?null:(0,r.jsx)(`tbody`,{className:`flexi-tbody flexi-tbody--pinned-bottom`,children:e.map((e,n)=>(0,r.jsx)(E,{record:e,index:n,className:typeof t==`function`?t(e,n):t},`pinned-bottom-row-${n}`))})}function D(){let{settingsMenu:e}=s();return(0,r.jsx)(`button`,{type:`button`,ref:e.buttonRef,onClick:t=>{t.stopPropagation(),e.toggle()},className:c(`flexi-icon-btn`,e.isOpen&&`flexi-settings-btn--active`),title:`Grid display settings`,children:(0,r.jsx)(t.Settings,{className:`flexi-icon-sm`})})}function ne(){let{gridRootRef:e,settingsMenu:n,displayPinnedIcon:a,toggleDisplayPinnedIcon:o,showGroupBy:c,toggleShowGroupBy:l,initialLeafColumns:u,hiddenColumns:d,toggleColumnVisibility:f,resetControlPanelDefaults:p}=s(),m=e.current;return!n.isOpen\|\|!n.position\|\|!m?null:(0,i.createPortal)((0,r.jsxs)(`div`,{ref:n.menuRef,className:`flexi-settings-menu`,style:{top:n.position.top,right:n.position.right,zIndex:9999},children:[(0,r.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,r.jsx)(`span`,{className:`flexi-settings-heading`,children:`Action Icons`}),(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:a,onChange:o}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:`Show pin icon on hover`})]}),(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:c,onChange:l}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:`Group By`})]})]}),(0,r.jsx)(`div`,{className:`flexi-settings-divider`}),(0,r.jsxs)(`div`,{className:`flexi-settings-section`,children:[(0,r.jsx)(`span`,{className:`flexi-settings-heading`,children:`Columns`}),u.map(e=>(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:!d.includes(e.key),onChange:()=>f(e.key)}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:e.header})]},e.key))]}),(0,r.jsx)(`div`,{className:`flexi-settings-divider`}),(0,r.jsxs)(`button`,{type:`button`,onClick:p,className:`flexi-settings-reset`,title:`Reset pin icon visibility and hidden columns to their defaults`,children:[(0,r.jsx)(t.RotateCcw,{className:`flexi-icon-sm`}),(0,r.jsx)(`span`,{children:`Reset to defaults`})]})]}),m)}var O=(e,t,n)=>n?.getValue?n.getValue(e):e[t],re=(e,t)=>{let n=typeof t==`function`?t(e):e[t];return n==null?void 0:String(n)},k=(e,t,n)=>{if(!n)return;let r;for(let i in n)n[i](e,t)&&(r=r?`${r} ${i}`:i);return r},A=(e,t,n)=>{let r=e.map(e=>O(e,t,n));return Array.from(new Set(r)).filter(e=>e!=null)},ie=(e,t,n)=>{let r=Object.entries(t).filter(([,e])=>e&&e.length>0);return r.length===0?e:e.filter(e=>r.every(([t,r])=>r.includes(O(e,t,n.get(t)))))},j=e=>e==null\|\|typeof e==`number`&&Number.isNaN(e),M=(e,t)=>typeof e==`number`&&typeof t==`number`?e-t:e instanceof Date&&t instanceof Date?e.getTime()-t.getTime():String(e).localeCompare(String(t),void 0,{numeric:!0,sensitivity:`base`}),ae=(e,t,n,r)=>[...e].sort((e,i)=>{let a=O(e,t,r),o=O(i,t,r);if(a===o)return 0;let s=j(a),c=j(o);if(s&&c)return 0;if(s)return 1;if(c)return-1;let l=M(a,o);return n===`asc`?l:-l});function N(){let{isLoading:e,visibleRows:t,startIndex:n,totalRowCount:i,topSpacerHeight:a,bottomSpacerHeight:o,totalColumnsCount:c,rowKey:l,rowClassRules:u}=s(),d=Math.max(1,c);return e\|\|i===0?(0,r.jsx)(`tbody`,{className:`flexi-tbody`,children:(0,r.jsx)(`tr`,{children:(0,r.jsx)(`td`,{colSpan:d,className:`flexi-empty-cell`,children:e?`Loading records...`:`No records found matching criteria.`})})}):(0,r.jsxs)(`tbody`,{className:`flexi-tbody`,children:[a>0&&(0,r.jsx)(`tr`,{"aria-hidden":`true`,style:{height:a},children:(0,r.jsx)(`td`,{colSpan:d,style:{padding:0,border:`none`,height:a}})}),t.map((e,t)=>{let i=n+t;return e.kind===`group`?(0,r.jsx)(w,{node:e},`group-header-${e.path}-${i}`):(0,r.jsx)(T,{record:e.record,rowIndex:i,className:k(e.record,i,u)},re(e.record,l)??`row-${i}`)}),o>0&&(0,r.jsx)(`tr`,{"aria-hidden":`true`,style:{height:o},children:(0,r.jsx)(`td`,{colSpan:d,style:{padding:0,border:`none`,height:o}})})]})}function oe(){let{hasGroups:e,hasActions:t,visibleLeafColumns:n,columnWidths:i}=s();return(0,r.jsxs)(`colgroup`,{children:[e&&(0,r.jsx)(`col`,{style:{width:`48px`}}),n.map(e=>(0,r.jsx)(`col`,{style:{...e.style,width:y(e,i)}},e.key)),t&&(0,r.jsx)(`col`,{style:{width:`100px`}})]})}function P({columnKey:e}){let{gridRootRef:t,filters:n}=s(),a=t.current,{filterPosition:o}=n;if(!a\|\|!o)return null;let c=n.selectedFilters[e],l=(c?.length\|\|0)>0,u=n.filteredUniqueValues;return(0,i.createPortal)((0,r.jsxs)(`div`,{ref:n.dropdownRef,className:`flexi-filter-dropdown`,style:{top:o.top,left:o.left,zIndex:9999},children:[(0,r.jsx)(`div`,{className:`flexi-filter-search`,children:(0,r.jsx)(`input`,{type:`text`,placeholder:`Search values...`,value:n.filterSearchQuery,onChange:e=>n.setFilterSearchQuery(e.target.value),className:`flexi-input`,onClick:e=>e.stopPropagation()})}),(0,r.jsx)(`div`,{className:`flexi-filter-list`,children:u.length===0?(0,r.jsx)(`div`,{className:`flexi-filter-empty`,children:`No results found`}):u.map((t,i)=>(0,r.jsxs)(`label`,{className:`flexi-filter-option`,children:[(0,r.jsx)(`input`,{type:`checkbox`,className:`flexi-checkbox`,checked:c?.includes(t)\|\|!1,onChange:()=>n.handleFilterChange(e,t)}),(0,r.jsx)(`span`,{className:`flexi-filter-option-text`,children:String(t)})]},i))}),l&&(0,r.jsx)(`div`,{className:`flexi-filter-footer`,children:(0,r.jsx)(`button`,{type:`button`,onClick:()=>n.clearFilter(e),className:`flexi-filter-clear`,children:`Clear Filter`})})]}),a)}function se({col:e,rowSpan:n,colSpan:i}){let{groupBy:a,pinnedColumns:o,pinOffsets:l,displayPinnedIcon:u,togglePin:d,sortState:f,handleSort:p,filters:m,handleDragStart:h,handleDragEnd:g,handleDrop:_,startResize:v}=s(),y=o[e.key],b=!!y,ee=(m.selectedFilters[e.key]?.length\|\|0)>0,S=!e.children\|\|e.children.length===0,C=f.key===e.key,w=a&&S,T=S&&e.resizable!==!1,E=!!e.sortable&&S;return(0,r.jsxs)(`th`,{rowSpan:n,colSpan:i,draggable:!0,onDragStart:t=>h(t,e.key,S),onDragEnd:g,onDragOver:e=>e.preventDefault(),onDrop:t=>_(t,e.key),className:c(`flexi-th`,`flexi-th--draggable`,w&&`flexi-th--group-draggable`,b&&`flexi-th--pinned`,e.className,e.headerClassName),style:x(l,e.key,!0,e.headerStyle),children:[(0,r.jsxs)(`div`,{className:`flexi-th-inner`,children:[(0,r.jsxs)(`div`,{className:c(`flexi-th-label`,E&&`flexi-th-label--sortable`),onClick:()=>E&&p(e.key),children:[(0,r.jsx)(`span`,{className:`flexi-th-text`,children:e.header}),E&&(0,r.jsx)(`span`,{className:c(`flexi-sort-icon`,C&&`flexi-sort-icon--active`),children:C&&f.direction===`asc`?(0,r.jsx)(t.ArrowUp,{className:`flexi-icon-sm`}):C&&f.direction===`desc`?(0,r.jsx)(t.ArrowDown,{className:`flexi-icon-sm`}):(0,r.jsx)(t.ArrowUpDown,{className:`flexi-icon-sm`})})]}),(0,r.jsxs)(`div`,{className:`flexi-th-actions`,children:[S&&e.filterable&&(0,r.jsx)(`button`,{type:`button`,ref:t=>m.registerFilterButton(e.key,t),onClick:t=>{t.stopPropagation(),m.toggleFilterDropdown(e.key)},className:c(`flexi-icon-btn`,`flexi-filter-btn`,ee&&`flexi-filter-btn--active`),children:(0,r.jsx)(t.Filter,{className:`flexi-icon-sm`})}),S&&u&&(0,r.jsx)(`button`,{type:`button`,onClick:t=>{t.stopPropagation(),d(e.key)},className:c(`flexi-icon-btn`,`flexi-pin-btn`,b&&`flexi-pin-btn--pinned`),title:y===`left`?`Pinned left (click to pin right)`:y===`right`?`Pinned right (click to unpin)`:`Pin column left`,children:b?(0,r.jsx)(t.PinOff,{className:`flexi-icon-sm`}):(0,r.jsx)(t.Pin,{className:`flexi-icon-sm`})})]}),S&&m.activeFilterKey===e.key&&(0,r.jsx)(P,{columnKey:e.key})]}),T&&(0,r.jsx)(`div`,{className:`flexi-th-resizer`,onMouseDown:t=>v(t,e),onClick:e=>e.stopPropagation(),onDragStart:e=>e.preventDefault()})]})}function ce(){let{headerRows:e,hasGroups:t}=s();return(0,r.jsx)(`thead`,{className:`flexi-thead`,children:e.map((n,i)=>(0,r.jsxs)(`tr`,{className:`flexi-header-row`,children:[i===0&&t&&(0,r.jsx)(`th`,{rowSpan:e.length,className:`flexi-group-spacer-th`,style:{position:`sticky`,top:0,left:0,zIndex:35,backgroundColor:`rgb(248, 250, 252)`}}),n.map(({col:e,rowSpan:t,colSpan:n})=>(0,r.jsx)(se,{col:e,rowSpan:t,colSpan:n},e.key))]},`header-row-${i}`))})}var le=(e,t,n,r=0,i=``)=>{if(r>=t.length)return e.map(e=>({kind:`record`,record:e}));let a=t[r],o=n.get(a),s=new Map;return e.forEach(e=>{let t=String(O(e,a,o)??`N/A`),n=s.get(t);n?n.push(e):s.set(t,[e])}),Array.from(s.entries()).sort(([e],[t])=>e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})).map(([e,o])=>{let s=i?`${i}➔${e}`:e;return{kind:`group`,groupKey:a,groupValue:e,path:s,depth:r,children:le(o,t,n,r+1,s),totalItemsCount:o.length}})},ue=(e,t)=>{let n=[],r=e=>{e.forEach(e=>{n.push(e),e.kind===`group`&&t[e.path]!==!1&&r(e.children)})};return r(e),n},de=(e,t,n,r)=>{let i=new Map;if(!t\|\|t.length===0)return i;let a=e.map(()=>t.map(()=>!0)),o=null;for(let r=0;r<e.length;r++){let i=e[r];if(i.kind===`group`){o=null;continue}let s=o===null?null:e[o];if(s&&s.kind===`record`){let e=!0;for(let o=0;o<t.length;o++){let c=t[o],l=n.get(c);e&&O(i.record,c,l)===O(s.record,c,l)?a[r][o]=!1:(e=!1,a[r][o]=!0)}}o=r}return t.forEach((t,n)=>{let o=0;for(;o<e.length;){if(e[o].kind===`group`\|\|!a[o][n]){o++;continue}let s=o+1;for(;s<e.length&&e[s].kind!==`group`&&!a[s][n];)s++;if(s-o>1){let e=i.get(r+o)\|\|{};e[t]=s-o,i.set(r+o,e);for(let e=o+1;e<s;e++){let n=i.get(r+e)\|\|{};n[t]=`skip`,i.set(r+e,n)}}o=s}}),i};function F({active:e,resetKey:t,rootRef:r,getAnchor:i,compute:a}){let[o,s]=(0,n.useState)(null),c=(0,n.useRef)(i),l=(0,n.useRef)(a);return c.current=i,l.current=a,(0,n.useEffect)(()=>{if(!e){s(null);return}let t=()=>{let e=c.current(),t=r.current;!e\|\|!t\|\|s(l.current(e.getBoundingClientRect(),t.getBoundingClientRect()))};return t(),window.addEventListener(`scroll`,t,!0),window.addEventListener(`resize`,t),()=>{window.removeEventListener(`scroll`,t,!0),window.removeEventListener(`resize`,t)}},[e,t,r]),o}function I(e,t,r){let i=(0,n.useRef)(t),a=(0,n.useRef)(r);i.current=t,a.current=r,(0,n.useEffect)(()=>{if(!e)return;let t=e=>{let t=e.target,[n,...r]=i.current();n&&(n.contains(t)\|\|r.some(e=>e?.contains(t))\|\|a.current())};return document.addEventListener(`mousedown`,t),()=>document.removeEventListener(`mousedown`,t)},[e])}function fe({data:e,columnsByKey:t,gridRootRef:r}){let[i,a]=(0,n.useState)(null),[o,s]=(0,n.useState)({}),[c,l]=(0,n.useState)(``),u=(0,n.useRef)(new Map),d=(0,n.useRef)(null),f=(0,n.useCallback)((e,t)=>{t?u.current.set(e,t):u.current.delete(e)},[]),p=(0,n.useCallback)(()=>{a(null),l(``)},[]),m=(0,n.useCallback)(e=>{l(``),a(t=>t===e?null:e)},[]);I(i!==null,()=>[d.current,i?u.current.get(i):null],p);let h=F({active:i!==null,resetKey:i,rootRef:r,getAnchor:()=>i?u.current.get(i):null,compute:(e,t)=>({top:e.bottom-t.top+4,left:e.left-t.left})}),g=(0,n.useCallback)((e,t)=>{s(n=>{let r=n[e]\|\|[],i=r.includes(t)?r.filter(e=>e!==t):[...r,t],a={...n,[e]:i};return i.length===0&&delete a[e],a})},[]),_=(0,n.useCallback)(e=>{s(t=>{let n={...t};return delete n[e],n})},[]),v=(0,n.useMemo)(()=>i?A(e,i,t.get(i)):[],[e,i,t]);return{activeFilterKey:i,selectedFilters:o,filterSearchQuery:c,setFilterSearchQuery:l,filterPosition:h,dropdownRef:d,filteredUniqueValues:(0,n.useMemo)(()=>{if(!c.trim())return v;let e=c.toLowerCase();return v.filter(t=>String(t).toLowerCase().includes(e))},[v,c]),registerFilterButton:f,toggleFilterDropdown:m,handleFilterChange:g,clearFilter:_}}function pe({columns:e,pinnedColumns:t,isResizingRef:r,onColumnReorder:i}){let[a,o]=(0,n.useState)({}),s=(0,n.useRef)(null),c=(0,n.useMemo)(()=>_(e,t,a),[e,t,a]);return{reorderedColumns:c,handleDragStart:(0,n.useCallback)((e,t,n)=>{if(r.current){e.preventDefault();return}s.current=t,n&&e.dataTransfer.setData(`text/plain`,t),e.dataTransfer.effectAllowed=`move`},[r]),handleDragEnd:(0,n.useCallback)(()=>{s.current=null},[]),handleDrop:(0,n.useCallback)((n,r)=>{n.preventDefault(),n.stopPropagation();let l=s.current;if(s.current=null,!l\|\|l===r)return;let u=v(c,l,r);if(!u)return;let d=u.map(e=>e.key),f=d.indexOf(l),p=d.indexOf(r);d.splice(p,0,d.splice(f,1)[0]);let h={...a};d.forEach((e,t)=>{h[e]=t}),o(h),i&&i(m(_(e,t,h)).map(e=>e.key))},[c,a,e,t,i])}}function me(e){let[t,r]=(0,n.useState)({}),i=(0,n.useRef)(!1),a=(0,n.useRef)(null),o=(0,n.useRef)(e);return o.current=e,(0,n.useEffect)(()=>()=>a.current?.(),[]),{columnWidths:t,isResizingRef:i,startResize:(0,n.useCallback)((e,n)=>{e.preventDefault(),e.stopPropagation(),a.current?.(),i.current=!0;let s=e.clientX,c=y(n,t),l=n.minWidth??60,u=n.maxWidth,d=t[n.key],f=e=>{let t=Math.max(l,c+(e.clientX-s));u&&(t=Math.min(u,t)),d=t,r(e=>e[n.key]===t?e:{...e,[n.key]:t})},p=()=>{window.removeEventListener(`mousemove`,f),window.removeEventListener(`mouseup`,m),a.current=null},m=()=>{p(),requestAnimationFrame(()=>{i.current=!1}),d!==void 0&&o.current?.(n.key,d)};window.addEventListener(`mousemove`,f),window.addEventListener(`mouseup`,m),a.current=()=>{p(),i.current=!1}},[t])}}function he({defaultHiddenColumns:e,defaultDisplayPinnedIcon:t,onColumnVisibilityChange:r}){let[i,a]=(0,n.useState)(e),[o,s]=(0,n.useState)(t);return{hiddenColumns:i,displayPinnedIcon:o,toggleColumnVisibility:(0,n.useCallback)(e=>{let t=i.includes(e)?i.filter(t=>t!==e):[...i,e];a(t),r?.(t)},[i,r]),toggleDisplayPinnedIcon:(0,n.useCallback)(()=>s(e=>!e),[]),resetControlPanelDefaults:(0,n.useCallback)(()=>{s(t),a(e),r?.(e)},[t,e,r])}}function ge({items:e,enabled:t,defaultPageSize:r,onPageChange:i,resetOn:a}){let[o,s]=(0,n.useState)(1),[c,l]=(0,n.useState)(Math.max(1,Math.floor(r)\|\|1)),u=e.length,d=t?Math.max(1,Math.ceil(u/c)):1;return(0,n.useEffect)(()=>{s(1)},[...a,c,t]),(0,n.useEffect)(()=>{o>d&&s(d)},[o,d]),{currentPage:o,pageSize:c,totalPages:d,totalCount:u,pagedItems:(0,n.useMemo)(()=>{if(!t)return e;let n=(o-1)c;return e.slice(n,n+c)},[e,t,o,c]),goToPage:(0,n.useCallback)(e=>{let t=Math.min(Math.max(1,e),d);s(t),i?.(t,c)},[d,c,i]),changePageSize:(0,n.useCallback)(e=>{l(e),s(1),i?.(1,e)},[i])}}function _e(e,t){let[r,i]=(0,n.useState)(()=>g(e));return{pinnedColumns:r,togglePin:(0,n.useCallback)(e=>{let n=r[e],a=n?n===`left`?`right`:void 0:`left`,o={...r};a?o[e]=a:delete o[e],i(o),t?.(e,!!a,a)},[r,t])}}function ve(e,t){let[r,i]=(0,n.useState)(e),[a,o]=(0,n.useState)({});return{groupedColumns:r,expandedGroups:a,addGroup:(0,n.useCallback)(e=>{if(!e\|\|r.includes(e))return;let n=[...r,e];i(n),t?.(n)},[r,t]),removeGroup:(0,n.useCallback)(e=>{let n=r.filter(t=>t!==e);i(n),o({}),t?.(n)},[r,t]),toggleGroupExpansion:(0,n.useCallback)(e=>{o(t=>({...t,[e]:t[e]===!1}))},[])}}function ye(e){let[t,r]=(0,n.useState)(!1),i=(0,n.useRef)(null),a=(0,n.useRef)(null),o=(0,n.useCallback)(()=>r(e=>!e),[]);return I(t,()=>[i.current,a.current],(0,n.useCallback)(()=>r(!1),[])),{isOpen:t,position:F({active:t,rootRef:e,getAnchor:()=>a.current,compute:(e,t)=>({top:e.bottom-t.top+4,right:t.right-e.right})}),menuRef:i,buttonRef:a,toggle:o}}function be(){let[e,t]=(0,n.useState)({key:null,direction:null});return{sortState:e,handleSort:(0,n.useCallback)(e=>{t(t=>{let n=`asc`;return t.key===e&&(t.direction===`asc`?n=`desc`:t.direction===`desc`&&(n=null)),{key:n?e:null,direction:n}})},[])}}function xe({containerRef:e,totalRowCount:t,rowHeight:r,overscan:i}){let[a,o]=(0,n.useState)(0),[s,c]=(0,n.useState)(0);return(0,n.useEffect)(()=>{let t=e.current;if(!t)return;let n=()=>o(t.scrollTop);c(t.clientHeight),o(t.scrollTop),t.addEventListener(`scroll`,n,{passive:!0});let r;return typeof ResizeObserver<`u`&&(r=new ResizeObserver(()=>c(t.clientHeight)),r.observe(t)),()=>{t.removeEventListener(`scroll`,n),r?.disconnect()}},[e]),(0,n.useMemo)(()=>{if(s===0)return{startIndex:0,endIndex:t,topSpacerHeight:0,bottomSpacerHeight:0};let e=r>0?r:1,n=Math.max(0,t-1),o=Math.min(n,Math.floor(a/e)),c=Math.ceil(s/e)+1,l=Math.max(0,o-i),u=Math.min(t,o+c+i);return{startIndex:l,endIndex:u,topSpacerHeight:le,bottomSpacerHeight:(t-u)*e}},[a,s,t,r,i])}function Se({columns:e,data:t,rowKey:r,actions:i,isLoading:a,groupBy:o=!1,defaultGroupBy:s=f,onPinChange:c,onGroupChange:l,pinnedBottomRowData:u=p,pinnedRowClassName:h,rowHeight:g=40,overscan:_=8,onColumnResize:v,onColumnReorder:y,rowClassRules:x,onRowClick:S,rowSpanColumns:C,controlPanel:w=!1,defaultDisplayPinnedIcon:T=!0,defaultHiddenColumns:E=f,onColumnVisibilityChange:te,pagination:D=!1,defaultPageSize:ne=10,pageSizeOptions:O=d,onPageChange:re}){let k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>m(e),[e]),M=(0,n.useMemo)(()=>{let e=new Map;return j.forEach(t=>e.set(t.key,t)),e},[j]),{pinnedColumns:N,togglePin:oe}=_e(j,c),{columnWidths:P,isResizingRef:se,startResize:ce}=me(v),{reorderedColumns:F,handleDragStart:I,handleDragEnd:Se,handleDrop:Ce}=pe({columns:e,pinnedColumns:N,isResizingRef:se,onColumnReorder:y}),L=he({defaultHiddenColumns:E,defaultDisplayPinnedIcon:T,onColumnVisibilityChange:te}),{hiddenColumns:R}=L,z=ve(s,l),{groupedColumns:we,expandedGroups:B}=z,[Te,V]=(0,n.useState)(o);(0,n.useEffect)(()=>V(o),[o]);let Ee=(0,n.useCallback)(()=>V(e=>!e),[]),{resetControlPanelDefaults:De}=L,Oe=(0,n.useCallback)(()=>{De(),V(o)},[De,o]),ke=Te,H=ke?we:f,U=H.length>0,W=!!i,G=(0,n.useMemo)(()=>m(F).filter(e=>!H.includes(e.key)&&!R.includes(e.key)),[F,H,R]),Ae=(0,n.useMemo)(()=>b(F,H,R),[F,H,R]),je=(0,n.useMemo)(()=>ee({visibleLeafColumns:G,pinnedColumns:N,columnWidths:P,hasGroups:U,hasActions:W}),[G,N,P,U,W]),K=fe({data:t,columnsByKey:M,gridRootRef:k}),{sortState:q,handleSort:Me}=be(),J=ge({items:(0,n.useMemo)(()=>{let e=ie(t,K.selectedFilters,M);return!q.key\|\|!q.direction?e:ae(e,q.key,q.direction,M.get(q.key))},[t,K.selectedFilters,q,M]),enabled:D,defaultPageSize:ne,onPageChange:re,resetOn:[K.selectedFilters,q]}),Ne=(0,n.useMemo)(()=>le(J.pagedItems,H,M),[J.pagedItems,H,M]),Y=(0,n.useMemo)(()=>ue(Ne,B),[Ne,B]),X=Y.length,{startIndex:Z,endIndex:Q,topSpacerHeight:Pe,bottomSpacerHeight:Fe}=xe({containerRef:A,totalRowCount:X,rowHeight:g,overscan:_}),$=(0,n.useMemo)(()=>Y.slice(Z,Q),[Y,Z,Q]),Ie=(0,n.useMemo)(()=>de($,C,M,Z),[$,C,M,Z]),Le=ye(k),Re=G.length+ +!!W+ +!!U;return{gridRootRef:k,tableWrapRef:A,rowKey:r,actions:i,isLoading:!!a,groupBy:ke,showGroupBy:Te,toggleShowGroupBy:Ee,controlPanel:w,rowHeight:g,rowSpanColumns:C,rowClassRules:x,onRowClick:S,pinnedBottomRowData:u,pinnedRowClassName:h,pageSizeOptions:O,paginationEnabled:D,initialLeafColumns:j,columnsByKey:M,visibleLeafColumns:G,headerRows:Ae,pinnedColumns:N,pinOffsets:je,columnWidths:P,togglePin:oe,startResize:ce,handleDragStart:I,handleDragEnd:Se,handleDrop:Ce,hiddenColumns:R,displayPinnedIcon:L.displayPinnedIcon,toggleColumnVisibility:L.toggleColumnVisibility,toggleDisplayPinnedIcon:L.toggleDisplayPinnedIcon,resetControlPanelDefaults:Oe,settingsMenu:Le,groupedColumns:we,expandedGroups:B,addGroup:z.addGroup,removeGroup:z.removeGroup,toggleGroupExpansion:z.toggleGroupExpansion,hasGroups:U,hasActions:W,sortState:q,handleSort:Me,filters:K,currentPage:J.currentPage,pageSize:J.pageSize,totalPages:J.totalPages,totalCount:J.totalCount,goToPage:J.goToPage,changePageSize:J.changePageSize,visibleRows:$,startIndex:Z,totalRowCount:X,topSpacerHeight:Pe,bottomSpacerHeight:Fe,rowSpanInfo:Ie,totalColumnsCount:Re}}function Ce(e){let t=Se(e),{containerStyle:n,tableStyle:i,bordered:a=!1}=e;return(0,r.jsx)(o,{value:t,children:(0,r.jsxs)(`div`,{ref:t.gridRootRef,className:`flexi-root`,children:[t.groupBy&&(0,r.jsx)(l,{}),(0,r.jsxs)(`div`,{ref:t.tableWrapRef,className:`flexi-table-wrap`,style:n,children:[t.controlPanel&&(0,r.jsx)(`div`,{className:`flexi-settings-corner`,children:(0,r.jsx)(`div`,{className:`flexi-settings-corner-inner`,children:(0,r.jsx)(D,{})})}),(0,r.jsxs)(`table`,{className:c(`flexi-table`,a&&`flexi-table--bordered`),style:i,children:[(0,r.jsx)(oe,{}),(0,r.jsx)(ce,{}),(0,r.jsx)(N,{}),(0,r.jsx)(te,{})]})]}),(0,r.jsx)(ne,{}),t.paginationEnabled&&(0,r.jsx)(u,{})]})})}e.DataTable=Ce});

package/package.json CHANGED Viewed

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