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

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

import { Table } from '@equinor/eds-core-react';
import { flexRender } from '@tanstack/react-table';
import { useMemo } from 'react';
import styled from 'styled-components';
import { useTableContext } from '../EdsDataGridContext.js';
import { jsx } from 'react/jsx-runtime';

const StyledCell = styled(Table.Cell).withConfig({
  displayName: "TableBodyCell__StyledCell",
  componentId: "sc-1gsd2k4-0"
})(["position:", ";", " z-index:", ";background-color:inherit;"], p => p.$pinned ? 'sticky' : 'relative', p => {
  if (p.$pinned) {
    return `${p.$pinned}: ${p.$offset}px;`;
  }
  return '';
}, p => p.$pinned ? 11 : 'auto');
function TableBodyCell({
  cell
}) {
  const {
    cellClass,
    cellStyle,
    table
  } = useTableContext();
  const pinned = cell.column.getIsPinned();
  const pinnedOffset = useMemo(() => {
    if (!pinned) {
      return 0;
    }
    const header = table.getFlatHeaders().find(h => h.id === cell.column.id);
    return pinned === 'left' ? header.getStart() : table.getTotalSize() - header.getStart() - cell.column.getSize();
  }, [pinned, cell.column, table]);
  return /*#__PURE__*/jsx(StyledCell, {
    $pinned: pinned,
    $offset: pinnedOffset,
    className: cellClass ? cellClass(cell.row, cell.column.id) : '',
    style: {
      width: cell.column.getSize(),
      maxWidth: cell.column.getSize(),
      ...(cellStyle?.(cell.row, cell.column.id) ?? {})
    },
    children: flexRender(cell.column.columnDef.cell, cell.getContext())
  }, cell.id);
}

export { TableBodyCell };