0
208
ViewsIs there a way to back to line dynamically when there is not enough space while using material ui datagrid componenet?
I'm using datagrid component from material ui, I bring some data from a database and try to pass it to the datagrid component.
Some fields contain long strings and not all of them appear in the column (Titre PFE) .
What I'm trying to do is to display something like that :
Développement d’une application mobile
ecommerce
<div style={{ height: 515, width: "100%" }}>
<DataGrid
rows={pfeList}
columns={columns}
pageSize={8}
autoPageSize
rowsPerPageOptions={[7]}
/>
</div>
const columns = [
{
field: "titre",
headerName: "Titre PFE",
headerAlign: "center",
width: 380,
},
.
.
.
.
.
];
What should I fix here to get the desired result?
·
Santiago Trujillo
1 answers
Answer question0
In order to do that properly, you need to make the heights of the rows dynamic. You can add getRowHeight={() => "auto"} prop to DataGrid to make rows dynamic.
You can take a look at this sandbox for a live working example of this solution.
·
Santiago Trujillo
Report
Answer question