I have a DataGrid with a custom toolbar to set <GridToolbarExport printOptions={{ hideFooter: true }} />
. However, when I attempt to print, I receive the error:
TypeError: gridFooterElement is null
The same happens if I set hideFooter
as a DataGrid prop. The call stack for the error has the following:
useGridPrintExport/handlePrintWindowLoad<
node_modules/@mui/x-data-grid/hooks/features/export/useGridPrintExport.js (127:1)
useGridPrintExport/exportDataAsPrint</printWindow.onload
node_modules/@mui/x-data-grid/hooks/features/export/useGridPrintExport.js (256:1)
The source code says gridFooterElement
can be null, but then has non-null assertions immediately after.
What could possibly be causing this? I’ve tried to recreate it in a sandbox, and it works every time, so it is only in my project. Here is an example of what doesn’t work for me:
'use client';
import { Box } from "@mui/material";
import { DataGrid, GridColDef, GridRowsProp, GridToolbarContainer, GridToolbarExport } from "@mui/x-data-grid";
export default function Page() {
const columns: GridColDef[] = [
{
field: 'col1',
headerName: 'Column 1',
flex: 1
},
{
field: 'col2',
headerName: 'Column 2',
flex: 1
}
]
const rows: GridRowsProp = [
{ id: '1', col1: 'Test A', col2: 'Test B' }
]
const CustomToolbar = () => (
<GridToolbarContainer>
<Box sx={{ flexGrow: 1 }} />
<GridToolbarExport slotProps={{ button: { variant: 'outlined' } }} printOptions={{ hideFooter: true, hideToolbar: true }} />
</GridToolbarContainer>
)
return(
<Box sx={{
height: 550
}}>
<DataGrid autoPageSize
columns={columns} rows={rows}
slots={{ toolbar: CustomToolbar }}
/>
</Box>
)
}