mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-10 04:30:25 +02:00
fix table not re-rendering on column configuration change
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user