flexi-datagrid 1.2.5 → 1.2.7

package/README.md

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

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

@@ -14,6 +14,9 @@ export interface ColumnConfig<T> {
     pinned?: boolean | 'left' | 'right';
     children?: ColumnConfig<T>[];
     getValue?: (record: T) => any;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
 }
 type PinSide = 'left' | 'right';
 interface DataTableProps<T> {
@@ -31,6 +34,21 @@ interface DataTableProps<T> {
     bordered?: boolean;
     pinnedBottomRowData?: T[];
     pinnedRowClassName?: string | ((record: T, index: number) => string);
+    rowHeight?: number;
+    overscan?: number;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    onColumnReorder?: (orderedLeafKeys: string[]) => void;
+    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, }: 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-icon-btn{color:#64748b;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;width:22px;height:22px;margin:0;padding:0;transition:background-color .15s,color .15s,transform .1s;display:inline-flex}.flexi-icon-btn:hover{color:#334155;background-color:#e2e8f0}.flexi-icon-btn:active{background-color:#cbd5e1;transform:scale(.92)}.flexi-icon-btn:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-filter-btn{color:#64748b;opacity:0}.flexi-filter-btn--active{color:#2563eb;opacity:1}.flexi-filter-btn--active:hover{color:#2563eb;background-color:#dbeafe}.flexi-pin-btn{color:#cbd5e1;opacity:0}.flexi-pin-btn--pinned{color:#3b82f6;opacity:1}.flexi-pin-btn--pinned:hover{color:#2563eb;background-color:#dbeafe}.flexi-th-inner:hover .flexi-filter-btn,.flexi-th-inner:hover .flexi-pin-btn{opacity:1}.flexi-actions-th{vertical-align:middle;text-align:right;height:48px;padding:0 1rem;font-size:12px;font-weight:700;box-shadow:-1px 0 #e2e8f0}.flexi-filter-dropdown{color:#334155;text-align:left;pointer-events:auto;background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;flex-direction:column;width:13rem;padding:.5rem 0;font-weight:400;display:flex;position:absolute;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.flexi-filter-search{border-bottom:1px solid #f1f5f9;margin-bottom:.25rem;padding:0 .5rem .5rem}.flexi-input{color:#475569;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:.25rem;width:100%;padding:.25rem .5rem;font-size:12px;font-weight:500}.flexi-input:focus{border-color:#3b82f6;outline:none}.flexi-filter-list{flex-direction:column;gap:.25rem;max-height:10rem;padding:0 .5rem;display:flex;overflow-y:auto}.flexi-filter-empty{color:#64748b;text-align:center;padding:.5rem;font-size:11px}.flexi-filter-option{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25rem;align-items:center;gap:.5rem;padding:.375rem .5rem;font-size:12px;display:flex}.flexi-filter-option:hover{background-color:#f8fafc}.flexi-filter-option-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.flexi-checkbox{accent-color:#2563eb;border:1px solid #cbd5e1;border-radius:.25rem;width:.875rem;height:.875rem}.flexi-checkbox:focus{outline-offset:1px;outline:2px solid #3b82f6}.flexi-filter-footer{border-top:1px solid #f1f5f9;justify-content:flex-end;margin-top:.5rem;padding:.25rem .5rem 0;display:flex}.flexi-filter-clear{color:#ef4444;padding:.125rem .5rem;font-size:11px;font-weight:500}.flexi-filter-clear:hover{text-decoration:underline}.flexi-tbody{display:table-row-group}.flexi-tbody tr+tr{border-top:1px solid #f1f5f9}.flexi-empty-cell{text-align:center;color:#64748b;padding:2rem;font-size:12px;font-weight:500}.flexi-group-row{-webkit-user-select:none;user-select:none;background-color:#f8fafc99;transition:background-color .15s}.flexi-group-row:hover{background-color:#f1f5f9cc}.flexi-group-cell{color:#334155;border-right:1px solid #f1f5f9;padding:.75rem 1rem;font-size:12px;font-weight:600}.flexi-group-toggle{text-align:left;border-radius:6px;align-items:center;gap:.375rem;margin:-4px -8px -4px -4px;padding:4px 8px 4px 4px;transition:background-color .15s;display:flex}.flexi-group-toggle:hover{background-color:#e2e8f099}.flexi-group-toggle:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.flexi-icon-muted{color:#64748b}.flexi-group-value{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;width:10rem;font-weight:700;overflow:hidden}.flexi-group-count{color:#64748b;background-color:#e2e8f0b3;border-radius:9999px;margin-left:.25rem;padding:.05rem .375rem;font-size:10px;font-weight:500}.flexi-group-filler{background-color:#f8fafc4d}.flexi-row{border-bottom:1px solid #f1f5f9;height:48px;transition:background-color .15s}.flexi-row:hover{background-color:#f8fafccc}.flexi-row-indent-cell{background-color:#fff;border-right:1px solid #f1f5f9;width:48px}.flexi-cell{vertical-align:middle;padding:.25rem 1rem;transition:background-color .15s}.flexi-row:hover .flexi-cell--pinned{background-color:#f1f5f9}.flexi-cell-text{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:500;display:block;overflow:hidden}.flexi-actions-cell{vertical-align:middle;text-align:right;background-color:#fff;padding:.25rem 1rem;box-shadow:-1px 0 #e2e8f0}.flexi-row:hover .flexi-actions-cell{background-color:#f8fafccc}.flexi-tbody--pinned-bottom{box-shadow:0 -2px 5px -2px #0000001a}.flexi-row--pinned-bottom{background-color:#f8fafc;font-weight:600}.flexi-row--pinned-bottom:hover,.flexi-row--pinned-bottom .flexi-cell,.flexi-row--pinned-bottom .flexi-actions-cell{background-color:#f8fafc}.flexi-row--pinned-bottom .flexi-cell-text{color:#334155}.flexi-actions-inner{opacity:0;justify-content:flex-end;gap:.25rem;transition:opacity .15s;display:flex}.flexi-row:hover .flexi-actions-inner{opacity:1}.flexi-icon-xs{width:.75rem;height:.75rem}.flexi-icon-sm{width:.875rem;height:.875rem}.flexi-icon-md{width:1rem;height:1rem}.flexi-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;margin:0;padding:0;line-height:normal}.flexi-root input{font:inherit}.flexi-root table{border-collapse:collapse;border-spacing:0}
+.flexi-root{width:100%;position:relative}.flexi-root>*+*{margin-top:.75rem}.flexi-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%;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;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';