flexi-datagrid 1.2.8 → 1.2.11

package/README.md

@@ -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/DataTable.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableProps } from './types';
+export declare function DataTable<T>(props: DataTableProps<T>): import("react").JSX.Element;

package/dist/DataTable/components/FilterDropdown.d.ts

@@ -0,0 +1,4 @@
+/** The open filter popup for one column. Renders nothing until its position has been measured. */
+export declare function FilterDropdown({ columnKey }: {
+    columnKey: string;
+}): import("react").ReactPortal | null;

package/dist/DataTable/components/GroupZone.d.ts

@@ -0,0 +1 @@
+export declare function GroupZone(): import("react").JSX.Element;

package/dist/DataTable/components/HeaderCell.d.ts

@@ -0,0 +1,8 @@
+import type { ColumnConfig } from '../types';
+interface HeaderCellProps<T> {
+    col: ColumnConfig<T>;
+    rowSpan: number;
+    colSpan: number;
+}
+export declare function HeaderCell<T>({ col, rowSpan, colSpan }: HeaderCellProps<T>): import("react").JSX.Element;
+export {};

package/dist/DataTable/components/Pagination.d.ts

@@ -0,0 +1 @@
+export declare function Pagination(): import("react").JSX.Element;

package/dist/DataTable/components/PinnedBottomBody.d.ts

@@ -0,0 +1 @@
+export declare function PinnedBottomBody(): import("react").JSX.Element | null;

package/dist/DataTable/components/SettingsMenu.d.ts

@@ -0,0 +1,4 @@
+/** The gear button that lives in the header row when `controlPanel` is on. */
+export declare function SettingsButton(): import("react").JSX.Element;
+/** The popup opened by {@link SettingsButton}. Renders nothing while closed. */
+export declare function SettingsMenu(): import("react").ReactPortal | null;

package/dist/DataTable/components/TableBody.d.ts

@@ -0,0 +1 @@
+export declare function TableBody<T>(): import("react").JSX.Element;

package/dist/DataTable/components/TableColGroup.d.ts

@@ -0,0 +1 @@
+export declare function TableColGroup(): import("react").JSX.Element;

package/dist/DataTable/components/TableHeader.d.ts

@@ -0,0 +1 @@
+export declare function TableHeader(): import("react").JSX.Element;

package/dist/DataTable/components/rows.d.ts

@@ -0,0 +1,18 @@
+import type { GroupNode } from '../types';
+export declare function GroupRow<T>({ node }: {
+    node: GroupNode<T>;
+}): import("react").JSX.Element;
+interface DataRowProps<T> {
+    record: T;
+    /** Index within the full flattened row list (group rows included). */
+    rowIndex: number;
+    className: string | undefined;
+}
+export declare function DataRow<T>({ record, rowIndex, className }: DataRowProps<T>): import("react").JSX.Element;
+interface PinnedBottomRowProps<T> {
+    record: T;
+    index: number;
+    className: string | undefined;
+}
+export declare function PinnedBottomRow<T>({ record, index, className }: PinnedBottomRowProps<T>): import("react").JSX.Element;
+export {};

package/dist/DataTable/constants.d.ts

@@ -0,0 +1,11 @@
+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;
+export declare const GROUP_INDENT_WIDTH = 48;
+export declare const PINNED_BOTTOM_ROW_HEIGHT = 48;
+export declare const DEFAULT_OVERSCAN = 8;
+export declare const DEFAULT_PAGE_SIZE = 10;
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+export declare const EMPTY_STRINGS: string[];
+export declare const EMPTY_ARRAY: never[];

package/dist/DataTable/context/DataTableContext.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import { useDataTableState } from '../hooks/useDataTableState';
+export type DataTableContextValue<T> = ReturnType<typeof useDataTableState<T>>;
+export declare function DataTableProvider<T>({ value, children }: {
+    value: DataTableContextValue<T>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useDataTableContext<T = any>(): DataTableContextValue<T>;

package/dist/DataTable/hooks/index.d.ts

@@ -0,0 +1,12 @@
+export { useAnchoredPosition } from './useAnchoredPosition';
+export { useClickOutside } from './useClickOutside';
+export { useColumnFilters, type ColumnFilters } from './useColumnFilters';
+export { useColumnReorder } from './useColumnReorder';
+export { useColumnResize } from './useColumnResize';
+export { useColumnVisibility } from './useColumnVisibility';
+export { usePagination } from './usePagination';
+export { usePinnedColumns } from './usePinnedColumns';
+export { useRowGrouping } from './useRowGrouping';
+export { useSettingsMenu } from './useSettingsMenu';
+export { useSorting } from './useSorting';
+export { useVirtualRows } from './useVirtualRows';

package/dist/DataTable/hooks/useAnchoredPosition.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+interface AnchoredPositionOptions<P> {
+    /** Whether the popup is open. The position is only tracked (and kept up to date) while true. */
+    active: boolean;
+    /** Changing this while `active` re-anchors the popup (e.g. switching between filter columns). */
+    resetKey?: unknown;
+    rootRef: RefObject<HTMLElement | null>;
+    getAnchor: () => HTMLElement | null | undefined;
+    compute: (anchorRect: DOMRect, rootRect: DOMRect) => P;
+}
+/** Tracks a popup position relative to the grid root, updating on scroll and window resize. */
+export declare function useAnchoredPosition<P>({ active, resetKey, rootRef, getAnchor, compute }: AnchoredPositionOptions<P>): P | null;
+export {};

package/dist/DataTable/hooks/useClickOutside.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Calls `onOutside` when a mousedown lands outside a popup.
+ * `getElements()` returns `[popup, ...extraInsideElements]`; if the popup isn't mounted yet nothing happens.
+ */
+export declare function useClickOutside(enabled: boolean, getElements: () => Array<HTMLElement | null | undefined>, onOutside: () => void): void;

package/dist/DataTable/hooks/useColumnFilters.d.ts

@@ -0,0 +1,25 @@
+import { type RefObject } from 'react';
+import type { ColumnConfig } from '../types';
+interface ColumnFiltersOptions<T> {
+    data: T[];
+    columnsByKey: Map<string, ColumnConfig<T>>;
+    gridRootRef: RefObject<HTMLElement | null>;
+}
+export declare function useColumnFilters<T>({ data, columnsByKey, gridRootRef }: ColumnFiltersOptions<T>): {
+    activeFilterKey: string | null;
+    selectedFilters: Record<string, unknown[]>;
+    filterSearchQuery: string;
+    setFilterSearchQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    filterPosition: {
+        top: number;
+        left: number;
+    } | null;
+    dropdownRef: RefObject<HTMLDivElement | null>;
+    filteredUniqueValues: unknown[];
+    registerFilterButton: (key: string, el: HTMLButtonElement | null) => void;
+    toggleFilterDropdown: (columnKey: string) => void;
+    handleFilterChange: (columnKey: string, value: unknown) => void;
+    clearFilter: (columnKey: string) => void;
+};
+export type ColumnFilters = ReturnType<typeof useColumnFilters>;
+export {};

package/dist/DataTable/hooks/useColumnReorder.d.ts

@@ -0,0 +1,15 @@
+import { type DragEvent, type RefObject } from 'react';
+import type { ColumnConfig, PinSide } from '../types';
+interface ColumnReorderOptions<T> {
+    columns: ColumnConfig<T>[];
+    pinnedColumns: Record<string, PinSide>;
+    isResizingRef: RefObject<boolean>;
+    onColumnReorder?: (orderedLeafKeys: string[]) => void;
+}
+export declare function useColumnReorder<T>({ columns, pinnedColumns, isResizingRef, onColumnReorder }: ColumnReorderOptions<T>): {
+    reorderedColumns: ColumnConfig<T>[];
+    handleDragStart: (e: DragEvent, columnKey: string, isLeaf: boolean) => void;
+    handleDragEnd: () => void;
+    handleDrop: (e: DragEvent, targetKey: string) => void;
+};
+export {};

package/dist/DataTable/hooks/useColumnResize.d.ts

@@ -0,0 +1,7 @@
+import { type MouseEvent as ReactMouseEvent } from 'react';
+import type { ColumnConfig } from '../types';
+export declare function useColumnResize<T>(onColumnResize?: (columnKey: string, width: number) => void): {
+    columnWidths: Record<string, number>;
+    isResizingRef: import("react").RefObject<boolean>;
+    startResize: (e: ReactMouseEvent, col: ColumnConfig<T>) => void;
+};

package/dist/DataTable/hooks/useColumnVisibility.d.ts

@@ -0,0 +1,13 @@
+interface ColumnVisibilityOptions {
+    defaultHiddenColumns: string[];
+    defaultDisplayPinnedIcon: boolean;
+    onColumnVisibilityChange?: (hiddenKeys: string[]) => void;
+}
+export declare function useColumnVisibility({ defaultHiddenColumns, defaultDisplayPinnedIcon, onColumnVisibilityChange }: ColumnVisibilityOptions): {
+    hiddenColumns: string[];
+    displayPinnedIcon: boolean;
+    toggleColumnVisibility: (columnKey: string) => void;
+    toggleDisplayPinnedIcon: () => void;
+    resetControlPanelDefaults: () => void;
+};
+export {};

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

@@ -0,0 +1,89 @@
+import type { ColumnConfig, DataTableProps } from '../types';
+/**
+ * Owns all of the grid's state and derived data. `DataTable` publishes the result through
+ * `DataTableContext`, so child components read what they need instead of receiving it as props.
+ */
+export declare function useDataTableState<T>({ columns, data, rowKey, actions, isLoading, groupBy, defaultGroupBy, onPinChange, onGroupChange, pinnedBottomRowData, pinnedRowClassName, rowHeight, overscan, onColumnResize, onColumnReorder, rowClassRules, onRowClick, rowSpanColumns, controlPanel, defaultDisplayPinnedIcon, defaultHiddenColumns, onColumnVisibilityChange, pagination, defaultPageSize, pageSizeOptions, onPageChange, }: DataTableProps<T>): {
+    gridRootRef: import("react").RefObject<HTMLDivElement | null>;
+    tableWrapRef: import("react").RefObject<HTMLDivElement | null>;
+    rowKey: keyof T | ((record: T) => string);
+    actions: ((record: T) => import("react").ReactNode) | undefined;
+    isLoading: boolean;
+    groupBy: boolean;
+    showGroupBy: boolean;
+    toggleShowGroupBy: () => void;
+    controlPanel: boolean;
+    rowHeight: number;
+    rowSpanColumns: string[] | undefined;
+    rowClassRules: Record<string, (record: T, index: number) => boolean> | undefined;
+    onRowClick: ((record: T, index: number, event: import("react").MouseEvent<HTMLTableRowElement>) => void) | undefined;
+    pinnedBottomRowData: T[];
+    pinnedRowClassName: string | ((record: T, index: number) => string) | undefined;
+    pageSizeOptions: number[];
+    paginationEnabled: boolean;
+    initialLeafColumns: ColumnConfig<T>[];
+    columnsByKey: Map<string, ColumnConfig<T>>;
+    visibleLeafColumns: ColumnConfig<T>[];
+    headerRows: import("../types").HeaderCellSpec<T>[][];
+    pinnedColumns: Record<string, import("..").PinSide>;
+    pinOffsets: import("../types").PinOffsets;
+    columnWidths: Record<string, number>;
+    togglePin: (columnKey: string) => void;
+    startResize: (e: import("react").MouseEvent, col: ColumnConfig<T>) => void;
+    handleDragStart: (e: import("react").DragEvent, columnKey: string, isLeaf: boolean) => void;
+    handleDragEnd: () => void;
+    handleDrop: (e: import("react").DragEvent, targetKey: string) => void;
+    hiddenColumns: string[];
+    displayPinnedIcon: boolean;
+    toggleColumnVisibility: (columnKey: string) => void;
+    toggleDisplayPinnedIcon: () => void;
+    resetControlPanelDefaults: () => void;
+    settingsMenu: {
+        isOpen: boolean;
+        position: {
+            top: number;
+            right: number;
+        } | null;
+        menuRef: import("react").RefObject<HTMLDivElement | null>;
+        buttonRef: import("react").RefObject<HTMLButtonElement | null>;
+        toggle: () => void;
+    };
+    groupedColumns: string[];
+    expandedGroups: Record<string, boolean>;
+    addGroup: (columnKey: string) => void;
+    removeGroup: (columnKey: string) => void;
+    toggleGroupExpansion: (path: string) => void;
+    hasGroups: boolean;
+    hasActions: boolean;
+    sortState: import("../types").SortState;
+    handleSort: (columnKey: string) => void;
+    filters: {
+        activeFilterKey: string | null;
+        selectedFilters: Record<string, unknown[]>;
+        filterSearchQuery: string;
+        setFilterSearchQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+        filterPosition: {
+            top: number;
+            left: number;
+        } | null;
+        dropdownRef: import("react").RefObject<HTMLDivElement | null>;
+        filteredUniqueValues: unknown[];
+        registerFilterButton: (key: string, el: HTMLButtonElement | null) => void;
+        toggleFilterDropdown: (columnKey: string) => void;
+        handleFilterChange: (columnKey: string, value: unknown) => void;
+        clearFilter: (columnKey: string) => void;
+    };
+    currentPage: number;
+    pageSize: number;
+    totalPages: number;
+    totalCount: number;
+    goToPage: (page: number) => void;
+    changePageSize: (size: number) => void;
+    visibleRows: import("../types").RowNode<T>[];
+    startIndex: number;
+    totalRowCount: number;
+    topSpacerHeight: number;
+    bottomSpacerHeight: number;
+    rowSpanInfo: import("../types").RowSpanInfo;
+    totalColumnsCount: number;
+};

package/dist/DataTable/hooks/usePagination.d.ts

@@ -0,0 +1,18 @@
+interface PaginationOptions<T> {
+    items: T[];
+    enabled: boolean;
+    defaultPageSize: number;
+    onPageChange?: (page: number, pageSize: number) => void;
+    /** The page jumps back to 1 whenever any of these change. Keep the array length constant between renders. */
+    resetOn: readonly unknown[];
+}
+export declare function usePagination<T>({ items, enabled, defaultPageSize, onPageChange, resetOn }: PaginationOptions<T>): {
+    currentPage: number;
+    pageSize: number;
+    totalPages: number;
+    totalCount: number;
+    pagedItems: T[];
+    goToPage: (page: number) => void;
+    changePageSize: (size: number) => void;
+};
+export {};

package/dist/DataTable/hooks/usePinnedColumns.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnConfig, PinSide } from '../types';
+export declare function usePinnedColumns<T>(initialLeafColumns: ColumnConfig<T>[], onPinChange?: (columnKey: string, isPinned: boolean, side?: PinSide) => void): {
+    pinnedColumns: Record<string, PinSide>;
+    togglePin: (columnKey: string) => void;
+};

package/dist/DataTable/hooks/useRowGrouping.d.ts

@@ -0,0 +1,7 @@
+export declare function useRowGrouping(defaultGroupBy: string[], onGroupChange?: (groupedKeys: string[]) => void): {
+    groupedColumns: string[];
+    expandedGroups: Record<string, boolean>;
+    addGroup: (columnKey: string) => void;
+    removeGroup: (columnKey: string) => void;
+    toggleGroupExpansion: (path: string) => void;
+};

package/dist/DataTable/hooks/useSettingsMenu.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+export declare function useSettingsMenu(gridRootRef: RefObject<HTMLElement | null>): {
+    isOpen: boolean;
+    position: {
+        top: number;
+        right: number;
+    } | null;
+    menuRef: RefObject<HTMLDivElement | null>;
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    toggle: () => void;
+};

package/dist/DataTable/hooks/useSorting.d.ts

@@ -0,0 +1,6 @@
+import type { SortState } from '../types';
+/** Click cycle on a sortable header: asc -> desc -> off. */
+export declare function useSorting(): {
+    sortState: SortState;
+    handleSort: (columnKey: string) => void;
+};

package/dist/DataTable/hooks/useVirtualRows.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+interface VirtualRowsOptions {
+    containerRef: RefObject<HTMLElement | null>;
+    totalRowCount: number;
+    rowHeight: number;
+    overscan: number;
+}
+/** Fixed-height row windowing driven by the scroll container's scrollTop / clientHeight. */
+export declare function useVirtualRows({ containerRef, totalRowCount, rowHeight, overscan }: VirtualRowsOptions): {
+    startIndex: number;
+    endIndex: number;
+    topSpacerHeight: number;
+    bottomSpacerHeight: number;
+};
+export {};

package/dist/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable';
+export type { ColumnConfig, DataTableProps, PinSide, SortDirection } from './types';

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

@@ -1,5 +1,4 @@
-import { type ReactNode, type CSSProperties } from 'react';
-import React from 'react';
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 export interface ColumnConfig<T> {
     key: string;
     header: string;
@@ -18,8 +17,13 @@ export interface ColumnConfig<T> {
     minWidth?: number;
     maxWidth?: number;
 }
-type PinSide = 'left' | 'right';
-interface DataTableProps<T> {
+export type PinSide = 'left' | 'right';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface SortState {
+    key: string | null;
+    direction: SortDirection;
+}
+export interface DataTableProps<T> {
     columns: ColumnConfig<T>[];
     data: T[];
     rowKey: keyof T | ((record: T) => string);
@@ -39,7 +43,7 @@ interface DataTableProps<T> {
     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;
+    onRowClick?: (record: T, index: number, event: MouseEvent<HTMLTableRowElement>) => void;
     rowSpanColumns?: string[];
     controlPanel?: boolean;
     defaultDisplayPinnedIcon?: boolean;
@@ -50,5 +54,30 @@ interface DataTableProps<T> {
     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, rowSpanColumns, controlPanel, defaultDisplayPinnedIcon, defaultHiddenColumns, onColumnVisibilityChange, pagination, defaultPageSize, pageSizeOptions, onPageChange, }: DataTableProps<T>): React.JSX.Element;
-export {};
+/** A group header produced by `groupBy`. */
+export interface GroupNode<T> {
+    kind: 'group';
+    groupKey: string;
+    groupValue: string;
+    path: string;
+    depth: number;
+    children: RowNode<T>[];
+    totalItemsCount: number;
+}
+/** A plain data record. Wrapping records keeps them distinguishable from group rows. */
+export interface RecordNode<T> {
+    kind: 'record';
+    record: T;
+}
+export type RowNode<T> = GroupNode<T> | RecordNode<T>;
+export interface HeaderCellSpec<T> {
+    col: ColumnConfig<T>;
+    rowSpan: number;
+    colSpan: number;
+}
+export type PinOffsets = Record<string, {
+    side: PinSide;
+    offset: number;
+}>;
+export type RowSpanEntry = number | 'skip';
+export type RowSpanInfo = Map<number, Record<string, RowSpanEntry>>;

package/dist/DataTable/utils/classNames.d.ts

@@ -0,0 +1 @@
+export declare const cx: (...classes: Array<string | false | null | undefined>) => string;

package/dist/DataTable/utils/columns.d.ts

@@ -0,0 +1,12 @@
+import type { ColumnConfig, HeaderCellSpec, PinSide } from '../types';
+export declare const getLeafColumns: <T>(cols: ColumnConfig<T>[]) => ColumnConfig<T>[];
+export declare const normalizePinSide: (pinned: boolean | "left" | "right" | undefined) => PinSide | undefined;
+export declare const getInitialPins: <T>(leafColumns: ColumnConfig<T>[]) => Record<string, PinSide>;
+/** Orders every level of the column tree: left-pinned, then unpinned, then right-pinned; ties use the user's drag order. */
+export declare const buildOrderedTree: <T>(cols: ColumnConfig<T>[], pinnedColumns: Record<string, PinSide>, columnOrderRanks: Record<string, number>) => ColumnConfig<T>[];
+/** Finds the sibling list (at any depth) that contains both keys, so columns can only be reordered within their own level. */
+export declare const findSiblingsContaining: <T>(cols: ColumnConfig<T>[], sourceKey: string, targetKey: string) => ColumnConfig<T>[] | null;
+/** Resolves a column's pixel width: user-resized width > declared style width > default. */
+export declare const resolveColumnWidth: <T>(col: ColumnConfig<T>, columnWidths: Record<string, number>) => number;
+/** Builds the (possibly multi-level) header rows, skipping grouped/hidden columns and empty parents. */
+export declare const buildHeaderRows: <T>(reorderedColumns: ColumnConfig<T>[], activeGroups: string[], hiddenColumns: string[]) => HeaderCellSpec<T>[][];

package/dist/DataTable/utils/grouping.d.ts

@@ -0,0 +1,5 @@
+import type { ColumnConfig, RowNode } from '../types';
+/** Recursively groups records by `groupedColumns`; with no group columns it just wraps each record. */
+export declare const groupRecords: <T>(records: T[], groupedColumns: string[], columnsByKey: Map<string, ColumnConfig<T>>, depth?: number, parentPath?: string) => RowNode<T>[];
+/** Flattens the group tree into the visible row list, skipping the children of collapsed groups. */
+export declare const flattenRows: <T>(nodes: RowNode<T>[], expandedGroups: Record<string, boolean>) => RowNode<T>[];

package/dist/DataTable/utils/pinning.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+import type { ColumnConfig, PinOffsets, PinSide } from '../types';
+interface PinOffsetOptions<T> {
+    visibleLeafColumns: ColumnConfig<T>[];
+    pinnedColumns: Record<string, PinSide>;
+    columnWidths: Record<string, number>;
+    hasGroups: boolean;
+    hasActions: boolean;
+}
+export declare const computePinOffsets: <T>({ visibleLeafColumns, pinnedColumns, columnWidths, hasGroups, hasActions, }: PinOffsetOptions<T>) => PinOffsets;
+export declare const getPinStyles: (pinOffsets: PinOffsets, colKey: string, isHeader?: boolean, baseColumnStyles?: CSSProperties) => CSSProperties;
+export {};

package/dist/DataTable/utils/records.d.ts

@@ -0,0 +1,10 @@
+import type { ColumnConfig, SortDirection } from '../types';
+/** Reads a record's value for a column, honouring the column's `getValue` override. */
+export declare const getFieldValue: <T>(record: T, key: string, column?: ColumnConfig<T>) => unknown;
+/** Returns the row's key as a string, or `undefined` when the key is missing (callers fall back to the index). */
+export declare const getRowKeyValue: <T>(record: T, rowKey: keyof T | ((record: T) => string)) => string | undefined;
+export declare const getRowRuleClassNames: <T>(record: T, index: number, rowClassRules?: Record<string, (record: T, index: number) => boolean>) => string | undefined;
+export declare const getUniqueValues: <T>(data: T[], key: string, column?: ColumnConfig<T>) => unknown[];
+export declare const filterRecords: <T>(data: T[], selectedFilters: Record<string, unknown[]>, columnsByKey: Map<string, ColumnConfig<T>>) => T[];
+/** Sorts a copy of `records`. Empty values (null/undefined/NaN) always sort last regardless of direction. */
+export declare const sortRecords: <T>(records: T[], key: string, direction: Exclude<SortDirection, null>, column?: ColumnConfig<T>) => T[];

package/dist/DataTable/utils/rowSpan.d.ts

@@ -0,0 +1,7 @@
+import type { ColumnConfig, RowNode, RowSpanInfo } from '../types';
+/**
+ * Computes `rowSpan` / skip markers for the visible window of rows.
+ * Keys of the returned map are absolute indexes into the flattened row list (`startIndex + local index`).
+ * A column only merges while every column listed before it in `rowSpanColumns` also matches the previous row.
+ */
+export declare const computeRowSpanInfo: <T>(rows: RowNode<T>[], rowSpanColumns: string[] | undefined, columnsByKey: Map<string, ColumnConfig<T>>, startIndex: number) => RowSpanInfo;

package/dist/flexi-datagrid.css

@@ -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.d.ts

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