[EuiDataGrid] Cells styling stick to cell's position when adding new columns

[dej611]

In Lens we're building a dynamic coloring feature for the datatable, which uses EuidataGrid underneath.
Only numeric cells can be coloured, so nor dates or string cells should have a background-color style set.

The code used to color cells in this demo is taken from the EuiDataGrid documentation:

Kapture.2021-03-25.at.17.48.28.mp4

Scrolling up and down makes cleans up the colouring on the second column rows.

To check if that was an issue I've forcefully styled the cell div without the useEffect and repeated the same scenario:

Kapture.2021-03-25.at.17.51.57.mp4

This time the second column rows won't get any styling.

I solved this issue on the consumer side by providing a return function to the useEffect that will clean it up:

useEffect(() => 
  ...whatever...
  return () =>
      setCellProps({
        style: {
          backgroundColor: undefined,
          color: undefined,
        },
      });
}, [...]);

Now new cells are properly cleaned up:

Kapture.2021-03-25.at.18.18.35.mp4

[chandlerprall]

This is likely a bug in the cell props management, looks like they aren't cleared from memory/cache when the cell's column and/or row identifiers change, requiring the reset performed on renderCellValue's unmount.

[cee-chen]

Heya @dej611! I think my PR #5068 which addresses #4599 should also address this. Any chance you can show me where your component is in Lens and maybe provide an example dataset so I can test and confirm this to be the case? I have this working on local Kibana!