NoRowsOverlay is not working once you apply the filter and as a result there is/are no rows to display.
Here is my code:
function customNoRowsOverlay() {
return (
<GridOverlay>
<div>No Rows</div>
</GridOverlay>
)
}
components={{ NoRowsOverlay: customNoRowsOverlay }}
I need to display 'No Rows' Message if there is/are no rows to display after applying filter. However the above code works if you have rows={[]}
Use the NoRowsOverlay slot name if you're using version @v4.0.0-alpha.18 or above.
If you want to display an overlay when there is no rows in DataGrid, you can override NoRowsOverlay or NoResultsOverlay slot depending on your usecase:
NoRowsOverlay: Display when there is no row passed to the DataGrid (rows={[]}).NoResultsOverlay: Display when there is row data in the DataGrid, but the local filter returns no result.<DataGrid
{...}
components={{
NoRowsOverlay: () => (
<Stack height="100%" alignItems="center" justifyContent="center">
No rows in DataGrid
</Stack>
),
NoResultsOverlay: () => (
<Stack height="100%" alignItems="center" justifyContent="center">
Local filter returns no result
</Stack>
)
}}
/>
The first letter of NoRowsOverlay is lowercase. That solves the problem
<DataGrid
rows={rows}
columns={columns}
components={{
noRowsOverlay: CustomNoRowsOverlay,
}}
/>
