Data Grid - List view
Display data in a single-column list view for a more compact Data Grid on smaller screens and mobile devices.
A typical data grid built for desktop devices can be difficult to use on a mobile device. The Data Grid Pro provides a single-column list view format to give users a better experience on smaller screens.
Implementing list view
To enable list view, pass the listView prop to the Data Grid.
Unlike the default grid view, list view requires you to explicitly define how columns and cells are displayed by passing the listViewColumn prop with a renderCell() function:
function ListViewCell(params: GridRenderCellParams) {
return <>{params.row.id}</>;
}
const listViewColDef: GridListViewColDef = {
field: 'listColumn',
renderCell: ListViewCell,
};
<DataGridPro listViewColumn={listViewColDef} listView={true} />;
Responsive list view with 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.
List view with editable rows
The editing feature is not supported while in list view, but it's possible to build an editing experience from within a custom cell renderer, as shown below:
Optimizing list view for small screens
If your use case calls for first-class mobile UX, you can fully customize the Data Grid's list layout using custom subcomponents as shown in the demo below:
List view feature compatibility
List view can be used in combination with the following features:
- ✅ Sorting
- ✅ Filtering
- ✅ Pagination
- ✅ Row selection
- ✅ Multi-filters
- ✅ Row pinning
- ✅ Cell selection