Large Dataset Performance Demo

This demo renders a grid with 200,000 rows and 10 columns (2,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

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

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

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.