@itwin/itwinui-react/esm/core/Table/TableCell.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { getCellStyle, getStickyStyle, getSubRowStyle } from './utils.js';
import { SubRowExpander } from './SubRowExpander.js';
import { SELECTION_CELL_ID } from './columns/index.js';
import { DefaultCell } from './cells/index.js';
import { Box } from '../../utils/index.js';
import { DefaultCellRendererPropsChildren } from './cells/DefaultCell.js';
export const TableCell = (props) => {
  let {
    cell,
    cellIndex,
    isDisabled,
    tableHasSubRows,
    tableInstance,
    expanderCell,
    density,
  } = props;
  let hasSubRowExpander =
    cellIndex ===
    cell.row.cells.findIndex((c) => c.column.id !== SELECTION_CELL_ID);
  let cellElementProps = cell.getCellProps({
    className: cx('iui-table-cell', cell.column.cellClassName, {
      'iui-table-cell-sticky': !!cell.column.sticky,
    }),
    style: {
      ...getCellStyle(cell.column, !!tableInstance.state.isTableResizing),
      ...(tableHasSubRows &&
        hasSubRowExpander &&
        getSubRowStyle({
          density,
          depth: cell.row.depth + (cell.row.canExpand ? 0 : 1),
        })),
      ...getStickyStyle(cell.column, tableInstance.visibleColumns),
    },
  });
  let cellProps = React.useMemo(
    () => ({
      ...tableInstance,
      ...{
        cell,
        row: cell.row,
        value: cell.value,
        column: cell.column,
      },
    }),
    [cell, tableInstance],
  );
  let cellContent = React.useMemo(
    () =>
      React.createElement(
        React.Fragment,
        null,
        tableHasSubRows &&
          hasSubRowExpander &&
          cell.row.canExpand &&
          React.createElement(SubRowExpander, {
            cell: cell,
            isDisabled: isDisabled,
            cellProps: cellProps,
            expanderCell: expanderCell,
            density: density,
            slot: 'start',
          }),
        cell.render('Cell'),
      ),
    [
      cell,
      cellProps,
      density,
      expanderCell,
      hasSubRowExpander,
      isDisabled,
      tableHasSubRows,
    ],
  );
  let defaultCellRendererChildren = React.useMemo(
    () =>
      React.createElement(
        React.Fragment,
        null,
        cellContent,
        'left' === cell.column.sticky &&
          tableInstance.state.sticky.isScrolledToRight &&
          React.createElement(Box, {
            className: 'iui-table-cell-shadow-right',
            slot: 'shadows',
          }),
        'right' === cell.column.sticky &&
          tableInstance.state.sticky.isScrolledToLeft &&
          React.createElement(Box, {
            className: 'iui-table-cell-shadow-left',
            slot: 'shadows',
          }),
      ),
    [
      cell.column.sticky,
      cellContent,
      tableInstance.state.sticky.isScrolledToLeft,
      tableInstance.state.sticky.isScrolledToRight,
    ],
  );
  let cellRendererProps = React.useMemo(
    () => ({
      cellElementProps,
      cellProps,
      children: defaultCellRendererChildren,
    }),
    [cellElementProps, cellProps, defaultCellRendererChildren],
  );
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      DefaultCellRendererPropsChildren.Provider,
      {
        value: defaultCellRendererChildren,
      },
      cell.column.cellRenderer
        ? cell.column.cellRenderer({
            ...cellRendererProps,
            isDisabled: () => isDisabled,
          })
        : React.createElement(DefaultCell, {
            ...cellRendererProps,
            isDisabled: () => isDisabled,
          }),
    ),
  );
};