@infinite-table/infinite-react 0.0.3 → 0.0.7

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;
 }
 
@@ -613,6 +619,3 @@
   background: var(--infinite-load-mask-text-background);
   border-radius: var(--infinite-load-mask-border-radius);
 }
-
-
-/*# sourceMappingURL=tmp.css.map */

package/index.d.ts

@@ -327,45 +327,6 @@ 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;
@@ -393,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>> {
@@ -495,7 +457,16 @@ declare module "components/InfiniteTable/types/InfiniteTableColumn" {
         pivotColumn?: true;
         pivotTotalColumn?: true;
         pivotGroupKeys?: any[];
-        renderValue?: InfiniteTableColumnRenderValueFunction<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;
@@ -521,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;
@@ -582,9 +602,13 @@ declare module "utils/groupAndPivot/index" {
     export type GroupBy<DataType, KeyType> = {
         field: keyof DataType;
         toKey?: (value: any, data: DataType) => GroupKeyType<KeyType>;
-        column?: InfiniteTableGroupColumnBase<DataType>;
+        column?: Partial<InfiniteTableGroupColumnBase<DataType>>;
+    };
+    export type PivotBy<DataType, KeyType> = Omit<GroupBy<DataType, KeyType>, 'column'> & {
+        column?: InfiniteTablePivotColumn<DataType> | (({ column, }: {
+            column: InfiniteTablePivotFinalColumn<DataType, KeyType>;
+        }) => Partial<InfiniteTablePivotColumn<DataType>>);
     };
-    export type PivotBy<DataType, KeyType> = GroupBy<DataType, KeyType>;
     type GroupParams<DataType, KeyType> = {
         groupBy: GroupBy<DataType, KeyType>[];
         defaultToKey?: (value: any, item: DataType) => GroupKeyType<KeyType>;
@@ -610,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<{
@@ -752,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>;
@@ -864,7 +884,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         groupCount: number;
         groupRowsBy: DataSourceGroupRowsBy<T>[];
     };
-    export type PivotColumnGetterOptions<T> = {
+    export type InfiniteTablePivotColumnGetterOptions<T> = {
         column: InfiniteTablePivotColumn<T>;
         groupRowsBy: DataSourcePropGroupRowsBy<T>;
         pivotBy: DataSourcePropPivotBy<T>;
@@ -878,7 +898,7 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
     };
     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: PivotColumnGetterOptions<T>) => InfiniteTablePivotColumnBase<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>;
@@ -1176,16 +1196,16 @@ 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("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);
-        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);
+        onSelfFocus: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined);
+        onSelfBlur: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined);
+        onFocusWithin: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined);
+        onBlurWithin: 1 | ((value: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined) => ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined);
         onScrollToTop: 1 | ((value: (() => void) | undefined) => (() => void) | undefined);
         onScrollToBottom: 1 | ((value: (() => void) | undefined) => (() => void) | undefined);
         scrollToBottomOffset: 1 | ((value: number | undefined) => number | undefined);
@@ -1443,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<{
@@ -1487,6 +1494,19 @@ 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";
@@ -1509,9 +1529,9 @@ declare module "components/InfiniteTable/hooks/useToggleGroupRow" {
     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>>;
@@ -1564,6 +1584,7 @@ declare module "components/VirtualBrain/index" {
     export type MainAxisSize = number | ((itemIndex: number) => number);
     type OnRenderCountChangeFn = (renderCount: number) => void;
     type OnSizeChangeFn = (size: number) => void;
+    type OnDestroyFn = () => void;
     export type GetItemPositionFn = (itemIndex: number) => number;
     export type RenderRange = {
         renderStartIndex: number;
@@ -1578,11 +1599,13 @@ declare module "components/VirtualBrain/index" {
         private itemSizeCache;
         private itemOffsetCache;
         private options;
+        private destroyed;
         private totalSize;
         private onScrollFns;
         private onTotalSizeChangeFns;
         private onRenderCountChangeFns;
         private onRenderRangeChangeFns;
+        private onDestroyFns;
         name: string | undefined;
         private renderCount;
         private renderRange;
@@ -1598,6 +1621,7 @@ declare module "components/VirtualBrain/index" {
         getRenderCount: () => number;
         setScrollPosition: (scrollPosition: ScrollPosition) => void;
         private notifyScrollChange;
+        private notifyDestroy;
         private notifyTotalSizeChange;
         private notifyRenderCountChange;
         private notifyRenderRangeChange;
@@ -1609,6 +1633,7 @@ declare module "components/VirtualBrain/index" {
         onTotalSizeChange: (fn: OnSizeChangeFn) => () => void;
         onRenderCountChange: (fn: OnRenderCountChangeFn) => () => void;
         onRenderRangeChange: (fn: OnRenderRangeChangeFn) => () => void;
+        onDestroy: (fn: OnDestroyFn) => () => void;
         update: (newCount: VirtualBrainOptions['count'], newItemSize: VirtualBrainOptions['itemSize'], newItemSpan?: VirtualBrainOptions['itemSpan']) => void;
         private reset;
         private computeItemSpanUpTo;
@@ -1956,6 +1981,17 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/Infinite
         scrollable?: boolean;
     };
 }
+declare module "components/RawList/AvoidReactDiff" {
+    import * as React from 'react';
+    import { Renderable } from "components/types/Renderable";
+    import { SubscriptionCallback } from "components/types/SubscriptionCallback";
+    export type AvoidReactDiffProps = {
+        name?: string;
+        updater: SubscriptionCallback<Renderable>;
+    };
+    function AvoidReactDiffFn(props: AvoidReactDiffProps): JSX.Element;
+    export const AvoidReactDiff: React.MemoExoticComponent<typeof AvoidReactDiffFn>;
+}
 declare module "components/RawList/types" {
     import type { RefCallback } from 'react';
     import type { Renderable } from "components/types/Renderable";
@@ -1990,6 +2026,7 @@ declare module "components/RawList/MappedItems" {
         private renderedElements;
         constructor(axis: string);
         init(): void;
+        reset(): void;
         destroy(): void;
         getUnrenderedItems: (startIndex: number, endIndex: number) => number[];
         getElementsOutsideItemRange: (startIndex: number, endIndex: number) => number[];
@@ -2006,17 +2043,6 @@ declare module "components/RawList/MappedItems" {
         discardElementsStartingWith: (elementIndex: number, callback?: ((index: number) => void) | undefined) => boolean;
     }
 }
-declare module "components/RawList/AvoidReactDiff" {
-    import * as React from 'react';
-    import { Renderable } from "components/types/Renderable";
-    import { SubscriptionCallback } from "components/types/SubscriptionCallback";
-    export type AvoidReactDiffProps = {
-        name?: string;
-        updater: SubscriptionCallback<Renderable>;
-    };
-    function AvoidReactDiffFn(props: AvoidReactDiffProps): JSX.Element;
-    export const AvoidReactDiff: React.MemoExoticComponent<typeof AvoidReactDiffFn>;
-}
 declare module "components/RawList/ReactVirtualRenderer" {
     import type { Renderable } from "components/types/Renderable";
     import type { RenderItem } from "components/RawList/types";
@@ -2046,8 +2072,22 @@ declare module "components/RawList/ReactVirtualRenderer" {
         private renderItemAtElement;
         private updateElementPosition;
         destroy: () => void;
+        reset(): void;
     }
 }
+declare module "components/RawList/useVirtualRenderer" {
+    import { Renderable } from "components/types/Renderable";
+    import { SubscriptionCallback } from "components/types/SubscriptionCallback";
+    import { VirtualBrain } from "components/VirtualBrain/index";
+    import { ReactVirtualRenderer } from "components/RawList/ReactVirtualRenderer";
+    export function useVirtualRenderer({ brain, }: {
+        brain: VirtualBrain;
+        debugChannel?: string;
+    }): {
+        onRenderUpdater: SubscriptionCallback<Renderable>;
+        renderer: ReactVirtualRenderer;
+    };
+}
 declare module "components/RawList/index" {
     import * as React from 'react';
     import { RawListProps } from "components/RawList/types";