flexi-datagrid 1.2.6 → 1.2.8

package/README.md

@@ -18,7 +18,10 @@ A modern, highly customizable, and feature-rich React data grid component design
 - **Custom Cell Rendering:** Full control over how each cell is rendered via a `render` function.
 - **Conditional Row Styling (AG Grid-style `rowClassRules`):** Map class names to predicates evaluated per row to highlight/style rows based on their data.
 - **Row Click Events:** Pass `onRowClick` to react to clicks anywhere on a data row.
+- **Row Spanning / Cell Merging:** Pass `rowSpanColumns` (e.g. `['city', 'department']`) to vertically merge consecutive rows that share the same value, hierarchically — like a spreadsheet merge.
 - **Virtualized Rows for Large Datasets:** Only the rows in (and just around) the visible viewport are mounted, so grids with thousands of rows stay smooth to scroll and filter.
+- **Display Settings Menu:** Opt-in toolbar (`controlPanel`) with a single Settings menu button that opens a dropdown for all display configuration — toggling pin/filter icon hover visibility, showing/hiding individual columns, and resetting to defaults — with `defaultDisplayPinnedIcon`/`defaultHiddenColumns` to configure the starting display without the panel.
+- **Pagination:** Opt-in (`pagination`) page-based navigation with a configurable page size, a rows-per-page selector, and first/previous/next/last controls, as an alternative to (or alongside) virtualized infinite scrolling.
 - **Full TypeScript Support:** Strongly typed configurations for robust developer experience.
 
 ---
@@ -98,6 +101,8 @@ export default function EmployeeTable() {
         'row-high-earner': (record) => record.salary > 100000,
       }}
       onRowClick={(record) => console.log('clicked', record.id)}
+      rowSpanColumns={['department']}
+      controlPanel
       actions={(record) => (
         <button onClick={(e) => { e.stopPropagation(); console.log('Edit', record.id); }}>Edit</button>
       )}
@@ -158,6 +163,15 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
 | `onColumnReorder` | `(orderedLeafKeys: string[]) => void` | Called whenever columns are reordered via drag-and-drop, with the full leaf column order. |
 | `rowClassRules` | `Record<string, (record: T, index: number) => boolean>` | AG Grid-style conditional row classes: maps a class name to a predicate. Every rule whose predicate returns `true` for a row is applied to that row's `<tr>`. Does not apply to `pinnedBottomRowData` rows (use `pinnedRowClassName` for those). |
 | `onRowClick` | `(record: T, index: number, event: React.MouseEvent) => void` | Called when a data row is clicked, with the row's record, its index in the currently rendered (filtered/sorted/grouped) rows, and the click event. Adds a pointer cursor to rows when set. |
+| `rowSpanColumns` | `string[]` | Column keys, in priority order, to vertically merge across consecutive rows sharing the same value — e.g. `['city', 'department']`. See [Row Spanning](#row-spanning--cell-merging). |
+| `controlPanel` | `boolean` | Renders an opt-in toolbar above the grid with a Settings menu button for end-user display configuration (pin/filter icon hover visibility, column show/hide). Defaults to `false` — existing grids are unaffected unless you turn it on. See [Control Panel](#control-panel). |
+| `defaultDisplayPinnedIcon` | `boolean` | Initial value of the flag that controls whether the pin and filter icons in leaf column headers reveal on hover at all. When `false`, neither icon is shown on hover, regardless of `controlPanel`. Defaults to `true` (matches prior behavior). |
+| `defaultHiddenColumns` | `string[]` | Leaf column keys hidden by default, independent of `controlPanel`. Defaults to `[]`. |
+| `onColumnVisibilityChange` | `(hiddenKeys: string[]) => void` | Called whenever the set of hidden columns changes via the control panel, with the full list of currently hidden leaf column keys. |
+| `pagination` | `boolean` | Enables page-based navigation, rendering a pagination panel below the grid instead of relying solely on scrolling. Defaults to `false`. See [Pagination](#pagination). |
+| `defaultPageSize` | `number` | Initial number of rows per page when `pagination` is enabled. Defaults to `10`. |
+| `pageSizeOptions` | `number[]` | Options shown in the rows-per-page selector. Defaults to `[10, 25, 50, 100]`. |
+| `onPageChange` | `(page: number, pageSize: number) => void` | Called whenever the current page or page size changes. |
 
 ### Filtering
 
@@ -205,6 +219,74 @@ Pass `onRowClick` to be notified when a data row is clicked; the grid adds a poi
 />
 ```
 
+### Row Spanning / Cell Merging
+
+Pass `rowSpanColumns` — an ordered array of column keys — to merge a column's cell vertically across consecutive rows that share the same value, similar to a merged-cell spreadsheet. The order is a priority/hierarchy: a later key only continues merging while every key before it also matches on that run of rows. For example, with `rowSpanColumns={['city', 'department']}`, `city` merges across every consecutive row with the same city, and `department` merges only across consecutive rows that share *both* the same city and the same department — so department merges nest inside city merges rather than spanning across a city boundary.
+
+```tsx
+const data: Employee[] = [
+  { id: 1, city: 'Austin', department: 'Engineering', name: 'Ava Thompson' },
+  { id: 2, city: 'Austin', department: 'Engineering', name: 'Liam Carter' },
+  { id: 3, city: 'Austin', department: 'Design', name: 'Sofia Ramirez' },
+  { id: 4, city: 'Denver', department: 'Sales', name: 'Noah Patel' },
+];
+
+<DataTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  rowSpanColumns={['city', 'department']}
+/>
+```
+
+Here `city` spans 3 rows (Austin) then 1 row (Denver); `department` spans 2 rows (Engineering, within Austin) then 1 row each for Design and Sales.
+
+Notes:
+
+- Rows must already be sorted or grouped so that equal values for a spanned column are contiguous — spanning does not itself sort or reorder rows. Combine with `sortable` columns, `defaultGroupBy`, or pre-sorted `data` as needed.
+- Values are compared with the column's `getValue` (if provided) or `record[key]`, same as sorting/filtering.
+- Spanning only merges the cells of plain data rows; group header rows (from `groupBy`) always break a run, and `pinnedBottomRowData` rows are never merged.
+- Because rows are virtualized, spans are computed within the currently rendered window rather than across the entire dataset — a run that starts above the visible viewport will restart at the top of the window instead of continuing an off-screen merge. In practice this is invisible during normal scrolling since the affected rows aren't on screen at the same time.
+
+### Control Panel
+
+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.
+- **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).
+
+```tsx
+<DataTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  controlPanel
+  defaultHiddenColumns={['role']}
+  onColumnVisibilityChange={(hiddenKeys) => console.log('hidden columns', hiddenKeys)}
+/>
+```
+
+`controlPanel` is opt-in and defaults to `false`, so existing grids render exactly as before unless you enable it. `defaultDisplayPinnedIcon` and `defaultHiddenColumns` are independent of `controlPanel` — you can use either to fix a display configuration (e.g. permanently hide a column, or suppress pin/filter icons everywhere) without showing the panel UI at all.
+
+### Pagination
+
+Pass `pagination` to render a pagination panel below the grid: a rows-per-page selector (`pageSizeOptions`, defaulting to `[10, 25, 50, 100]`), the current range/total (e.g. "1–10 of 42"), and first/previous/next/last page controls.
+
+```tsx
+<DataTable
+  columns={columns}
+  data={data}
+  rowKey="id"
+  pagination
+  defaultPageSize={25}
+  pageSizeOptions={[25, 50, 100]}
+  onPageChange={(page, pageSize) => console.log('page', page, 'size', pageSize)}
+/>
+```
+
+Pagination is applied after filtering and sorting, and before row grouping — so with `groupBy` also enabled, each page groups only the rows that landed on it. Changing a filter, the sort, or the page size automatically resets you to page 1. `pagination` is independent of virtualization (`rowHeight`/`overscan`): you can use either or both, though with a small `pageSize` a bounded, scrollable `containerStyle` is rarely necessary since a page's rows will usually fit without scrolling.
+
 ### 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.
@@ -287,13 +369,128 @@ Row rendering is virtualized: only the rows visible inside the scrollable contai
 Virtualization requires a bounded, scrollable container and a known row height:
 
 - Give the grid a `maxHeight` via `containerStyle` so `flexi-table-wrap` actually scrolls (see [Sticky Header](#sticky-header)) — without a bounded height, the browser page itself scrolls and every row has to be rendered.
-- The default row height is `48px`, matching the built-in CSS. If you override row height via custom CSS, pass the same value through the `rowHeight` prop so the virtualizer's scroll math stays accurate.
+- The default row height is `48px`, matching the built-in CSS. If you override row height via custom CSS, pass the same value through the `rowHeight` prop so the virtualizer's scroll math stays accurate — group header rows (from `groupBy`) are also sized to `rowHeight` internally for the same reason, so a custom `rowHeight` no longer causes drift (previously visible as blank gaps or an inability to fully reach the last rows once scrolled to the bottom).
 - Tune `overscan` (default `8`) if you see blank flashes on very fast scrolling — a higher value trades a bit of extra rendering for smoother scroll.
 
 Filtering is also optimized for large datasets: a filter column's unique values are computed once per column (not on every keystroke), and column lookups used during filtering/sorting/grouping are indexed by key instead of scanned linearly.
 
 ---
 
+## Full Example (Every Feature)
+
+A single grid wiring up every prop at once — nested/grouped headers, pinning, resizing, reordering, filtering, sorting, row grouping, row spanning, the control panel, pagination, pinned bottom totals, conditional row styling, row clicks, and virtualization:
+
+```tsx
+import { DataTable, type ColumnConfig } from 'flexi-datagrid';
+import 'flexi-datagrid/dist/flexi-datagrid.css';
+
+interface Employee {
+  id: number;
+  city: string;
+  department: string;
+  name: string;
+  role: string;
+  baseSalary: number;
+  bonus: number;
+}
+
+const data: Employee[] = [
+  { id: 1, city: 'Austin', department: 'Engineering', name: 'Ava Thompson', role: 'Frontend Developer', baseSalary: 95000, bonus: 8000 },
+  { id: 2, city: 'Austin', department: 'Engineering', name: 'Liam Carter', role: 'Backend Developer', baseSalary: 102000, bonus: 9500 },
+  { id: 3, city: 'Austin', department: 'Design', name: 'Sofia Ramirez', role: 'Product Designer', baseSalary: 88000, bonus: 4000 },
+  { id: 4, city: 'Denver', department: 'Sales', name: 'Noah Patel', role: 'Account Executive', baseSalary: 76000, bonus: 12000 },
+];
+
+const columns: ColumnConfig<Employee>[] = [
+  { key: 'city', header: 'City', sortable: true, filterable: true, minWidth: 100, maxWidth: 240 },
+  { key: 'department', header: 'Department', sortable: true, filterable: true, minWidth: 120 },
+  {
+    key: 'name',
+    header: 'Name',
+    sortable: true,
+    filterable: true,
+    pinned: 'left',
+    minWidth: 160,
+    maxWidth: 500,
+    style: { width: '220px' },
+  },
+  { key: 'role', header: 'Role', sortable: true, filterable: true, resizable: false },
+  {
+    key: 'compensation',
+    header: 'Compensation',
+    children: [
+      {
+        key: 'baseSalary',
+        header: 'Base Salary',
+        sortable: true,
+        pinned: 'right',
+        render: (value) => `$${value.toLocaleString()}`,
+        pinnedRender: () => <strong>Total</strong>,
+      },
+      {
+        key: 'bonus',
+        header: 'Bonus',
+        sortable: true,
+        render: (value) => `$${value.toLocaleString()}`,
+        pinnedRender: (value) => <strong>${value.toLocaleString()}</strong>,
+      },
+    ],
+  },
+];
+
+export default function EmployeeTable() {
+  return (
+    <DataTable<Employee>
+      columns={columns}
+      data={data}
+      rowKey="id"
+      bordered
+      containerStyle={{ maxHeight: 480 }}
+      tableStyle={{ minWidth: 900 }}
+      rowHeight={48}
+      overscan={8}
+      groupBy
+      defaultGroupBy={[]}
+      onGroupChange={(groupedKeys) => console.log('grouped by', groupedKeys)}
+      rowSpanColumns={['city', 'department']}
+      onColumnResize={(key, width) => console.log('resized', key, width)}
+      onColumnReorder={(orderedKeys) => console.log('reordered', orderedKeys)}
+      onPinChange={(key, isPinned, side) => console.log('pin change', key, isPinned, side)}
+      controlPanel
+      defaultDisplayPinnedIcon={true}
+      defaultHiddenColumns={[]}
+      onColumnVisibilityChange={(hiddenKeys) => console.log('hidden columns', hiddenKeys)}
+      pagination
+      defaultPageSize={25}
+      pageSizeOptions={[25, 50, 100]}
+      onPageChange={(page, pageSize) => console.log('page', page, 'size', pageSize)}
+      pinnedBottomRowData={[
+        { id: -1, city: '', department: '', name: '', role: '', baseSalary: 0, bonus: data.reduce((sum, r) => sum + r.bonus, 0) },
+      ]}
+      pinnedRowClassName="totals-row"
+      rowClassRules={{
+        'row-high-earner': (record) => record.baseSalary > 100000,
+      }}
+      onRowClick={(record, index) => console.log('clicked row', index, record.name)}
+      actions={(record) => (
+        <button onClick={(e) => { e.stopPropagation(); console.log('Edit', record.id); }}>Edit</button>
+      )}
+    />
+  );
+}
+```
+
+Notes on combining features in this example:
+
+- `city`/`department` are left as plain leaf columns (not pinned/nested) so `rowSpanColumns={['city', 'department']}` can merge them — `data` is already sorted by city then department, which the merge requires (see [Row Spanning](#row-spanning--cell-merging)).
+- `compensation` demonstrates a nested/grouped header: `baseSalary` and `bonus` render under a shared "Compensation" header cell, and `baseSalary` is independently pinned right.
+- `pinnedRender` on `baseSalary`/`bonus` overrides how the totals row renders those two cells only; every other column in `pinnedBottomRowData` falls back to its normal `render`.
+- `groupBy` is enabled with an empty `defaultGroupBy` — the grid starts flat (so the row spans above are visible) but a user can still drag `role`, for example, into the drop zone to group by it on top of everything else.
+- `controlPanel` adds the Settings menu button for pin/filter icon hover visibility and column visibility toggling on top of the `defaultDisplayPinnedIcon`/`defaultHiddenColumns` starting state — omit `controlPanel` (or leave it `false`) to keep those two props as a fixed, non-interactive configuration instead.
+- `pagination` slices the filtered/sorted rows into pages of `defaultPageSize` (25 here) before grouping — combine cautiously with `rowSpanColumns`, since spans only merge cells within the current page's rows.
+
+---
+
 ## 🛠 Local Development
 
 ```bash

package/dist/{DataTable.d.ts → Datatable.d.ts}

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

package/dist/flexi-datagrid.css

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

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 import './index.css';
-export { DataTable } from './DataTable';
-export type { ColumnConfig } from './DataTable';
+export { DataTable } from './Datatable';
+export type { ColumnConfig } from './Datatable';