Issue Deleting Rows in MUI X Data Grid: Error "No row with id # found"

Question

I'm encountering an error in a React app using MUI X Data Grid component when attempting to delete rows. Here is the full code snippet:

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import IconButton from '@mui/material/IconButton';
import DeleteSharp from '@mui/icons-material/DeleteSharp';
import Tooltip from '@mui/material/Tooltip';

const TestComponent = () => {
  const [draftColumns, setDraftColumns] = useState([]); // State to hold DataGrid rows

  // Function to delete rows
  const handleDraftColumnDelete = async row => {
    const result = draftColumns.filter(col => col.index !== row.index);    
    setDraftColumns(result);
  };

  const columns = [
    // ... other columns setup
    {
      field: 'actions',
      headerName: 'Actions',
      width: 130,
      headerAlign: 'center',
      align: 'center',
      renderCell: ({ row }) => {
        if (row.column && row.column.value && !row.column.value.isRequired) {
          return (
            <Tooltip title='Delete'>
              <IconButton size='small' onClick={() => handleDraftColumnDelete(row)}>
                <DeleteSharp color='error' />
              </IconButton>
            </Tooltip>
          );
        } else return <></>;
      },
    },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        columns={columns}
        rows={draftColumns}
        getRowId={row => row.index}
        disableSelectionOnClick
      />
    </div>
  );
};

export default TestComponent;

The issue arises when I attempt to delete a row using the handleDraftColumnDelete function. Clicking the delete button triggers the function, but I receive an error "Uncaught Error: No row with id #11 found". I suspect there might be an issue with how I am identifying or deleting rows.

Any help, suggestions, or guidance would be greatly appreciated. Thank you!

Illie Ryu · Accepted Answer · 2024-06-19 02:47:25Z

0

I faced that issue when I was deleting rows.

Using the fact that selection worked as a clue, I resolved it as follows.

Let's assume for now that the uniqueKey is passed as a prop.

<DataGrid
    rows={list}
    getRowId={(row) => {
        return row[uniqueKey];
    }}
    isRowSelectable={(row) => {
        return list.map(item => item[uniqueKey]).includes(row.id);
    }}
/>

answered Jun 19, 2024 at 2:47

Illie Ryu

1862 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue Deleting Rows in MUI X Data Grid: Error "No row with id # found"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related