Material Ui Grid

Posted onby admin
  1. Material Ui Icons
  2. Material Ui Grid Api
  3. Material Ui Grid Example

During these last few weeks, I’ve been working on a React application using Material-UI components. Part of the application involved the user filling in some data in a form. In this post, we’ll see how to implement a form that saves its values in state variables using Material-UI components.

Data Grid - Layout. The data grid offers multiple layout mode. By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves. ⚠️ When using% (percentage) for your height or width. You need to make sure the container you are putting the grid into also has an intrinsic dimension. We're going to learn how to use the Material UI Grid system using the Material UI react library. The grid system can be used to create fluid responsive eleme.

  • 1 day ago  I am using NextJS in addition with Material UI. The code shpw a page called 'branches.js', which implements a Grid-Layout for three lists (GridItems). The seconds and third list depend on the selection in the first list.
  • Grid-xs-12 Have a look at overriding with classes section and the implementation of the component for more detail. If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiGrid.
  • The grid has a peer dependency on Material-UI core components. If you are not already using Material-UI in your project, you can install it with: npm install @material - ui / core yarn add @material - ui / core.

A Material-UI form

We’ll implement a form with the following components:

  • Name text field.
  • Age text field.
  • Gender radio group.
  • Select component with OS options.
  • Slider for the user’s favorite number.

We’ll not focus too much on the graphical presentation, but rather on the functionality.

Necessary module imports

For simplicity, we’ll have all of our components in the same file. The imports that will be necessary are:

State variables

We’ll use a functional component that will save the form’s data in a state variable. To do so, we’ll use React’s useState:

Material ui grid list

defaultValues is an object initialized with properties for each form value:

Name text field

The first form component will be a text field for the user’s name.

The value of this text field will be saved in State variables cannot be changed directly, so we need to implement a special function handleInputChange to reflect the changes of the text field on the state formValues.

Handling input changes

When we created the state variable formValues, useState also returned a function to modify the state’s value: setFormValues.

We’ll make use of this function to modify the state when the form values change. As we saw above, we passed the handleInputChange function to the onChange attribute. Each time the text field’s content changes, this function is called with an event argument. This argument contain the information necessary to update the state. We can see the implementation of the handleInputChange function below.

See that we don’t change the name property of the state formValues directly. We use the function setFormValues to modify it.

Age input field

Similarly, we create a text field for the user’s age.

The only notable difference is that we’ve set the type attribute to type='number'. By doing so, only valid number strings will be accepted.

Gender radio group

The radio group will contain three options: male, female and other. In Material-UI, we need the special components FormControl and RadioGroup to group the radio options.

It’s important to set the attribute name to the corresponding property of the state variable formValues. The string passed to name is used by the handleInputChange function to modify the value of the corresponding property. The key attribute is used by React and it should be unique for each option.

Select component

The select component will include three options for the user’s favorite OS: Linux, Windows or Mac. Just like for the radio component, we’ll need the FormControl component to group the Select options, each of which is a MenuItem component. Here as well, the key attribute should be unique among the select options.

Slider component

Finally, we’ll include a Slider component for the user to select his favorite number between “1”, “2”, and “3”. We’ll render the Sliderinside a div element to handle its size.

The marks to show on the slider are passed as an array of objects with a value and a label. An important difference is that we’re using a special function for the onChange attribute: handleSliderChange. Unfortunately, setting the name attribute to name=favoriteNumberdidn’t work as with the other form components. As a workaround, we call the handleSliderChange function with the property name 'favoriteNumber' directly.

Form submit

Finally, we’ll include a submit button.

We can create a function to be called on submit: handleSubmit. As an example, we’ll just print the state variable on the console.

It should be passed to the form as the onSubmit attribute:

With this, we have completed the form!

Complete code

Putting all of the pieces together, we’ll have the following code:


Running the application containing this component, we’ll get the following visual representation:

We can verify that filling the form will update the state variable:

Finally, when we click on the submit button, we get the following log on the console:

With this, we have finished this tutorial to create forms using Material-UI. In future posts, we’ll see how to validate the form values so that we submit the values only when they satisfy certain conditions, and also how to test the form using the React Testing Library.

Easily export the rows in various file formats such as CSV, Excel, or PDF.

CSV export

You are able to export the displayed data to CSV with an API call, or using the grid UI.

To enable the CSV export you need to compose a toolbar containing the GridToolbarExport component, and apply it using the Toolbar key in the grid components prop.

🚧 Print

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #200 if you want to see it land faster.

Optimization of the layout of the grid for print mode. It can also be used to export to PDF.

🚧 Excel export

Material Ui Icons

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #198 if you want to see it land faster.

You will be able to export the displayed data to Excel with an API call, or using the grid UI.

🚧 Clipboard

⚠️ This feature isn't implemented yet. It's coming.

Material Ui Grid Api

👍 Upvote issue #199 if you want to see it land faster.

Material Ui Grid Example

You will be able to copy and paste items to and from the grid using the system clipboard.