Issue with rendering when the unit of the data changes

[Heenkkk]

Hey!

I have a problem when using DynamicDataSheetGrid when the unit (percent, float, etc...) of the underlying data changes. It seems that when the data consists of cells with the value 0, the grid doesn't re-render when the unit of the data changes (for those exact cells where the data is still 0).

Here is an example. In the first image the values are correctly rendered with the % sign. In the second image, the data has changed and the values should now be absolute values (floats), but the cells that were 0% and should be 0 in the new data haven't been re-rendered. The cells that had a nonzero percentage or are nonzero in the new data have been re-rendered correctly. The first grid uses percentColumn for all columns and the second grid uses floatColumn.

I have checked that the data itself and the columns are updated when the corresponding action is triggered (data is fetched from a Redux store and the columns and rows are then generated accordingly when clicking a specific button).

The grid does re-render correctly when the entire view is re-rendered.

Is there anything that can be done about this?

[nick-keller]

Hey @Heenkkk ,
Do you mind sharing a bit of code? Right now it is very hard to diagnose :)

[Heenkkk]

Sure! Below is a very simplified version of the component.

const DataInputGrid = ({maxGridHeight}: DataInputGridType) => {
  // Fetch the data used for the grid from the Redux store
  const activeData = useAppSelector(selectActiveData);
  // Fetch the id of the currently active data - this is updated when clicking on a button in a separate
  // component on the same page
  const activeDataId = useAppSelector(selectActiveDataId);
  
  // Generate the column and row data from the fetched active data
  // We could also simplify this example by just fetching the constant column and row data directly
  // from the store
  const [columns, rows] = useMemo(() => {
    return generateDataGridData(activeData);
  }, [activeDataId, activeData]);

  const handleCellOnChange = (newValueRow: Row, rowIndex: number) => {
    // Handle changes in cells
  };

  return (
    <>
      <DynamicDataSheetGrid
        lockRows
        disableExpandSelection
        value={rows}
        onChange={(newValue, operations) => {
          for (const operation of operations) {
            if (operation.type === 'UPDATE')
              handleCellOnChange(newValue[operation.fromRowIndex], operation.fromRowIndex);
          }
        }}
        columns={columns}
        height={maxGridHeight - 50}
        className={'grid-cell-disabled'}
      />
    </>
  );
};

The relevant row data (after generating it from the state data) looks like the following:

const rows: Row[] = [
  {period_1: 0, period_2: 0, period_3: 0},
  {period_2: 0, period_3: 0},
  {period_3: 0},
  {period_3: 0},
  {period_3: 0},
  {period_3: 0}
];

where

interface Row {
  [key: string]: number | null;
}

and where the columns are defined by the type Column<Row>[] and

[{
  ...keyColumn(`period_${index + 1}`, columnType),
  title: `Period ${index + 1}`
}]

for each period/column in the data and where columnType is percentColumn or floatColumn depending on what the underlying data defines.

What I also just noticed is that it isn't just the cases where two data objects have zero values at the same positions that don't get re-rendered correctly, but it is actually all positions where the underlying data objects have the same value. For instance, if both sets of rows have the value {period_3: 6} at index 2, but the first set of data has the unit of percentages (so the value should be rendered as 600%) and the second set of data has the unit of floats (so it should render it as 6). Now when I have first activated the first set of data and switch to the second set, that value is still rendered as 600% although it should be 6.

Also, the first time the component fully renders (for instance, when switching to the page that contains the component from another page), it renders correctly.

[Heenkkk]

Hello!

I just wanted to give a small update from my pov regarding this problem. I assume that the issue in my case is somewhat caused by the component being optimized, such that the cells will not be updated after the first render if the value of that specific cell does not change. Even more shallow re-renders caused by state changes did not help.

After hours of trying different solutions, I finally got around this issue by adding a key to the DataInputGrid component so that it is used as according to the comments here. Changing the value of key unmounts the previous component and mounts a new instance of the component, which also fully re-renders the grid and corresponds to the behaviour I require. In my case, the value of key is determined by a (unique) identifier related to the data that should be rendered. Below is an example of how I use it:

const DataInputContainer = () => {
  const activeDataId = useAppSelector(selectActiveDataId);
  return (
    <Box sx={{ width: 1, height: 1, p: 1 }}>
      <AutoSizer disableWidth>
        {({ height }) => (
          <>
            <DataInputGrid key={activeDataId} maxGridHeight={height} />
          </>
        )}
      </AutoSizer>
    </Box>
  );
}