Table loading is taking ~10-15 seconds to load 50K records

[athondapu]

Table loading is taking ~10-15 seconds to load 50K records. Also approximately same time is taking if we do a rowClick. Here is the my Data table configuration.

<MUIDataTable
      data={this.state.data}
      columns={["a", "b", "c"]}
      options={{
        rowsPerPageOptions: [10, 50, 100],
        searchText: this.state.searchText || "",
        searchOpen: false,
        onTableChange: this.onTableChange,
        onSearchChange: this.searchChange,
        responsive: "scrollFullHeight",
        selectableRows: "none",
        onRowClick: this.onRowClick,
        print: false,
        filter: false,
        downloadOptions: {
          filename: `ag-${this.state.currentDate}.csv`
        },
        textLabels: {
          body: {
            noMatch: this.state.searchOpened
              ? this.state.searchOpenedText
              : this.state.tableLodingText
          }
        }
      }}
    />

Expected Behavior

Is there any way to reduce the time other than implementing pagenation from my end.?

Current Behavior

Steps to Reproduce (for bugs)

1. Take the 50k records file which contains only 3 columns.
2. Use that file to load the data table and observe it is taking ~15 sec to respond for every operation.

Your Environment

Tech	Version
Material-UI	^4.2.0
MUI-datatables	2.12.0
React	^16.8.6
browser	Chrome
etc

[gabrielliwerant]

I would go with pagination, unless you're willing to trace down the issue and submit a fix.

[patorjk]

I have tables with 20-30k rows that only take ~2-3 seconds to render, and that's on a thin client box.

Are you using the customBodyRender method for any of your columns? If so, try rendering the table without that method for any of your columns and see how quickly the table renders. If it renders quickly, your problem is with one of your customBodyRender methods being slow.

Internally, the table calls a customBodyRender method twice for each row before rendering the data. So if 5 of your columns use this method, and you have 50k records, there are 500k function calls being made. This is done for processing reasons and for filtering reasons (the table uses the rendered value for filtering). Because of this, optimizing that method is crutial if you want your table to render quickly.

[rclarkem-fubotv]

I have tables with 20-30k rows that only take ~2-3 seconds to render, and that's on a thin client box.

Are you using the customBodyRender method for any of your columns? If so, try rendering the table without that method for any of your columns and see how quickly the table renders. If it renders quickly, your problem is with one of your customBodyRender methods being slow.

Internally, the table calls a customBodyRender method twice for each row before rendering the data. So if 5 of your columns use this method, and you have 50k records, there are 500k function calls being made. This is done for processing reasons and for filtering reasons (the table uses the rendered value for filtering). Because of this, optimizing that method is crutial if you want your table to render quickly.

Thanks for the information! Thats is good to know will try this out and check the difference!