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

es-grid-template

import React, { useContext } from 'react';
import { TableContext } from "../useContext";
import TableHeadCell2 from "./TableHeadCell2";
import TableHeadGroupCell from "./TableHeadGroupCell";
const TableHead = ({
  columnVirtualizer,
  table
}) => {
  const {
    prefix,
    onRowHeaderStyles
  } = useContext(TableContext);
  const headerGroups = table.getFlatHeaders();
  const leafColumns = table.getVisibleFlatColumns();
  const headerDepth = table.getHeaderGroups().length;
  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
  return /*#__PURE__*/React.createElement("div", {
    className: `${prefix}-grid-thead`,
    style: {
      ...rowStyles,
      display: 'grid',
      position: 'sticky',
      top: 0,
      zIndex: 1,
      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
    }
  }, leafColumns.map(column => {
    const depth = column.depth ?? 0;

    // const colSpan = column.columns.length || 1;
    const colSpan = column.getFlatColumns().filter(col => col.getIsVisible() && col.columns.length < 1).length;
    // const colSpan = getVisibleChildCount(column);

    const rowSpan = column.columns?.length > 0 ? 1 : headerDepth - depth;
    const header = headerGroups.find(it => it.id === column.id || it.column.id === column.id && it.subHeaders.length > 0);
    // const groupHeader = headerGroups.find((it) => it.column.id === column.id && it.subHeaders.length >= 2)

    if (header?.subHeaders && header.subHeaders.length >= 2) {
      return /*#__PURE__*/React.createElement(TableHeadGroupCell, {
        key: column.id,
        depth: depth,
        column: column,
        header: header,
        table: table,
        columnVirtualizer: columnVirtualizer,
        colSpan: colSpan,
        rowSpan: rowSpan
      });
    } else {
      return /*#__PURE__*/React.createElement(TableHeadCell2, {
        key: column.id,
        depth: depth,
        column: column,
        header: header,
        table: table,
        columnVirtualizer: columnVirtualizer
        // rowHeaderVirtualizer={rowHeaderVirtualizer}
        ,
        colSpan: colSpan,
        rowSpan: rowSpan
      });
    }
  }));
};
export default TableHead;