Set row to highlight insead of cell

[Thomas-QCD]

This last column has a button that opens a modal that covers the screen. When the modal is closed, the user will have to track down the row that had the button they pressed. The cell with the button is small, and the blue border is subtle. I would like to have the whole row be highlighted with the blue border instead of the cell.

[kokoc30]

For this modal workflow, remember the originating row's ID when opening the modal, then apply a rowClass. That keeps the highlight independent of focus moving into and out of the dialog.

In your grid-owning component (using a numeric ID here):

const [originRowId, setOriginRowId] = useState<number | null>(null);

<DataGrid
  columns={columns}
  rows={rows}
  rowClass={(row) => row.id === originRowId ? 'modal-origin' : undefined}
/>

In your existing action button handler, record the ID before calling your modal-opening code:

onClick={() => {
  setOriginRowId(row.id);
  openModal(row); // your existing modal-opening function
}}

Leave that ID set when the modal closes. Use the row's stable key rather than its array index, so sorting does not highlight a different record.

Apply the border to the cells, since the v7 row container uses display: contents:

.rdg-row.modal-origin > .rdg-cell {
  background-color: #e6f0ff;
  border-block-start: 2px solid #2684ff;
  border-block-end: 2px solid #2684ff;
}

.rdg-row.modal-origin > .rdg-cell:first-child {
  border-inline-start: 2px solid #2684ff;
}

.rdg-row.modal-origin > .rdg-cell:last-child {
  border-inline-end: 2px solid #2684ff;
}

This gives the visible row a blue boundary and background. It can coexist with the active cell's normal keyboard-focus outline. rowClass is documented in the grid API.