[data grid] Style cells based on adjacent cells

[louisaaron]

Latest version

• [X] I have tested the latest version

Summary

Style cells based on adjacent cells

Examples

const _getCellClassName = (params: GridCellParams) => {
  const { id, field } = params;
  const visibleColumns = apiRef.current.getVisibleColumns();
  const columnIndex = visibleColumns.findIndex((col) => col.field === field);
  const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
  const totalColumns = visibleColumns.length;
  const totalRows = apiRef.current.getRowsCount();
  const copiedCell = copiedCells.find((cell) => cell.id === id && cell.field === field);

  let classes = "";
  if (!isEditable(params)) classes += " uneditable";

  const selectionClass = apiRef.current.unstable_isCellSelected(id, field) ? " selected" : "";
  classes += ` ${getMode(params)}${selectionClass}`;

  // Determine the mode and selection of the cell to the left
  if (columnIndex > 0) {
    const leftId = visibleColumns[columnIndex - 1].field;
    const leftCellParams = apiRef.current.getCellParams(id, leftId);
    const leftSelectionClass = apiRef.current.unstable_isCellSelected(id, leftId) ? ` left-selected` : "";
    classes += ` left-${getMode(leftCellParams)}${leftSelectionClass}`;
  }

  // Determine the mode and selection of the cell to the right
  if (columnIndex < totalColumns - 1) {
    const rightId = visibleColumns[columnIndex + 1].field;
    const rightCellParams = apiRef.current.getCellParams(id, rightId);
    const rightSelectionClass = apiRef.current.unstable_isCellSelected(id, rightId) ? ` right-selected` : "";
    classes += ` right-${getMode(rightCellParams)}${rightSelectionClass}`;
  }

  // Determine the mode and selection of the cell above
  if (rowIndex > 0) {
    const aboveRowId = apiRef.current.getRowIdFromRowIndex(rowIndex - 1);
    const aboveCellParams = apiRef.current.getCellParams(aboveRowId, field);
    const topSelectionClass = apiRef.current.unstable_isCellSelected(aboveRowId, field) ? ` top-selected` : "";
    classes += ` top-${getMode(aboveCellParams)}${topSelectionClass}`;
  }

  // Determine the mode and selection of the cell below
  if (rowIndex < totalRows - 1) {
    const belowRowId = apiRef.current.getRowIdFromRowIndex(rowIndex + 1);
    const belowCellParams = apiRef.current.getCellParams(belowRowId, field);
    const bottomSelectionClass = apiRef.current.unstable_isCellSelected(belowRowId, field) ? ` bottom-selected` : "";
    classes += ` bottom-${getMode(belowCellParams)}${bottomSelectionClass}`;
  }

  if (copiedCell) {
    classes += copiedCell.fadedOut ? " highlight-cell-fade-out" : " highlight-cell highlight-cell-fade-out";
  }

  return classes;
};

Motivation

See code above

Search keywords: Adjacent Cells Order ID: 85118

[michelengelen]

Hey @louisaaron and thanks for taking the time to raise this feature request.

Did you already think of a way how this should work? Should the grid add those adjacent cell classes on its own, or should this be added via a specific method?

I'll add this to the board, but I would like to know your thoughts on this!

[louisaaron]

@michelengelen apologies for the delay, I'm waiting to hear back from the person on our team who mentioned this to me. will update asap

[louisaaron]

Hey @michelengelen, here's what I heard back: either way is fine, a callback that provides the classes/grid params for that other adjacent cells would be fine. But it would also be okay to just do it for every class. Alternative to all of this is providing gridParams.above gridParams.below etc. in the API (really should be there anyway)