How to delete row of mui table in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To delete row of mui table in React js, you can use this code setPosts((prevPosts) => prevPosts.filter((_, index) => index !== postIndex) ); at the time of when user click on button.

Today, I am going to show you, how to delete row of mui table in react js.

Table of contents

  • Install Material UI
  • Define a state for the table data.
  • Add a delete button to each row.

Let’s start with the first step.

Step 1: Install Material-UI

Install the following packages to use mui table in react js.

npm

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

yarn

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

Step 2: Import required component.

To delete row of mui table in React, first, you have to import the table. then you have to import the @mui/material/TableRow and @mui/material/TableCell components from the @mui/material library.

import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import { Button } from "@mui/material";
import { useEffect, useState } from "react";

Step 3: Add a delete button to each row.

We’ll add a delete button to each row. When we click on the button we will call a function to delete row from the table data.

<Button
    variant="outlined"
    color="error"
    onClick={() => handleDelete(postIndex)}
    >
    Delete
</Button>

MUI material delete row of mui table example.

The below code is an example of a Material UI table. You have to import @mui material table. The fetchData function fetches data from API using the fetch function. The setPosts function is used to update the posts state. the handleDelete function is used to delete the posts state variable based on the index.

App.js

import * as React from "react";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import { Button } from "@mui/material";
import { useEffect, useState } from "react";

export default function App() {
  const [posts, setPosts] = useState([]);

  const fetchData = () => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        return response.json();
      })

      .then((data) => {
        setPosts(data.slice(0, 6));
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleDelete = (postIndex) => {
    setPosts((prevPosts) =>
      prevPosts.filter((_, index) => index !== postIndex)
    );
  };

  return (
    <TableBody>
      {posts.map((post, postIndex) => (
        <TableRow key={post.id}>
          <TableCell component="th" scope="row">
            {post.title}
          </TableCell>
          <TableCell align="center">{post.body}</TableCell>
          <TableCell align="center">
          </TableCell>
          <TableCell align="center">
            <Button
              variant="outlined"
              color="error"
              onClick={() => handleDelete(postIndex)}
            >
              Delete
            </Button>
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  );
}

In the above code example, I have used the filter component and delete row of mui table.

Check the output of the above code example.

React, Mui, delete, row

Here, we are provided code sandbox links for the above program delete row of mui table. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts