Large collapsible Table rows with virtualization enabled causes scroll lag along with an error (ResizeObserver loop completed with undelivered notifications)

[Muhammad-bK]

I require to render very large amounts of data without pagination (~50k rows & 14 columns). Currently I have tested it with ~1200 rows and the browser basically freezes. The table has 5 editable cells with editing mode as cell. I am using Mui elements such as Inputs, TextFields, AutoComplete & Menus for the editable state.

When rowVirtualization is enabled the performance does get better but there is a very significant lag on scrolling.

Below is my MRT component

export const MaterialDataTable = <T extends MRT_RowData>(
  props: MaterialDataTableProps<T>,
) => {
  const {
    columns,
    data,
    tableId = "table",
    columnOrder,
    rowChangeHandler,
    getRowId,
    getSubRows,
    expandAll,
    height = "500px",
    highlightRow = -2,
    enableEditing = false,
  } = props;

  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
  const [MRTcolumnOrder, setMRTColumnOrder] = useState([
    ...columnOrder.map((c) => c.Id),
  ]);
  const columnVisibilityObj = columnOrder.reduce((acc, c) => {
    acc[c.Id] = true;
    return acc;
  }, {});
  const [columnVisibility, setColumnVisibility] = useState(columnVisibilityObj);

  useEffect(() => {
    setMRTColumnOrder(["mrt-row-expand", ...columnOrder.map((c) => c.Id)]);
    setColumnVisibility(
      getNewColumModel(columnVisibility, columnVisibilityObj),
    );
  }, [columnOrder]);

  useEffect(() => {
    table.toggleAllRowsExpanded(expandAll);
  }, [expandAll]);

  const table = useMaterialReactTable({
    columns,
    data,
    enableExpanding: props.enableExpanding ?? false,
    enableRowSelection: props.enableRowSelection ?? false,
    enableColumnActions: false,
    enableExpandAll: false,
    enablePagination: false,
    editDisplayMode: "cell",
    enableEditing: enableEditing,
    getSubRows: (originalRow: any) => originalRow.children,
    getRowId: getRowId,
    enableRowVirtualization: true,
    enableColumnVirtualization: true,
    muiTableBodyRowProps: ({ row }) => ({
      //implement row selection click events manually
      onClick: () => {
        setRowSelection((prev) => ({
          [row.id]: !prev[row.id],
        }));
        rowChangeHandler(row);
      },
      selected: rowSelection[row.id],
      sx: {
        cursor: "pointer",
        backgroundColor: highlightRow?.toString() == row.id ? "#d1d1d1" : "",
      },
    }),
    muiTableContainerProps: (table) => ({
      style: {
        height: height,
      },
    }),
    onRowSelectionChange: setRowSelection,
    onColumnOrderChange: setMRTColumnOrder,
    onColumnVisibilityChange: setColumnVisibility,
    state: {
      rowSelection,
      columnOrder: MRTcolumnOrder,
      columnVisibility,
    },
  });

  return <MRT_TableContainer table={table} id={tableId} />;
};

And below is an example of how my data looks like

{
    "id": 3,
    "substanceName": " Exernal battery with cables, Black outer cable jacket 1",
    "casNumber": null,
    "declaredMass": 12.465,
    "rollupMass": 12465,
    "calculatedMass": null,
    "resultMass": 12465,
    "unitOfMeasure": "g",
    "percentage": 0,
    "declaredPPM": null,
    "calculatedPPM": null,
    "thresholdPPM": null,
    "overThreshold": null,
    "disclosure": null,
    "exemptions": [],
    "exemptionId": [],
    "conversionFactor": null,
    "exemptionExpirationDate": null,
    "declaredCompliance": null,
    "calculatedCompliance": "Compliant",
    "substanceType": "Subpart",
    "unknown": false,
    "icon": "oj-ux-ico-data-segment oj-icon-color-success",
    "parent": null,
    "childLevel": 1,
    "rowId": 3,
    "errorIcon": false,
    "materialCategory": null,
    "children": [
        {
            "id": 4,
            "substanceName": "Polymer",
            "casNumber": null,
            "declaredMass": 12.465,
            "rollupMass": 12465,
            "calculatedMass": null,
            "resultMass": 12465,
            "unitOfMeasure": "g",
            "percentage": 0,
            "declaredPPM": null,
            "calculatedPPM": null,
            "thresholdPPM": null,
            "overThreshold": null,
            "disclosure": null,
            "exemptions": [],
            "exemptionId": [],
            "conversionFactor": null,
            "exemptionExpirationDate": null,
            "declaredCompliance": null,
            "calculatedCompliance": "Compliant",
            "substanceType": "Material",
            "unknown": false,
            "icon": "oj-ux-ico-ifc oj-icon-color-danger",
            "parent": 3,
            "childLevel": 2,
            "rowId": 4,
            "errorIcon": false,
            "materialCategory": null,
            "children": [
                {
                    "id": 5,
                    "substanceName": "POLYESTER RESIN",
                    "casNumber": "68604-67-1",
                    "declaredMass": 100,
                    "rollupMass": 12465,
                    "calculatedMass": null,
                    "resultMass": 12465,
                    "unitOfMeasure": "%",
                    "percentage": 100,
                    "declaredPPM": null,
                    "calculatedPPM": 1000000,
                    "thresholdPPM": null,
                    "overThreshold": null,
                    "disclosure": null,
                    "exemptions": [],
                    "exemptionId": [],
                    "conversionFactor": null,
                    "exemptionExpirationDate": null,
                    "declaredCompliance": null,
                    "calculatedCompliance": "Compliant",
                    "substanceType": "Substance",
                    "unknown": true,
                    "icon": "oj-ux-ico-beaker oj-icon-color-warning",
                    "parent": 4,
                    "childLevel": 3,
                    "rowId": 5,
                    "errorIcon": false,
                    "materialCategory": null
                }
            ]
        }
    ]
}

another issue that occurs is that on the first load I get the following error

[Muhammad-bK]

I would also like to point out that I have tried rendering the same table with the same data using OJET Table and there is absolutely no lag even without row virtualization

[nameis-NAVEEN]

I am also facing the issue; my table is having only one custom cell (pinned to right side) and row actions (pinned to left) holding 300 rows only it's getting lag on scrolling. @KevinVandy help us to overcome this problem.