Data Grid - List view 🧪
Display data in a single-column list view. Can be used to present a more compact grid on smaller screens and mobile devices.
List view can be enabled by providing the unstable_listView prop.
Unlike the default grid view, the list view makes no assumptions on how data is presented to end users.
In order to display data in a list view, a unstable_listColumn prop must be provided with a renderCell function.
function ListViewCell(params: GridRenderCellParams) {
return <>{params.row.id}</>;
}
const listColDef: GridListColDef = {
field: 'listColumn',
renderCell: ListViewCell,
};
<DataGridPro unstable_listColumn={listColDef} unstable_listView={true} />;
Enable with a media query
Use the useMediaQuery hook from @mui/material to enable the list view feature at a specified breakpoint.
The demo below automatically switches to a list layout when the viewport width is below the md breakpoint.
Editable rows
The editing feature is not supported in list view, but it is possible to build an editing experience from within your custom cell renderer, as shown below.
Advanced usage
The list view feature can be combined with custom subcomponents to provide an improved user experience on small screens, as shown below.
Feature compatibility
The list view feature can be used in combination with the following features:
- ✅ Sorting
- ✅ Filtering
- ✅ Pagination
- ✅ Row selection
- ✅ Multi filters
- ✅ Row pinning
- ✅ Cell selection