[DataGrid] Add other sub-states to the initialState prop

[cq-ubaid-khan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently the datagrid only support few properties as initial state one example pinnedColumns, We want it to receive columnsOrders, columnsSizes, pagination, columnVisibility as an initial state of grid.

Support for this configuration will be useful where we save all of the datagrid settings in persistent location and later when visited on the same page we get the same settings applied on the grid automatically.

Currently in order to achieve this behavior we have to interact with the apiRef.

Thanks.

Examples 🌈

const savedInitialState = {
   columnsSizes: { fieldName: { width: 30 }, otherField: { width: 50 } },
   columnsOrders: { fieldName: { orderIndex: 4 } },
   pagination: { size: 20, ... },
   columnsVisibility: { fieldName: { visible: false } },
   ...
}

<DataGrid 
   initialState={savedInitialState}
   ...
/>

Motivation 🔦

No response

[alexfauquette]

It sounds like it is a duplicate of #820

[flaviendelangle]

#820 is mainly about the new methods to imperatively store and restore the state.
But we can keep this one to discuss which state keys should be added to the initialState (most of the time I think those should also be added to the store / restore methods).

@cq-ubaid-khan as you saw we started small with some sub-states we knew were needed. The idea being to avoid adding to much complexity right from the start.

The pagination (pageSize and page) could very easily be added and for me it totally make sense.
For the columns related data it is slightly more complicated and I think we should do it in a second run. You can pre-process your column objects to provide custom initial order / sizes / visibility but we will have to think of a clean implementation on our side.

---

EDIT:

Here is the current status of the sub-states asked:

• Column orders
• Column sizes
• Column Visibility
• Pagination

[cq-ubaid-khan]

Hmm. Thanks for you response, I understand your thoughts about the complexity as I've gone through the same kind problem in the past.

However, I've implemented the solution from my own way by implementing a middle state mapping object which I can easily persist and reuse.

Pasting here so anyone in the future can get some help from this.

const layout = {
 layoutSettings: {
   field1: {
       orderIndex: 1,
       hidden: true,
       locked: false,
       ....
    }
   field2: ....,
   ....
 }
}

const layoutSettingFields = Object.keys(layout.layoutSettings);
if (layoutSettingFields.length) {
 layoutSettingFields.forEach((field) => {
   dtApi.setColumnIndex(field, layout.layoutSettings[field].orderIndex);
   dtApi.setColumnVisibility(field, !layout.layoutSettings[field].hidden);
   if (layout.layoutSettings[field].locked) dtApi.pinColumn(field, DataTablePinnedPosition.left);
   else dtApi.unpinColumn(field);
 });
}

[tielushko]

@flaviendelangle, do you happen to know if there is a plan to work on additional states features, such as width and order? Is it something that serves as the priority for the team?

[flaviendelangle]

It's under progress, see #3816
But the exact API is being discussed in the team so it will probably take a few weeks before the release.

[tielushko]

Thanks for linking that PR, @flaviendelangle! I will keep an eye on it, looking forward to seeing updates regarding it!