Providing a title for a MUI Data Grid

userCs04 0
Viewed 17

I'm learning how to use the MUI Data Grid React Component (MIT licensed version).

Is it possible to add a title to a Data Grid? Just some simple centered text above the column headers but below the Data Grid border would be great, though having custom components in a title would be ideal.

Is there a built in way to do this?

edit: Here is an example of what I'm trying to do. In this screenshot, I did it by wrapping the DataGrid in a div and giving that div a border, and removing the DataGrid border.

enter image description here

Is there some way to do this natively with the Data Grid interface?

datagrid material-ui reactjs
1 Answers

Solved! When constructing the Data Grid, you can use the components prop, which accepts a ToolBar component.

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

Where DataGridTitle is your own component that can have a title in it. In this case, I'm using:

function DataGridTitle() {
        return(
            <Box style={{width: "100%", display: "flex", justifyContent: "center", alignItems: "center"}}>
                <Typography variant="h5">Users</Typography>
            </Box>
        )
    }

And it works perfectly:

enter image description here

userCs040
Related