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/
3.91k stars 1.19k forks source link

[data grid] Add height property, analog to Chart #13263

Open Janpot opened 1 month ago

Janpot commented 1 month ago

Summary

The DataGrid component requires a parent component with an explicitly defined height to size correctly. For 95% of my use-cases so far this meant that I had to add a wrapper <Box sx={{ height: 400}}> or equivalent. The Chart component also adopts the parent height, but it also has a height prop available that you can explicitly set. i.e.

<BarChart height={200} series={[]} />

Renders a chart of 200px high. I propose to align APIs of DataGrid and Chart to make it a more consistent DX between both components. Such that the following works:

<DataGrid height={200} columns={[]} rows={[]} />

As far as I understand, this can be done without breaking current behavior, just by adding a height property to the grid.

Conceptually one could imagine the current behavior as

<DataGrid height='100%' columns={[]} rows={[]} />

You could even consider deprecating autoHeight in favor for

<DataGrid height='auto' columns={[]} rows={[]} />
{/* or */}
<DataGrid height='content' columns={[]} rows={[]} />

or even incorporate https://github.com/mui/mui-x/issues/13143 and invent your own units:

<DataGrid height='10rows' columns={[]} rows={[]} />

Examples

No response

Motivation

Ergonomy, as an end-user, the API of Chart feels more ergonomic

Search keywords: DataGrid height

michelengelen commented 1 month ago

Thanks @Janpot ... added it to the board! šŸ‘šŸ¼