How to conditionally Render status (Pending or Verified) on MUI table

MUI Table is a component of the Material-UI library that provides a flexible and customizable way to display tabular data in web applications. It offers a wide range of features and customization options to suit different use cases.

One of the primary benefits of using MUI Table is that it is built on top of the Material Design system, which is a set of design guidelines and principles established by Google. Material Design focuses on clean, modern aesthetics and user experience, and MUI Table adheres to these principles, making it easy to create visually appealing and user-friendly tables.

MUI Table includes features such as sorting, filtering, pagination, and row selection. It also supports a variety of data formats, including plain text, numeric data, and images. With MUI Table, it's possible to customize the appearance of the table, including the colors, fonts, and spacing, to match the overall design of the application.

MUI Table is easy to use and requires minimal configuration to get started. You can define the columns and data of the table using JavaScript objects, and MUI Table takes care of the rest. This makes it easy to integrate MUI Table into existing React applications, and to customize it further using CSS or JavaScript.

Overall, MUI Table is a powerful and flexible component that can greatly enhance the user experience of web applications that display tabular data. Its adherence to Material Design principles, along with its rich feature set and customization options, make it an excellent choice for building high-quality, user-friendly tables.

here's an example of an MUI table that includes a status column with conditional rendering for user verification status in react.js:


import React, { useState } from "react";
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material";

const UserTable = () => {
  // User data with a verified status property
  const [users, setUsers] = useState([
    { id: 1, name: "John Doe", email: "john.doe@example.com", status: "verified" },
    { id: 2, name: "Jane Smith", email: "jane.smith@example.com", status: "pending" },
    { id: 3, name: "Bob Johnson", email: "bob.johnson@example.com", status: "verified" }
  ]);

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Email</TableCell>
            <TableCell>Status</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {users.map((user) => (
            <TableRow key={user.id}>
              <TableCell>{user.id}</TableCell>
              <TableCell>{user.name}</TableCell>
              <TableCell>{user.email}</TableCell>
              <TableCell>
                {user.status === "verified" ? (
                  <span style={{ color: "green" }}>Verified</span>
                ) : (
                  <span style={{ color: "orange" }}>Pending</span>
                )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default UserTable;

In this code, we start by importing the necessary components from the MUI library. We then define the UserTable component, which initializes the user data using the useState hook. The user data includes an id, name, email, and status property.

We then render a TableContainer component that wraps the Table component, which includes a TableHead and TableBody. Inside the TableHead, we define the column headers for the table. In the TableBody, we use the map function to iterate over the users array and render a TableRow for each user. Inside each TableRow, we render a TableCell for each piece of user data, including the status property.

To conditionally render the status based on the user's verification status, we use a ternary operator to check if the status property is equal to "verified". If it is, we render a span element with green text that says "Verified". If not, we render a span element with orange text that says "Pending". We also apply some inline styling to change the text color based on the verification status.

In Conclusion, the code above creates a simple MUI table with a status column that conditionally renders user verification status.

Happy coding!

How to conditionally Render status (Pending or Verified) on MUI table in React.js.