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

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

import { Table } from '@equinor/eds-core-react';
import { useRef, useEffect, useCallback } from 'react';
import styled from 'styled-components';
import { useTableContext } from '../EdsDataGridContext.js';
import { TableBodyCell } from './TableBodyCell.js';
import { jsx } from 'react/jsx-runtime';

function TableRow({
  row,
  onCellClick,
  onClick,
  onDoubleClick,
  onContextMenu,
  rowVirtualizer,
  virtualItem
}) {
  const {
    rowClass,
    rowStyle
  } = useTableContext();
  const isMountedRef = useRef(true);

  // Set mounted flag to false on unmount to prevent measurements during cleanup
  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  // Create a stable ref callback that guards against calls during unmount
  const measureRef = useCallback(node => {
    // Only measure if we have a node, the component is still mounted, and we have a virtualizer
    if (node && isMountedRef.current && rowVirtualizer) {
      try {
        rowVirtualizer.measureElement(node);
      } catch (error) {
        // Silently catch any errors during measurement to prevent crashes
        // This can happen if the virtualizer is in an inconsistent state during unmount
        if (process.env.NODE_ENV === 'development') {
          console.warn('Failed to measure element during virtualization:', error);
        }
      }
    }
  }, [rowVirtualizer]);
  return /*#__PURE__*/jsx(StyledTableRow, {
    "data-index": virtualItem?.index,
    ref: measureRef //measure dynamic row height safely
    ,
    style: {
      ...(rowStyle?.(row) ?? {})
    },
    className: `${row.getIsSelected() ? 'selected' : ''} ${rowClass?.(row)}`,
    onClick: onClick,
    onDoubleClick: onDoubleClick,
    onContextMenu: onContextMenu,
    children: row.getVisibleCells().map(cell => /*#__PURE__*/jsx(TableBodyCell, {
      cell: cell,
      onClick: onCellClick ? event => onCellClick(cell, event) : undefined
    }, cell.id))
  });
}

// Neccessary to have this attribute as class to prevent overriding hover color
const StyledTableRow = styled(Table.Row).withConfig({
  displayName: "TableRow__StyledTableRow",
  componentId: "sc-1vjfq5p-0"
})(["background-color:inherit;"]);

export { TableRow };