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

Question

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!

amaneru sakura · Accepted Answer · 2023-12-06 06:48:55Z

0

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

answered Dec 6, 2023 at 6:48

amaneru sakura

1

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

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related