CODEWITHSUNDEEP
javascriptreactjs
Switz
Switz

Reputation: 473

Fetching Large Data to render on Datatable - ReactJS

I have a list of 20,000 rows in my database that I am fetching to my table. I have this 20,000 rows stored to a localStorage to improve speed. My issue is, when I am navigating to the page (which contains the 20,000 rows), it lags for few seconds before the page is loaded.

How can I let my page render and wait for the huge data to be fetched ?

PS: getItem function fetches the data and store in array items and stored to localStorage.setItem('my_items') .

Index.js

 state: {
     items:[],
     loading:true;
   }

componentDidMount()
{       

let items = JSON.parse(localStorage.getItem('my_items'));

if(items)
    {
      this.setState({
      items: items
    })      
     this.setState({ loading: false });
    }
    else
    {
        this.getItems();
    }
}





  return (

{loading &&
           <div className="d-flex justify-content-center loader-overlay">
              <CircularProgress />
           </div>
        }

       <MuiThemeProvider theme={this.getMuiTheme()}>

                <MUIDataTable

                    title={
                    }
                    data={this.state.items.map(item => {
                        return [
                           item.name,
                           item.type
                        ]

                     })}
                    columns={columns}
                    options={options}
                        />
            </MuiThemeProvider>   
        );

Upvotes: 0

Views: 4284

Answers (1)

Tomas Bruckner
Tomas Bruckner

Reputation: 728

This problem is usually solved by using server side pagination. It should work something like this:

  1. Open page with data table and you fetch first 20 items (or whatever size of a page is). You send /api/tableData?offset=0&limit=20. This will only return first 20 items.

  2. User clicks on next page, you fetch the second page using /api/tableData?offset=20&limit=20. This will return items with id 21-40.

  3. User clicks on next page, you fetch the third page using /api/tableData?offset=20&limit=20

If you are using mui-datatables NPM package, it has option serverSide and it helps you to do it easily. Chjeck Remote Data section in the documentation of MUI datatables package https://www.npmjs.com/package/mui-datatables#remote-data.

But if you are sure about your use case and you don't want to do server side pagination, you can use Web Worker. The problem in your application is that JSON.parse for such a huge collection takes way too long. With Web Worker, you can start another thread that will not block the UI thread. In the worker thread, you will start parsing the collection and when you finish parsing, you will send the data back to the UI thread. Web workers were designed for exactly this use case. You can learn about it more here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Upvotes: 2

Related Questions