Open In App

React MUI Data Display Components

Improve
Improve
Like Article
Like
Save
Share
Report

React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly interfaces.

Data Display Components provide a convenient and consistent way to display data and information in your Material-UI-based applications.

 

MUI provides various types of Data Display components:

Components

Description

Avatar This component allows you to display a user’s profile image or icon in a circular or square format.
Badge This component is a small, circular component that is used to display a notification count or status indicator.
Chip This component provides a compact and clickable element for displaying small pieces of information, such as tags, labels, or contact information.
Divider This component is a horizontal line used to separate content into distinct sections. Dividers can be used to create visual breaks in content.
Icons MUI provides a wide range of icons that can be used in your applications.
Material icons Material Icons are a set of icons created by Google, designed to be used in Material Design applications. 
List This component allows you to display a list of items, each with a specific detail or action.
Table This component allows you to display tabular data in a grid format, with optional sorting, pagination, and selection capabilities.
Tooltip This component provides a way to display additional information or context when the user hovers over an element.
Typography This component provides a collection of text styles that can be used to display headings, body text, and other types of content.

Creating React Project:

Step 1: To create a react app, you need to install react modules through npx command.

npx create-react-app project_name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project_name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new component user makes or the code changes, we will be performing will be done in the source folder.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example 1: We are creating a UI that shows React MUI Avatar Data Display component.

Filename: App.js

Javascript




import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import BuildIcon from '@mui/icons-material/Build';
import WifiIcon from '@mui/icons-material/Wifi';
import CreateIcon from '@mui/icons-material/Create';
import { Stack } from '@mui/material';
    
export default function Demo() {
    return (
        <div style={{ margin: 100 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
                
            <h3><u>React MUI Avatar Display</u></h3>
                
            Image Avatar:<br /><br />
                
            <Stack direction="row" spacing={2}>
                <Avatar sx={{ width: 60, height: 60 }} src=
                <Avatar variant="square" 
                    sx={{ width: 60, height: 60 }} src=
            </Stack>
    
            <br />Icon Avatar:<br /><br />
                
            <Stack direction="row" spacing={2}>
                <Avatar
                    sx={{ 
                        bgcolor: "green"
                        width: 40, 
                        height: 40 
                    }}>
                    <BuildIcon />
                </Avatar>
                <Avatar variant="square"
                    sx={{ 
                        bgcolor: "green"
                        width: 50, 
                        height: 50 
                    }}>
                    <CreateIcon />
                </Avatar>
                <Avatar
                    sx={{ 
                        bgcolor: "green"
                        width: 60, 
                        height: 60 
                    }}>
                    <WifiIcon />
                </Avatar>
            </Stack>
        </div>
    );
}


Output:



Last Updated : 14 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads