search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.55k stars 1.33k forks source link

[docs] Static Typing for MUI React Data Grid Columns #14862

Open johnnyreilly opened 1 month ago

johnnyreilly commented 1 month ago

Related page

https://mui.com/x/react-data-grid/column-definition/

Kind of issue

Missing information

Issue description

I recently discovered a way to make use of static typing to ensure that columns and rows are aligned; that it's not possible to specify a field if it doesn't actually exist in the rows:

https://johnnyreilly.com/static-typing-for-mui-react-data-grid-columns

Only so many people are likely to happen upon my blog, would it be worth including this information in the actual documentation somewhere?

As an aside, I noticed this advice:

The columns prop should keep the same reference between two renders. The columns are designed to be definitions, to never change once the component is mounted. Otherwise, you take the risk of losing elements like column width or order. You can create the array outside the render function or memoize it.

In my own examples I haven't seemed to need to memoize it. Is this piece of information out of date?

Context

https://github.com/johnnyreilly/blog.johnnyreilly.com/pull/956

Search keywords: Data Grid

michelengelen commented 1 month ago

Hey @johnnyreilly and thanks for surfacing this. IMO the addition makes sense at least as a separate information callout in the docs, so thanks for that as well. Did you also think about the case where you need the column definition in advance?

I'll add this to the board as a request to add it to the docs.

As for our aside question: It is still relevant. Most of the time not memoizing might not be noticable at all, but when you use a big number of columns and rows this can become a problem.

johnnyreilly commented 1 month ago

As for our aside question: It is still relevant. Most of the time not memoizing might not be noticable at all, but when you use a big number of columns and rows this can become a problem.

Cool - I'll put a note in about memoizing to the post

Did you also think about the case where you need the column definition in advance?

I didn't as in my use cases it's not required. Do you have a particular use case in mind? I guess if you save the column definition away to persistent storage / a database then you couldn't use this perhaps?

michelengelen commented 1 month ago

As for our aside question: It is still relevant. Most of the time not memoizing might not be noticable at all, but when you use a big number of columns and rows this can become a problem.

Cool - I'll put a note in about memoizing to the post

Did you also think about the case where you need the column definition in advance?

I didn't as in my use cases it's not required. Do you have a particular use case in mind? I guess if you save the column definition away to persistent storage / a database then you couldn't use this perhaps?

Exactly. That's what i was thinking.

johnnyreilly commented 1 month ago

Updated post: https://johnnyreilly.com/static-typing-for-mui-react-data-grid-columns#the-importance-of-memoizing-columns