How to make mui table with no data found in react js?

March 15, 2024

Hi Friends 👋,

Welcome To aHoisting!

To make mui table with no data found in React js, you can use this code data.length > 0 . It will make mui table with no data found in react js.

Today, I am going to show you, how to make mui table with no data found in react js.

Table of contents

Install Material-UI
Import the required Material-UI components.
Define the table body.

Let’s start with the first step.

Step 1: Install Material-UI

Install the following packages to use make mui table with no data found in react js.

npm

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

yarn

yarn add @mui/material @emotion/react @emotion/styled

Step 2: Import the required Material-UI components.

To make mui table with no data found in React, first, you have to import the table. We have imported the table, tableBody, tableCell, tableContainer, tableHead, tableRow, and Paper components from the @mui/material library.

import React from 'react';
import DataTable from './DataTable';
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Typography } from '@mui/material';

Step 3: Define the table body.

Table body is needed after table head, This code creates a table body with one row for each object in the rows array.

<TableBody>
     {data.map((row, index) => (
       <TableRow key={index}>
         <TableCell>{row.column1}</TableCell>
         <TableCell>{row.column2}</TableCell>
         {/* Add more table cells if needed */}
       </TableRow>
     ))}
 </TableBody>

MUI material make mui table with no data found example.

The below code is an example of a Material UI table. You have to import @mui material table. In the Material Table function when you create a table component, it consists of a table head and a table body. In this code, we create our TableContainer component with a Paper component as its child and use data.length > 0 to make mui table with no data found in react js.

App.js

import React from 'react';
import DataTable from './DataTable';

const App = () => {
  const data = []; // Your data array

  return (
    <div>
      <DataTable data={data} />
    </div>
  );
};

export default App;

DataTable.js

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

const DataTable = ({ data }) => {
  return (
    <TableContainer component={Paper}>
      {data.length > 0 ? (
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Header 1</TableCell>
              <TableCell>Header 2</TableCell>
              {/* Add more table headers if needed */}
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((row, index) => (
              <TableRow key={index}>
                <TableCell>{row.column1}</TableCell>
                <TableCell>{row.column2}</TableCell>
                {/* Add more table cells if needed */}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      ) : (
        <Typography variant="body1" align="center">No data found</Typography>
      )}
    </TableContainer>
  );
};

export default DataTable;

In the above code example, I have used the @mui/material component and made mui table with no data found in react js.

Check the output of the above code example.

All the best 👍