diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index f2d9494c93..675dd2376f 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -83,6 +83,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { const columnSortFunction = React.useRef(null); const columnField = React.useRef(null); const filterTimeout = React.useRef(null); + const restoredRef = React.useRef(false); if (props.rows !== d_rowsState && !props.onPage) { setRowsState(props.rows); @@ -341,16 +342,18 @@ export const DataTable = React.forwardRef((inProps, ref) => { } if (restoredState.filters) { - setD_filtersState(cloneFilters(restoredState.filters)); + const clonedFilters = cloneFilters(restoredState.filters); + + setD_filtersState(clonedFilters); if (props.onFilter) { props.onFilter( createEvent({ - filters: restoredState.filters + filters: clonedFilters }) ); } else { - setFiltersState(cloneFilters(restoredState.filters)); + setFiltersState(clonedFilters); } } @@ -1507,16 +1510,7 @@ export const DataTable = React.forwardRef((inProps, ref) => { elementRef.current.setAttribute(attributeSelector.current, ''); } - //setFiltersState(cloneFilters(props.filters)); // Github #4248 setD_filtersState(cloneFilters(props.filters)); - - if (isStateful()) { - restoreState(); - - if (props.resizableColumns) { - restoreColumnWidths(); - } - } }); useUpdateEffect(() => { @@ -1529,6 +1523,18 @@ export const DataTable = React.forwardRef((inProps, ref) => { }; }, [props.breakpoint]); + useUpdateEffect(() => { + if (!restoredRef.current && isStateful()) { + restoredRef.current = true; + + restoreState(); + + if (props.resizableColumns) { + restoreColumnWidths(); + } + } + }, [context]); + useUpdateEffect(() => { const filters = cloneFilters(props.filters);