How to implement Material UI Data Grid in your Project — Part-III

{…Column Definitions}

Render Header

‘renderHeader’ is to Header customization like what renderCell is to Cell.’renderHeader’ expects a function that takes in header parameters(i.e field and colDef object). We will see some example

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { IconButton, Typography } from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';const columns = [
{
field: 'name',
width: 150,
type: 'date',
renderHeader: (headerparams) => {
console.log(headerparams)
return (
<Typography variant='h6'>
Name
<IconButton> <PersonIcon /> </IconButton>
</Typography>
)}
},
];const rows = [
{
id: 1,
name: 'Messi',
},
{
id: 2,
name: 'Ronaldo',
},
{
id: 3,
name: 'Neymar',
},
];export default function RenderHeaderGrid() {return (<div style={{ height: 300, width: '100%' }}>
<DataGrid rows={rows} columns={columns} />
</div>
);}

The above example customizes header font using <Typography> and added icon using <PersonIcon>

Column Types

We can define the type of value acceptable in a cell using the ‘type’ property. Basic types are string, number, date,datetime and Boolean. There is one special type that I found useful for the rich user interface is ‘singleSelect’.The singleSelect property is dependent on another property called ‘valueOptions’

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";const rows = [
{
id: 1,// Needs to be one of the values from valueOptions
country: "Spain"
},
{
id: 2,// Needs to be one of the values from valueOptions
country: "France"
},
{
id: 3,// Needs to be one of the values from valueOptions
country: "Brazil"
}
];export default function ColumnTypesGrid() {return (
<div style={{ height: 300, width: "100%" }}>
<DataGrid
columns={[
{
field: "country",
width: 150,
headerName: "Country",
editable: true,// type and valueOptions properties are interdependenttype: "singleSelect",
valueOptions: [
"Bulgaria",
"Netherlands",
"France",
"United Kingdom",
"Spain",
"Brazil",
"India"
]
}
]}
rows={rows}
/>
</div>
);
}

singleSelect and valueOptions gives options to select