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
      });
    }

    // if (header) {
    //   return (
    //     <TableHeadCell2
    //       key={column.id}
    //       depth={depth}
    //       column={column}
    //       header={header as any}
    //       table={table}
    //       columnVirtualizer={columnVirtualizer}
    //       // rowHeaderVirtualizer={rowHeaderVirtualizer}
    //       colSpan={colSpan}
    //       rowSpan={rowSpan}
    //     />
    //   )
    // }

    // return (
    //   <div
    //     key={col.id}
    //     className="th p-2 border font-bold flex items-center justify-center"
    //     style={{
    //       // width: col.getSize(),
    //       minWidth: col.getSize(),
    //       gridRow: `${depth + 1} / span ${rowSpan}`,

    //       gridColumn: `span ${colSpan}`,
    //     }}
    //   >
    //     aaaaa
    //     {/* {flexRender(col.columnDef.header, header.getContext())} */}
    //   </div>
    // );
  }));
};
export default TableHead;