[data grid] The `initialState` prop doesn't work

[TamirCode]

Current behavior 😯

I have a simple 50 lines app on codesandbox, where I have a useEffect that takes in any data and displays it on the datagrid. But the initialState doesn't take any effect despite using in the exact same way as in the docs. This might either be a bug or maybe the docs aren't very descriptive on how to make it work

Expected behavior 🤔

The expected behavior is for the datagrid to filter/sort the initial data, but that doesn't occur.

Steps to reproduce 🕹

https://codesandbox.io/s/mui-datagrid-initialstate-doesnt-work-bld2ow?file=/src/App.js

Context 🔦

No response

Your environment 🌎

No response

Order ID 💳 (optional)

No response

[flaviendelangle]

The grid does not seem to handle correctly scenarios with initialState + async columns initialization. The problem likely come from the following method (same for sorting)

https://github.com/mui/mui-x/blob/02a2b73b345c5ef050ba56fb5b88017b5cb2aa2c/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx#L392-L402

We should probably avoid to remove items from the filter when they have no matching column and instead just re-apply the filters.

I'll let someone from the grid team handle it.

[cherniavskii]

Thanks @TamirCode As a workaround, you can defer rendering DataGrid until you have the columns - see this demo https://codesandbox.io/s/mui-datagrid-initialstate-doesnt-work-forked-c5u42r

[DanielLanger]

Any updates on this one?

[TamirCode]

When will this be integrated ?

[yaredtsy]

why do the sort and filter have to be in the initialState? this can be done using apiRef.current.setFilterModel and apiRef.current.setSortModel.

  React.useEffect(() => {
    if (columns.length > 0) {
      apiRef.current.setSortModel([
        {
          field: "id",
          sort: "desc"
        }
      ]);
      apiRef.current.setFilterModel({
        items: [{ columnField: "id", operatorValue: ">", value: "25" }]
      });
    }
  }, [apiRef, columns]);

demo: https://codesandbox.io/s/mui-datagrid-initialstate-doesnt-work-forked-puox4t?file=/src/App.js:637-955

[TamirCode]

why do the sort and filter have to be in the initialState? this can be done using apiRef.current.setFilterModel and apiRef.current.setSortModel.

  React.useEffect(() => {
    if (columns.length > 0) {
      apiRef.current.setSortModel([
        {
          field: "id",
          sort: "desc"
        }
      ]);
      apiRef.current.setFilterModel({
        items: [{ columnField: "id", operatorValue: ">", value: "25" }]
      });
    }
  }, [apiRef, columns]);

demo: https://codesandbox.io/s/mui-datagrid-initialstate-doesnt-work-forked-puox4t?file=/src/App.js:637-955

apiRef doesnt have columnOrderModel sadly

[cholakovvv]

Are there any updates on this issue? I have a similar issue related to sorting. I want the DataGridPremium to be sorted by a specific way on first initialization, but it is not working properly. I have tried setting the sort model in the initialState and doing it with the apiRef, but neither worked.

[LironKiloma]

same as @cholakovvv , I'm struggling in the same issue, is there any updates with the DataGridPremium - initialize on first load the sort settings?

[buremba]

I was able to solve it as follows:

React.useEffect(() => {
        if (columns != null && apiRef?.current?.restoreState != null && props.datagrid?.initialState != null) {
            apiRef?.current?.restoreState(props.datagrid?.initialState)
        }
    }, [columns]);

[shabh2412]

I was able to solve it as follows:

React.useEffect(() => {
        if (columns != null && apiRef?.current?.restoreState != null && props.datagrid?.initialState != null) {
            apiRef?.current?.restoreState(props.datagrid?.initialState)
        }
    }, [columns]);

Thanks a ton! @buremba !

This logic worked for me! 🙌

[xPudda]

Could you please review the #6222 and merge it? Im struggling with this problem too.

[cherniavskii]

@xPudda Please see the recommended workaround until we solve it internally.