diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 3b2f15be6..c1034004f 100644 --- a/src/frontend/src/components/tableComponent/index.tsx +++ b/src/frontend/src/components/tableComponent/index.tsx @@ -1,7 +1,7 @@ import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid import { AgGridReact, AgGridReactProps } from "ag-grid-react"; -import { ElementRef, forwardRef, useRef } from "react"; +import { ElementRef, forwardRef, useEffect, useRef } from "react"; import { DEFAULT_TABLE_ALERT_MSG, DEFAULT_TABLE_ALERT_TITLE, @@ -40,6 +40,7 @@ const TableComponent = forwardRef< // @ts-ignore const realRef = ref?.current ? ref : gridRef; const dark = useDarkStore((state) => state.dark); + const initialColumnDefs = useRef(props.columnDefs); const makeLastColumnNonResizable = (columnDefs) => { columnDefs.forEach((colDef, index) => { @@ -55,6 +56,7 @@ const TableComponent = forwardRef< ...props.columnDefs, ]); params.api.setColumnDefs(updatedColumnDefs); + initialColumnDefs.current = params.api.getColumnDefs(); if (props.onGridReady) props.onGridReady(params); }; @@ -134,7 +136,7 @@ const TableComponent = forwardRef< onGridReady={onGridReady} onColumnMoved={onColumnMoved} /> - resetGrid(realRef)} /> + resetGrid(realRef, initialColumnDefs)} /> ); }, diff --git a/src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx b/src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx index 1ef2f58a1..6dc841104 100644 --- a/src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx +++ b/src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx @@ -1,5 +1,12 @@ -export default function resetGrid(ref) { +export default function resetGrid(ref, initialColumnDefs) { if (ref?.current && ref?.current.api) { ref.current.api.resetColumnState(); + if (initialColumnDefs.current) { + const resetColumns = ref.current.api.applyColumnState({ + state: initialColumnDefs.current, + applyOrder: true, + }); + return resetColumns; + } } }