@infinite-table/infinite-react 0.0.2-canary.2 → 0.0.2-canary.3

package/index.d.ts

@@ -105,6 +105,15 @@ declare module "utils/debug" {
         constructor(channelName: string);
     }
 }
+declare module "utils/proxyFnCall" {
+    export function proxyFn<T_PARAM_TO_PROXY, T_FN_PARAMETERS, T_RESULT extends any>(fn: (...params: T_FN_PARAMETERS[]) => T_RESULT, config?: {
+        getProxyTargetFromArgs: (...params: T_FN_PARAMETERS[]) => T_PARAM_TO_PROXY;
+        putProxyToArgs: (proxy: T_PARAM_TO_PROXY, ...params: T_FN_PARAMETERS[]) => T_FN_PARAMETERS[];
+    }): {
+        fn: (...params: T_FN_PARAMETERS[]) => T_RESULT;
+        propertyReads: Set<string>;
+    };
+}
 declare module "utils/toUpperFirst" {
     export const toUpperFirst: (s: string) => string;
     export default toUpperFirst;
@@ -116,7 +125,7 @@ declare module "components/utils/isControlled" {
     export function isControlled<V extends keyof T, T>(propName: V, props: T): boolean;
 }
 declare module "components/hooks/useLatest" {
-    export const useLatest: <T>(value: T) => () => T;
+    export function useLatest<T>(value: T): () => T;
 }
 declare module "components/hooks/usePrevious" {
     export const usePrevious: <T>(value: T, initialValue?: T | undefined) => T;
@@ -129,47 +138,52 @@ declare module "components/hooks/useComponentState" {
         getComponentState: () => T_STATE;
         componentState: T_STATE;
         componentActions: T_ACTIONS;
-        updateStateProperty: <T extends keyof T_STATE>(propertyName: T, propertyValue: T_STATE[T]) => void;
     };
     type ComponentStateGeneratedActions<T_STATE> = {
         [k in keyof T_STATE]: T_STATE[k] | React.SetStateAction<T_STATE[k]>;
     };
-    export type ComponentStateActions<T_STATE, T_ACTIONS = {}> = ComponentStateGeneratedActions<T_STATE> & T_ACTIONS;
-    type ComponentStateRootConfig<T_PROPS, T_STATE, T_READONLY_STATE = {}, T_ACTIONS = {}, T_PARENT_STATE = {}> = {
-        getInitialState: (params: {
+    export type ComponentStateActions<T_STATE> = ComponentStateGeneratedActions<T_STATE>;
+    export type ForwardPropsToStateFnResult<TYPE_PROPS, TYPE_RESULT> = Partial<{
+        [propName in keyof TYPE_PROPS & keyof TYPE_RESULT]: 1 | ((value: TYPE_PROPS[propName]) => TYPE_RESULT[propName]);
+    }>;
+    type ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT_SETUP_STATE = {}, COMPONENT_DERIVED_STATE = {}, T_ACTIONS = {}, T_PARENT_STATE = {}> = {
+        initSetupState?: () => COMPONENT_SETUP_STATE;
+        forwardProps?: () => ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>;
+        allowedControlledPropOverrides?: Record<keyof T_PROPS, true>;
+        mapPropsToState?: (params: {
             props: T_PROPS;
+            state: COMPONENT_MAPPED_STATE & COMPONENT_SETUP_STATE & Partial<COMPONENT_DERIVED_STATE>;
+            oldState: null | (COMPONENT_MAPPED_STATE & COMPONENT_SETUP_STATE & Partial<COMPONENT_DERIVED_STATE>);
             parentState: T_PARENT_STATE | null;
-        }) => T_STATE;
+        }) => COMPONENT_DERIVED_STATE;
         concludeReducer?: (params: {
-            previousState: T_STATE;
-            state: T_STATE;
-            updated: Partial<T_STATE> | null;
+            previousState: COMPONENT_MAPPED_STATE & COMPONENT_SETUP_STATE & COMPONENT_DERIVED_STATE;
+            state: COMPONENT_MAPPED_STATE & COMPONENT_SETUP_STATE & COMPONENT_DERIVED_STATE;
+            updatedProps: Partial<T_PROPS> | null;
             parentState: T_PARENT_STATE | null;
-        }) => T_STATE;
+        }) => COMPONENT_MAPPED_STATE & COMPONENT_SETUP_STATE & COMPONENT_DERIVED_STATE;
         getReducerActions?: (dispatch: React.Dispatch<any>) => T_ACTIONS;
-        deriveReadOnlyState?: (params: {
-            props: T_PROPS;
-            state: T_STATE;
-            updated: Partial<T_STATE> | null;
-            parentState: T_PARENT_STATE | null;
-        }) => T_READONLY_STATE;
         getParentState?: () => T_PARENT_STATE;
         onControlledPropertyChange?: (name: string, newValue: any, oldValue: any) => void | ((value: any, oldValue: any) => any);
     };
-    export function getComponentStateRoot<T_PROPS, T_STATE extends object, T_READONLY_STATE extends object = {}, T_ACTIONS = {}, T_PARENT_STATE = {}>(config: ComponentStateRootConfig<T_PROPS, T_STATE, T_READONLY_STATE, T_ACTIONS, T_PARENT_STATE>): React.NamedExoticComponent<T_PROPS & {
+    export function getComponentStateRoot<T_PROPS, COMPONENT_MAPPED_STATE extends object, COMPONENT_SETUP_STATE extends object = {}, COMPONENT_DERIVED_STATE extends object = {}, T_ACTIONS = {}, T_PARENT_STATE = {}>(config: ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT_SETUP_STATE, COMPONENT_DERIVED_STATE, T_ACTIONS, T_PARENT_STATE>): React.NamedExoticComponent<T_PROPS & {
         children: React.ReactNode;
     }>;
-    export function useComponentState<T_STATE, T_READONLY_STATE = {}, T_ACTIONS = {}>(): ComponentStateContext<T_STATE & T_READONLY_STATE, ComponentStateActions<T_STATE, T_ACTIONS>>;
+    export function useComponentState<COMPONENT_STATE>(): ComponentStateContext<COMPONENT_STATE, ComponentStateGeneratedActions<COMPONENT_STATE>>;
+}
+declare module "components/types/NonUndefined" {
+    export type NonUndefined<T> = T extends undefined ? never : T;
 }
 declare module "components/DataSource/types" {
     import * as React from 'react';
     import { MultisortInfo } from "utils/multisort/index";
     import { DeepMap } from "utils/DeepMap";
     import { AggregationReducer, DeepMapGroupValueType, GroupBy, GroupKeyType, PivotBy } from "utils/groupAndPivot/index";
-    import { InfiniteTableColumn, InfiniteTableColumnGroup, InfiniteTableEnhancedData } from "components/InfiniteTable/index";
+    import { InfiniteTableColumn, InfiniteTableColumnGroup, InfiniteTableRowInfo } from "components/InfiniteTable/index";
     import { ComponentStateActions } from "components/hooks/useComponentState";
     import { GroupRowsState } from "components/DataSource/GroupRowsState";
     import { InfiniteTablePropPivotTotalColumnPosition } from "components/InfiniteTable/types/InfiniteTableState";
+    import { NonUndefined } from "components/types/NonUndefined";
     export interface DataSourceDataInfo<T> {
         originalDataArray: T[];
     }
@@ -192,10 +206,39 @@ declare module "components/DataSource/types" {
     };
     export type DataSourcePropGroupRowsBy<T> = DataSourceGroupRowsBy<T>[];
     export type DataSourcePropPivotBy<T> = DataSourcePivotBy<T>[];
+    export interface DataSourceMappedState<T> {
+        remoteCount: DataSourceProps<T>['remoteCount'];
+        data: DataSourceProps<T>['data'];
+        primaryKey: DataSourceProps<T>['primaryKey'];
+        groupRowsBy: NonUndefined<DataSourceProps<T>['groupRowsBy']>;
+        groupRowsState: NonUndefined<DataSourceProps<T>['groupRowsState']>;
+        pivotBy: DataSourceProps<T>['pivotBy'];
+        loading: NonUndefined<DataSourceProps<T>['loading']>;
+        sortInfo: DataSourceSingleSortInfo<T>[] | null;
+    }
+    export interface DataSourceSetupState<T> {
+        originalDataArray: T[];
+        lastSortDataArray?: T[];
+        lastGroupDataArray?: InfiniteTableRowInfo<T>[];
+        dataArray: InfiniteTableRowInfo<T>[];
+        groupDeepMap?: DeepMap<GroupKeyType, DeepMapGroupValueType<T, any>>;
+        pivotTotalColumnPosition: InfiniteTablePropPivotTotalColumnPosition;
+        updatedAt: number;
+        reducedAt: number;
+        groupedAt: number;
+        sortedAt: number;
+        generateGroupRows: boolean;
+        aggregationReducers?: AggregationReducer<T, any>[];
+        postSortDataArray?: T[];
+        postGroupDataArray?: InfiniteTableRowInfo<T>[];
+        pivotColumns?: Map<string, InfiniteTableColumn<T>>;
+        pivotColumnGroups?: Map<string, InfiniteTableColumnGroup>;
+    }
     export interface DataSourceProps<T> {
-        children: React.ReactNode | ((contextData: DataSourceComponentState<T>) => React.ReactNode);
+        children: React.ReactNode | ((contextData: DataSourceState<T>) => React.ReactNode);
         primaryKey: keyof T;
         fields?: (keyof T)[];
+        remoteCount?: number;
         data: DataSourceData<T>;
         loading?: boolean;
         defaultLoading?: boolean;
@@ -213,39 +256,15 @@ declare module "components/DataSource/types" {
         defaultSortInfo?: DataSourceSortInfo<T>;
         onSortInfoChange?: (sortInfo: DataSourceSortInfo<T>) => void;
     }
-    export interface DataSourceState<T> extends DataSourceDataInfo<T> {
-        data: DataSourceData<T>;
-        loading: boolean;
-        sortInfo?: DataSourceSortInfo<T>;
-        dataArray: InfiniteTableEnhancedData<T>[];
-        groupRowsBy: DataSourcePropGroupRowsBy<T>;
-        pivotBy?: DataSourcePropPivotBy<T>;
-        pivotColumns?: Map<string, InfiniteTableColumn<T>>;
-        pivotColumnGroups?: Map<string, InfiniteTableColumnGroup>;
-        aggregationReducers?: AggregationReducer<T, any>[];
-        groupRowsState: GroupRowsState;
-        sortedAt: number;
-        groupedAt: number;
-        updatedAt: number;
-        reducedAt: number;
-        pivotTotalColumnPosition?: InfiniteTablePropPivotTotalColumnPosition;
+    export interface DataSourceState<T> extends DataSourceSetupState<T>, DataSourceDerivedState<T>, DataSourceMappedState<T> {
     }
-    export interface DataSourceReadOnlyState<T> {
+    export interface DataSourceDerivedState<_T> {
         multiSort: boolean;
-        sortInfo: DataSourceSingleSortInfo<T>[];
-        primaryKey: keyof T;
-        groupDeepMap?: DeepMap<GroupKeyType, DeepMapGroupValueType<T, any>>;
-        lastSortDataArray?: T[];
-        postSortDataArray?: T[];
-        lastGroupDataArray?: InfiniteTableEnhancedData<T>[];
-        postGroupDataArray?: InfiniteTableEnhancedData<T>[];
-    }
-    export interface DataSourceComponentState<T> extends Omit<DataSourceState<T>, 'sortInfo'>, DataSourceReadOnlyState<T> {
     }
     export type DataSourceComponentActions<T> = ComponentStateActions<DataSourceState<T>>;
     export interface DataSourceContextValue<T> {
-        getState: () => DataSourceComponentState<T>;
-        componentState: DataSourceComponentState<T>;
+        getState: () => DataSourceState<T>;
+        componentState: DataSourceState<T>;
         componentActions: DataSourceComponentActions<T>;
     }
     export enum DataSourceActionType {
@@ -265,8 +284,9 @@ declare module "components/DataSource/DataSourceContext" {
     export function getDataSourceContext<T>(): React.Context<DataSourceContextValue<T>>;
 }
 declare module "components/DataSource/publicHooks/useDataSource" {
-    import { DataSourceComponentState, DataSourceContextValue } from "components/DataSource/types";
-    export function useDataSource<T>(): DataSourceComponentState<T>;
+    import { DataSourceContextValue } from "components/DataSource/types";
+    import { DataSourceState } from "components/DataSource/index";
+    export function useDataSource<T>(): DataSourceState<T>;
     export function useDataSourceContextValue<T>(): DataSourceContextValue<T>;
 }
 declare module "components/DataSource/privateHooks/buildDataSourceDataInfo" {
@@ -287,23 +307,31 @@ declare module "components/DataSource/state/normalizeSortInfo" {
     export const normalizeSortInfo: <T>(sortInfo?: DataSourceSortInfo<T> | undefined) => DataSourceSingleSortInfo<T>[];
 }
 declare module "components/DataSource/state/getInitialState" {
-    import { DataSourceProps, DataSourceReadOnlyState, DataSourceState } from "components/DataSource/types";
-    export function getInitialState<T>(params: {
-        props: DataSourceProps<T>;
-    }): DataSourceState<T>;
-    export function deriveReadOnlyState<T extends any>(params: {
+    import { DataSourceMappedState, DataSourceProps, DataSourceDerivedState, DataSourceSetupState, DataSourceState } from "components/DataSource/types";
+    import { GroupRowsState } from "components/DataSource/GroupRowsState";
+    import { ForwardPropsToStateFnResult } from "components/hooks/useComponentState";
+    export function initSetupState<T>(): DataSourceSetupState<T>;
+    export const forwardProps: <T>() => Partial<{
+        data: 1 | ((value: import("components/DataSource/types").DataSourceData<T>) => import("components/DataSource/types").DataSourceData<T>);
+        loading: 1 | ((value: boolean | undefined) => boolean);
+        remoteCount: 1 | ((value: number | undefined) => number | undefined);
+        primaryKey: 1 | ((value: keyof T) => keyof T);
+        groupRowsBy: 1 | ((value: import("components/DataSource/types").DataSourcePropGroupRowsBy<T> | undefined) => import("components/DataSource/types").DataSourcePropGroupRowsBy<T>);
+        groupRowsState: 1 | ((value: GroupRowsState<any> | undefined) => GroupRowsState<any>);
+        pivotBy: 1 | ((value: import("components/DataSource/types").DataSourcePropPivotBy<T> | undefined) => import("components/DataSource/types").DataSourcePropPivotBy<T> | undefined);
+        sortInfo: 1 | ((value: import("components/DataSource/types").DataSourceSortInfo<T> | undefined) => import("components/DataSource/types").DataSourceSingleSortInfo<T>[] | null);
+    }>;
+    export function mapPropsToState<T extends any>(params: {
         props: DataSourceProps<T>;
         state: DataSourceState<T>;
-        updated: Partial<DataSourceState<T>> | null;
-    }): DataSourceReadOnlyState<T>;
+    }): DataSourceDerivedState<T>;
 }
 declare module "components/DataSource/state/reducer" {
-    import type { DataSourceState, DataSourceReadOnlyState } from "components/DataSource/types";
+    import type { DataSourceState, DataSourceDerivedState } from "components/DataSource/types";
     export function concludeReducer<T>(params: {
-        previousState: DataSourceState<T> & DataSourceReadOnlyState<T>;
-        state: DataSourceState<T> & DataSourceReadOnlyState<T>;
-        updated: Partial<DataSourceState<T> & DataSourceReadOnlyState<T>> | null;
-    }): DataSourceState<T> & DataSourceReadOnlyState<T>;
+        previousState: DataSourceState<T> & DataSourceDerivedState<T>;
+        state: DataSourceState<T> & DataSourceDerivedState<T>;
+    }): DataSourceState<T> & DataSourceDerivedState<T>;
 }
 declare module "components/DataSource/index" {
     import { DataSourceProps } from "components/DataSource/types";
@@ -360,28 +388,37 @@ declare module "components/InfiniteTable/types/Utility" {
 }
 declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     import type { Renderable } from "components/types/Renderable";
-    import type { DataSourceComponentState, DataSourcePivotBy, DataSourceSingleSortInfo } from "components/DataSource/types";
+    import type { DataSourcePivotBy, DataSourceSingleSortInfo, DataSourceState } from "components/DataSource/types";
     import type { DiscriminatedUnion, RequireAtLeastOne } from "components/InfiniteTable/types/Utility";
-    import type { InfiniteTableEnhancedData } from "components/InfiniteTable/types/index";
+    import type { InfiniteTableRowInfo } from "components/InfiniteTable/types/index";
     import { CSSProperties } from 'react';
     export type { DiscriminatedUnion, RequireAtLeastOne };
     export type InfiniteTableToggleGroupRowFn = (groupKeys: any[]) => void;
-    export interface InfiniteTableColumnRenderParams<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> {
+    export interface InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> {
         value: string | number | Renderable;
         data: DATA_TYPE | null;
-        enhancedData: InfiniteTableEnhancedData<DATA_TYPE>;
+        rowInfo: InfiniteTableRowInfo<DATA_TYPE>;
+        groupRowInfo: InfiniteTableRowInfo<DATA_TYPE> | null;
         rowIndex: number;
         column: COL_TYPE;
         toggleCurrentGroupRow: () => void;
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
-        groupRowsBy: DataSourceComponentState<DATA_TYPE>['groupRowsBy'];
+        groupRowsBy: DataSourceState<DATA_TYPE>['groupRowsBy'];
     }
+    export type InfiniteTableColumnRowspanFnParams<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = {
+        data: DATA_TYPE | null;
+        rowInfo: InfiniteTableRowInfo<DATA_TYPE>;
+        groupRowInfo: InfiniteTableRowInfo<DATA_TYPE> | null;
+        dataArray: InfiniteTableRowInfo<DATA_TYPE>[];
+        rowIndex: number;
+        column: COL_TYPE;
+    };
     export interface InfiniteTableColumnHeaderRenderParams<T> {
         column: InfiniteTableComputedColumn<T>;
         columnSortInfo: DataSourceSingleSortInfo<T> | null | undefined;
     }
     export type InfiniteTableColumnPinned = 'start' | 'end' | false;
-    export type InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = ({ value, rowIndex, column, data, toggleGroupRow, toggleCurrentGroupRow, enhancedData, groupRowsBy: groupBy, }: InfiniteTableColumnRenderParams<DATA_TYPE, COL_TYPE>) => Renderable | null;
+    export type InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = ({ value, rowIndex, column, data, toggleGroupRow, toggleCurrentGroupRow, rowInfo, groupRowsBy, }: InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>) => Renderable | null;
     export type InfiniteTableColumnHeaderRenderFunction<T> = ({ columnSortInfo, column, }: InfiniteTableColumnHeaderRenderParams<T>) => Renderable;
     export type InfiniteTableColumnWithField<T> = {
         field: keyof T;
@@ -389,6 +426,9 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     export type InfiniteTableColumnWithRender<T> = {
         render: InfiniteTableColumnRenderFunction<T>;
     };
+    export type InfiniteTableColumnWithRenderValue<T> = {
+        renderValue: InfiniteTableColumnRenderFunction<T>;
+    };
     export type InfiniteTableColumnAlign = 'start' | 'center' | 'end';
     export type InfiniteTableColumnVerticalAlign = 'start' | 'center' | 'end';
     export type InfiniteTableColumnHeader<T> = Renderable | InfiniteTableColumnHeaderRenderFunction<T>;
@@ -402,15 +442,16 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     };
     export type InfiniteTableColumnWithSize = DiscriminatedUnion<InfiniteTableColumnWithFlex, InfiniteTableColumnWithWidth>;
     export type InfiniteTableColumnTypes = 'string' | 'number' | 'date';
-    export type InfiniteTableColumnWithRenderOrFieldOrValueGetter<T> = RequireAtLeastOne<{
+    export type InfiniteTableColumnWithRenderOrRenderValueOrFieldOrValueGetter<T> = RequireAtLeastOne<{
         field?: keyof T;
         render?: InfiniteTableColumnRenderFunction<T>;
+        renderValue?: InfiniteTableColumnRenderFunction<T>;
         valueGetter?: InfiniteTableColumnValueGetter<T>;
-    }, 'render' | 'field' | 'valueGetter'>;
+    }, 'render' | 'renderValue' | 'field' | 'valueGetter'>;
     export type InfiniteTableColumnStyleFnParams<T> = {
         data: T | null;
         value: Renderable;
-        enhancedData: InfiniteTableEnhancedData<T>;
+        rowInfo: InfiniteTableRowInfo<T>;
         column: InfiniteTableColumn<T>;
     };
     export type InfiniteTableColumnStyleFn<T> = (params: InfiniteTableColumnStyleFnParams<T>) => undefined | React.CSSProperties;
@@ -419,9 +460,11 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     export type InfiniteTableColumnClassName<T> = string | InfiniteTableColumnClassNameFn<T>;
     export type InfiniteTableColumnValueGetterParams<T> = {
         data: T | null;
-        enhancedData: InfiniteTableEnhancedData<T>;
+        rowInfo: InfiniteTableRowInfo<T>;
+        groupRowInfo: InfiniteTableRowInfo<T> | null;
     };
     export type InfiniteTableColumnValueGetter<T, VALUE_GETTER_TYPE = Renderable> = (params: InfiniteTableColumnValueGetterParams<T>) => VALUE_GETTER_TYPE;
+    export type InfiniteTableColumnRowspanFn<T> = (params: InfiniteTableColumnRowspanFnParams<T>) => number;
     export type InfiniteTableBaseColumn<T> = {
         maxWidth?: number;
         minWidth?: number;
@@ -437,12 +480,12 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         type?: InfiniteTableColumnTypes;
         style?: InfiniteTableColumnStyle<T>;
         className?: InfiniteTableColumnClassName<T>;
+        rowspan?: InfiniteTableColumnRowspanFn<T>;
         valueGetter?: InfiniteTableColumnValueGetter<T>;
     };
-    export type InfiniteTableColumn<T> = {} & InfiniteTableBaseColumn<T> & InfiniteTableColumnWithRenderOrFieldOrValueGetter<T> & InfiniteTableColumnWithSize;
+    export type InfiniteTableColumn<T> = {} & InfiniteTableBaseColumn<T> & InfiniteTableColumnWithRenderOrRenderValueOrFieldOrValueGetter<T> & InfiniteTableColumnWithSize;
     export type InfiniteTableGeneratedGroupColumn<T> = InfiniteTableColumn<T> & {
         groupByField?: string | string[];
-        renderValue?: InfiniteTableColumnRenderFunction<T>;
     };
     export type InfiniteTablePivotColumn<T> = InfiniteTableColumn<T> & {
         pivotBy?: DataSourcePivotBy<T>[];
@@ -488,16 +531,19 @@ declare module "utils/groupAndPivot/index" {
         reducer: (accumulator: any, value: any, data: T) => AggregationResultType | any;
         done?: (accumulatedValue: AggregationResultType | any, array: T[]) => AggregationResultType;
     };
-    export interface InfiniteTableEnhancedData<T> {
+    export interface InfiniteTableRowInfo<T> {
         id: any;
         data: T | null;
         groupData?: T[];
         value?: any;
         isGroupRow?: boolean;
         collapsed: boolean;
+        collapsedChildrenCount?: number;
+        collapsedGroupsCount?: number;
         groupNesting?: number;
         groupKeys?: any[];
-        parentGroupKeys?: any[];
+        parents?: InfiniteTableEnhancedGroupInfo<T>[];
+        indexInParentGroups?: number[];
         indexInGroup: number;
         indexInAll: number;
         groupCount?: number;
@@ -505,11 +551,13 @@ declare module "utils/groupAndPivot/index" {
         pivotValuesMap?: PivotValuesDeepMap<T, any>;
         reducerResults?: any[];
     }
-    export interface InfiniteTableEnhancedGroupData<T> extends InfiniteTableEnhancedData<T> {
+    export interface InfiniteTableEnhancedGroupInfo<T> extends InfiniteTableRowInfo<T> {
         data: null;
         groupData: T[];
         value: any;
         isGroupRow: true;
+        collapsedChildrenCount: number;
+        collapsedGroupsCount: number;
         groupNesting: number;
         groupKeys?: any[];
         groupCount: number;
@@ -550,8 +598,14 @@ declare module "utils/groupAndPivot/index" {
     };
     export function group<DataType, KeyType = any>(groupParams: GroupParams<DataType, KeyType>, data: DataType[]): DataGroupResult<DataType, KeyType>;
     export function flatten<DataType, KeyType extends any>(groupResult: DataGroupResult<DataType, KeyType>): DataType[];
-    export function enhancedFlatten<DataType, KeyType = any>(groupResult: DataGroupResult<DataType, KeyType>, toPrimaryKey: (data: DataType) => any, groupRowsState?: GroupRowsState): {
-        data: InfiniteTableEnhancedData<DataType>[];
+    export type EnhancedFlattenParam<DataType, KeyType = any> = {
+        groupResult: DataGroupResult<DataType, KeyType>;
+        toPrimaryKey: (data: DataType) => any;
+        groupRowsState?: GroupRowsState;
+        generateGroupRows: boolean;
+    };
+    export function enhancedFlatten<DataType, KeyType = any>(param: EnhancedFlattenParam<DataType, KeyType>): {
+        data: InfiniteTableRowInfo<DataType>[];
     };
     export type ComputedColumnsAndGroups<DataType> = {
         columns: InfiniteTablePropColumns<DataType, InfiniteTablePivotColumn<DataType>>;
@@ -559,13 +613,138 @@ declare module "utils/groupAndPivot/index" {
     };
     export function getPivotColumnsAndColumnGroups<DataType, KeyType = any>(deepMap: DeepMap<KeyType, boolean>, pivotBy: DataSourcePivotBy<DataType>[], pivotTotalColumnPosition: InfiniteTablePropPivotTotalColumnPosition): ComputedColumnsAndGroups<DataType>;
 }
+declare module "components/InfiniteTable/theme.css" {
+    export const ThemeVars: import("@vanilla-extract/private").MapLeafNodes<{
+        theme: string;
+        color: {
+            accent: string;
+            color: string;
+        };
+        spacing: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+        fontSize: {
+            0: string;
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+        };
+        fontFamily: string;
+        minHeight: string;
+        borderRadius: string;
+        background: string;
+        components: {
+            LoadMask: {
+                padding: string;
+                color: string;
+                textBackground: string;
+                overlayBackground: string;
+                overlayOpacity: string;
+                borderRadius: string;
+            };
+            Header: {
+                background: string;
+                color: string;
+                height: string;
+            };
+            HeaderCell: {
+                draggingBackground: string;
+                background: string;
+                padding: string;
+                iconSize: string;
+            };
+            Cell: {
+                padding: string;
+                borderWidth: string;
+                border: string;
+                borderInvisible: string;
+                borderRadius: string;
+            };
+            Row: {
+                color: string;
+                background: string;
+                oddBackground: string;
+                hoverBackground: string;
+                groupRowBackground: string;
+                groupRowColumnNesting: string;
+                groupNesting: string;
+                pointerEventsWhileScrolling: string;
+            };
+            ColumnCell: {
+                background: string;
+            };
+        };
+    }, import("@vanilla-extract/private").CSSVarFunction>;
+}
+declare module "components/InfiniteTable/utilities.css" {
+    export const boxSizingBorderBox: string;
+    export const position: Record<"fixed" | "absolute" | "relative" | "sticky", string>;
+    export const fill: Record<"accentColor" | "currentColor", string>;
+    export const background: Record<"inherit", string>;
+    export const transformTranslateZero: string;
+    export const cursor: Record<"pointer", string>;
+    export const flex: Record<"none" | 1, string>;
+    export const zIndex: Record<1 | 10 | 1000 | 10000 | 100000, string>;
+    export const display: Record<"block" | "flex" | "inlineBlock", string>;
+    export const userSelect: Record<"none", string>;
+    export const height: Record<"0" | "100%", string>;
+    export const width: Record<"0" | "100%", string>;
+    export const top: Record<"0" | "100%", string>;
+    export const left: Record<"0" | "100%", string>;
+    export const bottom: Record<"0" | "100%", string>;
+    export const right: Record<"0" | "100%", string>;
+    export const flexFlow: Record<"column" | "row", string>;
+    export const alignItems: Record<"center" | "stretch", string>;
+    export const justifyContent: Record<"center" | "end" | "start", string>;
+    export const overflow: Record<"auto" | "hidden" | "visible", string>;
+    export const willChange: Record<"transform", string>;
+    export const whiteSpace: Record<"nowrap", string>;
+    export const textOverflow: Record<"ellipsis", string>;
+    export const cssEllipsisClassName: string;
+    export const absoluteCover: string;
+}
+declare module "components/InfiniteTable/components/LoadMask.css" {
+    export const LoadMaskCls: Record<"hidden" | "visible", string>;
+    export const LoadMaskOverlayCls: string;
+    export const LoadMaskTextCls: string;
+}
+declare module "components/InfiniteTable/internalProps" {
+    export const rootClassName = "Infinite";
+    export const internalProps: {
+        rootClassName: string;
+    };
+}
+declare module "components/InfiniteTable/components/LoadMask" {
+    import { Renderable } from "components/types/Renderable";
+    export type LoadMaskProps = {
+        visible: boolean;
+        children: Renderable;
+    };
+    function LoadMaskFn(props: LoadMaskProps): JSX.Element;
+    export const LoadMask: typeof LoadMaskFn;
+}
 declare module "components/InfiniteTable/types/InfiniteTableProps" {
     import * as React from 'react';
     import { InfiniteTableState } from "components/InfiniteTable/types/index";
-    import { AggregationReducer, InfiniteTableEnhancedData } from "utils/groupAndPivot/index";
+    import { AggregationReducer, InfiniteTableRowInfo } from "utils/groupAndPivot/index";
     import { DataSourceGroupRowsBy, DataSourcePropGroupRowsBy, DataSourcePropPivotBy, DataSourceState } from "components/DataSource/index";
     import { Renderable } from "components/types/Renderable";
-    import type { InfiniteTableBaseColumn, InfiniteTableColumn, InfiniteTableColumnRenderFunction, InfiniteTableColumnWithSize, InfiniteTableComputedColumn, InfiniteTableGeneratedGroupColumn, InfiniteTablePivotColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import { LoadMaskProps } from "components/InfiniteTable/components/LoadMask";
+    import type { InfiniteTableBaseColumn, InfiniteTableColumn, InfiniteTableColumnRenderFunction, InfiniteTableColumnWithSize, InfiniteTableComputedColumn, InfiniteTablePivotColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
     import { InfiniteTablePropPivotTotalColumnPosition } from "components/InfiniteTable/types/InfiniteTableState";
     export type InfiniteTablePropColumnOrderNormalized = string[];
     export type InfiniteTablePropColumnOrder = InfiniteTablePropColumnOrderNormalized | true;
@@ -573,7 +752,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
     export type InfiniteTablePropColumnPinning = Map<string, true | 'start' | 'end'>;
     export type InfiniteTableRowStyleFnParams<T> = {
         data: T | null;
-        enhancedData: InfiniteTableEnhancedData<T>;
+        rowInfo: InfiniteTableRowInfo<T>;
         rowIndex: number;
         groupRowsBy?: (keyof T)[];
     };
@@ -599,7 +778,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         ___t?: T;
     };
     export type InfiniteTablePropColumns<T, ColumnType = InfiniteTableColumn<T>> = Map<string, ColumnType>;
-    export type InfiniteTableGeneratedColumns<T> = Map<string, InfiniteTableGeneratedGroupColumn<T>>;
+    export type InfiniteTableColumns<T> = InfiniteTablePropColumns<T>;
     export type InfiniteTablePropColumnGroups = Map<string, InfiniteTableColumnGroup>;
     /**
      * the keys is an array of strings: first string in the array is the column group id, next strings are the ids of all columns in the group
@@ -633,7 +812,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         groupRowsBy: DataSourcePropGroupRowsBy<T>;
         pivotBy: DataSourcePropPivotBy<T>;
     };
-    export type InfiniteTablePropGroupRenderStrategy = 'single-column' | 'multi-column';
+    export type InfiniteTablePropGroupRenderStrategy = 'single-column' | 'multi-column' | 'inline';
     export type InfiniteTableGroupColumnBase<T> = InfiniteTableBaseColumn<T> & InfiniteTableColumnWithSize & {
         renderValue?: InfiniteTableColumnRenderFunction<T>;
     };
@@ -643,14 +822,20 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
     export type InfiniteTablePropGroupColumn<T> = InfiniteTableGroupColumnBase<T> | ((options: GroupColumnGetterOptions<T>, toggleGroupRow: (groupKeys: any[]) => void) => InfiniteTableGroupColumnBase<T>);
     export type InfiniteTablePropPivotColumn<T> = InfiniteTablePivotColumnBase<T> | ((options: PivotColumnGetterOptions<T>) => InfiniteTablePivotColumnBase<T>);
     export type InfiniteTablePropPivotRowLabelsColumn<T> = InfiniteTablePropPivotColumn<T>;
-    export type InfiniteTableProps<T> = {
+    export type InfiniteTablePropComponents = {
+        LoadMask?: React.FC<LoadMaskProps>;
+    };
+    export interface InfiniteTableProps<T> {
         columns: InfiniteTablePropColumns<T>;
         pivotColumns?: InfiniteTablePropColumns<T, InfiniteTablePivotColumn<T>>;
+        loadingText?: Renderable;
+        components?: InfiniteTablePropComponents;
         pivotColumn?: Partial<InfiniteTablePropPivotColumn<T>>;
         pivotRowLabelsColumn?: Partial<InfiniteTablePropPivotRowLabelsColumn<T>>;
         pivotTotalColumnPosition?: InfiniteTablePropPivotTotalColumnPosition;
         groupColumn?: Partial<InfiniteTablePropGroupColumn<T>>;
         groupRenderStrategy?: InfiniteTablePropGroupRenderStrategy;
+        hideEmptyGroupColumns?: boolean;
         columnVisibility?: InfiniteTablePropColumnVisibility;
         defaultColumnVisibility?: InfiniteTablePropColumnVisibility;
         columnPinning?: InfiniteTablePropColumnPinning;
@@ -671,21 +856,36 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         headerHeight: number | string;
         domProps?: React.HTMLProps<HTMLDivElement>;
         showZebraRows?: boolean;
+        showHoverRows?: boolean;
         sortable?: boolean;
         draggableColumns?: boolean;
         header?: boolean;
+        focusedClassName?: string;
+        focusedWithinClassName?: string;
+        focusedStyle?: React.CSSProperties;
+        focusedWithinStyle?: React.CSSProperties;
         columnDefaultWidth?: number;
         columnMinWidth?: number;
         columnMaxWidth?: number;
         virtualizeColumns?: InfiniteTablePropVirtualizeColumns<T>;
         virtualizeRows?: boolean;
+        defaultActiveIndex?: number;
+        activeIndex?: number;
+        onSelfFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
+        onSelfBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+        onFocusWithin?: (event: React.FocusEvent<HTMLDivElement>) => void;
+        onBlurWithin?: (event: React.FocusEvent<HTMLDivElement>) => void;
+        onScrollToTop?: () => void;
+        onScrollToBottom?: () => void;
+        scrollToBottomOffset?: number;
         defaultColumnOrder?: InfiniteTablePropColumnOrder;
         columnOrder?: InfiniteTablePropColumnOrder;
         onColumnOrderChange?: (columnOrder: InfiniteTablePropColumnOrder) => void;
+        onRowHeightChange?: (rowHeight: number) => void;
         onReady?: (api: InfiniteTableImperativeApi<T>) => void;
         rowProps?: React.HTMLProps<HTMLDivElement> | ((rowArgs: InfiniteTableRowStyleFnParams<T>) => React.HTMLProps<HTMLDivElement>);
         licenseKey?: string;
-    };
+    }
 }
 declare module "components/types/Size" {
     export interface Size {
@@ -721,80 +921,105 @@ declare module "components/VirtualBrain/ScrollListener" {
 }
 declare module "components/InfiniteTable/types/InfiniteTableState" {
     import type { ScrollPosition } from "components/types/ScrollPosition";
-    import type { InfiniteTableColumnGroup, InfiniteTableGeneratedColumns, InfiniteTablePropCollapsedColumnGroups, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnVisibility, InfiniteTablePropGroupRenderStrategy, InfiniteTableProps } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTableColumnGroup, InfiniteTableColumns, InfiniteTablePropColumnGroups, InfiniteTableProps } from "components/InfiniteTable/types/InfiniteTableProps";
     import { Size } from "components/types/Size";
-    import { ComponentStateActions } from "components/hooks/useComponentState";
     import { MutableRefObject } from 'react';
     import { SubscriptionCallback } from "components/types/SubscriptionCallback";
     import { ScrollListener } from "components/VirtualBrain/ScrollListener";
-    export interface InfiniteTableState<T> {
+    import { NonUndefined } from "components/types/NonUndefined";
+    import { InfiniteTableColumn, InfiniteTablePivotColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import { ComponentStateActions } from "components/hooks/useComponentState";
+    import { DataSourceGroupRowsBy, DataSourceProps } from "components/DataSource/types";
+    export type GroupRowsMap<T> = Map<keyof T, {
+        groupBy: DataSourceGroupRowsBy<T>;
+        groupIndex: number;
+    }>;
+    export interface InfiniteTableSetupState<T> {
+        columnsWhenInlineGroupRenderStrategy?: Map<string, InfiniteTableColumn<T>>;
         domRef: MutableRefObject<HTMLDivElement | null>;
-        bodyDOMRef: MutableRefObject<HTMLDivElement | null>;
+        scrollerDOMRef: MutableRefObject<HTMLDivElement | null>;
         portalDOMRef: MutableRefObject<HTMLDivElement | null>;
-        bodySizeRef: MutableRefObject<Size | null>;
-        onRowHeightChange: SubscriptionCallback<number>;
-        onHeaderHeightChange: SubscriptionCallback<number>;
-        rowHeightComputed: number;
-        headerHeight: number;
-        columnShifts: null | number[];
-        draggingColumnId: null | string;
+        onRowHeightCSSVarChange: SubscriptionCallback<number>;
+        onHeaderHeightCSSVarChange: SubscriptionCallback<number>;
+        columnsWhenGrouping?: InfiniteTableColumns<T>;
         bodySize: Size;
+        focused: boolean;
+        focusedWithin: boolean;
         scrollPosition: ScrollPosition;
-        columnOrder: InfiniteTablePropColumnOrder;
-        columnVisibility: InfiniteTablePropColumnVisibility;
-        columnPinning: InfiniteTablePropColumnPinning;
-        columnAggregations: InfiniteTablePropColumnAggregations<T>;
-        columnGroups: InfiniteTablePropColumnGroups;
-        collapsedColumnGroups: InfiniteTablePropCollapsedColumnGroups;
-        columnGroupsDepthsMap: InfiniteTableColumnGroupsDepthsMap;
-        columnGroupsMaxDepth: number;
-        columns: InfiniteTableProps<T>['columns'];
-        pivotColumns: InfiniteTableProps<T>['pivotColumns'];
-        computedPivotColumns: InfiniteTableProps<T>['pivotColumns'];
-        pivotColumnGroups?: InfiniteTablePropColumnGroups;
-        computedColumnGroups: InfiniteTablePropColumnGroups;
-        generatedColumns: InfiniteTableGeneratedColumns<T>;
+        draggingColumnId: null | string;
         pinnedStartScrollListener: ScrollListener;
         pinnedEndScrollListener: ScrollListener;
-        x?: T;
+        computedPivotColumns?: Map<string, InfiniteTablePivotColumn<T>>;
+        columnShifts: number[] | null;
     }
     export type InfiniteTableComputedColumnGroup = InfiniteTableColumnGroup & {
         depth: number;
     };
     export type InfiniteTableColumnGroupsDepthsMap = Map<string, number>;
-    export interface InfiniteTableComponentState<T> extends InfiniteTableState<T>, InfiniteTableReadOnlyState<T> {
-    }
     export type InfiniteTablePropPivotTotalColumnPosition = false | 'start' | 'end';
-    export interface InfiniteTableReadOnlyState<T> {
-        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
-        pivotTotalColumnPosition: InfiniteTablePropPivotTotalColumnPosition;
+    export interface InfiniteTableMappedState<T> {
+        groupColumn: InfiniteTableProps<T>['groupColumn'];
+        loadingText: InfiniteTableProps<T>['loadingText'];
+        components: InfiniteTableProps<T>['components'];
+        columns: InfiniteTableProps<T>['columns'];
+        pivotColumns: InfiniteTableProps<T>['pivotColumns'];
         onReady: InfiniteTableProps<T>['onReady'];
-        rowProps: InfiniteTableProps<T>['rowProps'];
+        onSelfFocus: InfiniteTableProps<T>['onSelfFocus'];
+        onSelfBlur: InfiniteTableProps<T>['onSelfBlur'];
+        onFocusWithin: InfiniteTableProps<T>['onFocusWithin'];
+        onBlurWithin: InfiniteTableProps<T>['onBlurWithin'];
+        onScrollToTop: InfiniteTableProps<T>['onScrollToTop'];
+        onScrollToBottom: InfiniteTableProps<T>['onScrollToBottom'];
+        scrollToBottomOffset: InfiniteTableProps<T>['scrollToBottomOffset'];
+        focusedClassName: InfiniteTableProps<T>['focusedClassName'];
+        focusedWithinClassName: InfiniteTableProps<T>['focusedWithinClassName'];
+        focusedStyle: InfiniteTableProps<T>['focusedStyle'];
+        focusedWithinStyle: InfiniteTableProps<T>['focusedWithinStyle'];
+        domProps: InfiniteTableProps<T>['domProps'];
         rowStyle: InfiniteTableProps<T>['rowStyle'];
+        rowProps: InfiniteTableProps<T>['rowProps'];
         rowClassName: InfiniteTableProps<T>['rowClassName'];
-        groupColumn: InfiniteTableProps<T>['groupColumn'];
-        pivotColumn: InfiniteTableProps<T>['pivotColumn'];
-        pivotRowLabelsColumn: InfiniteTableProps<T>['pivotRowLabelsColumn'];
         pinnedStartMaxWidth: InfiniteTableProps<T>['pinnedStartMaxWidth'];
         pinnedEndMaxWidth: InfiniteTableProps<T>['pinnedEndMaxWidth'];
-        showZebraRows: InfiniteTableProps<T>['showZebraRows'];
-        header: InfiniteTableProps<T>['header'];
-        columnMinWidth: InfiniteTableProps<T>['columnMinWidth'];
-        columnMaxWidth: InfiniteTableProps<T>['columnMaxWidth'];
-        columnDefaultWidth: InfiniteTableProps<T>['columnDefaultWidth'];
-        sortable: InfiniteTableProps<T>['sortable'];
-        virtualizeColumns: InfiniteTableProps<T>['virtualizeColumns'];
+        pivotColumn: InfiniteTableProps<T>['pivotColumn'];
+        pivotRowLabelsColumn: InfiniteTableProps<T>['pivotRowLabelsColumn'];
+        pivotColumnGroups: InfiniteTableProps<T>['pivotColumnGroups'];
+        activeIndex: NonUndefined<InfiniteTableProps<T>['activeIndex']>;
+        columnMinWidth: NonUndefined<InfiniteTableProps<T>['columnMinWidth']>;
+        columnMaxWidth: NonUndefined<InfiniteTableProps<T>['columnMaxWidth']>;
+        columnDefaultWidth: NonUndefined<InfiniteTableProps<T>['columnDefaultWidth']>;
+        draggableColumns: NonUndefined<InfiniteTableProps<T>['draggableColumns']>;
+        sortable: NonUndefined<InfiniteTableProps<T>['sortable']>;
+        hideEmptyGroupColumns: NonUndefined<InfiniteTableProps<T>['hideEmptyGroupColumns']>;
+        columnOrder: NonUndefined<InfiniteTableProps<T>['columnOrder']>;
+        showZebraRows: NonUndefined<InfiniteTableProps<T>['showZebraRows']>;
+        showHoverRows: NonUndefined<InfiniteTableProps<T>['showHoverRows']>;
+        header: NonUndefined<InfiniteTableProps<T>['header']>;
+        virtualizeColumns: NonUndefined<InfiniteTableProps<T>['virtualizeColumns']>;
+        rowHeight: number;
+        headerHeight: number;
+        licenseKey: NonUndefined<InfiniteTableProps<T>['licenseKey']>;
+        columnVisibility: NonUndefined<InfiniteTableProps<T>['columnVisibility']>;
+        columnPinning: NonUndefined<InfiniteTableProps<T>['columnPinning']>;
+        columnAggregations: NonUndefined<InfiniteTableProps<T>['columnAggregations']>;
+        columnGroups: NonUndefined<InfiniteTableProps<T>['columnGroups']>;
+        collapsedColumnGroups: NonUndefined<InfiniteTableProps<T>['collapsedColumnGroups']>;
+        pivotTotalColumnPosition: NonUndefined<InfiniteTableProps<T>['pivotTotalColumnPosition']>;
+    }
+    export interface InfiniteTableDerivedState<T> {
+        groupRowsBy: DataSourceProps<T>['groupRowsBy'];
+        computedColumns: Map<string, InfiniteTableColumn<T>>;
         virtualizeHeader: boolean;
-        licenseKey: string;
-        domProps: InfiniteTableProps<T>['domProps'];
-        draggableColumns: boolean;
+        groupRenderStrategy: NonUndefined<InfiniteTableProps<T>['groupRenderStrategy']>;
         columnGroupsDepthsMap: InfiniteTableColumnGroupsDepthsMap;
         columnGroupsMaxDepth: number;
         computedColumnGroups: InfiniteTablePropColumnGroups;
         rowHeightCSSVar: string;
         headerHeightCSSVar: string;
     }
-    export type InfiniteTableComponentActions<T> = ComponentStateActions<InfiniteTableState<T>>;
+    export type InfiniteTableActions<T> = ComponentStateActions<InfiniteTableState<T>>;
+    export interface InfiniteTableState<T> extends InfiniteTableMappedState<T>, InfiniteTableDerivedState<T>, InfiniteTableSetupState<T> {
+    }
 }
 declare module "components/InfiniteTable/types/InfiniteTableActionType" {
     export enum InfiniteTableActionType {
@@ -842,36 +1067,26 @@ declare module "components/InfiniteTable/types/InfiniteTableComputedValues" {
     }
 }
 declare module "components/InfiniteTable/types/InfiniteTableContextValue" {
-    import { InfiniteTableComponentActions, InfiniteTableComponentState } from "components/InfiniteTable/types/InfiniteTableState";
+    import { InfiniteTableActions, InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     import { InfiniteTableComputedValues } from "components/InfiniteTable/types/InfiniteTableComputedValues";
     export interface InfiniteTableContextValue<T> {
-        componentState: InfiniteTableComponentState<T>;
-        componentActions: InfiniteTableComponentActions<T>;
+        componentState: InfiniteTableState<T>;
+        componentActions: InfiniteTableActions<T>;
         computed: InfiniteTableComputedValues<T>;
         getComputed: () => InfiniteTableComputedValues<T>;
-        getState: () => InfiniteTableComponentState<T>;
+        getState: () => InfiniteTableState<T>;
     }
 }
 declare module "components/InfiniteTable/types/index" {
     import type { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     import type { InfiniteTableAction } from "components/InfiniteTable/types/InfiniteTableAction";
     import type { InfiniteTableActionType } from "components/InfiniteTable/types/InfiniteTableActionType";
-    import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns } from "components/InfiniteTable/types/InfiniteTableProps";
-    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParams } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns, InfiniteTablePropComponents } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { InfiniteTableComputedValues } from "components/InfiniteTable/types/InfiniteTableComputedValues";
     import type { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
-    import type { InfiniteTableEnhancedData } from "utils/groupAndPivot/index";
-    export type { InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTableEnhancedData, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParams, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, };
-}
-declare module "utils/join" {
-    const join: (...args: (string | number | void | null)[]) => string;
-    export { join };
-}
-declare module "components/InfiniteTable/internalProps" {
-    export const rootClassName = "ITable";
-    export const internalProps: {
-        rootClassName: string;
-    };
+    import type { InfiniteTableRowInfo } from "utils/groupAndPivot/index";
+    export type { InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTableRowInfo, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, };
 }
 declare module "components/InfiniteTable/InfiniteTableContext" {
     import { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
@@ -888,18 +1103,70 @@ declare module "components/InfiniteTable/state/computeColumnGroupsDepths" {
 }
 declare module "components/InfiniteTable/state/getInitialState" {
     import { DataSourceState } from "components/DataSource/index";
+    import { ForwardPropsToStateFnResult } from "components/hooks/useComponentState";
     import { InfiniteTableProps, InfiniteTableState } from "components/InfiniteTable/types/index";
-    import { InfiniteTableReadOnlyState } from "components/InfiniteTable/types/InfiniteTableState";
-    export function getInitialState<T>(params: {
-        props: InfiniteTableProps<T>;
-        parentState: DataSourceState<T>;
-    }): InfiniteTableState<T>;
-    export function deriveReadOnlyState<T>(params: {
+    import { InfiniteTablePropGroupColumn } from "components/InfiniteTable/types/InfiniteTableProps";
+    import { InfiniteTableSetupState, InfiniteTableDerivedState, InfiniteTableMappedState } from "components/InfiniteTable/types/InfiniteTableState";
+    /**
+     * The computed state is independent from props and cannot
+     * be affected by props
+     */
+    export function initSetupState<T>(): InfiniteTableSetupState<T>;
+    export const forwardProps: <T>() => Partial<{
+        columns: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumns<T, import("components/InfiniteTable/types").InfiniteTableColumn<T>>) => import("components/InfiniteTable/types").InfiniteTablePropColumns<T, import("components/InfiniteTable/types").InfiniteTableColumn<T>>);
+        header: 1 | ((value: boolean | undefined) => boolean);
+        pivotTotalColumnPosition: 1 | ((value: import("components/InfiniteTable/types/InfiniteTableState").InfiniteTablePropPivotTotalColumnPosition | undefined) => import("components/InfiniteTable/types/InfiniteTableState").InfiniteTablePropPivotTotalColumnPosition);
+        pivotColumns: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumns<T, import("components/InfiniteTable/types/InfiniteTableColumn").InfiniteTablePivotColumn<T>> | undefined) => import("components/InfiniteTable/types").InfiniteTablePropColumns<T, import("components/InfiniteTable/types/InfiniteTableColumn").InfiniteTablePivotColumn<T>> | undefined);
+        pivotColumnGroups: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumnGroups | undefined) => import("components/InfiniteTable/types").InfiniteTablePropColumnGroups | undefined);
+        sortable: 1 | ((value: boolean | undefined) => boolean);
+        pivotColumn: 1 | ((value: Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotColumn<T>> | undefined) => Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotColumn<T>> | undefined);
+        components: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropComponents | undefined) => import("components/InfiniteTable/types").InfiniteTablePropComponents | undefined);
+        groupColumn: 1 | ((value: Partial<InfiniteTablePropGroupColumn<T>> | undefined) => Partial<InfiniteTablePropGroupColumn<T>> | undefined);
+        loadingText: 1 | ((value: import("components/types/Renderable").Renderable) => import("components/types/Renderable").Renderable);
+        onReady: 1 | ((value: ((api: import("components/InfiniteTable/types").InfiniteTableImperativeApi<T>) => void) | undefined) => ((api: import("components/InfiniteTable/types").InfiniteTableImperativeApi<T>) => void) | undefined);
+        onSelfFocus: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
+        onSelfBlur: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
+        onFocusWithin: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
+        onBlurWithin: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined);
+        onScrollToTop: 1 | ((value: (() => void) | undefined) => (() => void) | undefined);
+        onScrollToBottom: 1 | ((value: (() => void) | undefined) => (() => void) | undefined);
+        scrollToBottomOffset: 1 | ((value: number | undefined) => number | undefined);
+        focusedClassName: 1 | ((value: string | undefined) => string | undefined);
+        focusedWithinClassName: 1 | ((value: string | undefined) => string | undefined);
+        focusedStyle: 1 | ((value: import("react").CSSProperties | undefined) => import("react").CSSProperties | undefined);
+        focusedWithinStyle: 1 | ((value: import("react").CSSProperties | undefined) => import("react").CSSProperties | undefined);
+        domProps: 1 | ((value: import("react").HTMLProps<HTMLDivElement> | undefined) => import("react").HTMLProps<HTMLDivElement> | undefined);
+        rowStyle: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropRowStyle<T> | undefined) => import("components/InfiniteTable/types").InfiniteTablePropRowStyle<T> | undefined);
+        rowProps: 1 | ((value: import("react").HTMLProps<HTMLDivElement> | ((rowArgs: import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTableRowStyleFnParams<T>) => import("react").HTMLProps<HTMLDivElement>) | undefined) => import("react").HTMLProps<HTMLDivElement> | ((rowArgs: import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTableRowStyleFnParams<T>) => import("react").HTMLProps<HTMLDivElement>) | undefined);
+        rowClassName: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropRowClassName<T> | undefined) => import("components/InfiniteTable/types").InfiniteTablePropRowClassName<T> | undefined);
+        pinnedStartMaxWidth: 1 | ((value: number | undefined) => number | undefined);
+        pinnedEndMaxWidth: 1 | ((value: number | undefined) => number | undefined);
+        pivotRowLabelsColumn: 1 | ((value: Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotRowLabelsColumn<T>> | undefined) => Partial<import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropPivotRowLabelsColumn<T>> | undefined);
+        activeIndex: 1 | ((value: number | undefined) => number);
+        columnMinWidth: 1 | ((value: number | undefined) => number);
+        columnMaxWidth: 1 | ((value: number | undefined) => number);
+        columnDefaultWidth: 1 | ((value: number | undefined) => number);
+        draggableColumns: 1 | ((value: boolean | undefined) => boolean);
+        hideEmptyGroupColumns: 1 | ((value: boolean | undefined) => boolean);
+        columnOrder: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumnOrder | undefined) => import("components/InfiniteTable/types").InfiniteTablePropColumnOrder);
+        showZebraRows: 1 | ((value: boolean | undefined) => boolean);
+        showHoverRows: 1 | ((value: boolean | undefined) => boolean);
+        virtualizeColumns: 1 | ((value: import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropVirtualizeColumns<T> | undefined) => import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropVirtualizeColumns<T>);
+        licenseKey: 1 | ((value: string | undefined) => string);
+        columnVisibility: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumnVisibility | undefined) => import("components/InfiniteTable/types").InfiniteTablePropColumnVisibility);
+        columnPinning: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumnPinning | undefined) => import("components/InfiniteTable/types").InfiniteTablePropColumnPinning);
+        columnAggregations: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumnAggregations<T> | undefined) => import("components/InfiniteTable/types").InfiniteTablePropColumnAggregations<T>);
+        columnGroups: 1 | ((value: import("components/InfiniteTable/types").InfiniteTablePropColumnGroups | undefined) => import("components/InfiniteTable/types").InfiniteTablePropColumnGroups);
+        collapsedColumnGroups: 1 | ((value: import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropCollapsedColumnGroups | undefined) => import("components/InfiniteTable/types/InfiniteTableProps").InfiniteTablePropCollapsedColumnGroups);
+        rowHeight: 1 | ((value: string | number) => number);
+        headerHeight: 1 | ((value: string | number) => number);
+    }>;
+    export const mapPropsToState: <T>(params: {
         props: InfiniteTableProps<T>;
         state: InfiniteTableState<T>;
-        updated: Partial<InfiniteTableState<T>> | null;
+        oldState: InfiniteTableState<T> | null;
         parentState: DataSourceState<T>;
-    }): InfiniteTableReadOnlyState<T>;
+    }) => InfiniteTableDerivedState<T>;
 }
 declare module "components/ResizeObserver/index" {
     import * as React from 'react';
@@ -977,7 +1244,7 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
     import type { InfiniteTableColumn, InfiniteTableComputedColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { Size } from "components/types/Size";
     import type { DataSourceSingleSortInfo } from "components/DataSource/types";
-    import type { InfiniteTableGeneratedColumns, InfiniteTablePropColumnOrder, InfiniteTablePropColumnOrderNormalized, InfiniteTablePropColumnPinning, InfiniteTablePropColumnVisibility } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTablePropColumnOrder, InfiniteTablePropColumnOrderNormalized, InfiniteTablePropColumnPinning, InfiniteTablePropColumnVisibility } from "components/InfiniteTable/types/InfiniteTableProps";
     export type SortInfoMap<T> = {
         [key: string]: {
             sortInfo: DataSourceSingleSortInfo<T>;
@@ -1006,7 +1273,6 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
     };
     type GetComputedVisibleColumnsParam<T> = {
         columns: Map<string, InfiniteTableColumn<T>>;
-        generatedColumns: InfiniteTableGeneratedColumns<T>;
         bodySize: Size;
         columnMinWidth?: number;
         columnMaxWidth?: number;
@@ -1023,7 +1289,7 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
         columnVisibility: InfiniteTablePropColumnVisibility;
         columnVisibilityAssumeVisible: boolean;
     };
-    export const getComputedVisibleColumns: <T extends unknown>({ columns, generatedColumns, bodySize, columnMinWidth, columnMaxWidth, columnDefaultWidth, pinnedStartMaxWidth, pinnedEndMaxWidth, sortable, sortInfo, setSortInfo, multiSort, draggableColumns, columnOrder, columnPinning, columnVisibility, columnVisibilityAssumeVisible, }: GetComputedVisibleColumnsParam<T>) => GetComputedVisibleColumnsResult<T>;
+    export const getComputedVisibleColumns: <T extends unknown>({ columns, bodySize, columnMinWidth, columnMaxWidth, columnDefaultWidth, pinnedStartMaxWidth, pinnedEndMaxWidth, sortable, sortInfo, setSortInfo, multiSort, draggableColumns, columnOrder, columnPinning, columnVisibility, columnVisibilityAssumeVisible, }: GetComputedVisibleColumnsParam<T>) => GetComputedVisibleColumnsResult<T>;
 }
 declare module "components/hooks/useRerender" {
     export const useRerender: () => [number, () => void];
@@ -1045,7 +1311,7 @@ declare module "components/hooks/useInterceptedMap" {
     export function useInterceptedMap<K, V>(map: Map<K, V>, fns: InterceptedMapFns<K, V>): void;
 }
 declare module "components/InfiniteTable/utils/rafFn" {
-    export const rafFn: (fn: () => void) => () => void;
+    export const rafFn: (fn: (...args: any[]) => void) => (...args: any[]) => void;
 }
 declare module "components/InfiniteTable/hooks/useRerenderOnKeyChange" {
     export const useRerenderOnKeyChange: <K extends unknown, V extends unknown>(map: Map<K, V>) => number;
@@ -1053,12 +1319,11 @@ declare module "components/InfiniteTable/hooks/useRerenderOnKeyChange" {
 declare module "components/InfiniteTable/hooks/useComputedVisibleColumns" {
     import type { DataSourceSingleSortInfo } from "components/DataSource/types";
     import type { InfiniteTableColumn } from "components/InfiniteTable/types/index";
-    import type { InfiniteTableGeneratedColumns, InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnVisibility } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTablePropColumnOrder, InfiniteTablePropColumnPinning, InfiniteTablePropColumnVisibility } from "components/InfiniteTable/types/InfiniteTableProps";
     import type { Size } from "components/types/Size";
     import type { GetComputedVisibleColumnsResult } from "components/InfiniteTable/utils/getComputedVisibleColumns";
     type UseComputedVisibleColumnsParam<T> = {
         columns: Map<string, InfiniteTableColumn<T>>;
-        generatedColumns: InfiniteTableGeneratedColumns<T>;
         bodySize: Size;
         columnMinWidth?: number;
         columnMaxWidth?: number;
@@ -1092,7 +1357,7 @@ declare module "components/InfiniteTable/hooks/useComputedVisibleColumns" {
         computedPinnedStartWidth: GetComputedVisibleColumnsResult<T>['computedPinnedStartWidth'];
         computedColumnOrder: GetComputedVisibleColumnsResult<T>['computedColumnOrder'];
     };
-    export const useComputedVisibleColumns: <T extends unknown>({ columns, generatedColumns, bodySize, columnMinWidth, columnMaxWidth, columnDefaultWidth, sortable, draggableColumns, sortInfo, multiSort, setSortInfo, columnOrder, columnPinning, pinnedEndMaxWidth, pinnedStartMaxWidth, columnVisibility, columnVisibilityAssumeVisible, }: UseComputedVisibleColumnsParam<T>) => UseComputedVisibleColumnsResult<T>;
+    export const useComputedVisibleColumns: <T extends unknown>({ columns, bodySize, columnMinWidth, columnMaxWidth, columnDefaultWidth, sortable, draggableColumns, sortInfo, multiSort, setSortInfo, columnOrder, columnPinning, pinnedEndMaxWidth, pinnedStartMaxWidth, columnVisibility, columnVisibilityAssumeVisible, }: UseComputedVisibleColumnsParam<T>) => UseComputedVisibleColumnsResult<T>;
 }
 declare module "components/DataSource/publicHooks/useDataSourceActions" {
     import { DataSourceComponentActions } from "components/DataSource/types";
@@ -1104,89 +1369,9 @@ declare module "components/InfiniteTable/hooks/useColumnAggregations" {
 declare module "components/InfiniteTable/hooks/useColumnGroups" {
     export function useColumnGroups<T>(): void;
 }
-declare module "style/utilities" {
-    export const ICSS: {
-        variables: {
-            space: [string, string, string, string, string, string, string, string, string, string, string];
-            borderRadius: string;
-            fontSize: [string, string, string, string, string, string, string, string];
-        };
-        alignItems: {
-            center: string;
-            stretch: string;
-        };
-        justifyContent: {
-            center: string;
-            'flex-start': string;
-            flexStart: string;
-            'flex-end': string;
-            flexEnd: string;
-        };
-        overflow: {
-            hidden: string;
-            visible: string;
-            auto: string;
-        };
-        overflowX: {
-            hidden: string;
-            visible: string;
-            auto: string;
-        };
-        overflowY: {
-            hidden: string;
-            visible: string;
-            auto: string;
-        };
-        cursor: {
-            pointer: string;
-        };
-        height: {
-            0: string;
-            '100%': string;
-        };
-        width: {
-            0: string;
-            '100%': string;
-        };
-        top: {
-            0: string;
-            '100%': string;
-        };
-        left: {
-            0: string;
-            '100%': string;
-        };
-        transform: {
-            translate3D000: string;
-        };
-        willChange: {
-            transform: string;
-        };
-        position: {
-            relative: string;
-            absolute: string;
-            fixed: string;
-        };
-        display: {
-            flex: string;
-        };
-        flexFlow: {
-            row: string;
-            column: string;
-        };
-        whiteSpace: {
-            nowrap: string;
-        };
-        textOverflow: {
-            ellipsis: string;
-        };
-        userSelect: {
-            none: string;
-        };
-    };
-}
-declare module "style/css" {
-    export const cssEllipsisClassName: string;
+declare module "utils/join" {
+    const join: (...args: (string | number | void | null)[]) => string;
+    export { join };
 }
 declare module "components/InfiniteTable/components/icons/ExpanderIcon" {
     import * as React from 'react';
@@ -1203,37 +1388,81 @@ declare module "components/InfiniteTable/components/icons/ExpanderIcon" {
 declare module "components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns" {
     import { DataSourcePropGroupRowsBy, DataSourcePropPivotBy } from "components/DataSource/index";
     import { InfiniteTableProps } from "components/InfiniteTable/types/index";
-    import { InfiniteTableComponentState } from "components/InfiniteTable/types/InfiniteTableState";
+    import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     export function getComputedPivotColumnsFromDataSourcePivotColumns<T>(pivotColumns: InfiniteTableProps<T>['pivotColumns'], params: {
         toggleGroupRow: (groupKeys: any[]) => void;
         pivotColumn: InfiniteTableProps<T>['pivotColumn'];
         pivotRowLabelsColumn: InfiniteTableProps<T>['pivotRowLabelsColumn'];
-        pivotTotalColumnPosition: InfiniteTableComponentState<T>['pivotTotalColumnPosition'];
+        pivotTotalColumnPosition: InfiniteTableState<T>['pivotTotalColumnPosition'];
         pivotBy: DataSourcePropPivotBy<T>;
         groupRowsBy: DataSourcePropGroupRowsBy<T>;
     }): InfiniteTableProps<T>['pivotColumns'];
 }
+declare module "components/InfiniteTable/components/InfiniteTableRow/row.css" {
+    export const RowHoverCls: string;
+    export const RowClsRecipe: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+        zebra: {
+            false: {};
+            even: {
+                background: import("@vanilla-extract/private").CSSVarFunction;
+            };
+            odd: {
+                background: import("@vanilla-extract/private").CSSVarFunction;
+            };
+        };
+        groupRow: {
+            true: {
+                zIndex: number;
+            };
+            false: {};
+        };
+        inlineGroupRow: {
+            true: {
+                zIndex: number;
+            };
+            false: {};
+        };
+        showHoverRows: {
+            true: {};
+            false: {};
+        };
+    }>;
+    export const GroupRowExpanderCls: string;
+}
 declare module "components/InfiniteTable/utils/getColumnForGroupBy" {
+    import { InfiniteTableColumnRenderParam } from "components/InfiniteTable/index";
     import { DataSourceGroupRowsBy } from "components/DataSource/index";
     import { InfiniteTableGeneratedGroupColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
-    import { GroupColumnGetterOptions, InfiniteTablePropGroupColumn } from "components/InfiniteTable/types/InfiniteTableProps";
+    import { GroupColumnGetterOptions, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/InfiniteTableProps";
+    export function getGroupColumnRender<T>({ groupIndex, groupRenderStrategy, toggleGroupRow, }: {
+        toggleGroupRow: (groupRowKeys: any[]) => void;
+        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
+        groupIndex: number;
+    }): (renderOptions: InfiniteTableColumnRenderParam<T>) => import("components/types/Renderable").Renderable;
     export function getColumnForGroupBy<T>(options: GroupColumnGetterOptions<T> & {
         groupIndex: number;
         groupBy: DataSourceGroupRowsBy<T>;
+        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
     }, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
     export function getSingleGroupColumn<T>(options: GroupColumnGetterOptions<T>, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
 }
-declare module "components/InfiniteTable/hooks/useGeneratedGroupAndPivotColumns" {
+declare module "components/InfiniteTable/hooks/useToggleGroupRow" {
+    export type ToggleGrouRowFn = (groupKeys: any[]) => void;
+    export function useToggleGroupRow<T>(): ToggleGrouRowFn;
+}
+declare module "components/InfiniteTable/hooks/useColumnsWhen" {
+    import { InfiniteTableColumn } from "components/InfiniteTable/index";
     import { DataSourceGroupRowsBy } from "components/DataSource/index";
-    import { InfiniteTableGeneratedColumns, InfiniteTablePropGroupRenderStrategy, InfiniteTableProps } from "components/InfiniteTable/types/InfiniteTableProps";
-    export function useGeneratedGroupAndPivotColumns<T>(): void;
-    export function getGeneratedGroupColumns<T>(params: {
+    import { InfiniteTablePropGroupRenderStrategy, InfiniteTableProps } from "components/InfiniteTable/types/InfiniteTableProps";
+    export function useColumnsWhen<T>(): void;
+    export function getColumnsWhenGrouping<T>(params: {
+        columns: Map<string, InfiniteTableColumn<T>>;
         groupRowsBy: DataSourceGroupRowsBy<T>[];
         toggleGroupRow: (groupKeys: any[]) => void;
         groupColumn: InfiniteTableProps<T>['groupColumn'];
         groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
         pivotColumns: InfiniteTableProps<T>['pivotColumns'];
-    }): InfiniteTableGeneratedColumns<T>;
+    }): Map<string, InfiniteTableColumn<T>> | undefined;
 }
 declare module "components/InfiniteTable/hooks/useComputed" {
     import { InfiniteTableComputedValues } from "components/InfiniteTable/types/index";
@@ -1268,6 +1497,9 @@ declare module "components/VirtualBrain/index" {
     export type VirtualBrainOptions = {
         mainAxis: MainAxisOptions;
         itemSize: MainAxisSize;
+        itemSpan?: ({ itemIndex }: {
+            itemIndex: number;
+        }) => number;
         count: number;
         name?: string;
     };
@@ -1283,6 +1515,8 @@ declare module "components/VirtualBrain/index" {
     export class VirtualBrain extends Logger {
         private scrollPosition;
         private scrollPositionOnMainAxis;
+        private itemSpanParent;
+        private itemSpanValue;
         private itemSizeCache;
         private itemOffsetCache;
         private options;
@@ -1317,10 +1551,19 @@ declare module "components/VirtualBrain/index" {
         onTotalSizeChange: (fn: OnSizeChangeFn) => () => void;
         onRenderCountChange: (fn: OnRenderCountChangeFn) => () => void;
         onRenderRangeChange: (fn: OnRenderRangeChangeFn) => () => void;
-        update: (newCount: VirtualBrainOptions['count'], newItemSize: VirtualBrainOptions['itemSize']) => void;
+        update: (newCount: VirtualBrainOptions['count'], newItemSize: VirtualBrainOptions['itemSize'], newItemSpan?: VirtualBrainOptions['itemSpan']) => void;
         private reset;
+        private computeItemSpanUpTo;
         private computeCacheFor;
         private getItemSizeCacheFor;
+        getItemSpan: (itemIndex: number) => number;
+        getItemSpanParent: (itemIndex: number) => number;
+        getItemSizeWithSpan: (itemIndex: number, itemSpan: number) => number;
+        /**
+         * For now, this doesn't take into account the itemspan, and it's okay not to
+         * @param itemIndex
+         * @returns the size of the specified item
+         */
         getItemSize: (itemIndex: number) => number;
         getTotalSize: () => number;
         getItemAt: (scrollPos: number) => number;
@@ -1339,6 +1582,198 @@ declare module "components/InfiniteTable/components/ScrollbarPlaceholder" {
     }): JSX.Element | null;
     export const VerticalScrollbarPlaceholder: React.MemoExoticComponent<typeof VerticalScrollbarPlaceholderFn>;
 }
+declare module "components/InfiniteTable/InfiniteCls.css" {
+    export const InfiniteCls: string;
+    export const InfiniteClsScrolling: string;
+    export const InfiniteClsRecipe: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+        focused: {
+            true: {};
+            false: {};
+        };
+        focusedWithin: {
+            true: {};
+            false: {};
+        };
+        hasPinnedStart: {
+            true: {};
+            false: {};
+        };
+        hasPinnedEnd: {
+            true: {};
+            false: {};
+        };
+        hasPinnedStartOverflow: {
+            true: {};
+            false: {};
+        };
+        hasPinnedEndOverflow: {
+            true: {};
+            false: {};
+        };
+    }>;
+    export const PinnedRowsClsVariants: Record<"overflow" | "pinnedStart" | "pinnedEnd", string>;
+    export const PinnedRowsContainerClsVariants: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+        pinned: {
+            start: {
+                borderRight: import("@vanilla-extract/private").CSSVarFunction[];
+            };
+            end: {
+                borderLeft: import("@vanilla-extract/private").CSSVarFunction[];
+            };
+            false: {};
+        };
+    }>;
+    export const InfiniteClsShiftingColumns: string;
+    export const FooterCls: string;
+}
+declare module "components/InfiniteTable/components/cell.css" {
+    export const columnAlignCellStyle: Record<"center" | "end" | "start", string>;
+    export const CellBorderObject: {
+        borderLeft: string;
+        borderRight: string;
+    };
+    export const CellClsVariants: Record<"shifting" | "dragging", string>;
+    export const CellCls: string;
+    export const ColumnCellVariantsObject: {
+        first: {
+            borderTopLeftRadius: import("@vanilla-extract/private").CSSVarFunction;
+            borderBottomLeftRadius: import("@vanilla-extract/private").CSSVarFunction;
+        };
+        last: {
+            borderTopRightRadius: import("@vanilla-extract/private").CSSVarFunction;
+            borderBottomRightRadius: import("@vanilla-extract/private").CSSVarFunction;
+        };
+        groupByField: {};
+        firstInCategory: {};
+        lastInCategory: {};
+        pinnedStart: {};
+        pinnedEnd: {};
+        unpinned: {};
+        pinnedStartLastInCategory: {
+            borderRight: import("@vanilla-extract/private").CSSVarFunction;
+            vars: {
+                [x: string]: import("@vanilla-extract/private").CSSVarFunction;
+            };
+        };
+        pinnedEndFirstInCategory: {
+            borderLeft: import("@vanilla-extract/private").CSSVarFunction;
+            vars: {
+                [x: string]: import("@vanilla-extract/private").CSSVarFunction;
+            };
+        };
+    };
+    export const ColumnCellRecipe: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+        dragging: {
+            false: {};
+        };
+        first: {
+            true: {
+                borderTopLeftRadius: import("@vanilla-extract/private").CSSVarFunction;
+                borderBottomLeftRadius: import("@vanilla-extract/private").CSSVarFunction;
+            };
+            false: {};
+        };
+        last: {
+            true: {
+                borderTopRightRadius: import("@vanilla-extract/private").CSSVarFunction;
+                borderBottomRightRadius: import("@vanilla-extract/private").CSSVarFunction;
+            };
+            false: {};
+        };
+        groupByField: {
+            true: {};
+            false: {};
+        };
+        firstInCategory: {
+            true: {};
+            false: {};
+        };
+        lastInCategory: {
+            true: {};
+            false: {};
+        };
+        pinned: {
+            start: {};
+            end: {};
+            false: {};
+        };
+    }>;
+}
+declare module "components/InfiniteTable/components/InfiniteTableHeader/header.css" {
+    import { RecipeVariants } from '@vanilla-extract/recipes';
+    import { CellCls, CellClsVariants } from "components/InfiniteTable/components/cell.css";
+    export { CellCls, CellClsVariants };
+    export const HeaderCellProxy: string;
+    export const HeaderSortIconCls: string;
+    export const HeaderClsRecipe: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+        pinned: {
+            start: {};
+            end: {};
+            false: {};
+        };
+        virtualized: {
+            true: {};
+            false: {
+                position: "relative";
+                overflow: "hidden";
+            };
+        };
+        overflow: {
+            true: {
+                zIndex: number;
+            };
+            false: {};
+        };
+    }>;
+    export const HeaderCellRecipe: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+        dragging: {
+            true: {
+                zIndex: number;
+                opacity: number;
+                background: import("@vanilla-extract/private").CSSVarFunction;
+            };
+            false: {};
+        };
+        first: {
+            true: {
+                borderTopLeftRadius: import("@vanilla-extract/private").CSSVarFunction;
+                borderBottomLeftRadius: import("@vanilla-extract/private").CSSVarFunction;
+            };
+            false: {};
+        };
+        last: {
+            true: {
+                borderTopRightRadius: import("@vanilla-extract/private").CSSVarFunction;
+                borderBottomRightRadius: import("@vanilla-extract/private").CSSVarFunction;
+            };
+            false: {};
+        };
+        groupByField: {
+            true: {};
+            false: {};
+        };
+        firstInCategory: {
+            true: {};
+            false: {};
+        };
+        lastInCategory: {
+            true: {};
+            false: {};
+        };
+        pinned: {
+            start: {
+                zIndex: number;
+            };
+            end: {};
+            false: {};
+        };
+    }>;
+    export type HeaderCellVariantsType = RecipeVariants<typeof HeaderCellRecipe>;
+    export const HeaderWrapperCls: string;
+    export const HeaderGroupCls: string;
+    export const HeaderGroup_Header: string;
+    export const HeaderGroup_Children: string;
+}
 declare module "components/InfiniteTable/hooks/useInfiniteTableState" {
     import { InfiniteTableState } from "components/InfiniteTable/types/index";
     export const useInfiniteTableState: <T>() => InfiniteTableState<T>;
@@ -1348,7 +1783,7 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTab
     import { InfiniteTableComputedColumn } from "components/InfiniteTable/index";
     import { Renderable } from "components/types/Renderable";
     import { OnResizeFn } from "components/types/Size";
-    import { InfiniteTableEnhancedData } from "components/InfiniteTable/types/index";
+    import { InfiniteTableRowInfo, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/index";
     import { InfiniteTableToggleGroupRowFn } from "components/InfiniteTable/types/InfiniteTableColumn";
     export interface InfiniteTableCellProps<T> {
         column: InfiniteTableComputedColumn<T>;
@@ -1365,9 +1800,13 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTab
     }
     export interface InfiniteTableColumnCellProps<T> extends Omit<InfiniteTableCellProps<T>, 'children'> {
         virtualized: boolean;
-        enhancedData: InfiniteTableEnhancedData<T>;
+        hidden: boolean;
+        rowInfo: InfiniteTableRowInfo<T>;
+        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
+        getData: () => InfiniteTableRowInfo<T>[];
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         rowIndex: number;
+        rowHeight: number;
     }
     export interface InfiniteTableHeaderCellProps<T> extends Omit<InfiniteTableCellProps<T>, 'children'> {
         columns: Map<string, InfiniteTableComputedColumn<T>>;
@@ -1408,8 +1847,11 @@ declare module "components/InfiniteTable/hooks/useColumnPointerEvents" {
     };
 }
 declare module "components/InfiniteTable/hooks/useCellClassName" {
+    import { HeaderCellVariantsType } from "components/InfiniteTable/components/InfiniteTableHeader/header.css";
     import { InfiniteTableComputedColumn } from "components/InfiniteTable/types/index";
-    export function useCellClassName<T>(column: InfiniteTableComputedColumn<T>, baseClasses: string[]): string;
+    export function useCellClassName<T>(column: InfiniteTableComputedColumn<T>, baseClasses: string[], variants: (x: HeaderCellVariantsType) => string, extraFlags: {
+        dragging: boolean;
+    }): string;
 }
 declare module "components/InfiniteTable/components/icons/SortIcon" {
     import * as React from 'react';
@@ -1433,6 +1875,7 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/Infinite
     import { Renderable } from "components/types/Renderable";
     import { VirtualBrain } from "components/VirtualBrain/index";
     import { ScrollListener } from "components/VirtualBrain/ScrollListener";
+    import { InfiniteTableColumnPinned } from "components/InfiniteTable/types/InfiniteTableColumn";
     import { InfiniteTableComputedColumnGroup } from "components/InfiniteTable/types/InfiniteTableProps";
     export type InfiniteTableHeaderProps<T> = {
         repaintId?: string | number;
@@ -1440,6 +1883,7 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/Infinite
         columns: InfiniteTableComputedColumn<T>[];
         totalWidth: number;
         availableWidth: number;
+        pinning: InfiniteTableColumnPinned;
     };
     export type InfiniteTableHeaderGroupProps<T> = {
         columns: InfiniteTableComputedColumn<T>[];
@@ -1449,7 +1893,6 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/Infinite
         headerHeight: number;
     };
     export type InfiniteTableHeaderUnvirtualizedProps<T> = Omit<InfiniteTableHeaderProps<T>, 'repaintId' | 'brain'> & {
-        classNameModifiers?: string[];
         brain?: VirtualBrain;
         scrollListener?: ScrollListener;
         scrollable?: boolean;
@@ -1463,11 +1906,19 @@ declare module "components/RawList/types" {
         domRef: RefCallback<HTMLElement>;
         itemIndex: number;
         itemSize: number;
+        itemSizeWithSpan: number;
+        itemSpan: number;
+        spanParent: number;
+        covered: boolean;
     };
     export type RenderItem = (renderProps: RenderItemParam) => Renderable;
+    export type RawListItemSpan = (itemSpanProps: {
+        itemIndex: number;
+    }) => number;
     export type RawListProps = {
         debugChannel?: string;
         renderItem: RenderItem;
+        itemSpan?: RawListItemSpan;
         brain: VirtualBrain;
         repaintId?: string | number;
     };
@@ -1552,8 +2003,7 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/Infinite
     export const InfiniteTableHeader: typeof InfiniteTableHeaderFn;
 }
 declare module "components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree" {
-    import { InfiniteTableColumnGroup, InfiniteTableComputedColumn } from "components/InfiniteTable/types/index";
-    import { InfiniteTableComponentState } from "components/InfiniteTable/types/InfiniteTableState";
+    import { InfiniteTableColumnGroup, InfiniteTableComputedColumn, InfiniteTableState } from "components/InfiniteTable/types/index";
     export type ColGroupTreeBaseItem = {
         id: string;
         groupOffset: number;
@@ -1572,7 +2022,7 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/buildCol
         columnItems: ColGroupTreeColumnItem<T>[];
     };
     export type ColGroupTreeItem<T> = ColGroupTreeColumnItem<T> | ColGroupTreeGroupItem<T>;
-    export function buildColumnAndGroupTree<T>(columns: InfiniteTableComputedColumn<T>[], columnGroups: InfiniteTableComponentState<T>['columnGroups'], columnGroupsDepthsMap: InfiniteTableComponentState<T>['columnGroupsDepthsMap']): ColGroupTreeItem<T>[];
+    export function buildColumnAndGroupTree<T>(columns: InfiniteTableComputedColumn<T>[], columnGroups: InfiniteTableState<T>['columnGroups'], columnGroupsDepthsMap: InfiniteTableState<T>['columnGroupsDepthsMap']): ColGroupTreeItem<T>[];
 }
 declare module "components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup" {
     import { InfiniteTableHeaderGroupProps } from "components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderTypes";
@@ -1581,10 +2031,10 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/Infinite
 }
 declare module "components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups" {
     import { InfiniteTableComputedColumn } from "components/InfiniteTable/types/index";
-    import { InfiniteTableComponentState } from "components/InfiniteTable/types/InfiniteTableState";
+    import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     type BuildColumnHeaderGroupsConfig<T> = {
-        columnGroups: InfiniteTableComponentState<T>['columnGroups'];
-        columnGroupsDepthsMap: InfiniteTableComponentState<T>['columnGroupsDepthsMap'];
+        columnGroups: InfiniteTableState<T>['columnGroups'];
+        columnGroupsDepthsMap: InfiniteTableState<T>['columnGroupsDepthsMap'];
         columnGroupsMaxDepth: number;
         columns: InfiniteTableComputedColumn<T>[];
         headerHeight: number;
@@ -1619,11 +2069,35 @@ declare module "components/hooks/useOnScroll" {
     }) => void;
     export const useOnScroll: (domRef: RefObject<HTMLElement>, onScroll: OnScroll | undefined) => void;
 }
+declare module "components/VirtualScrollContainer/VirtualScrollContainer.css" {
+    export const VirtualScrollContainerCls: string;
+    export const ScrollableCls: {
+        true: string;
+        false: string;
+        visible: string;
+        auto: string;
+        hidden: string;
+    };
+    export const ScrollableHorizontalCls: {
+        true: string;
+        false: string;
+        visible: string;
+        auto: string;
+        hidden: string;
+    };
+    export const ScrollableVerticalCls: {
+        true: string;
+        false: string;
+        visible: string;
+        auto: string;
+        hidden: string;
+    };
+}
 declare module "components/VirtualScrollContainer/getScrollableClassName" {
-    import { ICSS } from "style/utilities";
-    export type Scrollable = boolean | keyof typeof ICSS['overflow'] | {
-        vertical: boolean | keyof typeof ICSS['overflow'];
-        horizontal: boolean | keyof typeof ICSS['overflow'];
+    type ScrollType = 'hidden' | 'visible' | 'auto';
+    export type Scrollable = boolean | ScrollType | {
+        vertical: boolean | ScrollType;
+        horizontal: boolean | ScrollType;
     };
     export const getScrollableClassName: (scrollable: Scrollable) => string;
 }
@@ -1631,7 +2105,7 @@ declare module "components/VirtualScrollContainer/index" {
     import * as React from 'react';
     import { CSSProperties } from 'react';
     import { Scrollable } from "components/VirtualScrollContainer/getScrollableClassName";
-    import { Renderable } from "components/types/Renderable";
+    import type { Renderable } from "components/types/Renderable";
     export type { Scrollable };
     export interface VirtualScrollContainerProps {
         className?: string;
@@ -1701,6 +2175,11 @@ declare module "components/VirtualList/types" {
     export type RenderRow = (renderProps: RenderRowParam) => Renderable;
     export type RenderColumn = (renderProps: RenderColumnParam) => Renderable;
 }
+declare module "components/VirtualList/VirtualList.css" {
+    export const VirtualListCls: string;
+    export const VirtualListClsOrientation: Record<"horizontal" | "vertical", string>;
+    export const scrollTransformTargetCls: string;
+}
 declare module "components/VirtualList/VirtualList" {
     import { HTMLProps } from 'react';
     import type { VirtualListProps } from "components/VirtualList/types";
@@ -1714,19 +2193,22 @@ declare module "components/VirtualList/VirtualRowList" {
 declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowTypes" {
     import type { VirtualBrain } from "components/VirtualBrain/index";
     import type { ScrollPosition } from "components/types/ScrollPosition";
-    import type { InfiniteTableComputedColumn, InfiniteTableEnhancedData } from "components/InfiniteTable/types/index";
+    import type { InfiniteTableComputedColumn, InfiniteTableRowInfo } from "components/InfiniteTable/types/index";
     import { InfiniteTableToggleGroupRowFn } from "components/InfiniteTable/types/InfiniteTableColumn";
     export interface InfiniteTableRowProps<T> {
         rowHeight: number;
         rowWidth: number;
         rowIndex: number;
         brain: VirtualBrain;
+        verticalBrain: VirtualBrain;
         domRef: React.RefCallback<HTMLElement>;
-        enhancedData: InfiniteTableEnhancedData<T>;
+        rowInfo: InfiniteTableRowInfo<T>;
+        getData: () => InfiniteTableRowInfo<T>[];
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         repaintId?: number | string;
         virtualizeColumns: boolean;
         showZebraRows?: boolean;
+        showHoverRows?: boolean;
         columns: InfiniteTableComputedColumn<T>[];
         domProps?: React.HTMLAttributes<HTMLDivElement>;
     }
@@ -1736,24 +2218,28 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTab
 }
 declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell" {
     import { InfiniteTableColumnCellProps } from "components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCellTypes";
-    function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>): JSX.Element;
+    function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>): JSX.Element | null;
     export const InfiniteTableColumnCell: typeof InfiniteTableColumnCellFn;
 }
 declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName" {
     export const InfiniteTableRowClassName: string;
     export const InfiniteTableRowClassName__hover: string;
 }
+declare module "utils/stripVar" {
+    export function stripVar(cssVariableWithVarString: string): string;
+}
 declare module "components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps" {
     import { MutableRefObject, RefCallback } from 'react';
     import type { InfiniteTableRowProps } from "components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowTypes";
-    import { InfiniteTableComponentState } from "components/InfiniteTable/types/InfiniteTableState";
+    import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     export type TableRowHTMLAttributes = React.HTMLAttributes<HTMLDivElement> & {
         'data-virtualize-columns': 'on' | 'off';
+        'data-hover-index': number;
         'data-row-index': number;
         'data-row-id': string;
         ref: RefCallback<HTMLElement | null>;
-    };
-    export function useRowDOMProps<T>(props: InfiniteTableRowProps<T>, rowProps: InfiniteTableComponentState<T>['rowProps'], rowStyle: InfiniteTableComponentState<T>['rowStyle'], rowClassName: InfiniteTableComponentState<T>['rowClassName'], tableDOMRef: MutableRefObject<HTMLDivElement | null>): {
+    } & any;
+    export function useRowDOMProps<T>(props: InfiniteTableRowProps<T>, rowProps: InfiniteTableState<T>['rowProps'], rowStyle: InfiniteTableState<T>['rowStyle'], rowClassName: InfiniteTableState<T>['rowClassName'], groupRenderStrategy: InfiniteTableState<T>['groupRenderStrategy'], tableDOMRef: MutableRefObject<HTMLDivElement | null>): {
         domProps: TableRowHTMLAttributes;
         domRef: MutableRefObject<HTMLElement | null>;
     };
@@ -1774,19 +2260,20 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/InfiniteTab
     import { VirtualBrain } from "components/VirtualBrain/index";
     function TableRowUnvirtualizedFn<T>(props: InfiniteTableRowProps<T> & {
         brain: VirtualBrain | null | undefined;
+        verticalBrain: VirtualBrain;
     }): JSX.Element;
     export const TableRowUnvirtualized: typeof TableRowUnvirtualizedFn;
 }
 declare module "components/InfiniteTable/hooks/useUnpinnedRendering" {
     import type { VirtualBrain } from "components/VirtualBrain/index";
     import type { Size } from "components/types/Size";
-    import type { InfiniteTableComputedColumn, InfiniteTableEnhancedData } from "components/InfiniteTable/types/index";
-    import { InfiniteTableComponentState } from "components/InfiniteTable/types/InfiniteTableState";
+    import type { InfiniteTableComputedColumn, InfiniteTableRowInfo } from "components/InfiniteTable/types/index";
+    import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     import { InfiniteTableToggleGroupRowFn } from "components/InfiniteTable/types/InfiniteTableColumn";
     type UnpinnedRenderingParams<T> = {
         columnShifts: number[] | null;
         bodySize: Size;
-        getData: () => InfiniteTableEnhancedData<T>[];
+        getData: () => InfiniteTableRowInfo<T>[];
         rowHeight: number;
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         repaintId: string | number;
@@ -1800,18 +2287,16 @@ declare module "components/InfiniteTable/hooks/useUnpinnedRendering" {
         computedUnpinnedColumnsWidth: number;
         computedPinnedStartWidth: number;
         computedPinnedEndWidth: number;
-        getState: () => InfiniteTableComponentState<T>;
+        getState: () => InfiniteTableState<T>;
     };
     export function useUnpinnedRendering<T>(params: UnpinnedRenderingParams<T>): JSX.Element | null;
 }
 declare module "components/InfiniteTable/hooks/useOnContainerScroll" {
-    import { MutableRefObject } from 'react';
-    import type { ScrollPosition } from "components/types/ScrollPosition";
     import { VirtualBrain } from "components/VirtualBrain/index";
-    export const useOnContainerScroll: ({ verticalVirtualBrain, horizontalVirtualBrain, domRef, }: {
+    export const useOnContainerScroll: <T>({ verticalVirtualBrain, horizontalVirtualBrain, reservedContentHeight, }: {
         verticalVirtualBrain: VirtualBrain;
         horizontalVirtualBrain: VirtualBrain;
-        domRef: MutableRefObject<HTMLDivElement | null>;
+        reservedContentHeight: number;
     }) => {
         applyScrollHorizontal: ({ scrollLeft }: {
             scrollLeft: number;
@@ -1819,7 +2304,6 @@ declare module "components/InfiniteTable/hooks/useOnContainerScroll" {
         applyScrollVertical: ({ scrollTop }: {
             scrollTop: number;
         }) => void;
-        scrollPositionRef: MutableRefObject<ScrollPosition>;
     };
 }
 declare module "components/hooks/useOnMount" {
@@ -1830,6 +2314,9 @@ declare module "components/hooks/useOnMount" {
     };
     export function useOnMount(domRef: RefObject<HTMLElement>, props: OnMountProps): void;
 }
+declare module "components/VirtualList/InfiniteListRootClassName" {
+    export const InfiniteListRootClassName = "InfiniteList";
+}
 declare module "components/VirtualList/RowListWithExternalScrolling" {
     import { CSSProperties } from 'react';
     import { VirtualBrain } from "components/VirtualBrain/index";
@@ -1848,15 +2335,15 @@ declare module "components/VirtualList/RowListWithExternalScrolling" {
 }
 declare module "components/InfiniteTable/hooks/usePinnedRendering" {
     import { VirtualBrain } from "components/VirtualBrain/index";
-    import { InfiniteTableComputedColumn, InfiniteTableEnhancedData } from "components/InfiniteTable/types/index";
+    import { InfiniteTableComputedColumn, InfiniteTableRowInfo } from "components/InfiniteTable/types/index";
     import type { Size } from "components/types/Size";
     import type { RenderRow } from "components/VirtualList/types";
-    import { InfiniteTableComponentState } from "components/InfiniteTable/types/InfiniteTableState";
+    import { InfiniteTableState } from "components/InfiniteTable/types/InfiniteTableState";
     import { InfiniteTableToggleGroupRowFn } from "components/InfiniteTable/types/InfiniteTableColumn";
     import { ScrollListener } from "components/VirtualBrain/ScrollListener";
     type UsePinnedParams<T> = {
-        getState: () => InfiniteTableComponentState<T>;
-        getData: () => InfiniteTableEnhancedData<T>[];
+        getState: () => InfiniteTableState<T>;
+        getData: () => InfiniteTableRowInfo<T>[];
         bodySize: Size;
         pinnedStartScrollListener: ScrollListener;
         pinnedEndScrollListener: ScrollListener;
@@ -1902,7 +2389,7 @@ declare module "components/InfiniteTable/hooks/useColumnSizeFn" {
 }
 declare module "components/InfiniteTable/hooks/useYourBrain" {
     import { Size } from "components/types/Size";
-    import { VirtualBrain } from "components/VirtualBrain/index";
+    import { VirtualBrain, VirtualBrainOptions } from "components/VirtualBrain/index";
     import { InfiniteTableComputedColumn } from "components/InfiniteTable/types/index";
     type UseYourBrainParam<T = any> = {
         computedUnpinnedColumns: InfiniteTableComputedColumn<T>[];
@@ -1911,6 +2398,7 @@ declare module "components/InfiniteTable/hooks/useYourBrain" {
         dataArray: any[];
         rowHeight: number;
         bodySize: Size;
+        rowSpan?: VirtualBrainOptions['itemSpan'];
     };
     export function useYourBrain<T = any>(param: UseYourBrainParam<T>): {
         horizontalVirtualBrain: VirtualBrain;
@@ -2007,6 +2495,374 @@ declare module "components/CSSVariableWatch" {
     }) => void;
     export const CSSVariableWatch: (props: CSSVariableWatcherProps) => JSX.Element;
 }
+declare module "components/InfiniteTable/hooks/useDOMProps" {
+    import { FocusEvent } from 'react';
+    export function useDOMProps<T>(initialDOMProps?: React.HTMLProps<HTMLDivElement>): {
+        onFocus: (event: FocusEvent<HTMLDivElement>) => void;
+        onBlur: (event: FocusEvent<HTMLDivElement>) => void;
+        accept?: string | undefined;
+        acceptCharset?: string | undefined;
+        action?: string | undefined;
+        allowFullScreen?: boolean | undefined;
+        allowTransparency?: boolean | undefined;
+        alt?: string | undefined;
+        as?: string | undefined;
+        async?: boolean | undefined;
+        autoComplete?: string | undefined;
+        autoFocus?: boolean | undefined;
+        autoPlay?: boolean | undefined;
+        capture?: string | boolean | undefined;
+        cellPadding?: string | number | undefined;
+        cellSpacing?: string | number | undefined;
+        charSet?: string | undefined;
+        challenge?: string | undefined;
+        checked?: boolean | undefined;
+        cite?: string | undefined;
+        classID?: string | undefined;
+        cols?: number | undefined;
+        colSpan?: number | undefined;
+        content?: string | undefined;
+        controls?: boolean | undefined;
+        coords?: string | undefined;
+        crossOrigin?: string | undefined;
+        data?: string | undefined;
+        dateTime?: string | undefined;
+        default?: boolean | undefined;
+        defer?: boolean | undefined;
+        disabled?: boolean | undefined;
+        download?: any;
+        encType?: string | undefined;
+        form?: string | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        frameBorder?: string | number | undefined;
+        headers?: string | undefined;
+        height?: string | number | undefined;
+        high?: number | undefined;
+        href?: string | undefined;
+        hrefLang?: string | undefined;
+        htmlFor?: string | undefined;
+        httpEquiv?: string | undefined;
+        integrity?: string | undefined;
+        keyParams?: string | undefined;
+        keyType?: string | undefined;
+        kind?: string | undefined;
+        label?: string | undefined;
+        list?: string | undefined;
+        loop?: boolean | undefined;
+        low?: number | undefined;
+        manifest?: string | undefined;
+        marginHeight?: number | undefined;
+        marginWidth?: number | undefined;
+        max?: string | number | undefined;
+        maxLength?: number | undefined;
+        media?: string | undefined;
+        mediaGroup?: string | undefined;
+        method?: string | undefined;
+        min?: string | number | undefined;
+        minLength?: number | undefined;
+        multiple?: boolean | undefined;
+        muted?: boolean | undefined;
+        name?: string | undefined;
+        nonce?: string | undefined;
+        noValidate?: boolean | undefined;
+        open?: boolean | undefined;
+        optimum?: number | undefined;
+        pattern?: string | undefined;
+        placeholder?: string | undefined;
+        playsInline?: boolean | undefined;
+        poster?: string | undefined;
+        preload?: string | undefined;
+        readOnly?: boolean | undefined;
+        rel?: string | undefined;
+        required?: boolean | undefined;
+        reversed?: boolean | undefined;
+        rows?: number | undefined;
+        rowSpan?: number | undefined;
+        sandbox?: string | undefined;
+        scope?: string | undefined;
+        scoped?: boolean | undefined;
+        scrolling?: string | undefined;
+        seamless?: boolean | undefined;
+        selected?: boolean | undefined;
+        shape?: string | undefined;
+        size?: number | undefined;
+        sizes?: string | undefined;
+        span?: number | undefined;
+        src?: string | undefined;
+        srcDoc?: string | undefined;
+        srcLang?: string | undefined;
+        srcSet?: string | undefined;
+        start?: number | undefined;
+        step?: string | number | undefined;
+        summary?: string | undefined;
+        target?: string | undefined;
+        type?: string | undefined;
+        useMap?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
+        width?: string | number | undefined;
+        wmode?: string | undefined;
+        wrap?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        className?: string | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        style?: import("react").CSSProperties | undefined;
+        tabIndex: number;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "search" | "numeric" | "none" | "url" | "text" | "decimal" | "tel" | "email" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: boolean | "false" | "true" | undefined;
+        'aria-autocomplete'?: "inline" | "both" | "none" | "list" | undefined;
+        'aria-busy'?: boolean | "false" | "true" | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "location" | "time" | "false" | "page" | "true" | "step" | "date" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: boolean | "false" | "true" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: boolean | "false" | "true" | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: boolean | "false" | "true" | undefined;
+        'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "false" | "listbox" | "true" | "tree" | undefined;
+        'aria-hidden'?: boolean | "false" | "true" | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: boolean | "false" | "true" | undefined;
+        'aria-multiline'?: boolean | "false" | "true" | undefined;
+        'aria-multiselectable'?: boolean | "false" | "true" | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
+        'aria-readonly'?: boolean | "false" | "true" | undefined;
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: boolean | "false" | "true" | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: boolean | "false" | "true" | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "other" | "ascending" | "descending" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        children?: import("react").ReactNode;
+        dangerouslySetInnerHTML?: {
+            __html: string;
+        } | undefined;
+        onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        key?: import("react").Key | null | undefined;
+    };
+}
 declare module "components/InfiniteTable/index" {
     import * as React from 'react';
     import type { InfiniteTableProps } from "components/InfiniteTable/types/index";
@@ -2016,7 +2872,7 @@ declare module "components/InfiniteTable/index" {
     export namespace InfiniteTable {
         var defaultProps: {
             rowHeight: number;
-            headerHeight: string;
+            headerHeight: import("@vanilla-extract/private").CSSVarFunction;
         };
     }
     export * from "components/InfiniteTable/types/index";