[data grid] DataGrid initialState column order and width not working

[ChrisOMills]

The problem in depth 🔍

I’m having an issue with the initialState and I’ve looked at your documentation and can’t seem to figure out what I’m doing wrong.

I have the initialState saving and loading on each page load. The initialStat and columns are passed in first to the table while the data loads. Once the data comes in the columns.orderedFields is overrided to the order the data itself comes in. I would think the state our set the column orders, not the data.

Here is what the DataGrid looks like:
<DataGridPremium
apiRef={apiRef}
rows={flattenedTableData}
columns={filteredTableSchema}
slots={slots}
onReady={saveSnapshot}
disableRowSelectionOnClick
pagination
autoHeight
density="compact"
pageSizeOptions={[5, 10, 25, 50, 100]}
initialState={{
...initialState,
pagination: { paginationModel: { pageSize: 5 } },
}}
/>

Here is the initialState object:
{
"rowGrouping": {
"model": []
},
"pinnedColumns": {},
"columns": {
"columnVisibilityModel": {},
"orderedFields": [
"name",
"email",
"is_active",
"is_superuser",
"phone_number",
"country",
"address",
"city",
"state",
"zip_code"
],
"dimensions": {
"name": {
"maxWidth": -1,
"minWidth": 50,
"width": 180,
"flex": 0
},
"email": {
"maxWidth": -1,
"minWidth": 50,
"width": 274,
"flex": 0
},
"is_active": {
"maxWidth": -1,
"minWidth": 50,
"width": 180
},
"is_superuser": {
"maxWidth": -1,
"minWidth": 50,
"width": 180
},
"phone_number": {
"maxWidth": -1,
"minWidth": 50,
"width": 180,
"flex": 0
},
"country": {
"maxWidth": -1,
"minWidth": 50,
"width": 180
},
"address": {
"maxWidth": -1,
"minWidth": 50,
"width": 180
},
"city": {
"maxWidth": -1,
"minWidth": 50,
"width": 180
},
"state": {
"maxWidth": -1,
"minWidth": 50,
"width": 180
},
"zip_code": {
"maxWidth": -1,
"minWidth": 50,
"width": 180
}
}
},
"preferencePanel": {
"open": false
},
"filter": {
"filterModel": {
"items": [
{
"field": "is_active",
"operator": "is",
"id": 22559,
"value": "true"
},
{
"field": "is_superuser",
"operator": "is",
"id": 46125,
"value": "true"
}
],
"logicOperator": "and",
"quickFilterValues": [],
"quickFilterLogicOperator": "and"
}
},
"sorting": {
"sortModel": []
},
"pagination": {
"paginationModel": {
"page": 0,
"pageSize": 5
}
}
}

When the table loads, before the data is there the columns are in their saved state, but as soon as the data loads the column ordering and width get reset.

Is there a way to hold the state and not have it overridden when the data is loaded?

This is all setup with apiRef.current.exportState(); and loaded and passed into the initialState on page load (object included above).

Thanks a lot, let me know if you can point me in the right direction.

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 13.2.1
  Binaries:
    Node: 21.1.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - ~/scs-soc-frontend/node_modules/.bin/npm
  Browsers:
    Chrome: 119.0.6045.123
    Edge: Not Found
    Safari: 16.3
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.18 
    @mui/core-downloads-tracker:  5.14.12 
    @mui/icons-material: ^5.14.16 => 5.14.16 
    @mui/lab: ^5.0.0-alpha.147 => 5.0.0-alpha.147 
    @mui/material: ^5.14.12 => 5.14.12 
    @mui/private-theming:  5.14.12 
    @mui/styled-engine:  5.14.12 
    @mui/system:  5.14.12 
    @mui/types:  7.2.5 
    @mui/utils:  5.14.17 
    @mui/x-data-grid:  6.18.0 
    @mui/x-data-grid-premium: ^6.18.0 => 6.18.0 
    @mui/x-data-grid-pro:  6.18.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @mui/x-tree-view:  6.0.0-alpha.1 
    @types/react: ^18.2.25 => 18.2.25 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.2.2 => 5.2.2 

Search keywords: DataGrid initialState column order
Order ID: 29521

[DanailH]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[ChrisOMills]

It's not really easy to make the same example in codesandbox since it requires two api calls from an external server. I am really just trying to ask how this situation should be handled. If my initialState includes orderedFields and it has field1, field3, field2 for example:

"orderedFields": [
"field1",
"field3",
"field2",
],

But when the data comes in the data itself is ordered as "field1", "field2", "field3" should the DataGrid maintain the orderedFields value that was passed into the initialState or will it use the order of the data?

My hope is it will maintain what was sent in the initialState but what I'm seeing is the initialState is updated to change the order of the fields to match the data.

Can you provide any feedback on what the expected behavior is? I'm combed through your documentation and don't see a straight forward answer.

Thanks

[DanailH]

It's difficult to follow the problem with just a written explanation, that's why I asked for a code reproduction.
If you are setting the initial state and then sucrose changes the order of the columns once the grid is loaded it might be that the order you provide later is the one that will get applied as the initial state is really only applied on the first load.
But again I can't be 100% sure that it's not a bug until we see the reproduction.

[ChrisOMills]

Ok I created a test project for you to look at: https://codesandbox.io/p/sandbox/data-grid-initialstate-bug-p8xfw2

You will notice with this project the initialState is loaded, putting the Name field on the right hand side:
const initialState = {
orderedFields: [
"customer_name",
"created_by_email",
"created_at",
"updated_at",
"updated_by_email",
"name", <---- Notice it's at the end
],

Durning loading the columns are in the right initial state, but after the 5 second timer and the data comes in the initialState is lost.

How can I keep the initialState so that the data itself isn't change things like the order and width?

[DanailH]

Ok, I see what the problem is - if you move filteredTableSchema in your example to be outside of the React component your code will work. It's the same problem described here: #8448 (comment).
I've also updated your example to see it working: https://codesandbox.io/p/sandbox/data-grid-initialstate-bug-forked-mp5v7c

[ChrisOMills]

Thanks for the details. The problem is actually coming from the initialState. Does this need to be memorized as well?