Material-UI Data-Grid: How pass parameter to custom toolbar?

2
votes

I am defining a custom toolbar in datagrid (Material-UI) following (see: https://material-ui.com/components/data-grid/rendering/#toolbar) I started from this example: https://codesandbox.io/s/x58yv?file=/demo.js

I want to show or hide toolbar with transition. As we can't passing custom props to component:

   <DataGrid
    ...
    components={{ Toolbar: CustomToolbar }}
    ...
   </DataGrid>

So i have used context API like this:

   export function CustomToolbar(props: GridBaseComponentProps) {
    const classes = useToolbarStyles();
    const toolbarContext = useContext(ToolbarContext);
    return (
        <Collapse in={toolbarContext.toolbar}>
            <GridToolbarContainer className={classes.root}>
                <GridColumnsToolbarButton />
                <GridFilterToolbarButton />
                <GridDensitySelector />
                <GridToolbarExport />
            </GridToolbarContainer>
        </Collapse>
    );
   }

It works but is it any better solution ?

1
reactjsmaterial-ui

1 Answers

4
votes

You should be able to use the componentsProps prop of DataGrid to pass in any additional props (see https://material-ui.com/api/data-grid/), ex.

<DataGrid
    ...
    components={{ Toolbar: CustomToolbar }}
    componentsProps={{ toolbar: { myCustomProp: 8 } }}
    ...
</DataGrid>