How can I implement lazy loading of data on react table?

Question

I'm featching large amount on data and meanwhile I want to lazy load the react table

import React, {Component, Fragment, lazy, Suspense} from 'react'; 
const ReactTable = lazy(() => import("react-table")); 
render() 
{ 
return ( 
<Suspense fallback={<div>Loading...</div>}> 
{this.state.securityCheck.length ? 
<ReactTable columns={columns} data={this.state.securityCheck} /> 
: 
<div className='text-center' style= {{fontSize: '20px'}}>No data =
Available! </div> } 
</Suspense> 
) 
}

There are quite a few resources for this sort of thing online, I will leave one here: hackernoon.com/… In the mean time, please update your question with any specific issues you are getting as well as your current approach. — Mark Harwood
– Mark Harwood, Commented Jun 10, 2019 at 8:49

ravibagul91 · Accepted Answer · 2019-06-10 10:23:15Z

2

From the Docs:

The fallback prop accepts any React elements that you want to render while waiting for the component to load. You can place the Suspense component anywhere above the lazy component. You can even wrap multiple lazy components with a single Suspense component.

Try this,

<Suspense fallback={<div>Loading...</div>}> 
   <ReactTable columns={columns} data={this.state.securityCheck} /> 
</Suspense>

answered Jun 10, 2019 at 10:23

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parth Shrivastava Over a year ago

const ReactTable = lazy(() => import("react-table")); Is this the right way to import React table for lazy load?

ravibagul91 Over a year ago

@ParthShrivastava Yes. It is the right way. Just make sure you are importing from correct path. For same folder we use ./filename, for other folder we use ../foldername/filename.

Collectives™ on Stack Overflow

How can I implement lazy loading of data on react table?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related