Skip to content

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

@dej611

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    data grid⚠️ needs validationFor bugs that need confirmation as to whether they're reproducible

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions