[EuiDataGrid] Fix cell props not resetting on column sort

CHANGELOG.md

@@ -3,6 +3,10 @@
 - Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636))
 - Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627))
 
+**Bug fixes**
+
+- Fixed `EuiDataGrid` cell props not resetting on column sort ([#5665](https://github.com/elastic/eui/issues/5665))
+
 ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0)
 
 - Added new `renderCellPopover` prop to `EuiDataGrid` ([#5640](https://github.com/elastic/eui/pull/5640))

src-docs/src/views/datagrid/datagrid.js

@@ -77,11 +77,12 @@ const RenderCellValue = ({ rowIndex, columnId, setCellProps }) => {
           data[rowIndex][columnId].match(/\d+\.\d+/)[0],
           10
         );
-        setCellProps({
-          style: {
-            backgroundColor: `rgba(0, 255, 0, ${numeric * 0.0002})`,
-          },
-        });
+        numeric > 800 &&
+          setCellProps({
+            style: {
+              backgroundColor: `rgba(0, 255, 0, ${numeric * 0.0002})`,
+            },
+          });
       }
     }
   }, [rowIndex, columnId, setCellProps, data]);

src/components/datagrid/body/data_grid_cell.test.tsx

@@ -180,12 +180,17 @@ describe('EuiDataGridCell', () => {
   });
 
   describe('componentDidUpdate', () => {
-    it('resets cell props when the cell columnId changes', () => {
+    it('resets cell props when the cell is moved (columnId) or sorted (rowIndex)', () => {
       const setState = jest.spyOn(EuiDataGridCell.prototype, 'setState');
       const component = mount(<EuiDataGridCell {...requiredProps} />);
 
       component.setProps({ columnId: 'newColumnId' });
       expect(setState).toHaveBeenCalledWith({ cellProps: {} });
+      expect(setState).toHaveBeenCalledTimes(1);
+
+      component.setProps({ rowIndex: 1 });
+      expect(setState).toHaveBeenCalledWith({ cellProps: {} });
+      expect(setState).toHaveBeenCalledTimes(2);
     });
 
     it("handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context", () => {

src/components/datagrid/body/data_grid_cell.tsx

@@ -301,7 +301,10 @@ export class EuiDataGridCell extends Component<
       this.handleCellPopover();
     }
 
-    if (this.props.columnId !== prevProps.columnId) {
+    if (
+      this.props.columnId !== prevProps.columnId ||
+      this.props.rowIndex !== prevProps.rowIndex
+    ) {
       this.setCellProps({});
     }
   }