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

user_11024560 0
Viewed 8481

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> 
) 
}
react-table reactjs lazy-loading javascript
1 Answers

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>
user_28753480
Related