@ui5/webcomponents-react/dist/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.js

React Wrapper for UI5 Web Components and additional components

import { useStylesheet } from '@ui5/webcomponents-react-base';
import { forwardRef, Fragment } from 'react';
import { classNames, styleData } from './Resizer.module.css.js';
import { ColumnHeader } from './index.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ColumnHeaderContainer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    headerProps,
    headerGroup,
    onSort,
    onGroupByChanged,
    resizeInfo,
    isRtl,
    columnVirtualizer,
    uniqueId,
    showVerticalEndBorder
  } = props;
  useStylesheet(styleData, 'Resizer');
  const {
    key,
    ...reactTableHeaderProps
  } = headerProps;
  return /*#__PURE__*/_jsx("div", {
    ...reactTableHeaderProps,
    style: {
      width: `${columnVirtualizer.getTotalSize()}px`
    },
    ref: ref,
    "data-component-name": "AnalyticalTableHeaderRow",
    children: columnVirtualizer.getVirtualItems().map((virtualColumn, index) => {
      const column = headerGroup.headers[virtualColumn.index];
      if (!column) {
        return null;
      }
      const isLastColumn = !column.disableResizing && virtualColumn.index + 1 === headerGroup.headers.length;
      const resizerDirectionStyle = isRtl ? {
        right: `${column.totalFlexWidth + column.totalLeft - (isLastColumn ? 3 : 0)}px`,
        transform: 'translateX(50%)'
      } : {
        left: `${column.totalFlexWidth + column.totalLeft - (isLastColumn ? 3 : 0)}px`,
        transform: 'translateX(-50%)'
      };
      const {
        key,
        ...rest
      } = column.getHeaderProps();
      return /*#__PURE__*/_jsxs(Fragment, {
        children: [column.canResize && column.getResizerProps && /*#__PURE__*/_jsx("div", {
          ...column.getResizerProps(),
          "data-resizer": true,
          "data-component-name": "AnalyticalTableResizer",
          className: classNames.resizer,
          style: resizerDirectionStyle
        }), /*#__PURE__*/_jsx(ColumnHeader, {
          ...rest,
          showVerticalEndBorder: showVerticalEndBorder,
          id: `${uniqueId}${rest?.id ?? ''}`,
          columnId: rest.id,
          visibleColumnIndex: index,
          onSort: onSort,
          onGroupBy: onGroupByChanged,
          headerTooltip: column.headerTooltip,
          isDraggable: !column.disableDragAndDrop && !resizeInfo.isResizingColumn,
          virtualColumn: virtualColumn,
          columnVirtualizer: columnVirtualizer,
          isRtl: isRtl,
          children: column.render('Header')
        })]
      }, key);
    })
  }, key);
});
ColumnHeaderContainer.displayName = 'ColumnHeaderContainer';