@equinor/eds-data-grid-react/dist/esm/components/TableHeaderCell.js

A feature-rich data-grid written in React, implementing the Equinor Design System

import { flexRender } from '@tanstack/react-table';
import { useTableContext } from '../EdsDataGridContext.js';
import { useMemo } from 'react';
import { FilterWrapper } from './FilterWrapper.js';
import { SortIndicator } from './SortIndicator.js';
import { Resizer, ResizeInner } from './Resizer.js';
import { TableCell } from './TableCell.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

const getSortLabel = sorted => {
  if (sorted) {
    return `${sorted}ending`;
  }
  return 'none';
};
function TableHeaderCell({
  header,
  columnResizeMode
}) {
  const ctx = useTableContext();
  const table = ctx.table;
  const pinned = header.column.getIsPinned();
  const offset = useMemo(() => {
    if (!pinned) {
      return null;
    }
    return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - header.getSize();
  }, [pinned, header, table]);
  return header.isPlaceholder ? /*#__PURE__*/jsx(TableCell, {
    $sticky: ctx.stickyHeader,
    $offset: offset,
    $pinned: pinned,
    className: ctx.headerClass ? ctx.headerClass(header.column) : '',
    style: {
      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
    },
    "aria-hidden": true
  }) : /*#__PURE__*/jsxs(TableCell, {
    $sticky: ctx.stickyHeader,
    $offset: offset,
    $pinned: pinned,
    className: ctx.headerClass ? ctx.headerClass(header.column) : '',
    "aria-sort": getSortLabel(header.column.getIsSorted()),
    onClick: header.column.getToggleSortingHandler(),
    colSpan: header.colSpan,
    style: {
      width: header.getSize(),
      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
      ...(ctx.headerStyle ? ctx.headerStyle(header.column) : {})
    },
    children: [/*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("div", {
        style: {
          display: 'flex',
          flexDirection: 'column'
        },
        children: /*#__PURE__*/jsx("span", {
          className: "table-header-cell-label",
          children: flexRender(header.column.columnDef.header, header.getContext())
        })
      }), !header.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsx(SortIndicator, {
        column: header.column
      }), header.column.getCanFilter() && !header.column.columnDef.meta?.customFilterInput ?
      /*#__PURE__*/
      // Supressing this warning - div is not interactive, but prevents propagation of events to avoid unintended sorting
      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
      jsx("div", {
        onClick: e => e.stopPropagation(),
        children: /*#__PURE__*/jsx(FilterWrapper, {
          column: header.column
        })
      }) : null]
    }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
      onClick: e => e.stopPropagation(),
      onMouseDown: header.getResizeHandler(),
      onTouchStart: header.getResizeHandler(),
      $isResizing: header.column.getIsResizing(),
      $columnResizeMode: columnResizeMode,
      className: 'resize-handle',
      "data-testid": 'resize-handle',
      children: /*#__PURE__*/jsx(ResizeInner, {})
    })]
  }, header.id);
}

export { TableHeaderCell };