[data grid][RFC] Which examples would you like to see for the Data Grid?

[joserodolfofreitas]

Summary

Hi everyone,
In the last MUI Developer survey, we've seen multiple requests for more examples in the documentation.
We hear you, and our goal is to provide the best experience and support for your projects.

So we'd like to ask the community: Which examples would help you accomplish your real-life use cases?
Feel free to let us know if you have ideas or struggle/have struggled with any particular customization because of a lack of an example.

🗳️ Request an example

Please leave your suggestions as comments on this thread (one request per comment), and feel free to 👍 upvote any comment with an example you'd like to see prioritized.

Thank you for your participation and valuable input!

🎯 Need some guidance to formulate your request?

• Try to be as clear as possible about the goal/custom behavior you want to achieve.
• Try complementing your request with a "how to" title, summarizing what you'd like to learn from this example.
• If it's a styling/visual customization, feel free to add a visual concept.
• It can include any feature or feature combination.

You can use the following template.

---

["How to" Title]

[What I need in detail]

(Optional) [media with a visual concept]

---

📡 Example:

How to add custom controls to the filter panel?

I need to add additional custom buttons to the bottom of the filter panel to enable advanced filtering tools, like saving the filter parameters and quickly reloading them from a shortcut list.

[PunkFleet]

How to add column batch edit function
I need to update multiple rows of data in the same column, but currently I can only do it by updating individual cells, can you update the tutorial to help achieve this function?
I guess this feature is also applicable to the basic functionality of tables in many scenarios, maybe this feature will be added to the community version in the future?

[DevPowers]

How to style cells without impacting the Aggregate row. Example of the issue: https://codesandbox.io/s/frosty-euler-1szk2y?file=/demo.tsx.

[tielushko]

how to use updateRows api in conjunction with the data that's coming back from the server.

[AnastasiaEvgenia]

Full example of grid with server side data, server side filtering, sorting, paging and grouping, server side exporting, plus editing functionality.

[woodreamz]

How to customize toolbar components individually (quick filter field, columns button, exports button).

For example, I would like to replace the Columns button by an IconButton.

[cheesestringer]

With high frequency updates, how would you style / highlight only the changed cells.

For example, with stock trading data:

• If the new value is higher, apply fading green shading / highlighting
• If the new value is lower, apply fading red shading / highlighting

[LeonSa2404]

How can I make sure that the grid is finished loading and that the api object can be accessed?

I implemented several components around the DataGrid that interact with the Grid via the api object, for example a custom active filter indicator and a wrapper around the grid to store and restore the grid's state. When my custom components first load, I want to do stuff with api object, like subscribing to events, but when using a useEffect the api object is not yet populated. How can I make sure that the grid is finished loading and that the api object can be accessed?

[PunkFleet]

A case for customizing datagrid checkbox styles and an example of bulk editing columns.

[nsconde]

Using row grouping with either lazy loading or infinite loading. Not sure how to necessarily combine those two together seamlessly, so it would be cool to see how you guys would apply a solution that uses both in conjunction.

[ShameerMohammed15]

how to add autosizing option in mui table and whenever we drag the column it should show the hide data how to achieve this