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

es-grid-template

import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
import React from 'react';
import { TableContext } from "../useContext";
import TableHeadCell from "./TableHeadCell";
const TableHeadRow = ({
  table,
  headerGroup,
  columnVirtualizer
}) => {
  const {
    prefix,
    onRowHeaderStyles
  } = React.useContext(TableContext);
  const columnOrder = table.getState().columnOrder;
  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
  return /*#__PURE__*/React.createElement("div", {
    key: headerGroup.id
    // ref={el => {
    //   if (el) rowHeaderVirtualizer.measureElement(el)
    // }}
    ,

    "data-index": headerGroup.id,
    className: `${prefix}-grid-row ${prefix}-grid-header`,
    style: {
      ...rowStyles,
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(SortableContext, {
    items: columnOrder,
    strategy: horizontalListSortingStrategy
  }, headerGroup.headers.map(header => {
    const columnRelativeDepth = header.depth - header.column.depth;
    if (columnRelativeDepth > 1) {
      return null;
    }
    let rowSpan = 1;
    if (header.isPlaceholder) {
      const leafs = header.getLeafHeaders();
      rowSpan = leafs[leafs.length - 1].depth - header.depth;
    }
    return /*#__PURE__*/React.createElement(TableHeadCell, {
      key: header.id,
      header: header,
      table: table,
      columnVirtualizer: columnVirtualizer,
      colSpan: header.colSpan,
      rowSpan: rowSpan
    });
  })));
};
export default TableHeadRow;