flexi-datagrid 1.2.12 → 1.2.14

package/README.md

@@ -9,7 +9,7 @@ A modern, highly customizable, and feature-rich React data grid component design
 - **Sticky Header:** The header row stays fixed in place while the body scrolls vertically — give the grid a bounded height via `containerStyle` to enable vertical scrolling.
 - **Table Borders:** Optional full grid borders via the `bordered` prop for a classic spreadsheet look.
 - **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.
+- **Built-in Filtering:** Every filterable column's popup has two tabs — a **Filter** tab with an AG Grid-style condition builder (contains/equals/greater than/before/in range/blank, up to two conditions joined by AND/OR, per column data type) and a **Select** tab with the original multi-select checkbox list of unique values. Both apply live as you type/check, and 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.
@@ -66,15 +66,17 @@ const data: Employee[] = [
 ];
 
 const columns: ColumnConfig<Employee>[] = [
-  { key: 'name', header: 'Name', sortable: true, filterable: true, pinned: 'left', minWidth: 160, maxWidth: 500,
+  { key: 'name', header: 'Name', sortable: true, filterable: true, filterType: 'text', 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: 'department', header: 'Department', sortable: true, filterable: true, filterType: 'text' },
   { key: 'role', header: 'Role', sortable: true, filterable: true, resizable: false },
   {
     key: 'salary',
     header: 'Salary',
     sortable: true,
+    filterable: true,
+    filterType: 'number',
     pinned: 'right',
     render: (value) => `$${value.toLocaleString()}`,
   },
@@ -131,7 +133,8 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
 | `style` / `headerStyle` | `CSSProperties` | Inline styles for body cells / the header cell (e.g. fixed `width`). |
 | `render` | `(value, record) => ReactNode` | Custom cell renderer. Falls back to the raw value if omitted. |
 | `getValue` | `(record) => any` | Custom accessor used for sorting, filtering, and grouping when the value isn't a simple `record[key]` lookup. |
-| `filterable` | `boolean` | Shows a filter icon in the header that opens a multi-select popup of unique column values. |
+| `filterable` | `boolean` | Shows a filter icon in the header that opens a popup with a condition-filter tab and a multi-select "values" tab. See [Filtering](#filtering). |
+| `filterType` | `'text' \| 'number' \| 'date' \| 'boolean'` | Which operator set the condition filter tab shows for this column. Auto-detected from the first non-null value when omitted (so it's optional for existing columns). |
 | `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. |
@@ -172,10 +175,56 @@ Each entry in `columns` describes one column (or a group of columns, via `childr
 | `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. |
+| `onConditionFilterChange` | `(conditionFilters: Record<string, ConditionFilter>) => void` | Called whenever a column's condition filter (the "Filter" tab) changes, with the full map of active condition filters keyed by column key. |
 
 ### Filtering
 
-Any column with `filterable: true` gets a filter icon in its header. Clicking it opens a searchable, multi-select popup listing the column's unique values (derived from `data`, via `getValue` if provided). Selected values are combined with AND across columns and OR within a column's own selected values. The popup is rendered through a portal anchored to the grid's own root element, so it overlays the grid instead of being clipped by the table's horizontal scroll container — similar to an Excel-style filter panel.
+Any column with `filterable: true` gets a filter icon in its header. Clicking it opens a popup with two tabs, similar to AG Grid:
+
+- **Filter** (the default tab) — an operator-driven condition builder. Pick an operator (e.g. "Contains", "Greater than", "Before", "In range", "Blank"), type a value, and the grid filters live as you type (debounced) or as soon as you change the operator/checkbox/radio — there's no separate "Apply" button to click. Check **Add another condition** to add a second operator/value row combined with the first via **AND**/**OR**. Use **Clear** to remove the condition filter for that column.
+- **Select** — the original searchable, multi-select checkbox list of the column's unique values (derived from `data`, via `getValue` if provided).
+
+Both tabs' filters combine with AND across different columns. Within one column, a condition filter's own two conditions combine via the AND/OR you chose, and the Select tab's checked values combine via OR with each other (so a Select filter and a Filter-tab condition on the *same* column both have to match, same as AG Grid's "Filter" + "Set Filter" combination).
+
+Which operators are offered depends on the column's type — `'text'` (contains/not contains/equals/not equal/starts with/ends with/blank/not blank), `'number'` (equals/not equal/greater than/greater than or equal/less than/less than or equal/in range/blank/not blank), or `'date'` (equals/not equal/before/after/in range/blank/not blank). Set it explicitly via `filterType` on the column, or leave it out and the grid infers it from the first non-null value in `data` for that column (numbers → `'number'`, `Date` instances → `'date'`, booleans → `'boolean'`, otherwise `'text'`).
+
+The popup is rendered through a portal anchored to the grid's own root element, so it overlays the grid instead of being clipped by the table's horizontal scroll container — similar to an Excel-style filter panel.
+
+```tsx
+import { DataTable, type ColumnConfig, type ConditionFilter } from 'flexi-datagrid';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  salary: number;
+  hiredAt: Date;
+}
+
+const columns: ColumnConfig<Employee>[] = [
+  { key: 'name', header: 'Name', filterable: true, filterType: 'text' },
+  { key: 'department', header: 'Department', filterable: true, filterType: 'text' },
+  { key: 'salary', header: 'Salary', filterable: true, filterType: 'number' },
+  {
+    key: 'hiredAt',
+    header: 'Hired',
+    filterable: true,
+    filterType: 'date',
+    render: (value: Date) => value.toLocaleDateString(),
+  },
+];
+
+<DataTable<Employee>
+  columns={columns}
+  data={data}
+  rowKey="id"
+  onConditionFilterChange={(conditionFilters: Record<string, ConditionFilter>) =>
+    console.log('condition filters', conditionFilters)
+  }
+/>
+```
+
+With the columns above, opening the **Salary** header's filter and choosing "Greater than" with `80000`, then checking **Add another condition** and choosing "Less than" with `120000` (combinator `AND`), keeps only rows with `80000 < salary < 120000` — no clicking required beyond typing the two values.
 
 ### Sorting
 
@@ -403,8 +452,8 @@ const data: Employee[] = [
 ];
 
 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: 'city', header: 'City', sortable: true, filterable: true, filterType: 'text', minWidth: 100, maxWidth: 240 },
+  { key: 'department', header: 'Department', sortable: true, filterable: true, filterType: 'text', minWidth: 120 },
   {
     key: 'name',
     header: 'Name',

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

@@ -0,0 +1,8 @@
+/**
+ * The AG Grid-style "Filter" tab: up to two operator-driven conditions joined by AND/OR.
+ * Applies live (debounced while typing, instantly on operator/combinator changes) so it behaves
+ * like the existing "Select" tab's checkboxes rather than requiring an extra click to take effect.
+ */
+export declare function ConditionFilterPanel({ columnKey }: {
+    columnKey: string;
+}): import("react").JSX.Element;

package/dist/DataTable/constants.d.ts

@@ -1,3 +1,4 @@
+import type { FilterOperator, FilterType } from './types';
 export declare const DEFAULT_ROW_HEIGHT = 40;
 export declare const DEFAULT_COL_WIDTH = 150;
 export declare const MIN_COL_WIDTH = 60;
@@ -9,3 +10,10 @@ 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[];
+export interface FilterOperatorOption {
+    value: FilterOperator;
+    label: string;
+    /** How many free-text value inputs this operator needs (0 = none, 2 = "in range"). */
+    valueCount: 0 | 1 | 2;
+}
+export declare const FILTER_OPERATORS_BY_TYPE: Record<FilterType, FilterOperatorOption[]>;

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

@@ -1,13 +1,18 @@
 import { type RefObject } from 'react';
-import type { ColumnConfig } from '../types';
+import type { ColumnConfig, ConditionFilter, FilterType } from '../types';
+export type FilterTab = 'condition' | 'values';
 interface ColumnFiltersOptions<T> {
     data: T[];
     columnsByKey: Map<string, ColumnConfig<T>>;
     gridRootRef: RefObject<HTMLElement | null>;
+    onConditionFilterChange?: (conditionFilters: Record<string, ConditionFilter>) => void;
 }
-export declare function useColumnFilters<T>({ data, columnsByKey, gridRootRef }: ColumnFiltersOptions<T>): {
+export declare function useColumnFilters<T>({ data, columnsByKey, gridRootRef, onConditionFilterChange }: ColumnFiltersOptions<T>): {
     activeFilterKey: string | null;
+    filterTab: FilterTab;
+    setFilterTab: import("react").Dispatch<import("react").SetStateAction<FilterTab>>;
     selectedFilters: Record<string, unknown[]>;
+    conditionFilters: Record<string, ConditionFilter>;
     filterSearchQuery: string;
     setFilterSearchQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
     filterPosition: {
@@ -16,10 +21,13 @@ export declare function useColumnFilters<T>({ data, columnsByKey, gridRootRef }:
     } | null;
     dropdownRef: RefObject<HTMLDivElement | null>;
     filteredUniqueValues: unknown[];
+    activeColumnFilterType: FilterType;
     registerFilterButton: (key: string, el: HTMLButtonElement | null) => void;
     toggleFilterDropdown: (columnKey: string) => void;
     handleFilterChange: (columnKey: string, value: unknown) => void;
     clearFilter: (columnKey: string) => void;
+    setConditionFilter: (columnKey: string, filter: ConditionFilter | null) => void;
+    clearConditionFilter: (columnKey: string) => void;
 };
 export type ColumnFilters = ReturnType<typeof useColumnFilters>;
 export {};

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

@@ -3,7 +3,7 @@ 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>): {
+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, onConditionFilterChange, }: DataTableProps<T>): {
     gridRootRef: import("react").RefObject<HTMLDivElement | null>;
     tableWrapRef: import("react").RefObject<HTMLDivElement | null>;
     rowKey: keyof T | ((record: T) => string);
@@ -59,7 +59,10 @@ export declare function useDataTableState<T>({ columns, data, rowKey, actions, i
     handleSort: (columnKey: string) => void;
     filters: {
         activeFilterKey: string | null;
+        filterTab: import("./useColumnFilters").FilterTab;
+        setFilterTab: import("react").Dispatch<import("react").SetStateAction<import("./useColumnFilters").FilterTab>>;
         selectedFilters: Record<string, unknown[]>;
+        conditionFilters: Record<string, import("..").ConditionFilter>;
         filterSearchQuery: string;
         setFilterSearchQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
         filterPosition: {
@@ -68,10 +71,13 @@ export declare function useDataTableState<T>({ columns, data, rowKey, actions, i
         } | null;
         dropdownRef: import("react").RefObject<HTMLDivElement | null>;
         filteredUniqueValues: unknown[];
+        activeColumnFilterType: import("..").FilterType;
         registerFilterButton: (key: string, el: HTMLButtonElement | null) => void;
         toggleFilterDropdown: (columnKey: string) => void;
         handleFilterChange: (columnKey: string, value: unknown) => void;
         clearFilter: (columnKey: string) => void;
+        setConditionFilter: (columnKey: string, filter: import("..").ConditionFilter | null) => void;
+        clearConditionFilter: (columnKey: string) => void;
     };
     currentPage: number;
     pageSize: number;

package/dist/DataTable/index.d.ts

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

package/dist/DataTable/types.d.ts

@@ -9,6 +9,8 @@ export interface ColumnConfig<T> {
     render?: (value: any, record: T) => ReactNode;
     pinnedRender?: (value: any, record: T) => ReactNode;
     filterable?: boolean;
+    /** Operator set shown in the condition filter tab. Auto-detected from the first non-null value when omitted. */
+    filterType?: FilterType;
     sortable?: boolean;
     pinned?: boolean | 'left' | 'right';
     children?: ColumnConfig<T>[];
@@ -23,6 +25,20 @@ export interface SortState {
     key: string | null;
     direction: SortDirection;
 }
+/** Data type driving which operators the condition filter offers for a column. */
+export type FilterType = 'text' | 'number' | 'date' | 'boolean';
+export type FilterOperator = 'contains' | 'notContains' | 'equals' | 'notEqual' | 'startsWith' | 'endsWith' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'inRange' | 'before' | 'after' | 'blank' | 'notBlank';
+export interface FilterCondition {
+    operator: FilterOperator;
+    value?: unknown;
+    /** Second bound, only used by `inRange`. */
+    valueTo?: unknown;
+}
+/** An AG Grid-style condition filter for one column: up to two conditions joined by AND/OR. */
+export interface ConditionFilter {
+    conditions: FilterCondition[];
+    combinator: 'AND' | 'OR';
+}
 export interface DataTableProps<T> {
     columns: ColumnConfig<T>[];
     data: T[];
@@ -54,6 +70,7 @@ export interface DataTableProps<T> {
     defaultPageSize?: number;
     pageSizeOptions?: number[];
     onPageChange?: (page: number, pageSize: number) => void;
+    onConditionFilterChange?: (conditionFilters: Record<string, ConditionFilter>) => void;
 }
 /** A group header produced by `groupBy`. */
 export interface GroupNode<T> {

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

@@ -1,4 +1,4 @@
-import type { ColumnConfig, SortDirection } from '../types';
+import type { ColumnConfig, ConditionFilter, FilterCondition, FilterType, 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). */
@@ -6,5 +6,10 @@ export declare const getRowKeyValue: <T>(record: T, rowKey: keyof T | ((record:
 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[];
+/** Infers a column's condition-filter type from its first non-null value. `column.filterType` always wins. */
+export declare const detectFilterType: <T>(data: T[], key: string, column?: ColumnConfig<T>) => FilterType;
+export declare const matchesCondition: (fieldValue: unknown, condition: FilterCondition, type: FilterType) => boolean;
+/** Applies AG Grid-style condition filters (1-2 operator conditions per column, joined by AND/OR). */
+export declare const applyConditionFilters: <T>(data: T[], conditionFilters: Record<string, ConditionFilter>, 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/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:left;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;padding:4px 10px;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%;height: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:left;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:15rem;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-filter-tabs{border-bottom:1px solid #f1f5f9;gap:.25rem;margin-bottom:.25rem;padding:0 .5rem .5rem;display:flex}.flexi-filter-tab{color:#64748b;text-align:center;background-color:#0000;border-radius:.25rem;flex:1;padding:.25rem .5rem;font-size:11px;font-weight:500}.flexi-filter-tab:hover{background-color:#f8fafc}.flexi-filter-tab--active{color:#2563eb;background-color:#eff6ff}.flexi-condition-filter{flex-direction:column;gap:.5rem;padding:0 .5rem;display:flex}.flexi-condition-row{flex-direction:column;gap:.375rem;display:flex}.flexi-condition-values{gap:.375rem;display:flex}.flexi-condition-values .flexi-input{flex:1;min-width:0}.flexi-condition-toggle{padding:.25rem 0}.flexi-condition-combinator{color:#475569;gap:1rem;font-size:12px;display:flex}.flexi-condition-combinator label{cursor:pointer;align-items:center;gap:.25rem;display:flex}.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;padding:4px 10px;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*/