Material-table: Performance is very slow when selecting a row in a large table

[shaibam]

Describe the bug
I have a 240 row table with 6 columns.
when selecting a row, it takes as much as 1second for the check marker to appear.
When removing the styling checking the input using js, performance is well.

$0.checked = true

To Reproduce
create a 240 row table with 6 columns, set 'selection' option to true. try selecting a row.

[popov-aa]

I have same problem with 30 rows count.
I had developed simple table without this disadvantage. All you have to, it's use key of rows and columns and using of method shouldComponentUpdate.
My variant of row component:

class Row extends React.Component {

    renderRowCheckCell = (row) => {
        const {isSelected} = this.props;
        return (
            <TableCell padding="checkbox">
                <Checkbox
                    checked={isSelected}
                />
            </TableCell>
        );
    }

    handleClick = (event, row) => {
        const {isSelected, onSelectionChange, selectableEnabled} = this.props;
        if (selectableEnabled) {
            onSelectionChange(row, !isSelected);
        }
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        const {selectableEnabled, isSelected, columns, row} = this.props;
        let shouldUpdate = false;
        if (nextProps.selectableEnabled !== selectableEnabled ||
            nextProps.isSelected !== isSelected ||
            nextProps.row !== row
        ) {
            shouldUpdate = true;
        }
        if (nextProps.columns.length !== columns.length) {
            shouldUpdate = true;
        }
        for (let i = 0; i < nextProps.length; ++i) {
            const column1 = nextProps.columns[i];
            const column2 = columns[i];
            if (column1.field !== column2.field) {
                shouldUpdate = true;
                break;
            }
        }
        return shouldUpdate;
    }

    render () {
        const {selectableEnabled, isSelected, columns, row} = this.props;
        console.log(`Row #${row.id} was rendered.`)
        return (
            <TableRow
                hover
                role="checkbox"
                tabIndex={-1}
                selected={isSelected}
                aria-checked={isSelected}
                onClick={event => this.handleClick(event, row)}
            >
                {
                    selectableEnabled ? this.renderRowCheckCell(row) : null
                }
                {
                    columns.map(({render, field, align}) => {
                        const value = render ?
                            render(row) :
                            row[field];
                        return (
                            <TableCell key={field} align={align}>
                                {value}
                            </TableCell>
                        );
                    })
                }
            </TableRow>
        );
    }
}
Row.propTypes = {
    selectableEnabled: PropTypes.bool.isRequired,
    isSelected: PropTypes.bool.isRequired,
    columns: PropTypes.array.isRequired,
    row: PropTypes.array.isRequired,
    onSelectionChange: PropTypes.func.isRequired
}

When I select row, will rerender only it row.
Full module: https://pastebin.com/tUT3txEX

[ElenaMagda]

Hello! We are encountering this problem on our project as well. At first I thought that I was doing something wrong but I made a simple app using material-table selection https://codesandbox.io/embed/determined-goodall-0whe4?fontsize=14&hidenavigation=1&theme=dark and the performance is still slow.
Does anybody has any solution?

[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.

[chetanyakan]

Still facing this with about 100 rows per page and 5 columns + 1 actions column.

[gjergjk71]

Until fixed, sorry to say, this package is useless.

[RELNO]

Same here -- surprisingly, this happens in production and not on dev which is harder to catch.

[pra-richardg2-sportsbet]

Has this been fixed yet?

[RELNO]

Error persist 1.69.2. Issue should probably be reopened.