Material-table: App freezes after deleting some rows

[medi11]

`import React, { useState } from "react";
import MaterialTable, { MTableToolbar } from "material-table";
import PrintIcon from '@material-ui/icons/Print';
import { Button } from "@material-ui/core";
import { useStyles } from "../assets/jss/PaginatedTableWrapper.styles";
import { icons } from "./icons";

export default function PaginatedTableWrapper({ tableColumns, title, color, shadow, icon }) {
console.log("hi there");
const [columns, setColumns] = useState(tableColumns);
const [data, setData] = useState([
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
{ society: 'Zerya Betül', lastName: 'Baran', firstName: 2017, phone: "0554-25-74-36" },
]);
const classes = useStyles();

const customToolbar = (props) => {
    return (
        <>
            <div className={classes.iconTableWrapper} style={{ backgroundColor: color, boxShadow: shadow }}>
                {
                    icon
                }
            </div>
            <MTableToolbar {...props} />
        </>
    );
};


return (
    <div className={classes.tableWrapper}>
        <MaterialTable
            title={title}
            icons={icons}
            columns={columns.slice(0, columns.length - 1)}
            data={data}
            actions={columns[columns.length - 1]}
            options={{
                actionsColumnIndex: -1,
                pageSize: 5,
                pageSizeOptions: [],
                exportButton: true
            }}
            localization={{
                body: {
                    emptyDataSourceMessage: "Pas d'enregistreent à afficher",
                    addTooltip: 'Ajouter',
                    deleteTooltip: 'Supprimer',
                    editTooltip: 'Editer',
                    filterRow: {
                        filterTooltip: 'Filtrer'
                    },
                    editRow: {
                        deleteText: 'Voulez-vous supprimer cette ligne?',
                        cancelTooltip: 'Annuler',
                        saveTooltip: 'Confirmer'
                    }
                },
                header: {
                    actions: 'Actions'
                },
                pagination: {
                    labelDisplayedRows: '{from}-{to} de {count}',
                    labelRowsSelect: 'lignes',
                    labelRowsPerPage: 'lignes par page:',
                    firstAriaLabel: 'Première page',
                    firstTooltip: 'Première page',
                    previousAriaLabel: 'Page précédente',
                    previousTooltip: 'Page précédente',
                    nextAriaLabel: 'Page suivante',
                    nextTooltip: 'Page suivante',
                    lastAriaLabel: 'Dernière page',
                    lastTooltip: 'Dernière page'
                },
                toolbar: {
                    addRemoveColumns: 'Ajouter ou supprimer des colonnes',
                    nRowsSelected: '{0} ligne(s) sélectionée(s)',
                    showColumnsTitle: 'Voir les colonnes',
                    showColumnsAriaLabel: 'Voir les colonnes',
                    exportTitle: 'Exporter',
                    exportAriaLabel: 'Exporter',
                    exportName: 'Exporter en Excel',
                    searchTooltip: 'Chercher',
                    searchPlaceholder: 'Chercher'
                }
            }}
            components={{
                Toolbar: (props) => customToolbar(props),
            }}
            editable={{
                onRowDelete: oldData =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {
                            const dataDelete = [...data];
                            const index = oldData.tableData.id;
                            dataDelete.splice(index, 1);
                            setData([...dataDelete]);

                            resolve();
                        }, 1000);
                    }),
            }}
        />
        <div className={classes.buttonsWrapper}>
            <Button variant="contained" className={classes.button}>
                <PrintIcon className={classes.printIcon} />
                Imprimer
            </Button>
        </div>
    </div>
);

}`

[matis-dk]

Experiencing the same issue. There is something broken with the delete operation.
You can reproduce the issue using https://material-table.com/#/docs/features/editable.

[medi11]

Experiencing the same issue. There is something broken with the delete operation.
You can reproduce the issue using https://material-table.com/#/docs/features/editable.

I uninstalled the latest version and installed 1.68.0 and it works fine with me.

[cdruck]

Unfortunately 1.68.0 has other critical bugs (crashes with onBulkUpdate) and API has changed since 1.67.0 so this is quite annoying.

[bvenkatr10]

exactly..am looking for options other than material table if it lingers more than a week now ...

[Andemki]

I have the same problem with the onRowUpdate event: the entire page completely freezes after some updates (4-5).
I switched to version 1.67.1 and it works stable for me.

[gjergjk71]

@Andemki Thanks for letting us know of your solution, helped me not making the same money for more time (less per hour) by rewriting on another table library.

[Domino987]

IS this problem due to the infinty loop and still present in 1.69.1 or is this connected to the deletion of the rows themselves?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.