@infinite-table/infinite-react 0.4.13 → 0.5.0

package/src/components/DataSource/types.ts

@@ -0,0 +1,548 @@
+import * as React from 'react';
+
+import { DeepMap } from '../../utils/DeepMap';
+
+import {
+  AggregationReducerResult,
+  DeepMapGroupValueType,
+  GroupKeyType,
+  PivotBy,
+} from '../../utils/groupAndPivot';
+import { GroupBy } from '../../utils/groupAndPivot/types';
+import { MultisortInfo } from '../../utils/multisort';
+import { ComponentStateActions } from '../hooks/useComponentState/types';
+import {
+  InfiniteTableColumn,
+  InfiniteTableColumnGroup,
+  InfiniteTableRowInfo,
+  Scrollbars,
+} from '../InfiniteTable/types';
+import {
+  DiscriminatedUnion,
+  InfiniteTablePivotColumn,
+  InfiniteTablePivotFinalColumnVariant,
+} from '../InfiniteTable/types/InfiniteTableColumn';
+import { ScrollStopInfo } from '../InfiniteTable/types/InfiniteTableProps';
+import {
+  InfiniteTablePropPivotGrandTotalColumnPosition,
+  InfiniteTablePropPivotTotalColumnPosition,
+} from '../InfiniteTable/types/InfiniteTableState';
+import { NonUndefined } from '../types/NonUndefined';
+import { SubscriptionCallback } from '../types/SubscriptionCallback';
+import { RenderRange } from '../VirtualBrain';
+
+import { GroupRowsState } from './GroupRowsState';
+import { Indexer } from './Indexer';
+import {
+  RowSelectionState,
+  RowSelectionStateObject,
+} from './RowSelectionState';
+
+export interface DataSourceDataParams<T> {
+  originalDataArray: T[];
+  sortInfo?: DataSourceSortInfo<T>;
+  groupBy?: DataSourcePropGroupBy<T>;
+  pivotBy?: DataSourcePropPivotBy<T>;
+  filterValue?: DataSourcePropFilterValue<T>;
+
+  groupRowsState?: DataSourcePropGroupRowsStateObject<any>;
+
+  lazyLoadBatchSize?: number;
+  lazyLoadStartIndex?: number;
+  groupKeys?: any[];
+
+  append?: boolean;
+
+  aggregationReducers?: DataSourcePropAggregationReducers<T>;
+
+  livePaginationCursor?: DataSourceLivePaginationCursorValue;
+  __cursorId?: DataSourceSetupState<T>['cursorId'];
+
+  changes?: DataSourceDataParamsChanges<T>;
+}
+
+export type DataSourceDataParamsChanges<T> = Partial<
+  Record<
+    keyof Omit<DataSourceDataParams<T>, 'originalDataArray' | 'changes'>,
+    true
+  >
+>;
+
+export type DataSourceSingleSortInfo<T> = Omit<MultisortInfo<T>, 'field'> & {
+  field?: keyof T | (keyof T)[];
+  id?: string;
+};
+export type DataSourceGroupBy<T> = GroupBy<T, any>;
+export type DataSourcePivotBy<T> = PivotBy<T, any>;
+
+export type DataSourceSortInfo<T> =
+  | null
+  | DataSourceSingleSortInfo<T>
+  | DataSourceSingleSortInfo<T>[];
+
+export type DataSourcePropSortInfo<T> = DataSourceSortInfo<T>;
+
+export type DataSourceRemoteData<T> = {
+  data: T[] | LazyGroupDataItem<T>[];
+  mappings?: DataSourceMappings;
+  cache?: boolean;
+  error?: string;
+  totalCount?: number;
+  totalCountUnfiltered?: number;
+  livePaginationCursor?: DataSourceLivePaginationCursorValue;
+};
+
+export type DataSourceData<T> =
+  | T[]
+  | DataSourceRemoteData<T>
+  | Promise<T[] | DataSourceRemoteData<T>>
+  | ((
+      dataInfo: DataSourceDataParams<T>,
+    ) => T[] | Promise<T[] | DataSourceRemoteData<T>>);
+
+export type DataSourceGroupRowsList<KeyType> = true | KeyType[][];
+
+export type DataSourcePropGroupRowsStateObject<KeyType> = {
+  expandedRows: DataSourceGroupRowsList<KeyType>;
+  collapsedRows: DataSourceGroupRowsList<KeyType>;
+};
+
+export type DataSourcePropGroupBy<T> = DataSourceGroupBy<T>[];
+export type DataSourcePropPivotBy<T> = DataSourcePivotBy<T>[];
+
+export interface DataSourceMappedState<T> {
+  aggregationReducers?: DataSourceProps<T>['aggregationReducers'];
+  livePagination: DataSourceProps<T>['livePagination'];
+  isRowSelected: DataSourceProps<T>['isRowSelected'];
+
+  lazyLoad: DataSourceProps<T>['lazyLoad'];
+  useGroupKeysForMultiRowSelection: NonUndefined<
+    DataSourceProps<T>['useGroupKeysForMultiRowSelection']
+  >;
+
+  onDataParamsChange: DataSourceProps<T>['onDataParamsChange'];
+  data: DataSourceProps<T>['data'];
+  sortMode: DataSourceProps<T>['sortMode'];
+  filterFunction: DataSourceProps<T>['filterFunction'];
+  filterValue: DataSourceProps<T>['filterValue'];
+  filterTypes: NonUndefined<DataSourceProps<T>['filterTypes']>;
+  primaryKey: DataSourceProps<T>['primaryKey'];
+  filterDelay: NonUndefined<DataSourceProps<T>['filterDelay']>;
+  groupBy: NonUndefined<DataSourceProps<T>['groupBy']>;
+
+  pivotBy: DataSourceProps<T>['pivotBy'];
+  loading: NonUndefined<DataSourceProps<T>['loading']>;
+  sortTypes: NonUndefined<DataSourceProps<T>['sortTypes']>;
+  collapseGroupRowsOnDataFunctionChange: NonUndefined<
+    DataSourceProps<T>['collapseGroupRowsOnDataFunctionChange']
+  >;
+  sortInfo: DataSourceSingleSortInfo<T>[] | null;
+}
+
+export type DataSourceAggregationReducer<T, AggregationResultType> = {
+  name?: string;
+  field?: keyof T;
+  initialValue?: AggregationResultType;
+  getter?: (data: T) => any;
+  reducer:
+    | string
+    | ((
+        accumulator: any,
+        value: any,
+        data: T,
+        index: number,
+        groupKeys: any[] | undefined,
+      ) => AggregationResultType | any);
+  done?: (
+    accumulatedValue: AggregationResultType | any,
+    array: T[],
+  ) => AggregationResultType;
+  pivotColumn?:
+    | ColumnTypeWithInherit<Partial<InfiniteTableColumn<T>>>
+    | (({
+        column,
+      }: {
+        column: InfiniteTablePivotFinalColumnVariant<T>;
+      }) => ColumnTypeWithInherit<Partial<InfiniteTablePivotColumn<T>>>);
+};
+
+export type ColumnTypeWithInherit<COL_TYPE> = COL_TYPE & {
+  inheritFromColumn?: string | boolean;
+};
+
+export type DataSourceMappings = Record<'totals' | 'values', string>;
+
+export type LazyGroupDataItem<DataType> = {
+  data: Partial<DataType>;
+  keys: any[];
+  aggregations?: Record<string, any>;
+  dataset?: DataSourceRemoteData<DataType>;
+  totalChildrenCount?: number;
+  pivot?: {
+    values: Record<string, any>;
+    totals?: Record<string, any>;
+  };
+};
+
+export type LazyRowInfoGroup<DataType> = {
+  /**
+   * Those are direct children of the current lazy group row
+   */
+  children: LazyGroupDataItem<DataType>[];
+  childrenLoading: boolean;
+  childrenAvailable: boolean;
+  cache: boolean;
+  totalCount: number;
+  // TODO make sure this is properly implemented
+  totalCountUnfiltered: number;
+  error?: string;
+};
+
+export type LazyGroupDataDeepMap<DataType, KeyType = string> = DeepMap<
+  KeyType,
+  LazyRowInfoGroup<DataType>
+>;
+
+export interface DataSourceSetupState<T> {
+  indexer: Indexer<T, any>;
+  unfilteredCount: number;
+  filteredCount: number;
+  lazyLoadCacheOfLoadedBatches: DeepMap<string, true>;
+  pivotMappings?: DataSourceMappings;
+  propsCache: Map<keyof DataSourceProps<T>, WeakMap<any, any>>;
+  showSeparatePivotColumnForSingleAggregation: boolean;
+  dataParams?: DataSourceDataParams<T>;
+  originalLazyGroupData: LazyGroupDataDeepMap<T>;
+  originalLazyGroupDataChangeDetect: number | string;
+  scrollStopDelayUpdatedByTable: number;
+
+  notifyScrollbarsChange: SubscriptionCallback<Scrollbars>;
+  notifyScrollStop: SubscriptionCallback<ScrollStopInfo>;
+  notifyRenderRangeChange: SubscriptionCallback<RenderRange>;
+  originalDataArray: T[];
+  lastFilterDataArray?: T[];
+  lastSortDataArray?: T[];
+  lastGroupDataArray?: InfiniteTableRowInfo<T>[];
+  dataArray: InfiniteTableRowInfo<T>[];
+  groupDeepMap?: DeepMap<GroupKeyType, DeepMapGroupValueType<T, any>>;
+  groupRowsIndexesInDataArray?: number[];
+  reducerResults?: Record<string, AggregationReducerResult>;
+  allRowsSelected: boolean;
+  // selectedRowCount: number;
+  someRowsSelected: boolean;
+  pivotTotalColumnPosition: InfiniteTablePropPivotTotalColumnPosition;
+  pivotGrandTotalColumnPosition: InfiniteTablePropPivotGrandTotalColumnPosition;
+  cursorId: number | symbol | DataSourceLivePaginationCursorValue;
+
+  updatedAt: number;
+  reducedAt: number;
+  groupedAt: number;
+  sortedAt: number;
+  filteredAt: number;
+  generateGroupRows: boolean;
+
+  postFilterDataArray?: T[];
+  postSortDataArray?: T[];
+  postGroupDataArray?: InfiniteTableRowInfo<T>[];
+  pivotColumns?: Map<string, InfiniteTableColumn<T>>;
+  pivotColumnGroups?: Map<string, InfiniteTableColumnGroup>;
+}
+
+export type DataSourcePropAggregationReducers<T> = Record<
+  string,
+  DataSourceAggregationReducer<T, any>
+>;
+export type DataSourcePropMultiRowSelectionChangeParamType =
+  RowSelectionStateObject;
+
+export type DataSourcePropRowSelection =
+  | DataSourcePropRowSelection_MultiRow
+  | DataSourcePropRowSelection_SingleRow;
+
+export type DataSourcePropRowSelection_MultiRow = RowSelectionStateObject;
+export type DataSourcePropRowSelection_SingleRow = null | string | number;
+
+export type DataSourcePropCellSelection = any;
+
+export type DataSourcePropSelectionMode =
+  | false
+  | 'single-cell'
+  | 'single-row'
+  | 'multi-cell'
+  | 'multi-row';
+
+// export type DataSourcePropOnRowSelectionChange_MultiRow = (params: {
+//   rowSelection: DataSourcePropRowSelection_MultiRow;
+//   rowSelectionState: RowSelectionState;
+//   selectionMode: 'multi-row';
+// }) => void;
+// export type DataSourcePropOnRowSelectionChange_SingleRow = (params: {
+//   rowSelection: DataSourcePropRowSelection_SingleRow;
+//   selectionMode: 'single-row';
+// }) => void;
+
+export type DataSourcePropOnRowSelectionChange_MultiRow = (
+  rowSelection: DataSourcePropRowSelection_MultiRow,
+  selectionMode: 'multi-row',
+) => void;
+export type DataSourcePropOnRowSelectionChange_SingleRow = (
+  rowSelection: DataSourcePropRowSelection_SingleRow,
+  selectionMode: 'single-row',
+) => void;
+
+export type DataSourcePropOnRowSelectionChange =
+  | DataSourcePropOnRowSelectionChange_SingleRow
+  | DataSourcePropOnRowSelectionChange_MultiRow;
+export type DataSourcePropOnCellSelectionChange = (
+  cellSelectionParams: any,
+) => void;
+
+export type DataSourcePropIsRowSelected<T> = (
+  rowInfo: InfiniteTableRowInfo<T>,
+  rowSelectionState: RowSelectionState,
+  selectionMode: 'multi-row',
+) => boolean | null;
+
+export type DataSourceProps<T> = {
+  children:
+    | React.ReactNode
+    | ((contextData: DataSourceState<T>) => React.ReactNode);
+  primaryKey: keyof T | ((data: T) => string);
+  fields?: (keyof T)[];
+
+  data: DataSourceData<T>;
+
+  selectionMode?: DataSourcePropSelectionMode;
+  useGroupKeysForMultiRowSelection?: boolean;
+
+  rowSelection?:
+    | DataSourcePropRowSelection_MultiRow
+    | DataSourcePropRowSelection_SingleRow;
+  defaultRowSelection?:
+    | DataSourcePropRowSelection_MultiRow
+    | DataSourcePropRowSelection_SingleRow;
+
+  cellSelection?: DataSourcePropCellSelection;
+  defaultCellSelection?: DataSourcePropCellSelection;
+  onCellSelectionChange?: DataSourcePropOnCellSelectionChange;
+
+  isRowSelected?: DataSourcePropIsRowSelected<T>;
+
+  lazyLoad?: boolean | { batchSize?: number };
+
+  // other properties, each with controlled and uncontrolled  variant
+  loading?: boolean;
+  defaultLoading?: boolean;
+  onLoadingChange?: (loading: boolean) => void;
+
+  pivotBy?: DataSourcePropPivotBy<T>;
+  defaultPivotBy?: DataSourcePropPivotBy<T>;
+  onPivotByChange?: (pivotBy: DataSourcePropPivotBy<T>) => void;
+
+  aggregationReducers?: DataSourcePropAggregationReducers<T>;
+  defaultAggregationReducers?: DataSourcePropAggregationReducers<T>;
+
+  groupBy?: DataSourcePropGroupBy<T>;
+  defaultGroupBy?: DataSourcePropGroupBy<T>;
+  onGroupByChange?: (groupBy: DataSourcePropGroupBy<T>) => void;
+
+  groupRowsState?: GroupRowsState | DataSourcePropGroupRowsStateObject<any>;
+  defaultGroupRowsState?:
+    | GroupRowsState
+    | DataSourcePropGroupRowsStateObject<keyof T>;
+  onGroupRowsStateChange?: (groupRowsState: GroupRowsState) => void;
+
+  collapseGroupRowsOnDataFunctionChange?: boolean;
+
+  sortInfo?: DataSourceSortInfo<T>;
+  defaultSortInfo?: DataSourceSortInfo<T>;
+  onSortInfoChange?:
+    | ((sortInfo: DataSourceSingleSortInfo<T> | null) => void)
+    | ((sortInfo: DataSourceSingleSortInfo<T>[]) => void);
+
+  onDataParamsChange?: (dataParamsChange: DataSourceDataParams<T>) => void;
+  livePagination?: boolean;
+  livePaginationCursor?: DataSourcePropLivePaginationCursor<T>;
+  onLivePaginationCursorChange?: (
+    livePaginationCursor: DataSourceLivePaginationCursorValue,
+  ) => void;
+
+  filterFunction?: DataSourcePropFilterFunction<T>;
+
+  sortMode?: 'local' | 'remote';
+  filterMode?: 'local' | 'remote';
+  filterValue?: DataSourcePropFilterValue<T>;
+  defaultFilterValue?: DataSourcePropFilterValue<T>;
+  onFilterValueChange?: (filterValue: DataSourcePropFilterValue<T>) => void;
+
+  filterDelay?: number;
+  filterTypes?: DataSourcePropFilterTypes<T>;
+
+  sortTypes?: DataSourcePropSortTypes;
+} & (
+  | {
+      selectionMode?: 'multi-row';
+      rowSelection?: DataSourcePropRowSelection_MultiRow;
+      defaultRowSelection?: DataSourcePropRowSelection_MultiRow;
+      onRowSelectionChange?: DataSourcePropOnRowSelectionChange_MultiRow;
+    }
+  | {
+      selectionMode?: 'single-row';
+      rowSelection?: DataSourcePropRowSelection_SingleRow;
+      defaultRowSelection?: DataSourcePropRowSelection_SingleRow;
+      onRowSelectionChange?: DataSourcePropOnRowSelectionChange_SingleRow;
+    }
+  | {
+      selectionMode?: 'single-cell';
+    }
+  | {
+      selectionMode?: 'multi-cell';
+    }
+  | {
+      selectionMode?: false;
+    }
+);
+
+export type DataSourcePropSortTypes = Record<
+  string,
+  (first: any, second: any) => number
+>;
+
+export type DataSourcePropFilterTypes<T> = Record<
+  string,
+  DataSourceFilterType<T>
+>;
+
+export type DataSourceFilterFunctionParam<T> = {
+  data: T;
+  index: number;
+  dataArray: T[];
+  primaryKey: any;
+};
+export type DataSourcePropFilterFunction<T> = (
+  filterParam: DataSourceFilterFunctionParam<T>,
+) => boolean;
+
+export type DataSourcePropFilterValue<T> = DataSourceFilterValueItem<T>[];
+
+export type DataSourceFilterValueItem<T> = DiscriminatedUnion<
+  {
+    field: keyof T;
+  },
+  { id: string }
+> & {
+  valueGetter?: DataSourceFilterValueItemValueGetter<T>;
+  filterValue: any;
+  disabled?: boolean;
+  filterType: string;
+  operator: string;
+};
+
+export type DataSourceFilterValueItemValueGetter<T> = (
+  param: DataSourceFilterFunctionParam<T>,
+) => any;
+
+export type DataSourceFilterType<T> = {
+  emptyValues: Set<any>;
+  label?: string;
+  defaultOperator: string;
+  operators: DataSourceFilterOperator<T>[];
+};
+
+export type DataSourceFilterOperator<T> = {
+  name: string;
+  label?: string;
+  fn: DataSourceFilterOperatorFunction<T>;
+};
+
+export type DataSourceFilterOperatorFunction<T> = (
+  filterOperatorFunctionParam: DataSourceFilterOperatorFunctionParam<T>,
+) => boolean;
+
+export type DataSourceFilterOperatorFunctionParam<T> = {
+  currentValue: any;
+  filterValue: any;
+  emptyValues: Set<any>;
+} & DataSourceFilterFunctionParam<T>;
+
+export type DataSourcePropLivePaginationCursor<T> =
+  | DataSourceLivePaginationCursorValue
+  | DataSourceLivePaginationCursorFn<T>;
+
+export type DataSourceLivePaginationCursorFn<T> = (
+  params: DataSourceLivePaginationCursorParams<T>,
+) => DataSourceLivePaginationCursorValue;
+export type DataSourceLivePaginationCursorParams<T> = {
+  array: T[];
+  lastItem: T | Partial<T> | null;
+  length: number;
+};
+export type DataSourceLivePaginationCursorValue = string | number | null;
+
+// export type DataSourceState<T> = DataSourceSetupState<T> &
+//   DataSourceDerivedState<T> &
+//   DataSourceMappedState<T>;
+
+export interface DataSourceState<T>
+  extends DataSourceSetupState<T>,
+    DataSourceDerivedState<T>,
+    DataSourceMappedState<T> {}
+
+export type DataSourceDerivedState<T> = {
+  // TODO pass as second arg the index
+  toPrimaryKey: (data: T) => any;
+  operatorsByFilterType: Record<
+    string,
+    Record<string, DataSourceFilterOperator<T>>
+  >;
+
+  filterMode: NonUndefined<DataSourceProps<T>['filterMode']>;
+  groupRowsState: GroupRowsState<T>;
+  multiSort: boolean;
+  controlledSort: boolean;
+  controlledFilter: boolean;
+  livePaginationCursor?: DataSourceLivePaginationCursorValue;
+  lazyLoadBatchSize?: number;
+  rowSelection: RowSelectionState | null | number | string;
+  selectionMode: NonUndefined<DataSourceProps<T>['selectionMode']>;
+};
+// & (
+//   | {
+//       rowSelection: RowSelectionState;
+//       selectionMode: 'multi-row';
+//     }
+//   | {
+//       rowSelection: null | number | string;
+//       selectionMode: 'single-row';
+//     }
+//   | {
+//       selectionMode: false | 'single-cell' | 'multi-cell';
+//       rowSelection: null;
+//     }
+// );
+
+export type DataSourceComponentActions<T> = ComponentStateActions<
+  DataSourceState<T>
+>;
+
+export interface DataSourceContextValue<T> {
+  getState: () => DataSourceState<T>;
+  componentState: DataSourceState<T>;
+  componentActions: DataSourceComponentActions<T>;
+}
+
+export enum DataSourceActionType {
+  INIT = 'INIT',
+}
+
+export interface DataSourceAction<T> {
+  type: DataSourceActionType;
+  payload: T;
+}
+
+export interface DataSourceReducer<T> {
+  (
+    state: DataSourceState<T>,
+    action: DataSourceAction<any>,
+  ): DataSourceState<T>;
+}

package/src/components/HeadlessTable/HeadlessTableWithPinnedContainers.tsx

@@ -0,0 +1,142 @@
+//@ts-nocheck
+import * as React from 'react';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { HeadlessTableProps, useMatrixBrain } from '.';
+import { join } from '../../utils/join';
+import {
+  boxSizingBorderBox,
+  display,
+  position,
+  transformTranslateZero,
+} from '../InfiniteTable/utilities.css';
+import { useResizeObserver } from '../ResizeObserver';
+import { ScrollPosition } from '../types/ScrollPosition';
+import { Size } from '../types/Size';
+import { getScrollbarWidth } from '../utils/getScrollbarWidth';
+import { MatrixBrain } from '../VirtualBrain/MatrixBrain';
+import { SpacePlaceholder } from '../VirtualList/SpacePlaceholder';
+import { scrollTransformTargetCls } from '../VirtualList/VirtualList.css';
+import { VirtualScrollContainer } from '../VirtualScrollContainer';
+import { RawTable } from './RawTable';
+import { TableRenderCellFnParam } from './ReactHeadlessTableRenderer';
+
+export type HeadlessTableWithPinnedContainersProps = {} & HeadlessTableProps;
+
+const ONLY_VERTICAL_SCROLL = {
+  horizontal: false,
+  vertical: true,
+};
+
+const measureSizeStyle: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0, // this is same as top,left,bottom,right:0
+  pointerEvents: 'none',
+  zIndex: -1_000,
+};
+export function HeadlessTableWithPinnedContainersFn(
+  props: HeadlessTableWithPinnedContainersProps,
+) {
+  const { brain } = props;
+
+  const domRef = useRef<HTMLDivElement>(null);
+  const measureSizeRef = useRef<HTMLDivElement>(null);
+
+  const [measureSize, setMeasureSize] = useState<Size | null>(null);
+  const size = measureSize || { width: props.width, height: props.height };
+
+  useMatrixBrain(
+    brain,
+    {
+      ...props,
+      height: size.height,
+      width: size.width,
+    },
+    {
+      fixedColsStart: props.fixedColsStart,
+      fixedColsEnd: props.fixedColsEnd,
+      fixedRowsStart: props.fixedRowsStart,
+      fixedRowsEnd: props.fixedRowsEnd,
+    },
+  );
+  useResizeObserver(measureSizeRef, setMeasureSize);
+  const onContainerScroll = useCallback(
+    (scrollPos: ScrollPosition) => {
+      brain.setScrollPosition({
+        scrollTop: scrollPos.scrollTop,
+        scrollLeft: 0,
+      });
+      domRef.current!.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
+    },
+    [brain],
+  );
+
+  const [scrollSize, setTotalScrollSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const removeOnRenderCount = brain.onRenderCountChange(() => {
+      setTotalScrollSize(brain.getTotalSize());
+    });
+
+    setTotalScrollSize(brain.getTotalSize());
+
+    return () => {
+      removeOnRenderCount();
+    };
+  }, [brain]);
+
+  // const hasHorizontalScrollbar =
+  //   computedUnpinnedColumnsWidth >
+  //   bodySize.width -
+  //     computedPinnedStartColumnsWidth -
+  //     computedPinnedEndColumnsWidth;
+
+  // const reservedContentHeight =
+  //   brain.getTotalSize().height +
+  //   (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
+  return (
+    <div
+      className={join(
+        transformTranslateZero,
+        position.relative,
+        boxSizingBorderBox,
+      )}
+      style={{
+        width: props.width,
+        height: props.height,
+      }}
+    >
+      <VirtualScrollContainer
+        scrollable={ONLY_VERTICAL_SCROLL}
+        onContainerScroll={onContainerScroll}
+        ref={props.scrollerDOMRef as RefObject<HTMLDivElement>}
+      >
+        <div className={display.flex}>
+          <div
+            ref={domRef}
+            className={scrollTransformTargetCls}
+            data-name="scroll-transform-target"
+          >
+            <RawTable renderCell={props.renderCell} brain={brain} />
+          </div>
+        </div>
+        <SpacePlaceholder
+          count={props.rows}
+          width={0}
+          height={scrollSize.height}
+        />
+        {/**
+         * we need this size measurer, even though we have props.width and props.height passed down to us
+         * because this measurer also accounts for scrollbars showing/hiding which changes the
+         * dimensions of the space available for virtualization
+         */}
+        <div ref={measureSizeRef} style={measureSizeStyle} />
+      </VirtualScrollContainer>
+    </div>
+  );
+}
+
+export const HeadlessTableWithPinnedContainers: React.FC<HeadlessTableWithPinnedContainersProps> =
+  React.memo(HeadlessTableWithPinnedContainersFn);