Datatable Slow Rendering

[VeladzicKAG]

Datatable renders really slow and typing in the search term is being really laggy, when the row count is more than 200.
I don't know if it's some random bug in my code or just the way i am filtering the table
Displaying 20 rows and searching, doesn't create any issues.

This is how my code looks like:
using a global filter like this:

  const onGlobalFilterChange = (e) => {
    let value = e;

    let _filters1 = { ...filters };
    _filters1["global"].value = value;

    setFilters(_filters1);
    setGlobalFilterValue(value);
  };

which gets triggered by:

 <InputText
            value={globalFilterValue}
            onChange={(e) => onGlobalFilterChange(e.target.value)}
            placeholder="Suche"
            style={{ width: "20em" }}
          />

and initiated like this:

  const initFilters = () => {
    var generatedFilterSettings = [];
    columns.forEach((element) => {
      generatedFilterSettings[element.field] = {
        operator: FilterOperator.AND,
        constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
      };
    });
    generatedFilterSettings["global"] = {
      value: null,
      matchMode: FilterMatchMode.CONTAINS,
    };
    setFilters(generatedFilterSettings);
  };

datatable:

      <DataTable
        expandedRows={expandedRows}
        ref={dt}
        paginator
        rows={rowCount}
        reorderableColumns
        stripedRows
        scrollHeight="flex"
        dragSelection
        selectionMode={selectionMode}
        selection={selectedMultiple}
        sortMode="multiple"
        dataKey="TIDNR"
        resizableColumns
        columnResizeMode={customTableWidth}
        onContextMenu={(e) => cm.current.show(e.originalEvent)}
        value={data}
        filters={filters}
        scrollable
        filterDisplay="menu"
        loading={loading}
        responsiveLayout="scroll"
        globalFilterFields={["TIDNR"]}
        header={header}
        emptyMessage="Keine PCs."
        scrollDirection="vertical"
        onRowToggle={(e) => setExpandedRows(e.data)}
        rowExpansionTemplate={(e) => {
          return Computerdetails(e, translationTable);
        }}
        onRowSelect={(ev) => {
          startPing(
            ev,
            data,
            (e) => {
              setData(e);
            },
            selectedMultiple
          );
        }}
        onRowDoubleClick={(ev) => {
          startNetsupport([ev.data]);
        }}

        onSelectionChange={(e) => {
          if (e.value instanceof Array) {
            setScriptlaucherListGlobal(e.value);
            setSelectedMultiple(e.value);
          } else if(e.value !== null) {
            setScriptlaucherListGlobal([e.value]);
            setSelectedMultiple([e.value]);
          } else{
            setScriptlaucherListGlobal([]);
            setSelectedMultiple([]);
          }
        }}
        onContextMenuSelectionChange={(e) => {
          if (!selectedMultiple.includes(e.value)) {
            setSelectedMultiple([...selectedMultiple, e.value]);
          }
        }}
       
      >
        <Column
        columnKey="1"
          selectionMode={selectionMode}
          style={{ maxWidth: "40px", height: "10px" }}
        ></Column>
        <Column columnKey="2" expander style={{ maxWidth: "60px", height: "10px" }} />
        {columnComponents}
      </DataTable>

What to do make the search going faster, thanks for help :)

[melloware]

Performance enhancements have been made for 10.0.0 which is hopefully coming out tomorrow: primefaces/primereact#4768

So after 10.0.0 comes out can you report back if its better? Also make sure you are not in Strict Mode as duplicate re-renders in StrictMode make everything slower.

However if you are displaying 200 rows on screen they are all being rendered whereas 20 rows is a lot less to re-render.

[VeladzicKAG]

okay thanks, i will report back! Strict Mode is disabled. primefaces/primereact#4768 is describing my issue very well.

[melloware]

OK good when 10.0.0 comes out can you retest and report back. it is supposed to be out today or tomorrow.

[cagataycivici]

For large datasets, we suggest lazy loading but 200 should be fine for local data, could you please provide a reproducer via our template;

https://codesandbox.io/s/primereact-test-forked-bbns8k

That would really help to pinpoint the case.

[melloware]

Thanks for the reproducer. I am looking forward to trying this out with 10.0.0. If it is still an issue I will have you open a ticket with this reproducer against 10.0.0

[melloware]

10.0.0 is out if you want to re-test.

[VeladzicKAG]

i tested it, but unfortunately it is behaving in the same way as before.

[melloware]

Ok please comment on this ticket and add your reproducer and scenario. primefaces/primereact#2979

It's related to re renders