Using Data Grid Component in MUI X with React

One of the most popular library out there to work specifically on UIs for a React app has always been MUI (formerly Material UI). It is so widely adopted across the industry that engineers at companies like Spotify, Amazon, NASA etc use MUI to build their UIs.

It provides a robust, customisable and accessible solution to the common and foundational components that React developers don’t need to write from scratch again and again. You can use either React Material UI Components or download some amazing templates from the best template providers like WrapPixel and AdminMart. Choice is yours.

However, in this article, we won’t be talking about the usual MUI Core components. Here we will try to understand about its big brother: MUI X component library and how to use some of its common components. Let’s start.

What is MUI X?

MUI X is a React UI library that is used to build complex and data-rich applications using a growing list of advanced React components.

If your React application in your company works on the heavy lifting of multiple bytes of data driven components (one of the most common example being the dashboard interface), then you can consider using MUI X over the regular MUI Core library.

One important thing to note before you start implementing this library and ship to production, is that MUI X serves a part of its components under a commercial license. Please pay attention to the license plans listed on their documentation. To summarise, it has 3 plans to go:

1. Community: free forever and available as [@mui/x-data-grid](https://www.npmjs.com/package/@mui/x-data-grid).
2. Pro and Premium: a commercial license that you can get as [@mui/x-data-grid-pro](https://www.npmjs.com/package/@mui/x-data-grid-pro).

You can take a look at the feature comparison between these here along with the pricing Information on their store.

For practical implementation of the guide you can use builtin react templates to check how things work in actual.

Features of the MUI X component library

But there’s one question you will have in your mind: “Why should I use this library over others? What features it provides to me and my team?” To answer this, here are some of the features it provides:

1. Powerful components: MUI X is not your go-to library to make simple inputs, buttons or cards, it comes with only some of the most powerful components for advanced use-cases. It enables apps to have complex use-cases with several advanced components like the Data Grid and Date Range Picker components.

2. The Data Grid component: its flagship Data Grid component is so much packed with exclusive features that it needs a special mention on the features section. With all the features that you may need and expect in a data table, it has them all. From editing, selection, to sorting, pagination, filtering and more!

3. Theming: Don’t like the default Material Design based interface? Don’t fret! You can easily use sophisticated theming features to make all the components look exactly like you want them to be. Use your brand’s design tokens to reflect the look and feel.

4. Open-sourced with roadmaps: The entire MUI X’s code can be found on its GitHub repository where you can easily raise an issue, suggest new features or track/mention bug fixes. Along with that the team comes with new updates to components and more in their roadmap planned to released exciting component like Sparkling, Upload, Gauge and more!

Related Article: How to Convert a Component Design Into an MUI React Code

Common MUI X components

Now is the exciting part. Let’s get to know some of the common components provided by MUI X and how to use them.

1. Data Grid component: this component use React and TypeScript to provide a seamless UX when it comes to manipulate a large amount of data. For real-time updates it has an API with focus on accessibility, theming and fast performance.

   The Data Grid component comes with two versions; first the MIT which is a clean abstraction of the Table demo and can be imported in a React app as:

   import { DataGrid } from '@mui/x-data-grid';

The second is the Commercial version which as shown in the docs can hold over 3 million cells in total! Import it as:

import { DataGridPro } from '@mui/x-data-grid-pro';

For a detailed comparison between the MIT and the Commercial Data Grid Component, you can visit the docs.

1. Date Range Picker component: this is a MUI X Pro component which lets the user select a range of dates. You must have used some popular date management libraries for your React app like date-fns, dayjs, moment etc. Guess what? This component supports them all and other libraries thanks to the public dateAdapter interface it uses.

   With its DatePicker API you can pass almost any prop to it. With that you get various usages for the Date Range Picker component. The static mode is the most basic and common one:

Here you can see we can not only show the date range, but we can also show the current date of the month by default. It’s possible to render any picker inline of the component so that we can also have custom popovers/modals after we select the date range.

1. Tree View component: the tree views in its basic form, are used to represent a folder that can be expanded to reveal the contents of the folder, which may be files, folders, or both. One of the most common examples of this is the system file navigator where we have multiple folders and files.

   This component supports multi-selection of items inside the tree, comes with an option to collapse or select all with one click (thanks to the controlled API it offers) along with rich objects and customisation which can end up looking like this:

Why React UI components Library?

React UI components are used for variety of different purposes to enhance coding structure and improve coding efficiency. In order to use it React UI components library is used that is super helpful.

Related Article: How to Use Material UI (MUI) Icons in React?

Getting started with MUI X

Now that we know some of its common components to use, let’s put this into a quick practice by learning how to setup MUI X for the Data Grid component.

Step 1: Install MUI X Data Grid component

This component has a peer dependency on the one MUI component which you can install with:

// with npm
npm install @mui/material

// with yarn
yarn add @mui/material

After that’s done, let’s install the Data Grid component by running the following command in your terminal window:

// with npm
npm install @mui/x-data-grid

// with yarn
yarn add @mui/x-data-grid

Step 2: Import the component

Open your React file where you want to add this component and import it as:

import { DataGrid } from '@mui/x-data-grid';

Step 3: Define the rows and columns

For both rows and columns, you can make an object of key-value pairs. Here's how a row can be constructed:

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

For columns, you can define a set of attributes of the GridColDef interface which are mapped to their corresponding rows via the field property:

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

Step 4: Render the component

You can now pass on the rows and columns attributes as follows:

<DataGrid rows={rows} columns={columns} />

This gives you an output which is similar to this:

In this article you got to know about the MUI X component library for React, the features it provides, some of the common components you are likely to use with different variations of each of them and finally we spin-off a new MUI X component in a React app. This way you can get to know how useful Material UI components are and what benefits you can reap out of it.