es-grid-template/es/table-component/TableContainer.js

es-grid-template

// import type { Dispatch, SetStateAction } from "react";

import React from 'react';
import TableHead from "./header/TableHead";
import { sumSize } from "./hook/utils";
import { useVirtualizer } from '@tanstack/react-virtual';
import classNames from 'classnames';
import TableBody from "./body/TableBody";
import { TableContext } from "./useContext";
const TableContainer = props => {
  const {
    // t,
    table,
    id,
    prefix,
    commandClick,
    editAble,
    rowKey,
    format,
    dataSource,
    originData,
    expandable,
    wrapSettings,
    recordDoubleClick,
    // triggerFilter,
    selectionSettings,
    setIsSelectionChange,
    onContextMenu,
    contextMenuItems,
    setSorterChange,
    setFilterChange,
    tableHeight
  } = props;
  const tableContainerRef = React.useRef(null);
  const visibleColumns = table.getVisibleLeafColumns();
  const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
  const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
  const columnVirtualizer = useVirtualizer({
    count: visibleColumns.length,
    estimateSize: index => visibleColumns[index].getSize(),
    getScrollElement: () => tableContainerRef.current,
    horizontal: true,
    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
  });

  // const columnSizingState = table.getState().columnSizing

  // React.useEffect(() => {
  //   requestAnimationFrame(() => {
  //     columnVirtualizer.measure()
  //   })
  // }, [columnSizingState, columnVirtualizer])

  const virtualColumns = columnVirtualizer.getVirtualItems();
  const cacheColumns = columnVirtualizer.measurementsCache;
  const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
  const leftCols = [...cacheColumns].slice(0, table.getState().columnPinning.left?.length ?? 0);
  const rightWidth = sumSize(rightCols);
  const leftWidth = sumSize(leftCols);

  //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
  let virtualPaddingLeft;
  let virtualPaddingRight;
  const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
  if (columnVirtualizer && virtualColumns?.length) {
    virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
    virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
  }
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(`${prefix}-grid-container`, {
      'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
      'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
    }),
    id: id,
    ref: tableContainerRef,
    style: {
      overflow: 'auto',
      //our scrollable table container
      position: 'relative',
      //needed for sticky header
      height: tableHeight ?? '500px' //should be a fixed height
      // minWidth: table.getTotalSize()
    }
  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
    value: {
      prefix,
      id,
      rowKey,
      format,
      expandable,
      dataSource,
      originData,
      // triggerFilter,
      wrapSettings,
      recordDoubleClick,
      selectionSettings,
      setIsSelectionChange,
      onContextMenu,
      setSorterChange,
      setFilterChange
    }
  }, /*#__PURE__*/React.createElement("table", {
    style: {
      display: 'grid',
      minWidth: table.getTotalSize()
    }
  }, /*#__PURE__*/React.createElement(TableHead, {
    tableContainerRef: tableContainerRef,
    columnVirtualizer: columnVirtualizer,
    table: table,
    virtualPaddingLeft: virtualPaddingLeft,
    virtualPaddingRight: virtualPaddingRight,
    fixedLeftColumns: fixedLeftColumns,
    fixedRightColumns: fixedRightColumns
  }), /*#__PURE__*/React.createElement(TableBody, {
    tableId: id,
    columnVirtualizer: columnVirtualizer,
    table: table,
    tableContainerRef: tableContainerRef,
    virtualPaddingLeft: virtualPaddingLeft,
    virtualPaddingRight: virtualPaddingRight,
    fixedLeftColumns: fixedLeftColumns,
    fixedRightColumns: fixedRightColumns,
    commandClick: commandClick,
    editAble: editAble,
    contextMenuItems: contextMenuItems
  }))));
};
export default TableContainer;