import { Canvas, Meta } from "@storybook/blocks";
import { UsageGuidelines } from "vibe-storybook-components";
import * as VirtualizedGridStories from "./VirtualizedGrid.stories";
import { TABLE, VIRTUALIZED_LIST, MENU_GRID_ITEM } from "../../../storybook/components/related-components/component-description-map";

<Meta of={VirtualizedGridStories} />

# VirtualizedGrid

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

VirtualizedGrid is a component which only renders visible grid items, it is a logic component and doesn't change and look and feel

Under the hood we are using - [react-window](https://github.com/bvaughn/react-window) and [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer)

<Canvas of={VirtualizedGridStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Use this component to implement a grid with many items or when each item render has heavy calculations.",
    "Rendering only the visible grid items instead of all the grid's items will create better performance and a smoother experience for users while using the grid."
  ]}
/>

## Related components

<RelatedComponents componentsNames={[TABLE, VIRTUALIZED_LIST, MENU_GRID_ITEM]} />