Grid.md

Grid

This component efficiently renders a virtualized grid of elements. Only a small number of cells are rendered based on the horizontal and vertical scroll position.

Prop Types

Property	Type	Required?	Description
className	String		Optional custom CSS class name to attach to root Grid element.
columnsCount	Number	✓	Number of columns in grid.
columnWidth	Number or Function	✓	Either a fixed column width (number) or a function that returns the width of a column given its index: (index: number): number
height	Number	✓	Height of Grid; this property determines the number of visible (vs virtualized) rows.
noContentRenderer	Function		Optional renderer to be rendered inside the grid when either rowsCount or columnsCount is 0: (): PropTypes.node
onSectionRendered	Function		Callback invoked with information about the section of the Grid that was just rendered: ({ columnOverscanStartIndex, columnOverscanStopIndex, columnStartIndex, columnStopIndex, rowOverscanStartIndex, rowOverscanStopIndex, rowStartIndex, rowStopIndex }): void
onScroll	Function		Callback invoked whenever the scroll offset changes within the inner scrollable region: ({ clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth }): void
overscanColumnsCount		Number	Number of columns to render before/after the visible slice of the grid. This can help reduce flickering during scrolling on certain browers/devices.
overscanRowsCount		Number	Number of rows to render above/below the visible slice of the grid. This can help reduce flickering during scrolling on certain browers/devices.
renderCell	Function	✓	Responsible for rendering a cell given an row and column index: ({ columnIndex: number, rowIndex: number }): PropTypes.node
rowsCount	Number	✓	Number of rows in grid.
rowHeight	Number or Function	✓	Either a fixed row height (number) or a function that returns the height of a row given its index: (index: number): number
scrollLeft	Number		Horizontal offset
scrollToColumn	Number		Column index to ensure visible (by forcefully scrolling if necessary)
scrollToRow	Number		Row index to ensure visible (by forcefully scrolling if necessary)
scrollTop	Number		Vertical offset
width	Number	✓	Width of Grid; this property determines the number of visible (vs virtualized) columns.

Public Methods

recomputeGridSize

Recomputes row heights and column widths.

This function should be called if dynamic column or row sizes have changed but nothing else has. Since Grid only receives columnsCount and rowsCount it has no way of detecting when the underlying data changes.

scrollToCell({ scrollToColumn, scrollToRow })

Updates the Grid to ensure the cell at the specified row and column indices is visible. This method exists so that a user can forcefully scroll to the same cell twice. (The scrollToColumn and scrollToRow properties would not change in that case so it would not be picked up by the component.)

setScrollPosition({ scrollLeft, scrollTop })

Set the scrollLeft and scrollTop position within the inner scroll container.

Normally it is best to let Grid manage these properties or to use a method like scrollToCell. This method enables a Grid to be scroll-synced to another react-virtualized component though. It is appropriate to use in that case.

Class names

The Grid component supports the following static class names

Property	Description
Grid	Main (outer) element
Grid__innerScrollContainer	Inner scrollable area
Grid__cell	Individual cell

Examples

Below is a very basic Grid example. The grid displays an array of objects with fixed row and column sizes. (Dynamic sizes are also supported but this example is intended to be basic.) See here for a more full-featured example with dynamic cell sizes and more.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// Grid data as an array of arrays
const list = [
  ['Brian Vaughn', 'Software Engineer', 'Sunnyvale', 'CA', 94086 /* ... */ ]
  // And so on...
];

// Render your grid
ReactDOM.render(
  <Grid
    width={300}
    height={300}
    columnWidth={100}
    rowHeight={30}
    columnsCount={list.length}
    rowsCount={list.length}
    renderCell={({ columnIndex, rowIndex }) => list[rowIndex][columnIndex]}
  />,
  document.getElementById('example')
);