Skip to content
GridSheetGridSheet

Case 8: Large Dataset Performance Demo

This demo renders a grid with 500,000 rows and 10 columns (5,000,000 cells in total). GridSheet uses lazy initialization and deferred cell expansion internally, so the grid becomes interactive without processing all cells upfront.

Implementation Guide

Section titled “Implementation Guide”
View Source Code

Loading Overlay Until Initialization Completes

Section titled “Loading Overlay Until Initialization Completes”

GridSheet adds the gs-initialized class to its root element once it is ready. By watching for this class with a MutationObserver, you can overlay a spinner on the sheet area and remove it only when the grid is fully interactive.

const containerRef = React.useRef<HTMLDivElement>(null);
const [ready, setReady] = React.useState(false);


React.useEffect(() => {
  const el = containerRef.current;
  if (!el) return;
  const observer = new MutationObserver(() => {
    if (el.querySelector('.gs-initialized')) {
      setReady(true);
      observer.disconnect();
    }
  });
  observer.observe(el, { attributes: true, subtree: true, attributeFilter: ['class'] });
  if (el.querySelector('.gs-initialized')) {
    setReady(true);
  }
  return () => observer.disconnect();
}, []);


return (
  <div ref={containerRef} style={{ position: 'relative' }}>
    <GridSheet ... />
    {!ready && (
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(255,255,255,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div className="gs-loading-spinner" />
      </div>
    )}
  </div>
);

sheetResize: 'both' for Resizable Grid

Section titled “sheetResize: 'both' for Resizable Grid”

The sheetResize option exposes a resize handle so users can adjust the grid dimensions interactively — useful when exploring wide or tall datasets at different viewport sizes.

options={{
  sheetHeight: 400,
  sheetWidth: Math.min(800, window.innerWidth - 60),
  sheetResize: 'both',
}}

Applying Row Stripes with CSS

Section titled “Applying Row Stripes with CSS”

GridSheet automatically adds gs-row-odd and gs-row-even classes to each <tr> element based on the row’s position. You can use these classes to apply alternating row background colors without touching cell data:

<style>{`
  .gs-row-odd .gs-cell  { background-color: #ffffff; }
  .gs-row-even .gs-cell { background-color: #f0f4f8; }
`}</style>

Because these are CSS rules (not inline styles), any style.backgroundColor set directly on a cell object will take priority and override the stripe color for that specific cell.