inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2026-04-03 01:51:08 +00:00
Code Activity

Fix order of hooks for stabilizing table columns (#11482)

Browse Source 
* Fix order of hooks for stabilizing table columns

Ref: https://github.com/icflorescu/mantine-datatable/issues/759

* Reset column ordering and widths when the component is mounted

---------

Co-authored-by: Matthias Mair <code@mjmair.com>
This commit is contained in:
Oliver
2026-03-29 15:21:53 +11:00
committed by GitHub
parent 9cd0b520c2
commit 571b46c9ff
1 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/frontend/src/tables/InvenTreeTable.tsx
View File

@@ -333,9 +333,6 @@ export function InvenTreeTable<T extends Record<string, any>>({
}); });
} }
const columnNames: string = cols.map((col) => col.accessor).join(',');
setColumnHash(hashString(columnNames));
return cols; return cols;
}, [ }, [
columns, columns,
@@ -345,6 +342,13 @@ export function InvenTreeTable<T extends Record<string, any>>({
tableState.selectedRecords tableState.selectedRecords
]); ]);
useEffect(() => {
const columnNames: string = dataColumns
.map((col: any) => col.accessor)
.join(',');
setColumnHash(hashString(columnNames));
}, [dataColumns]);
// Callback when column visibility is toggled // Callback when column visibility is toggled
const toggleColumn = useCallback( const toggleColumn = useCallback(
(columnName: string) => { (columnName: string) => {
@@ -373,6 +377,13 @@ export function InvenTreeTable<T extends Record<string, any>>({
getInitialValueInEffect: false getInitialValueInEffect: false
}); });
// Reset column ordering and custom widths when the component is mounted
// Ref: https://github.com/icflorescu/mantine-datatable/issues/759#issuecomment-4148942070
useEffect(() => {
tableColumns.resetColumnsOrder();
tableColumns.resetColumnsWidth();
}, []);
// Reset the pagination state when the search term changes // Reset the pagination state when the search term changes
useEffect(() => { useEffect(() => {
tableState.setPage(1); tableState.setPage(1);