CODEWITHSUNDEEP
reactjsstyled-componentsreact-virtualizedreact-window
Tommy
Tommy

Reputation: 523

Load large data as Grid and Table in React (with react-window)

I have a project with an start page, which shows the whole item list of a user. The user can switch between a Grid and a Table.

For the Grid I use a CSS Grid

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 2px;
  align-items: stretch;
  justify-items: stretch;

For the Table I use the Table, TableCell, TableRow, TableHead and TableBody components of Material UI.

Now I want to find a good way to render the Grid/Table with large data. Till now I had a loading screen, which finishes when all data is loaded. That takes too long.

I find react-window or react-virtualized and react-virtualized-autosizer but can't get it to work. Are there examples with responsive CSS Grids and Tables, where you don't know the width and height of an item?

Thank you for your help!

Upvotes: 1

Views: 894

Answers (1)

amaneru sakura
amaneru sakura

Reputation: 1

My sulution:

import React from 'react'

interface LazyRenderProps {
  visibleOffset?: number
}

const LazyRender: React.FC<React.PropsWithChildren<LazyRenderProps>> = (
  {
    children,
    visibleOffset = 0,
  },
) => {
  const [isVisible, setIsVisible] = React.useState<boolean>(false)
  const intersectionRef = React.useRef<HTMLDivElement | null>(null)

  React.useEffect(() => {
    const $i = intersectionRef.current
    if (!$i) return

    const observer = new IntersectionObserver(
      entries => {
        if ( window.requestIdleCallback) {
          window.requestIdleCallback(
            () => setIsVisible(entries[0].isIntersecting),
            {
              timeout: 600
            }
          )
        } else {
          setIsVisible(entries[0].isIntersecting)
        }
      },
      {
         rootMargin: `${visibleOffset}px 0px ${visibleOffset}px 0px`,
      }
    )
    observer.observe($i)

    return () => {
      if ($i) {
        observer.unobserve($i)
      }
    }
  }, [visibleOffset])


  return (
    <div ref={intersectionRef} style={{ height: '100%', width: '100%' }}>
      {
        isVisible ? children : null
      }
    </div>
  )
}

export default LazyRender

Upvotes: 0

Related Questions