[EuiDataGrid] Cell style sticks to position when sorting

[PhaedrusTheGreek]

EUI: 43.0.0

If I set a cell's style, then sort the grid, the style sticks to the old location. To workaround, I have to manually reset the background of the cell to white when it should not be coloured.

To reproduce, take the basic example here: Take the Grid example , and add a conditional:

numeric > 800 && setCellProps({
  style: {
    backgroundColor: `rgba(0, 255, 0, ${numeric * 0.0002})`,
  },
});

Then sort the table high to low, then low to high and the cells will still be coloured:

[chandlerprall]

Thanks for opening this issue to let us know!

This is caused by the cell component instance being reused when the logical cells are reordered. The call to setCellProps isn't expected to be conditional, so cases like this we've (specifically me, I think, if we need someone to blame) expected to be handled by returning an unmount handler from the useEffect to reset. For example, Kibana's Lens implemented this in cell_value.tsx lines 61-72, and an update to fix eui's datagrid.js example is to add return () => setCellProps({ style: {} }); at the end of the useEffect.

There was a similar issue before when reordering columns, which we considered a bug and committed a fix for.

I agree that this behaviour is not expected, and we should look at correcting that - my main concern is performance if we end up unmounting/recreating cells just to reset this value, but there's likely a better component lifecycle to target. We are exploring changing this API entirely (discussion #5566 if you want to add your thoughts!), which would need to account for this situation too.