@infinite-table/infinite-react 0.0.1-canary.11 → 0.0.1

package/index.css

@@ -190,6 +190,13 @@
 .IT-VirtualScrollContainer {
   backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
+  /** MANDATORY BLOCK - START **/
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  /** MANDATORY BLOCK - END **/
 }
 .IT-VirtualScrollContainer, .IT-VirtualScrollContainer:before, .IT-VirtualScrollContainer:after, .IT-VirtualScrollContainer *, .IT-VirtualScrollContainer *:before, .IT-VirtualScrollContainer *:after {
   box-sizing: border-box;
@@ -201,15 +208,17 @@
   left: 0;
 }
 
+.IList {
+  position: relative;
+}
 .IList, .IList:before, .IList:after, .IList *, .IList *:before, .IList *:after {
   box-sizing: border-box;
 }
 .IList--vertical {
   display: inline-block;
 }
-
-.IListItemRoot > :first-child {
-  height: inherit;
+.IList--allow-horizontal-scroll {
+  overflow-x: auto;
 }
 
 :root {
@@ -225,6 +234,7 @@
   --ITableHeaderCell-icon-size: 16px;
   --ITableCell__border-width: 1px;
   --ITableCell__border: var(--ITableCell__border-width) solid #c6c6c6;
+  --ITableCell__border-invisible: none;
   --ITableCell__padding: var(--it-space-2) var(--it-space-3);
   --ITableHeaderCell__padding: var(--it-space-3) var(--it-space-3);
   --ITableRow__color: inherit;
@@ -276,6 +286,22 @@
   flex: 1;
 }
 
+.ITablePinnedRowsContainer--pinned-start {
+  border-right: var(--ITableCell__border);
+}
+.ITablePinnedRowsContainer--pinned-start .ITableColumnCell--last-in-category,
+.ITablePinnedRowsContainer--pinned-start .ITableColumnCell--first-in-category {
+  --ITableCell__border: none;
+}
+
+.ITablePinnedRowsContainer--pinned-end {
+  border-left: var(--ITableCell__border);
+}
+.ITablePinnedRowsContainer--pinned-end .ITableColumnCell--last-in-category,
+.ITablePinnedRowsContainer--pinned-end .ITableColumnCell--first-in-category {
+  --ITableCell__border: none;
+}
+
 .ITableFooter {
   padding: var(--it-space-2);
 }
@@ -323,6 +349,53 @@
   border-left: var(--ITableCell__border);
 }
 
+.ITable--has-pinned-end-overflow .ITableHeaderCell--unpinned.ITableCell--last-in-category {
+  --ITableCell__border: none;
+}
+
+.ITableHeader {
+  background: var(--ITableHeader__background);
+  color: var(--ITableHeader__color);
+}
+.ITableHeader--unvirtualized {
+  position: relative;
+  overflow: hidden;
+}
+.ITableHeader--overflow {
+  z-index: 10;
+}
+.ITableHeader--overflow .ITableHeaderCell--pinned-start.ITableHeaderCell--last-in-category {
+  border-right: var(--ITableCell__border-invisible);
+}
+.ITableHeader--overflow .ITableHeaderCell--pinned-end.ITableHeaderCell--first-in-category {
+  border-left: var(--ITableCell__border-invisible);
+}
+.ITableHeader--overflow.ITableHeader--pinned-start {
+  border-right: var(--ITableCell__border);
+}
+.ITableHeader--overflow.ITableHeader--pinned-end {
+  border-left: var(--ITableCell__border);
+}
+
+.ITableHeaderCell {
+  border-right: var(--ITableCell__border);
+}
+.ITableHeaderCell--dragging {
+  z-index: 100;
+  opacity: 0.8;
+  background: var(--ITableHeaderCell--dragging__background);
+}
+.ITableHeaderCell--pinned-start {
+  z-index: 10;
+}
+.ITableHeaderCellProxy {
+  background: var(--ITableHeader__background);
+  opacity: 0.9;
+  padding: var(--ITableCell__padding);
+  padding-left: 20px;
+  z-index: 200;
+}
+
 .ITableRow--group-row.ITableRow--odd .ITableCell::before,
 .ITableRow--group-row.ITableRow--even .ITableCell::before {
   content: "";
@@ -371,34 +444,6 @@
   background: var(--ITableRow--odd__background);
 }
 
-.ITableHeader {
-  background: var(--ITableHeader__background);
-  color: var(--ITableHeader__color);
-}
-.ITableHeader--unvirtualized {
-  position: relative;
-  align-items: stretch;
-}
-
-.ITableHeaderCell {
-  border-right: var(--ITableCell__border);
-}
-.ITableHeaderCell--dragging {
-  z-index: 100;
-  opacity: 0.8;
-  background: var(--ITableHeaderCell--dragging__background);
-}
-.ITableHeaderCell--pinned-start {
-  z-index: 10;
-}
-.ITableHeaderCellProxy {
-  background: var(--ITableHeader__background);
-  opacity: 0.9;
-  padding: var(--ITableCell__padding);
-  padding-left: 20px;
-  z-index: 200;
-}
-
 .ITableHeaderCell__sort-icon {
   margin-left: 10px;
   position: relative;

package/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style/utilities.scss","../src/components/VirtualScrollContainer/index.scss","../src/style/mixins.scss","../src/components/VirtualList/index.scss","../src/components/InfiniteTable/style/variables.scss","../src/components/InfiniteTable/style/index.scss","../src/components/InfiniteTable/components/InfiniteTableLicenseFooter/InfiniteTableLicenseFooter.scss","../src/components/InfiniteTable/components/InfiniteTableCell.scss","../src/components/InfiniteTable/components/icons/index.scss","../src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.scss","../src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAGA;EACE;AAAoB;EACpB;AAAwB;EACxB;AAAuB;EACvB;AAAsB;EACtB;AAAuB;EACvB;EACA;AAAuB;EACvB;AAAsB;EACtB;AAAuB;EACvB;AAAoB;EACpB;AAAqB;EAErB;AAA0B;EAC1B;AAA4B;EAC5B;AAA2B;EAC3B;AAA4B;EAC5B;EACA;AAA2B;EAC3B;AAA0B;EAC1B;AAA2B;EAE3B;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;ACtJF;EAEE;EACA;;ACHA;EAME;;ADDF;EACE;EACA;EAEA;EACA;;;ACVF;EAME;;ACEF;EACE;;;AAKF;EACE;;;AChBJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;ACtCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AHRA;EAME;;AGMF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AC1BF;EACE;;;ACDF;EAEE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAIJ;EACE;EACA;;;AAOA;AAAA;EACE;EACA;;AAEF;AAAA;EACE;EACA;;;AAGJ;AAAA;EAEE;EACA;;AACA;AAAA;EACE;;AAEF;AAAA;EACE;;;AAKF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxDJ;EACE;EACA;;;AAEF;EACE;EACA;;AAGA;EACE;;;ACVJ;EACE;EACA;;AAGA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EAEE;;;AAGF;EAEE;;;ACtBF;EACE;EACA;;AACA;EACE;EACA;;;AAGJ;EAgBE;;AAfA;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EAEA;EACA;;;AAKF;EACE;EAEA;EACA;;AAEF;EACE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../src/style/utilities.scss","../src/components/VirtualScrollContainer/index.scss","../src/style/mixins.scss","../src/components/VirtualList/index.scss","../src/components/InfiniteTable/style/variables.scss","../src/components/InfiniteTable/style/index.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAGA;EACE;AAAoB;EACpB;AAAwB;EACxB;AAAuB;EACvB;AAAsB;EACtB;AAAuB;EACvB;EACA;AAAuB;EACvB;AAAsB;EACtB;AAAuB;EACvB;AAAoB;EACpB;AAAqB;EAErB;AAA0B;EAC1B;AAA4B;EAC5B;AAA2B;EAC3B;AAA4B;EAC5B;EACA;AAA2B;EAC3B;AAA0B;EAC1B;AAA2B;EAE3B;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;ACtJF;EAEE;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AACA;;ACXA;EAME;;ADOF;EACE;EACA;EACA;EACA;;;AEdJ;EAGE;;ADNA;EAME;;ACEF;EACE;;AAEF;EACE;;;ACbJ;EACE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;ACvCF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AHRA;EAME;;AGMF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE;;;AAGJ;EACE;;AAEA;AAAA;EAEE;;;AAIJ;EACE;;;AAGF;EAEE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAIJ;EACE;EACA;;;AAOA;AAAA;EACE;EACA;;AAEF;AAAA;EACE;EACA;;;AAGJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAEF;AAAA;EACE;;;AAIF;EACE;;;AAIJ;EACE;EACA;;AACA;EACE;EACA;;AAGF;EACE;;AAIA;EACE;;AAEF;EACE;;AAGF;EACE;;AAEF;EACE;;;AAIN;EAgBE;;AAfA;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAEF;EACE;EACA;;AAGA;EACE;;;AAIJ;EACE;EACA;;AAGA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EAEA;EACA;;;AAKF;EACE;EAEA;EACA;;AAEF;EACE","file":"index.css"}

package/index.d.ts

@@ -561,8 +561,9 @@ declare module "utils/groupAndPivot/index" {
 }
 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 { DataSourceGroupRowsBy, DataSourcePropGroupRowsBy, DataSourcePropPivotBy } from "components/DataSource/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 { InfiniteTablePropPivotTotalColumnPosition } from "components/InfiniteTable/types/InfiniteTableState";
@@ -589,6 +590,8 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         setColumnVisibility: (columnVisibility: InfiniteTablePropColumnVisibility) => void;
         setColumnAggregations: (columnAggregations: InfiniteTablePropColumnAggregations<T>) => void;
         x?: T;
+        getState: () => InfiniteTableState<T>;
+        getDataSourceState: () => DataSourceState<T>;
     };
     export type InfiniteTablePropVirtualizeColumns<T> = boolean | ((columns: InfiniteTableComputedColumn<T>[]) => boolean);
     export type InfiniteTableInternalProps<T> = {
@@ -651,6 +654,8 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         columnVisibility?: InfiniteTablePropColumnVisibility;
         defaultColumnVisibility?: InfiniteTablePropColumnVisibility;
         columnPinning?: InfiniteTablePropColumnPinning;
+        pinnedStartMaxWidth?: number;
+        pinnedEndMaxWidth?: number;
         defaultColumnPinning?: InfiniteTablePropColumnPinning;
         defaultColumnAggregations?: InfiniteTablePropColumnAggregations<T>;
         columnAggregations?: InfiniteTablePropColumnAggregations<T>;
@@ -702,6 +707,18 @@ declare module "components/types/SubscriptionCallback" {
         onChange: (fn: SubscriptionCallbackOnChangeFn<T>) => VoidFn;
     }
 }
+declare module "components/VirtualBrain/ScrollListener" {
+    import { OnScrollFn, ScrollPosition } from "components/types/ScrollPosition";
+    export class ScrollListener {
+        private scrollPosition;
+        private onScrollFns;
+        getScrollPosition: () => ScrollPosition;
+        onScroll: (fn: OnScrollFn) => () => void;
+        setScrollPosition: (scrollPosition: ScrollPosition) => void;
+        private notifyScrollChange;
+        destroy: () => void;
+    }
+}
 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";
@@ -709,6 +726,7 @@ declare module "components/InfiniteTable/types/InfiniteTableState" {
     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> {
         domRef: MutableRefObject<HTMLDivElement | null>;
         bodyDOMRef: MutableRefObject<HTMLDivElement | null>;
@@ -736,6 +754,8 @@ declare module "components/InfiniteTable/types/InfiniteTableState" {
         pivotColumnGroups?: InfiniteTablePropColumnGroups;
         computedColumnGroups: InfiniteTablePropColumnGroups;
         generatedColumns: InfiniteTableGeneratedColumns<T>;
+        pinnedStartScrollListener: ScrollListener;
+        pinnedEndScrollListener: ScrollListener;
         x?: T;
     }
     export type InfiniteTableComputedColumnGroup = InfiniteTableColumnGroup & {
@@ -755,6 +775,8 @@ declare module "components/InfiniteTable/types/InfiniteTableState" {
         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'];
@@ -798,6 +820,8 @@ declare module "components/InfiniteTable/types/InfiniteTableComputedValues" {
     import type { InfiniteTableComputedColumn } from "components/InfiniteTable/types/InfiniteTableColumn";
     import type { InfiniteTablePropColumnOrderNormalized, InfiniteTablePropColumnVisibility } from "components/InfiniteTable/types/InfiniteTableProps";
     export interface InfiniteTableComputedValues<T> {
+        computedPinnedStartOverflow: boolean;
+        computedPinnedEndOverflow: boolean;
         computedPinnedStartColumns: InfiniteTableComputedColumn<T>[];
         computedPinnedEndColumns: InfiniteTableComputedColumn<T>[];
         computedUnpinnedColumns: InfiniteTableComputedColumn<T>[];
@@ -806,7 +830,9 @@ declare module "components/InfiniteTable/types/InfiniteTableComputedValues" {
         computedColumnVisibility: InfiniteTablePropColumnVisibility;
         computedColumnOrder: InfiniteTablePropColumnOrderNormalized;
         computedPinnedStartColumnsWidth: number;
+        computedPinnedStartWidth: number;
         computedPinnedEndColumnsWidth: number;
+        computedPinnedEndWidth: number;
         computedUnpinnedColumnsWidth: number;
         computedUnpinnedOffset: number;
         computedPinnedEndOffset: number;
@@ -961,7 +987,9 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
     export type GetComputedVisibleColumnsResult<T> = {
         computedRemainingSpace: number;
         computedPinnedStartColumnsWidth: number;
+        computedPinnedStartWidth: number;
         computedPinnedEndColumnsWidth: number;
+        computedPinnedEndWidth: number;
         computedUnpinnedColumnsWidth: number;
         columnMinWidth?: number;
         columnMaxWidth?: number;
@@ -981,6 +1009,8 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
         bodySize: Size;
         columnMinWidth?: number;
         columnMaxWidth?: number;
+        pinnedStartMaxWidth?: number;
+        pinnedEndMaxWidth?: number;
         columnDefaultWidth?: number;
         sortable?: boolean;
         multiSort: boolean;
@@ -992,7 +1022,7 @@ declare module "components/InfiniteTable/utils/getComputedVisibleColumns" {
         columnVisibility: InfiniteTablePropColumnVisibility;
         columnVisibilityAssumeVisible: boolean;
     };
-    export const getComputedVisibleColumns: <T extends unknown>({ columns, generatedColumns, bodySize, columnMinWidth, columnMaxWidth, columnDefaultWidth, sortable, sortInfo, setSortInfo, multiSort, draggableColumns, columnOrder, columnPinning, columnVisibility, columnVisibilityAssumeVisible, }: GetComputedVisibleColumnsParam<T>) => GetComputedVisibleColumnsResult<T>;
+    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>;
 }
 declare module "components/hooks/useRerender" {
     export const useRerender: () => [number, () => void];
@@ -1031,6 +1061,8 @@ declare module "components/InfiniteTable/hooks/useComputedVisibleColumns" {
         bodySize: Size;
         columnMinWidth?: number;
         columnMaxWidth?: number;
+        pinnedEndMaxWidth?: number;
+        pinnedStartMaxWidth?: number;
         columnDefaultWidth?: number;
         sortable?: boolean;
         draggableColumns?: boolean;
@@ -1055,9 +1087,11 @@ declare module "components/InfiniteTable/hooks/useComputedVisibleColumns" {
         computedUnpinnedColumns: GetComputedVisibleColumnsResult<T>['computedUnpinnedColumns'];
         computedVisibleColumns: GetComputedVisibleColumnsResult<T>['computedVisibleColumns'];
         computedVisibleColumnsMap: GetComputedVisibleColumnsResult<T>['computedVisibleColumnsMap'];
+        computedPinnedEndWidth: GetComputedVisibleColumnsResult<T>['computedPinnedEndWidth'];
+        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, columnVisibility, columnVisibilityAssumeVisible, }: UseComputedVisibleColumnsParam<T>) => UseComputedVisibleColumnsResult<T>;
+    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>;
 }
 declare module "components/DataSource/publicHooks/useDataSourceActions" {
     import { DataSourceComponentActions } from "components/DataSource/types";
@@ -1397,12 +1431,14 @@ declare module "components/InfiniteTable/components/InfiniteTableHeader/Infinite
     import { InfiniteTableComputedColumn } from "components/InfiniteTable/index";
     import { Renderable } from "components/types/Renderable";
     import { VirtualBrain } from "components/VirtualBrain/index";
+    import { ScrollListener } from "components/VirtualBrain/ScrollListener";
     import { InfiniteTableComputedColumnGroup } from "components/InfiniteTable/types/InfiniteTableProps";
     export type InfiniteTableHeaderProps<T> = {
         repaintId?: string | number;
         brain: VirtualBrain;
         columns: InfiniteTableComputedColumn<T>[];
         totalWidth: number;
+        availableWidth: number;
     };
     export type InfiniteTableHeaderGroupProps<T> = {
         columns: InfiniteTableComputedColumn<T>[];
@@ -1412,7 +1448,9 @@ 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;
     };
 }
@@ -1611,7 +1649,7 @@ declare module "components/VirtualList/SpacePlaceholder" {
     interface SpacePlaceholderProps {
         width: number;
         height: number;
-        count: number;
+        count?: number;
     }
     function SpacePlaceholderFn(props: SpacePlaceholderProps): JSX.Element;
     export const SpacePlaceholder: React.MemoExoticComponent<typeof SpacePlaceholderFn>;
@@ -1759,8 +1797,8 @@ declare module "components/InfiniteTable/hooks/useUnpinnedRendering" {
         computedPinnedEndColumns: InfiniteTableComputedColumn<T>[];
         computedUnpinnedColumns: InfiniteTableComputedColumn<T>[];
         computedUnpinnedColumnsWidth: number;
-        computedPinnedStartColumnsWidth: number;
-        computedPinnedEndColumnsWidth: number;
+        computedPinnedStartWidth: number;
+        computedPinnedEndWidth: number;
         getState: () => InfiniteTableComponentState<T>;
     };
     export function useUnpinnedRendering<T>(params: UnpinnedRenderingParams<T>): JSX.Element | null;
@@ -1797,7 +1835,7 @@ declare module "components/VirtualList/RowListWithExternalScrolling" {
     import type { RenderRow } from "components/VirtualList/types";
     import type { ScrollPosition } from "components/types/ScrollPosition";
     import { OnMountProps } from "components/hooks/useOnMount";
-    type RowListWithExternalScrollingListProps = {
+    export type RowListWithExternalScrollingListProps = {
         brain: VirtualBrain;
         renderRow: RenderRow;
         repaintId?: number | string;
@@ -1814,11 +1852,18 @@ declare module "components/InfiniteTable/hooks/usePinnedRendering" {
     import type { RenderRow } from "components/VirtualList/types";
     import { InfiniteTableComponentState } 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>[];
         bodySize: Size;
+        pinnedStartScrollListener: ScrollListener;
+        pinnedEndScrollListener: ScrollListener;
         repaintId: string | number;
+        computedPinnedStartWidth: number;
+        computedPinnedEndWidth: number;
+        computedPinnedStartOverflow: boolean;
+        computedPinnedEndOverflow: boolean;
         computedPinnedEndColumnsWidth: number;
         computedPinnedEndColumns: InfiniteTableComputedColumn<T>[];
         verticalVirtualBrain: VirtualBrain;
@@ -1831,6 +1876,11 @@ declare module "components/InfiniteTable/hooks/usePinnedRendering" {
         computedPinnedStartColumnsWidth: number;
         computedPinnedStartColumns: InfiniteTableComputedColumn<T>[];
     };
+    export function usePinnedRenderingForSide<T>(side: 'start' | 'end', params: UsePinnedParams<T>): {
+        renderRowPinned: RenderRow;
+        pinnedList: JSX.Element | null;
+        pinnedScrollbarPlaceholder: JSX.Element | null;
+    };
     export function usePinnedEndRendering<T>(params: UsePinnedParams<T>): {
         renderRowPinnedEnd: RenderRow;
         pinnedEndList: JSX.Element | null;
@@ -1855,8 +1905,8 @@ declare module "components/InfiniteTable/hooks/useYourBrain" {
     import { InfiniteTableComputedColumn } from "components/InfiniteTable/types/index";
     type UseYourBrainParam<T = any> = {
         computedUnpinnedColumns: InfiniteTableComputedColumn<T>[];
-        computedPinnedStartColumnsWidth: number;
-        computedPinnedEndColumnsWidth: number;
+        computedPinnedStartWidth: number;
+        computedPinnedEndWidth: number;
         dataArray: any[];
         rowHeight: number;
         bodySize: Size;