Estoy usando el componente de cuadrícula de datos de material ui, traigo algunos datos de una base de datos e intento pasarlos al componente de cuadrícula de datos.
Algunos campos contienen cadenas largas y no todas aparecen en la columna (Titre PFE) .

Lo que estoy tratando de hacer es mostrar algo como eso:
Desarrollo de una aplicación móvil
comercio electrónico
<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,
},
.
.
.
.
.
];
¿Qué debo arreglar aquí para obtener el resultado deseado?
Para hacerlo correctamente, debe hacer que las alturas de las filas sean dinámicas . Puede agregar getRowHeight={() => "auto"} prop a DataGrid para hacer que las filas sean dinámicas.
Puede echar un vuezo a este sandbox para ver un ejemplo de trabajo en vivo de esta solución.