DataTable: seems to re-render all the rows on select all, even with the pagination.

[tmmschmit]

Describe the bug

Hi, so I'm trying to implement a bulk edit on a DataTable with a large amount of entries. But the more entries the table contains, the more slower it is to display the select rows.
I did some tests with a lazy loading and it's much quicker without taking care of the entries number. But this way I lose the sorting and ordering feature of DataTable.

So is there a way to only re-render the visible rows of a DataTable with pagination?

Thanks!

Reproducer

https://codesandbox.io/s/primereact-test-forked-vqhyjv?file=/src/index.js

PrimeReact version

8.1.1

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

FireFox 101, Chromium 102

Steps to reproduce the behavior

1. Open the link
2. Click on the checkbox in the header
3. change the ENTRY_MULTIPLIER value to see the render speed change.

Expected behavior

Render only the visible rows of the DataTable when the checkbox in the header is clicked.

[devken-net]

I got the same performance issue. It seems DataTable re-render all rows and cells every time non-value props (size, showGridlines, resizableColumns, scrollable, etc) were updated.

[VeladzicKAG]

Same issue here. Tried it already with the v10.0.0. Here is the reproducer:

https://codesandbox.io/s/primereact-test-forked-hw8rwr?file=/src/index.js
the issue has already been described here in the discussion: https://github.com/orgs/primefaces/discussions/114

[torshid]

I got the same performance issue. It seems DataTable re-render all rows and cells every time non-value props (size, showGridlines, resizableColumns, scrollable, etc) were updated.

You are right. I have 50 rows in my datatable, even a single selection causes the datatable to re-render everything, as it is also the case when changing a field of a single row (when value mutates). A bit disappointed on this one. :(

[mdimitrov94]

Any news on this? I see a lot of bugs being fixed but not this one. :(

[melloware]

@mdimitrov94 if you need immediate support I suggest looking into PrimeReact PRO support.

[sja-cslab]

Additional Info:
Same in PrimeReact 10.6.6 but more than that - whenever the parent re-renders, even if you wrap datatable and columns to make them memoized, the table will re-render

[minhnguyenduy99]

I got the same problem. Is anyone working on to fix this bug ?

[accioly-cassio]

I'm having the same issue here, just tested with the version 10.8.4. Has anyone found a workaround until the issue is fixed?

[djg3577]

Dealing with the same issue on 10.8.4 as well

[accioly-cassio]

I have been able to solve the issue by providing meaningful changes to be checked in the BodyCell props before re-rendering it. See the changes below:

export const BodyCell = React.memo((props) => {
    ...
    // BodyCell component code
    ...
}, (prevProps, nextProps) => {
    const hasRowDataChanged = !isEqual(prevProps.rowData, nextProps.rowData);
    const hasEditingStateChanged = prevProps.editing !== nextProps.editing;
    const hasSelectionChanged = prevProps.selected !== nextProps.selected;
    const hasRowOrCellIndexChanged = prevProps.rowIndex !== nextProps.rowIndex || prevProps.index !== nextProps.index;
    const hasExpandedChanged = prevProps.expanded !== nextProps.expanded;
    const hasAllowSelectionChanged = prevProps.allowCellSelection !== nextProps.allowCellSelection || prevProps.allowRowSelection !== nextProps.allowRowSelection;
    const hasEditModeChanged = prevProps.editMode !== nextProps.editMode;
    const hasEditingMetaChanged = !isEqual(prevProps.editingMeta, nextProps.editingMeta);

    return !(
        hasRowDataChanged ||
        hasEditingStateChanged ||
        hasSelectionChanged ||
        hasRowOrCellIndexChanged ||
        hasExpandedChanged ||
        hasAllowSelectionChanged ||
        hasEditModeChanged ||
        hasEditingMetaChanged
    );
});

There might be other meaningful changes in the props which I have missed. But with the implementation, all basic changes to the datatable trigger the necessary re-render and the unnecessary ones, as in the reported issue, are avoided.

For a full implementation, you can refer to my forked primereact repo: https://github.com/accioly-cassio/custom-primereact

@melloware, could the adjustments be checked and included in one of the next versions of primereact?