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' }}>                 neveropen             </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:
