vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-14 23:44:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix table not re-rendering on column configuration change

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/item-list/item-table-list/item-table-list.tsx
+14 -51
View File
@@ -130,8 +130,7 @@ interface VirtualizedTableGridProps {
totalRowCount: number; totalRowCount: number;
} }
const VirtualizedTableGrid = React.memo( const VirtualizedTableGrid = ({
({
activeRowId, activeRowId,
calculatedColumnWidths, calculatedColumnWidths,
CellComponent, CellComponent,
@@ -357,9 +356,7 @@ const VirtualizedTableGrid = React.memo(
const PinnedColumnCell = useCallback( const PinnedColumnCell = useCallback(
(cellProps: CellComponentProps & TableItemProps) => { (cellProps: CellComponentProps & TableItemProps) => {
return ( return <CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />;
<CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />
);
}, },
[pinnedRowCount, CellComponent], [pinnedRowCount, CellComponent],
); );
@@ -369,9 +366,7 @@ const VirtualizedTableGrid = React.memo(
return ( return (
<CellComponent <CellComponent
{...cellProps} {...cellProps}
columnIndex={ columnIndex={cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount}
cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount
}
rowIndex={cellProps.rowIndex + pinnedRowCount} rowIndex={cellProps.rowIndex + pinnedRowCount}
/> />
); );
@@ -384,9 +379,7 @@ const VirtualizedTableGrid = React.memo(
return ( return (
<CellComponent <CellComponent
{...cellProps} {...cellProps}
columnIndex={ columnIndex={cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount}
cellProps.columnIndex + pinnedLeftColumnCount + totalColumnCount
}
/> />
); );
}, },
@@ -428,10 +421,10 @@ const VirtualizedTableGrid = React.memo(
style={ style={
{ {
'--header-height': `${headerHeight}px`, '--header-height': `${headerHeight}px`,
minWidth: `${Array.from( minWidth: `${Array.from({ length: pinnedLeftColumnCount }, () => 0).reduce(
{ length: pinnedLeftColumnCount }, (a, _, i) => a + columnWidth(i),
() => 0, 0,
).reduce((a, _, i) => a + columnWidth(i), 0)}px`, )}px`,
} as React.CSSProperties } as React.CSSProperties
} }
> >
@@ -441,10 +434,10 @@ const VirtualizedTableGrid = React.memo(
[styles.withHeader]: enableHeader, [styles.withHeader]: enableHeader,
})} })}
style={{ style={{
minHeight: `${Array.from( minHeight: `${Array.from({ length: pinnedRowCount }, () => 0).reduce(
{ length: pinnedRowCount }, (a, _, i) => a + getRowHeight(i, itemProps),
() => 0, 0,
).reduce((a, _, i) => a + getRowHeight(i, itemProps), 0)}px`, )}px`,
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
@@ -556,8 +549,7 @@ const VirtualizedTableGrid = React.memo(
() => 0, () => 0,
).reduce( ).reduce(
(a, _, i) => (a, _, i) =>
a + a + columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
columnWidth(i + pinnedLeftColumnCount + totalColumnCount),
0, 0,
)}px`, )}px`,
} as React.CSSProperties } as React.CSSProperties
@@ -618,36 +610,7 @@ const VirtualizedTableGrid = React.memo(
)} )}
</div> </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'; VirtualizedTableGrid.displayName = 'VirtualizedTableGrid';
src/renderer/features/shared/components/table-config.tsx
+1 -1
View File
@@ -774,7 +774,7 @@ const TableColumnItem = memo(
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}), }),
}} }}
variant={item.align === 'end' ? 'filled' : 'subtle'} variant={item.align === 'end' ? 'outline' : 'subtle'}
/> />
</ActionIconGroup> </ActionIconGroup>
<NumberInput <NumberInput