Function Grid

lib/components/grid/Grid.tsx:26–321

({
  cellComponent: CellComponentProp,
  cellProps: cellPropsUnstable,
  children,
  className,
  columnCount,
  columnWidth,
  defaultHeight = 0,
  defaultWidth = 0,
  dir,
  gridRef,
  onCellsRendered,
  onResize,
  overscanCount = 3,
  rowCount,
  rowHeight,
  style,
  tagName = "div" as TagName,
  ...rest
}: GridProps<CellProps, TagName>)

 * Either static sizes or something that can be derived (from the data in `CellProps`) without rendering.
 */
export function Grid<
  CellProps extends object,
  TagName extends TagNames = "div"
>({
  cellComponent: CellComponentProp,
  cellProps: cellPropsUnstable,
  children,
  className,
  columnCount,
  columnWidth,
  defaultHeight = 0,
  defaultWidth = 0,
  dir,
  gridRef,
  onCellsRendered,
  onResize,
  overscanCount = 3,
  rowCount,
  rowHeight,
  style,
  tagName = "div" as TagName,
  ...rest
}: GridProps<CellProps, TagName>): ReactElement {
  const cellProps = useMemoizedObject(cellPropsUnstable);
  const CellComponent = useMemo(
    () => memo(CellComponentProp, arePropsEqual),
    [CellComponentProp]
  );

  const [element, setElement] = useState<HTMLDivElement | null>(null);

  const isRtl = useIsRtl(element, dir);

  const {
    getCellBounds: getColumnBounds,
    getEstimatedSize: getEstimatedWidth,
    startIndexOverscan: columnStartIndexOverscan,
    startIndexVisible: columnStartIndexVisible,
    scrollToIndex: scrollToColumnIndex,
    stopIndexOverscan: columnStopIndexOverscan,
    stopIndexVisible: columnStopIndexVisible
  } = useVirtualizer({
    containerElement: element,
    containerStyle: style,
    defaultContainerSize: defaultWidth,
    direction: "horizontal",
    isRtl,
    itemCount: columnCount,
    itemProps: cellProps,
    itemSize: columnWidth,
    onResize,
    overscanCount
  });

  const {
    getCellBounds: getRowBounds,
    getEstimatedSize: getEstimatedHeight,
    startIndexOverscan: rowStartIndexOverscan,