导出 pdf 时从 @mui/x-data-grid 中删除工具栏和页脚

Question

我使用@mui/x-data-grid 创建了数据网格。 下面是我的代码片段，

                <DataGrid
                    {...data}
                    autoHeight
                    components={{ Toolbar: GridToolbar }}
                    pageSize={pageSize}
                    onPageSizeChange={(_size) => setPageSize(_size)}
                    rowsPerPageOptions={[10, 20, 30]}
                    checkboxSelection
                    selectionModel={selectionModel}
                    disableSelectionOnClick
                    onSelectionModelChange={(newSelectionModel) => {
                        setSelectionModel(newSelectionModel);
                    }}
                />

我找到了以下链接，用于在导出 PDF 时从网格中隐藏工具栏和页脚

https://mui.com/x/react-data-grid/export/#print-export

我已尝试以下代码，但它无法正常工作。

<GridToolbarExport
  printOptions={{
    hideFooter: true,
    hideToolbar: true,
  }}
/>

任何人都可以建议我如何将该代码实现到我上面的代码中吗？

谢谢

Answer 1

type Props = {}

const GridToolbar = (props: Props) => {
 <GridToolbarExport
  printOptions={{
    hideFooter: true,
    hideToolbar: true,
  }}
 />
}

<DataGrid
 {...data}
 autoHeight
 slotsProps={{ toolbar: { gridToolbarCustomProps } }}
 slots={{ toolbar: GridToolbar }}
 components={{ Toolbar: GridToolbar }} //Deprecated
 pageSize={pageSize}
 onPageSizeChange={(_size) => setPageSize(_size)}
 rowsPerPageOptions={[10, 20, 30]}
 checkboxSelection
 selectionModel={selectionModel}
 disableSelectionOnClick
 onSelectionModelChange={(newSelectionModel) => {
  setSelectionModel(newSelectionModel);
 }}`enter code here`
/>