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

es-grid-template

import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
// import type { Person } from "../../tanstack-table/makeData"
import React from 'react';
import { TableContext } from "../useContext";
import TableHeadCell from "./TableHeadCell";
const TableHeadRow = ({
  table,
  columnVirtualizer,
  rowHeaderVirtualizer,
  headerGroup,
  virtualPaddingLeft,
  virtualPaddingRight,
  fixedLeftColumns,
  fixedRightColumns,
  rowHeaderVirtual
}) => {
  const {
    prefix
  } = React.useContext(TableContext);
  const virtualColumns = columnVirtualizer.getVirtualItems();
  const columnOrder = table.getState().columnOrder;
  return /*#__PURE__*/React.createElement("tr", {
    key: headerGroup.id,
    ref: el => {
      if (el) rowHeaderVirtualizer.measureElement(el);
    }
    // data-index={rowHeaderVirtual?.index}
    ,
    "data-index": headerGroup.id,
    className: `${prefix}-grid-row`,
    style: {
      display: 'flex',
      width: '100%',
      minHeight: rowHeaderVirtual?.size
    }
  }, /*#__PURE__*/React.createElement(SortableContext, {
    items: columnOrder,
    strategy: horizontalListSortingStrategy
  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
    return /*#__PURE__*/React.createElement(TableHeadCell, {
      columnVirtualizer: columnVirtualizer,
      rowHeaderVirtualizer: rowHeaderVirtualizer,
      key: column.id,
      table: table,
      header: headerGroup.headers.find(h => h.column.id === column.id)
      // column={column as any}
    });
  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("th", {
    className: "",
    style: {
      display: 'flex',
      width: virtualPaddingLeft
    }
  }) : null, virtualColumns.map(virtualColumn => {
    const header = headerGroup.headers[virtualColumn.index];
    const isFixed = table.getState().columnPinning.left?.includes(header.column.id) || table.getState().columnPinning.right?.includes(header.column.id);
    if (header && !isFixed) {
      return /*#__PURE__*/React.createElement(TableHeadCell, {
        key: header.id,
        header: header,
        table: table,
        columnVirtualizer: columnVirtualizer,
        rowHeaderVirtualizer: rowHeaderVirtualizer
      });
    }
  }),
  //fake empty column to the right for virtualization scroll padding
  fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/React.createElement(TableHeadCell, {
    columnVirtualizer: columnVirtualizer,
    rowHeaderVirtualizer: rowHeaderVirtualizer,
    table: table,
    key: column.id,
    header: headerGroup.headers.find(h => h.column.id === column.id)
    // column={column as any}
  })) : null, virtualPaddingRight ?
  /*#__PURE__*/
  //fake empty column to the right for virtualization scroll padding
  React.createElement("th", {
    className: "nnnnnnnnnnnn",
    style: {
      display: 'flex',
      width: virtualPaddingRight
    }
  }) : null));
};
export default TableHeadRow;