es-grid-template/es/table-component/header/TableHead.js

es-grid-template

import { useVirtualizer } from '@tanstack/react-virtual';
import React, { useContext } from 'react';
import { TableContext } from "../useContext";
import TableHeadRow from "./TableHeadRow";
const TableHead = ({
  tableContainerRef,
  columnVirtualizer,
  table,
  virtualPaddingLeft,
  virtualPaddingRight,
  fixedLeftColumns,
  fixedRightColumns
}) => {
  const {
    prefix
  } = useContext(TableContext);
  const rowVirtualizer = useVirtualizer({
    count: table.getHeaderGroups().length,
    estimateSize: () => 34,
    //estimate row height for accurate scrollbar dragging
    getScrollElement: () => tableContainerRef.current,
    //measure dynamic row height, except in firefox because it measures table border height incorrectly
    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
    overscan: 5
  });
  const virtualRows = rowVirtualizer.getVirtualItems();

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

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

  return /*#__PURE__*/React.createElement("thead", {
    className: `${prefix}-grid-thead`,
    style: {
      display: 'grid',
      position: 'sticky',
      top: 0,
      zIndex: 1
    }
  }, virtualRows.map(virtualRow => {
    const headerGroup = table.getHeaderGroups()[virtualRow.index];
    return /*#__PURE__*/React.createElement(TableHeadRow, {
      table: table,
      columnVirtualizer: columnVirtualizer,
      rowHeaderVirtualizer: rowVirtualizer,
      headerGroup: headerGroup,
      key: headerGroup.id,
      virtualPaddingLeft: virtualPaddingLeft,
      virtualPaddingRight: virtualPaddingRight,
      fixedLeftColumns: fixedLeftColumns,
      fixedRightColumns: fixedRightColumns,
      rowHeaderVirtual: virtualRow
    });
  }));
};
export default TableHead;