@equinor/eds-data-grid-react/dist/esm/components/TableFooterCell.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 { SortIndicator } from './SortIndicator.js';
import { Resizer, ResizeInner } from './Resizer.js';
import { TableCell } from './TableCell.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

function TableFooterCell({
  footer,
  columnResizeMode
}) {
  const ctx = useTableContext();
  const table = ctx.table;
  const pinned = footer.column.getIsPinned();
  const offset = useMemo(() => {
    if (!pinned) {
      return null;
    }
    return pinned === 'left' ? footer.getStart() : table.getTotalSize() - footer.getStart() - footer.getSize();
  }, [pinned, footer, table]);
  return footer.isPlaceholder ? /*#__PURE__*/jsx(TableCell, {
    $sticky: ctx.stickyFooter,
    $offset: offset,
    $pinned: pinned,
    className: ctx.footerClass ? ctx.footerClass(footer.column) : '',
    style: {
      ...(ctx.footerStyle ? ctx.footerStyle(footer.column) : {})
    },
    "aria-hidden": true
  }) : /*#__PURE__*/jsxs(TableCell, {
    $sticky: ctx.stickyFooter,
    $offset: offset,
    $pinned: pinned,
    className: ctx.footerClass ? ctx.footerClass(footer.column) : '',
    onClick: footer.column.getToggleSortingHandler(),
    colSpan: footer.colSpan,
    style: {
      width: footer.getSize(),
      verticalAlign: ctx.enableColumnFiltering ? 'top' : 'middle',
      ...(ctx.footerStyle ? ctx.footerStyle(footer.column) : {})
    },
    children: [/*#__PURE__*/jsxs(Fragment, {
      children: [/*#__PURE__*/jsx("div", {
        style: {
          display: 'flex',
          flexDirection: 'column'
        },
        children: /*#__PURE__*/jsx("span", {
          className: "table-footer-cell-label",
          children: flexRender(footer.column.columnDef.footer, footer.getContext())
        })
      }), !footer.column.columnDef.meta?.customFilterInput && /*#__PURE__*/jsx(SortIndicator, {
        column: footer.column
      })]
    }), columnResizeMode && /*#__PURE__*/jsx(Resizer, {
      onClick: e => e.stopPropagation(),
      onMouseDown: footer.getResizeHandler(),
      onTouchStart: footer.getResizeHandler(),
      $isResizing: footer.column.getIsResizing(),
      $columnResizeMode: columnResizeMode,
      className: 'resize-handle',
      "data-testid": 'resize-handle',
      children: /*#__PURE__*/jsx(ResizeInner, {})
    })]
  }, footer.id);
}

export { TableFooterCell };