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

When I first encounter DataGrid, it’s like outsourcing all the problems you have been facing and somebody manages it efficiently.

Essentially it takes care of basic utility functions like editing, sorting, filtering, updating, etc, and allows you to focus more on problems at hand.

Material UI already has a Material Table component which works fine for smaller data handling but the DataGrid component introduced by the MUI team is a disruptive one

First, let us understand the difference between them. The difference lies in the DOM node.

MUI Table uses conventional HTML <table> element in DOM where as MUI DataGrid uses nested <div> element in DOM

The reason for the increased functionalities in DataGrid is also the same because, with HTML <table>, your hands are tied for customization.

How to choose between these two? It all depends on the purpose. If Displaying data is primary, use Table. If User interaction with data is primary, use DataGrid.As simple as that!

Let’s implement it. First of all, every table has rows and columns. Therefore DataGrid has two mandatory props rows and columns.

<DatGrid
rows = // expects an array of objects
columns = // expects an array of objects
/>

Columns would be an array of objects and each object should have a mandatory property called ‘field’ and this should match with the row’s property(We will see later)

By default, the field property will be a column header of the particular column. We can customize the header by giving the ‘headerName’ and ‘Description’ properties.’headerName’ will be displayed in the column header and property value should be ‘string’ and ‘description’ property will give you a description of the column data when you place the mouse.

const columns = [
{
field: // expects a string -->Should match with rows property
headerName: // expects a string -->Will be column header name
description: // expects a string-->Description is displayed when     mouse is placed over
}
]

Note: We can straightaway display the data if we give rows data like this below (Note: ’id’ property is mandatory in rows)

<DataGrid 
columns = [
{field:'name'},
{field:'age'},
{field:'gender'}
]
rows = [

// Each property should match with column field's value (name, age and gender) except 'id' which is mandatory for rows //
{
id:1,
name:'Harold',
age:'50',
gender:'male'
},
{
id:2,
name:'John',
age:'53',
gender:'male'
},
{
id:3,
name:'Root',
age:'30',
gender:'Female'
},
]
/>

By default columns are displayed based on the order it is defined in the array -i.e name, age, gender