fix table not re-rendering on column configuration change

This commit is contained in:
jeffvli
2025-12-04 04:07:24 -08:00
parent 7c5dc5bb39
commit b66530f8fd
2 changed files with 420 additions and 457 deletions
@@ -130,8 +130,7 @@ interface VirtualizedTableGridProps {
totalRowCount: number;
}
const VirtualizedTableGrid = React.memo(
({
const VirtualizedTableGrid = ({
activeRowId,
calculatedColumnWidths,
CellComponent,
@@ -171,7 +170,7 @@ const VirtualizedTableGrid = React.memo(
tableId,
totalColumnCount,
totalRowCount,
}: VirtualizedTableGridProps) => {
}: VirtualizedTableGridProps) => {
const columnWidth = useCallback(
(index: number) => calculatedColumnWidths[index],
[calculatedColumnWidths],
@@ -357,9 +356,7 @@ const VirtualizedTableGrid = React.memo(
const PinnedColumnCell = useCallback(
(cellProps: CellComponentProps & TableItemProps) => {
return (
<CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />
);
return <CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />;
},
[pinnedRowCount, CellComponent],
);
@@ -369,9 +366,7 @@ const VirtualizedTableGrid = React.memo(
return (
<CellComponent
{...cellProps}
columnIndex={
cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount
}
columnIndex={cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount}
rowIndex={cellProps.rowIndex + pinnedRowCount}
/>
);
@@ -384,9 +379,7 @@ const VirtualizedTableGrid = React.memo(
return (
<CellComponent
{...cellProps}
columnIndex={
cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount
}
columnIndex={cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount}
/>
);
},
@@ -428,10 +421,10 @@ const VirtualizedTableGrid = React.memo(
style={
{
'--header-height': `${headerHeight}px`,
minWidth: `${Array.from(
{ length: pinnedLeftColumnCount },
() => 0,
).reduce((a, _, i) => a + columnWidth(i), 0)}px`,
minWidth: `${Array.from({ length: pinnedLeftColumnCount }, () => 0).reduce(
(a, _, i) => a + columnWidth(i),
0,
)}px`,
} as React.CSSProperties
}
>
@@ -441,10 +434,10 @@ const VirtualizedTableGrid = React.memo(
[styles.withHeader]: enableHeader,
})}
style={{
minHeight: `${Array.from(
{ length: pinnedRowCount },
() => 0,
).reduce((a, _, i) => a + getRowHeight(i, itemProps), 0)}px`,
minHeight: `${Array.from({ length: pinnedRowCount }, () => 0).reduce(
(a, _, i) => a + getRowHeight(i, itemProps),
0,
)}px`,
overflow: 'hidden',
}}
>
@@ -556,8 +549,7 @@ const VirtualizedTableGrid = React.memo(
() => 0,
).reduce(
(a, _, i) =>
a +
columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
a + columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
0,
)}px`,
} as React.CSSProperties
@@ -618,36 +610,7 @@ const VirtualizedTableGrid = React.memo(
)}
</div>
);
},
(prevProps, nextProps) => {
const prevColumnIds = prevProps.parsedColumns.map((col) => col.id).join(',');
const nextColumnIds = nextProps.parsedColumns.map((col) => col.id).join(',');
const columnWidthsEqual = prevProps.calculatedColumnWidths.every(
(width, index) => width === nextProps.calculatedColumnWidths[index],
);
if (prevColumnIds !== nextColumnIds) {
return false;
}
return (
columnWidthsEqual &&
prevProps.activeRowId === nextProps.activeRowId &&
prevProps.data === nextProps.data &&
prevProps.size === nextProps.size &&
prevProps.startRowIndex === nextProps.startRowIndex &&
prevProps.enableVerticalBorders === nextProps.enableVerticalBorders &&
prevProps.enableHorizontalBorders === nextProps.enableHorizontalBorders &&
prevProps.enableRowHoverHighlight === nextProps.enableRowHoverHighlight &&
prevProps.enableAlternateRowColors === nextProps.enableAlternateRowColors &&
prevProps.pinnedLeftColumnCount === nextProps.pinnedLeftColumnCount &&
prevProps.pinnedRightColumnCount === nextProps.pinnedRightColumnCount &&
prevProps.totalColumnCount === nextProps.totalColumnCount &&
prevProps.totalRowCount === nextProps.totalRowCount
);
},
);
};
VirtualizedTableGrid.displayName = 'VirtualizedTableGrid';
@@ -774,7 +774,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase',
}),
}}
variant={item.align === 'end' ? 'filled' : 'subtle'}
variant={item.align === 'end' ? 'outline' : 'subtle'}
/>
</ActionIconGroup>
<NumberInput