@infinite-table/infinite-react 0.0.2-canary.6 → 0.0.5

package/index.css

@@ -191,7 +191,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=Ll8xNmxtMWl3MCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmJlZm9yZSB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmFmdGVyIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwICo6YmVmb3JlIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKjphZnRlciB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xNmxtMWl3MiB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5fMTZsbTFpdzMgewogIHBvc2l0aW9uOiBzdGlja3k7Cn0KLl8xNmxtMWl3NCB7CiAgcG9zaXRpb246IGZpeGVkOwp9Ci5fMTZsbTFpdzUgewogIGZpbGw6IGN1cnJlbnRDb2xvcjsKfQouXzE2bG0xaXc2IHsKICBmaWxsOiB2YXIoLS1pbmZpbml0ZS1hY2NlbnQtY29sb3IpOwp9Ci5fMTZsbTFpdzcgewogIGJhY2tncm91bmQ6IGluaGVyaXQ7Cn0KLl8xNmxtMWl3OCB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3OSB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMTZsbTFpd2EgewogIGZsZXg6IDE7Cn0KLl8xNmxtMWl3YiB7CiAgZmxleDogbm9uZTsKfQouXzE2bG0xaXdjIHsKICB6LWluZGV4OiAxOwp9Ci5fMTZsbTFpd2QgewogIHotaW5kZXg6IDEwOwp9Ci5fMTZsbTFpd2UgewogIHotaW5kZXg6IDEwMDA7Cn0KLl8xNmxtMWl3ZiB7CiAgei1pbmRleDogMTAwMDA7Cn0KLl8xNmxtMWl3ZyB7CiAgei1pbmRleDogMTAwMDAwOwp9Ci5fMTZsbTFpd2ggewogIGRpc3BsYXk6IGZsZXg7Cn0KLl8xNmxtMWl3aSB7CiAgZGlzcGxheTogYmxvY2s7Cn0KLl8xNmxtMWl3aiB7CiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwp9Ci5fMTZsbTFpd2sgewogIHVzZXItc2VsZWN0OiBub25lOwp9Ci5fMTZsbTFpd2wgewogIGhlaWdodDogMDsKfQouXzE2bG0xaXdtIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLl8xNmxtMWl3biB7CiAgd2lkdGg6IDA7Cn0KLl8xNmxtMWl3byB7CiAgd2lkdGg6IDEwMCU7Cn0KLl8xNmxtMWl3cCB7CiAgdG9wOiAwOwp9Ci5fMTZsbTFpd3EgewogIHRvcDogMTAwJTsKfQouXzE2bG0xaXdyIHsKICBsZWZ0OiAwOwp9Ci5fMTZsbTFpd3MgewogIGxlZnQ6IDEwMCU7Cn0KLl8xNmxtMWl3dCB7CiAgYm90dG9tOiAwOwp9Ci5fMTZsbTFpd3UgewogIGJvdHRvbTogMTAwJTsKfQouXzE2bG0xaXd2IHsKICByaWdodDogMDsKfQouXzE2bG0xaXd3IHsKICByaWdodDogMTAwJTsKfQouXzE2bG0xaXd4IHsKICBmbGV4LWZsb3c6IGNvbHVtbjsKfQouXzE2bG0xaXd5IHsKICBmbGV4LWZsb3c6IHJvdzsKfQouXzE2bG0xaXd6IHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMTZsbTFpdzEwIHsKICBhbGlnbi1pdGVtczogc3RyZXRjaDsKfQouXzE2bG0xaXcxMSB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLl8xNmxtMWl3MTIgewogIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsKfQouXzE2bG0xaXcxMyB7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKfQouXzE2bG0xaXcxNCB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQouXzE2bG0xaXcxNSB7CiAgb3ZlcmZsb3c6IGF1dG87Cn0KLl8xNmxtMWl3MTYgewogIG92ZXJmbG93OiB2aXNpYmxlOwp9Ci5fMTZsbTFpdzE3IHsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtOwp9Ci5fMTZsbTFpdzE4IHsKICB3aGl0ZS1zcGFjZTogbm93cmFwOwp9Ci5fMTZsbTFpdzE5IHsKICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsKfQ== */
+/* vanilla-extract-css-ns:@infinite-table/infinite-react/src/components/InfiniteTable/utilities.css.ts.vanilla.css?source=Ll8xNmxtMWl3MCB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmJlZm9yZSB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwOmFmdGVyIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKiB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcwICo6YmVmb3JlIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Ci5fMTZsbTFpdzAgKjphZnRlciB7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKfQouXzE2bG0xaXcxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xNmxtMWl3MiB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5fMTZsbTFpdzMgewogIHBvc2l0aW9uOiBzdGlja3k7Cn0KLl8xNmxtMWl3NCB7CiAgcG9zaXRpb246IGZpeGVkOwp9Ci5fMTZsbTFpdzUgewogIGZpbGw6IGN1cnJlbnRDb2xvcjsKfQouXzE2bG0xaXc2IHsKICBmaWxsOiB2YXIoLS1pbmZpbml0ZS1hY2NlbnQtY29sb3IpOwp9Ci5fMTZsbTFpdzcgewogIGJhY2tncm91bmQ6IGluaGVyaXQ7Cn0KLl8xNmxtMWl3OCB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3OSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLDAsMCk7Cn0KLl8xNmxtMWl3YSB7CiAgdHJhbnNmb3JtOiByb3RhdGUoOTBkZWcpOwp9Ci5fMTZsbTFpd2IgewogIGN1cnNvcjogcG9pbnRlcjsKfQouXzE2bG0xaXdjIHsKICBmbGV4OiAxOwp9Ci5fMTZsbTFpd2QgewogIGZsZXg6IG5vbmU7Cn0KLl8xNmxtMWl3ZSB7CiAgei1pbmRleDogMTsKfQouXzE2bG0xaXdmIHsKICB6LWluZGV4OiAxMDsKfQouXzE2bG0xaXdnIHsKICB6LWluZGV4OiAxMDAwOwp9Ci5fMTZsbTFpd2ggewogIHotaW5kZXg6IDEwMDAwOwp9Ci5fMTZsbTFpd2kgewogIHotaW5kZXg6IDEwMDAwMDsKfQouXzE2bG0xaXdqIHsKICBkaXNwbGF5OiBmbGV4Owp9Ci5fMTZsbTFpd2sgewogIGRpc3BsYXk6IGJsb2NrOwp9Ci5fMTZsbTFpd2wgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKfQouXzE2bG0xaXdtIHsKICB1c2VyLXNlbGVjdDogbm9uZTsKfQouXzE2bG0xaXduIHsKICBoZWlnaHQ6IDA7Cn0KLl8xNmxtMWl3byB7CiAgaGVpZ2h0OiAxMDAlOwp9Ci5fMTZsbTFpd3AgewogIHdpZHRoOiAwOwp9Ci5fMTZsbTFpd3EgewogIHdpZHRoOiAxMDAlOwp9Ci5fMTZsbTFpd3IgewogIHRvcDogMDsKfQouXzE2bG0xaXdzIHsKICB0b3A6IDEwMCU7Cn0KLl8xNmxtMWl3dCB7CiAgbGVmdDogMDsKfQouXzE2bG0xaXd1IHsKICBsZWZ0OiAxMDAlOwp9Ci5fMTZsbTFpd3YgewogIGJvdHRvbTogMDsKfQouXzE2bG0xaXd3IHsKICBib3R0b206IDEwMCU7Cn0KLl8xNmxtMWl3eCB7CiAgcmlnaHQ6IDA7Cn0KLl8xNmxtMWl3eSB7CiAgcmlnaHQ6IDEwMCU7Cn0KLl8xNmxtMWl3eiB7CiAgZmxleC1mbG93OiBjb2x1bW47Cn0KLl8xNmxtMWl3MTAgewogIGZsZXgtZmxvdzogcm93Owp9Ci5fMTZsbTFpdzExIHsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9Ci5fMTZsbTFpdzEyIHsKICBhbGlnbi1pdGVtczogc3RyZXRjaDsKfQouXzE2bG0xaXcxMyB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLl8xNmxtMWl3MTQgewogIGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDsKfQouXzE2bG0xaXcxNSB7CiAganVzdGlmeS1jb250ZW50OiBmbGV4LWVuZDsKfQouXzE2bG0xaXcxNiB7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQouXzE2bG0xaXcxNyB7CiAgb3ZlcmZsb3c6IGF1dG87Cn0KLl8xNmxtMWl3MTggewogIG92ZXJmbG93OiB2aXNpYmxlOwp9Ci5fMTZsbTFpdzE5IHsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtOwp9Ci5fMTZsbTFpdzFhIHsKICB3aGl0ZS1zcGFjZTogbm93cmFwOwp9Ci5fMTZsbTFpdzFiIHsKICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpczsKfQ== */
 ._16lm1iw0 {
   box-sizing: border-box;
 }
@@ -236,117 +236,123 @@
   transform: translate3d(0, 0, 0);
 }
 ._16lm1iw9 {
-  cursor: pointer;
+  transform: translate3d(0, 0, 0);
 }
 ._16lm1iwa {
-  flex: 1;
+  transform: rotate(90deg);
 }
 ._16lm1iwb {
-  flex: none;
+  cursor: pointer;
 }
 ._16lm1iwc {
-  z-index: 1;
+  flex: 1;
 }
 ._16lm1iwd {
-  z-index: 10;
+  flex: none;
 }
 ._16lm1iwe {
-  z-index: 1000;
+  z-index: 1;
 }
 ._16lm1iwf {
-  z-index: 10000;
+  z-index: 10;
 }
 ._16lm1iwg {
-  z-index: 100000;
+  z-index: 1000;
 }
 ._16lm1iwh {
-  display: flex;
+  z-index: 10000;
 }
 ._16lm1iwi {
-  display: block;
+  z-index: 100000;
 }
 ._16lm1iwj {
-  display: inline-block;
+  display: flex;
 }
 ._16lm1iwk {
+  display: block;
+}
+._16lm1iwl {
+  display: inline-block;
+}
+._16lm1iwm {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
-._16lm1iwl {
+._16lm1iwn {
   height: 0;
 }
-._16lm1iwm {
+._16lm1iwo {
   height: 100%;
 }
-._16lm1iwn {
+._16lm1iwp {
   width: 0;
 }
-._16lm1iwo {
+._16lm1iwq {
   width: 100%;
 }
-._16lm1iwp {
+._16lm1iwr {
   top: 0;
 }
-._16lm1iwq {
+._16lm1iws {
   top: 100%;
 }
-._16lm1iwr {
+._16lm1iwt {
   left: 0;
 }
-._16lm1iws {
+._16lm1iwu {
   left: 100%;
 }
-._16lm1iwt {
+._16lm1iwv {
   bottom: 0;
 }
-._16lm1iwu {
+._16lm1iww {
   bottom: 100%;
 }
-._16lm1iwv {
+._16lm1iwx {
   right: 0;
 }
-._16lm1iww {
+._16lm1iwy {
   right: 100%;
 }
-._16lm1iwx {
+._16lm1iwz {
   flex-flow: column;
 }
-._16lm1iwy {
+._16lm1iw10 {
   flex-flow: row;
 }
-._16lm1iwz {
+._16lm1iw11 {
   align-items: center;
 }
-._16lm1iw10 {
+._16lm1iw12 {
   align-items: stretch;
 }
-._16lm1iw11 {
+._16lm1iw13 {
   justify-content: center;
 }
-._16lm1iw12 {
+._16lm1iw14 {
   justify-content: flex-start;
 }
-._16lm1iw13 {
+._16lm1iw15 {
   justify-content: flex-end;
 }
-._16lm1iw14 {
+._16lm1iw16 {
   overflow: hidden;
 }
-._16lm1iw15 {
+._16lm1iw17 {
   overflow: auto;
 }
-._16lm1iw16 {
+._16lm1iw18 {
   overflow: visible;
 }
-._16lm1iw17 {
+._16lm1iw19 {
   will-change: transform;
 }
-._16lm1iw18 {
+._16lm1iw1a {
   white-space: nowrap;
 }
-._16lm1iw19 {
+._16lm1iw1b {
   text-overflow: ellipsis;
 }
 

package/index.d.ts

@@ -147,6 +147,7 @@ declare module "components/hooks/useComponentState" {
         [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 = {}> = {
+        debugName?: string;
         initSetupState?: () => COMPONENT_SETUP_STATE;
         forwardProps?: () => ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>;
         allowedControlledPropOverrides?: Record<keyof T_PROPS, true>;
@@ -326,48 +327,9 @@ declare module "components/DataSource/state/getInitialState" {
         state: DataSourceState<T>;
     }): DataSourceDerivedState<T>;
 }
-declare module "components/DataSource/state/reducer" {
-    import type { DataSourceState, DataSourceDerivedState } from "components/DataSource/types";
-    export function concludeReducer<T>(params: {
-        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";
-    import { useDataSource } from "components/DataSource/publicHooks/useDataSource";
-    import { GroupRowsState } from "components/DataSource/GroupRowsState";
-    function DataSource<T>(props: DataSourceProps<T>): JSX.Element;
-    export { useDataSource, DataSource, GroupRowsState };
-    export * from "components/DataSource/types";
-}
-declare module "components/DataSource/GroupRowsState" {
-    import { DataSourceExpandedAndCollapsedGroupRows } from "components/DataSource/index";
-    export class GroupRowsState<KeyType extends any = any> {
-        private expandedMap?;
-        private collapsedMap?;
-        private collapsedAll;
-        private expandedAll;
-        private initialState;
-        constructor(state: DataSourceExpandedAndCollapsedGroupRows<KeyType> | GroupRowsState<KeyType>);
-        getState(): DataSourceExpandedAndCollapsedGroupRows<KeyType>;
-        destroy(): void;
-        private update;
-        areAllCollapsed(): boolean;
-        areAllExpanded(): boolean;
-        collapseAll(): void;
-        expandAll(): void;
-        isGroupRowExpanded(keys: KeyType[]): boolean | undefined;
-        isGroupRowCollapsed(keys: KeyType[]): boolean;
-        setGroupRowExpanded(keys: KeyType[], shouldExpand: boolean): void;
-        collapseGroupRow(keys: KeyType[]): void;
-        expandGroupRow(keys: KeyType[]): void;
-        toggleGroupRow(keys: KeyType[]): void;
-    }
-}
 declare module "components/types/Renderable" {
     import * as React from 'react';
-    export type Renderable = React.ReactNode | string | number | null;
+    export type Renderable = React.ReactNode;
 }
 declare module "components/InfiniteTable/types/Utility" {
     export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
@@ -392,6 +354,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     import type { DiscriminatedUnion, RequireAtLeastOne } from "components/InfiniteTable/types/Utility";
     import type { InfiniteTableRowInfo } from "components/InfiniteTable/types/index";
     import { CSSProperties } from 'react';
+    import { PivotBy } from "utils/groupAndPivot/index";
     export type { DiscriminatedUnion, RequireAtLeastOne };
     export type InfiniteTableToggleGroupRowFn = (groupKeys: any[]) => void;
     export interface InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> {
@@ -405,6 +368,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         toggleGroupRow: InfiniteTableToggleGroupRowFn;
         groupRowsBy: DataSourceState<DATA_TYPE>['groupRowsBy'];
     }
+    export type InfiniteTableColumnRenderValueParam<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = InfiniteTableColumnRenderParam<DATA_TYPE, COL_TYPE>;
     export type InfiniteTableColumnRowspanFnParams<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = {
         data: DATA_TYPE | null;
         rowInfo: InfiniteTableRowInfo<DATA_TYPE>;
@@ -419,6 +383,7 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     }
     export type InfiniteTableColumnPinned = 'start' | 'end' | false;
     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 InfiniteTableColumnRenderValueFunction<DATA_TYPE, COL_TYPE = InfiniteTableComputedColumn<DATA_TYPE>> = InfiniteTableColumnRenderFunction<DATA_TYPE, COL_TYPE>;
     export type InfiniteTableColumnHeaderRenderFunction<T> = ({ columnSortInfo, column, }: InfiniteTableColumnHeaderRenderParams<T>) => Renderable;
     export type InfiniteTableColumnWithField<T> = {
         field: keyof T;
@@ -492,7 +457,16 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         pivotColumn?: true;
         pivotTotalColumn?: true;
         pivotGroupKeys?: any[];
-        renderValue?: InfiniteTableColumnRenderFunction<T>;
+        pivotByForColumn?: DataSourcePivotBy<T>;
+        pivotIndexForColumn?: number;
+        pivotGroupKeyForColumn?: any;
+    };
+    export type InfiniteTablePivotFinalColumn<DataType, KeyType extends any = any> = InfiniteTablePivotColumn<DataType> & {
+        pivotBy: DataSourcePivotBy<DataType>[];
+        pivotGroupKeys: KeyType[];
+        pivotByForColumn: PivotBy<DataType, KeyType>;
+        pivotIndexForColumn: number;
+        pivotGroupKeyForColumn: KeyType;
     };
     type InfiniteTableComputedColumnBase<T> = {
         computedWidth: number;
@@ -518,12 +492,61 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
     };
     export type InfiniteTableComputedColumn<T> = InfiniteTableColumn<T> & InfiniteTableComputedColumnBase<T> & InfiniteTablePivotColumn<T> & InfiniteTableGeneratedGroupColumn<T>;
 }
+declare module "utils/groupAndPivot/getPivotColumnsAndColumnGroups" {
+    import type { DataSourcePivotBy } from "components/DataSource/index";
+    import type { InfiniteTablePropColumnGroups, InfiniteTablePropColumns } from "components/InfiniteTable/index";
+    import type { InfiniteTablePivotColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import type { InfiniteTablePropPivotTotalColumnPosition } from "components/InfiniteTable/types/InfiniteTableState";
+    import { DeepMap } from "utils/DeepMap";
+    export type ComputedColumnsAndGroups<DataType> = {
+        columns: InfiniteTablePropColumns<DataType, InfiniteTablePivotColumn<DataType>>;
+        columnGroups: InfiniteTablePropColumnGroups;
+    };
+    export function getPivotColumnsAndColumnGroups<DataType, KeyType = any>(deepMap: DeepMap<KeyType, boolean>, pivotBy: DataSourcePivotBy<DataType>[], pivotTotalColumnPosition: InfiniteTablePropPivotTotalColumnPosition): ComputedColumnsAndGroups<DataType>;
+}
+declare module "components/DataSource/state/reducer" {
+    import type { DataSourceState, DataSourceDerivedState } from "components/DataSource/types";
+    export function concludeReducer<T>(params: {
+        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";
+    import { useDataSource } from "components/DataSource/publicHooks/useDataSource";
+    import { GroupRowsState } from "components/DataSource/GroupRowsState";
+    function DataSource<T>(props: DataSourceProps<T>): JSX.Element;
+    export { useDataSource, DataSource, GroupRowsState };
+    export * from "components/DataSource/types";
+}
+declare module "components/DataSource/GroupRowsState" {
+    import { DataSourceExpandedAndCollapsedGroupRows } from "components/DataSource/index";
+    export class GroupRowsState<KeyType extends any = any> {
+        private expandedMap?;
+        private collapsedMap?;
+        private collapsedAll;
+        private expandedAll;
+        private initialState;
+        constructor(state: DataSourceExpandedAndCollapsedGroupRows<KeyType> | GroupRowsState<KeyType>);
+        getState(): DataSourceExpandedAndCollapsedGroupRows<KeyType>;
+        destroy(): void;
+        private update;
+        areAllCollapsed(): boolean;
+        areAllExpanded(): boolean;
+        collapseAll(): void;
+        expandAll(): void;
+        isGroupRowExpanded(keys: KeyType[]): boolean | undefined;
+        isGroupRowCollapsed(keys: KeyType[]): boolean;
+        setGroupRowExpanded(keys: KeyType[], shouldExpand: boolean): void;
+        collapseGroupRow(keys: KeyType[]): void;
+        expandGroupRow(keys: KeyType[]): void;
+        toggleGroupRow(keys: KeyType[]): void;
+    }
+}
 declare module "utils/groupAndPivot/index" {
-    import { DataSourcePivotBy } from "@infinite-table/infinite-react";
     import { GroupRowsState } from "components/DataSource/GroupRowsState";
-    import { InfiniteTablePivotColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
-    import { InfiniteTableGroupColumnBase, InfiniteTablePropColumnGroups, InfiniteTablePropColumns } from "components/InfiniteTable/types/InfiniteTableProps";
-    import { InfiniteTablePropPivotTotalColumnPosition } from "components/InfiniteTable/types/InfiniteTableState";
+    import { InfiniteTablePivotColumn, InfiniteTablePivotFinalColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import { InfiniteTableGroupColumnBase } from "components/InfiniteTable/types/InfiniteTableProps";
     import { DeepMap } from "utils/DeepMap";
     export type AggregationReducer<T, AggregationResultType> = {
         initialValue: AggregationResultType;
@@ -581,7 +604,11 @@ declare module "utils/groupAndPivot/index" {
         toKey?: (value: any, data: DataType) => GroupKeyType<KeyType>;
         column?: InfiniteTableGroupColumnBase<DataType>;
     };
-    export type PivotBy<DataType, KeyType> = GroupBy<DataType, KeyType>;
+    export type PivotBy<DataType, KeyType> = Omit<GroupBy<DataType, KeyType>, 'column'> & {
+        column?: InfiniteTablePivotColumn<DataType> | (({ column, }: {
+            column: InfiniteTablePivotFinalColumn<DataType, KeyType>;
+        }) => Partial<InfiniteTablePivotColumn<DataType>>);
+    };
     type GroupParams<DataType, KeyType> = {
         groupBy: GroupBy<DataType, KeyType>[];
         defaultToKey?: (value: any, item: DataType) => GroupKeyType<KeyType>;
@@ -607,11 +634,6 @@ declare module "utils/groupAndPivot/index" {
     export function enhancedFlatten<DataType, KeyType = any>(param: EnhancedFlattenParam<DataType, KeyType>): {
         data: InfiniteTableRowInfo<DataType>[];
     };
-    export type ComputedColumnsAndGroups<DataType> = {
-        columns: InfiniteTablePropColumns<DataType, InfiniteTablePivotColumn<DataType>>;
-        columnGroups: InfiniteTablePropColumnGroups;
-    };
-    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<{
@@ -651,6 +673,11 @@ declare module "components/InfiniteTable/theme.css" {
         fontFamily: string;
         minHeight: string;
         borderRadius: string;
+        /**
+         * The background color for the whole component.
+         *
+         * Overriden in the `dark` theme.
+         */
         background: string;
         components: {
             LoadMask: {
@@ -665,12 +692,27 @@ declare module "components/InfiniteTable/theme.css" {
                 borderRadius: string;
             };
             Header: {
+                /**
+                 * Background color for the header. Defaults to [`--infinie-header-cell-background`](#header-cell-background).
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 background: string;
+                /**
+                 * The text color inside the header.
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 color: string;
                 height: string;
             };
             HeaderCell: {
                 draggingBackground: string;
+                /**
+                 * Background for header cells.
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 background: string;
                 padding: string;
                 iconSize: string;
@@ -678,14 +720,39 @@ declare module "components/InfiniteTable/theme.css" {
             Cell: {
                 padding: string;
                 borderWidth: string;
+                /**
+                 * Specifies the border for cells.
+                 *
+                 * Overriden in the `dark` theme - eg: `1px solid #2a323d`
+                 */
                 border: string;
                 borderInvisible: string;
                 borderRadius: string;
             };
             Row: {
+                /**
+                 * Text color inside rows. Defaults to `currentColor`
+                 *
+                 * Overriden in `dark` theme.
+                 */
                 color: string;
+                /**
+                 * Background color for rows. Defaults to [`--infinite-background`](#background).
+                 *
+                 * Overriden in `dark` theme.
+                 */
                 background: string;
+                /**
+                 * Background color for odd rows. Even rows will use [`--infinite-row-background`](#row-background).
+                 *
+                 * Overriden in `dark` theme.
+                 */
                 oddBackground: string;
+                /**
+                 * Background color for rows, on hover.
+                 *
+                 * Overriden in the `dark` theme.
+                 */
                 hoverBackground: string;
                 groupRowBackground: string;
                 groupRowColumnNesting: string;
@@ -704,6 +771,7 @@ declare module "components/InfiniteTable/utilities.css" {
     export const fill: Record<"accentColor" | "currentColor", string>;
     export const background: Record<"inherit", string>;
     export const transformTranslateZero: string;
+    export const transform: Record<"translateZero" | "rotate90", string>;
     export const cursor: Record<"pointer", string>;
     export const flex: Record<"none" | 1, string>;
     export const zIndex: Record<1 | 10 | 1000 | 10000 | 100000, string>;
@@ -809,13 +877,14 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         columns: string[];
         depth: number;
     };
-    export type GroupColumnGetterOptions<T> = {
-        groupIndex?: number;
+    export type InfiniteTableGroupColumnGetterOptions<T> = {
+        groupIndexForColumn?: number;
+        groupByForColumn?: DataSourceGroupRowsBy<T>;
+        groupRenderStrategy: InfiniteTablePropGroupRenderStrategy;
         groupCount: number;
-        groupBy?: DataSourceGroupRowsBy<T>;
         groupRowsBy: DataSourceGroupRowsBy<T>[];
     };
-    export type PivotColumnGetterOptions<T> = {
+    export type InfiniteTablePivotColumnGetterOptions<T> = {
         column: InfiniteTablePivotColumn<T>;
         groupRowsBy: DataSourcePropGroupRowsBy<T>;
         pivotBy: DataSourcePropPivotBy<T>;
@@ -827,8 +896,9 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
     export type InfiniteTablePivotColumnBase<T> = InfiniteTableColumn<T> & InfiniteTableColumnWithSize & {
         renderValue?: InfiniteTableColumnRenderFunction<T>;
     };
-    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 InfiniteTablePropGroupColumn<T> = InfiniteTableGroupColumnBase<T> | InfiniteTableGroupColumnFunction<T>;
+    export type InfiniteTableGroupColumnFunction<T> = (options: InfiniteTableGroupColumnGetterOptions<T>, toggleGroupRow: (groupKeys: any[]) => void) => InfiniteTableGroupColumnBase<T>;
+    export type InfiniteTablePropPivotColumn<T> = InfiniteTablePivotColumnBase<T> | ((options: InfiniteTablePivotColumnGetterOptions<T>) => InfiniteTablePivotColumnBase<T>);
     export type InfiniteTablePropPivotRowLabelsColumn<T> = InfiniteTablePropPivotColumn<T>;
     export type InfiniteTablePropComponents = {
         LoadMask?: React.FC<LoadMaskProps>;
@@ -1089,12 +1159,12 @@ 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, InfiniteTablePropComponents } from "components/InfiniteTable/types/InfiniteTableProps";
-    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam } from "components/InfiniteTable/types/InfiniteTableColumn";
+    import type { InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTablePropColumnOrder, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnAggregator, InfiniteTableColumnGroup, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTablePropRowStyle, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTablePropRowClassName, InfiniteTablePropColumns, InfiniteTablePropComponents, InfiniteTableGroupColumnFunction, InfiniteTableGroupColumnGetterOptions } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { InfiniteTableComputedValues } from "components/InfiniteTable/types/InfiniteTableComputedValues";
     import type { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
     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, };
+    export type { InfiniteTableColumnAggregator, InfiniteTableComputedValues, InfiniteTablePropColumns, InfiniteTableRowInfo, InfiniteTableGroupColumnFunction, InfiniteTablePropColumnOrder, InfiniteTablePropComponents, InfiniteTablePropColumnVisibility, InfiniteTablePropColumnPinning, InfiniteTableColumnGroup, InfiniteTableColumn, InfiniteTableComputedColumn, InfiniteTableColumnRenderParam, InfiniteTableColumnRenderValueParam, InfiniteTableContextValue, InfiniteTablePropGroupRenderStrategy, InfiniteTablePropColumnAggregations, InfiniteTablePropColumnGroups, InfiniteTableState, InfiniteTableAction, InfiniteTableProps, InfiniteTableImperativeApi, InfiniteTableActionType, InfiniteTablePropRowStyle, InfiniteTablePropRowClassName, InfiniteTableRowStyleFn, InfiniteTableRowClassNameFn, InfiniteTableGroupColumnGetterOptions, };
 }
 declare module "components/InfiniteTable/InfiniteTableContext" {
     import { InfiniteTableContextValue } from "components/InfiniteTable/types/InfiniteTableContextValue";
@@ -1126,11 +1196,11 @@ declare module "components/InfiniteTable/state/getInitialState" {
         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);
+        sortable: 1 | ((value: boolean | undefined) => boolean);
         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);
+        loadingText: 1 | ((value: import("react").ReactNode) => import("react").ReactNode);
         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);
@@ -1393,19 +1463,6 @@ declare module "components/InfiniteTable/components/icons/ExpanderIcon" {
     };
     export function ExpanderIcon(props: ExpanderIconProps): JSX.Element;
 }
-declare module "components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns" {
-    import { DataSourcePropGroupRowsBy, DataSourcePropPivotBy } from "components/DataSource/index";
-    import { InfiniteTableProps } from "components/InfiniteTable/types/index";
-    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: 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<{
@@ -1437,31 +1494,44 @@ declare module "components/InfiniteTable/components/InfiniteTableRow/row.css" {
     }>;
     export const GroupRowExpanderCls: string;
 }
+declare module "components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns" {
+    import { DataSourcePropGroupRowsBy, DataSourcePropPivotBy } from "components/DataSource/index";
+    import { InfiniteTableProps } from "components/InfiniteTable/types/index";
+    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: InfiniteTableState<T>['pivotTotalColumnPosition'];
+        pivotBy: DataSourcePropPivotBy<T>;
+        groupRowsBy: DataSourcePropGroupRowsBy<T>;
+    }): InfiniteTableProps<T>['pivotColumns'];
+}
 declare module "components/InfiniteTable/utils/getColumnForGroupBy" {
+    import * as React from 'react';
     import { InfiniteTableColumnRenderParam } from "components/InfiniteTable/index";
     import { DataSourceGroupRowsBy } from "components/DataSource/index";
     import { InfiniteTableGeneratedGroupColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
-    import { GroupColumnGetterOptions, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/InfiniteTableProps";
-    export function getGroupColumnRender<T>({ groupIndex, groupRenderStrategy, toggleGroupRow, }: {
+    import { InfiniteTableGroupColumnGetterOptions, InfiniteTablePropGroupColumn, InfiniteTablePropGroupRenderStrategy } from "components/InfiniteTable/types/InfiniteTableProps";
+    export function getGroupColumnRender<T>({ groupIndexForColumn, 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;
+        groupIndexForColumn: number;
+    }): (renderOptions: InfiniteTableColumnRenderParam<T>) => React.ReactNode;
+    export function getColumnForGroupBy<T>(options: InfiniteTableGroupColumnGetterOptions<T> & {
+        groupIndexForColumn: number;
+        groupByForColumn: DataSourceGroupRowsBy<T>;
     }, 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>;
+    export function getSingleGroupColumn<T>(options: InfiniteTableGroupColumnGetterOptions<T>, toggleGroupRow: (groupRowKeys: any[]) => void, groupColumnFromProps?: InfiniteTablePropGroupColumn<T>): InfiniteTableGeneratedGroupColumn<T>;
 }
 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 { InfiniteTablePropGroupRenderStrategy, InfiniteTableProps } from "components/InfiniteTable/types/InfiniteTableProps";
+    import type { InfiniteTableColumn } from "components/InfiniteTable/index";
+    import type { DataSourceGroupRowsBy } from "components/DataSource/index";
+    import type { InfiniteTablePropGroupRenderStrategy, InfiniteTableProps } from "components/InfiniteTable/types/InfiniteTableProps";
     export function useColumnsWhen<T>(): void;
     export function getColumnsWhenGrouping<T>(params: {
         columns: Map<string, InfiniteTableColumn<T>>;