react-virtualized

react-virtualized

Version 10.0.0
Published 19 days ago
1.31 MB
2 dependencies
MIT license

Install

npm i react-virtualized

yarn add react-virtualized

pnpm add react-virtualized

Overview

React components for efficiently rendering large, scrollable lists and tabular data

Index

Variables

variable ArrowKeyStepper

const ArrowKeyStepper: NamedExoticComponent<any>;

This HOC decorates a virtualized component and responds to arrow-key events by scrolling one row or column at a time. This provides a snap-to behavior rather than the default browser scrolling behavior.
Note that unlike the other HOCs in react-virtualized, ArrowKeyStepper adds a <div> element around its children in order to attach a key-down event handler. The appearance of this wrapper element can be customized using the className property.

variable CellMeasurer

const CellMeasurer: any;

Wraps a cell and measures its rendered content. Measurements are stored in a per-cell cache. Cached-content is not be re-measured.
The child must be a DOM element (e.g. <div>) or a component that passes its ref along to one; otherwise use a function child and pass registerChild as the ref of the element to be measured.

variable ColumnSizer

const ColumnSizer: NamedExoticComponent<ColumnSizerProps>;

High-order component that auto-calculates column-widths for Grid cells.

variable defaultArrowKeyStepperProps

const defaultArrowKeyStepperProps: Readonly<
    Required<Pick<ArrowKeyStepperProps, DefaultedPropKeys>>
>;

Default values for ArrowKeyStepper's optional props.

variable defaultColumnProps

const defaultColumnProps: Readonly<Required<Pick<ColumnProps, DefaultedPropKeys_6>>>;

Default values for Column's optional props. Table applies these to the props of each of its child elements (so wrapper components work as columns too). (The PURE annotations let bundlers drop this object if it isn't used.)

variable defaultGridProps

const defaultGridProps: Readonly<Required<Pick<GridProps, DefaultedPropKeys_2>>>;

Default values for Grid's optional props. (The PURE annotations let bundlers drop this object if it isn't used.)

variable defaultInfiniteLoaderProps

const defaultInfiniteLoaderProps: Readonly<{
    readonly minimumBatchSize: 10;
    readonly rowCount: 0;
    readonly threshold: 15;
}>;

Default values for InfiniteLoader's optional props.

variable defaultListProps

const defaultListProps: Readonly<Required<Pick<ListProps, DefaultedPropKeys_3>>>;

Default values for List's optional props. (The PURE annotations let bundlers drop this object if it isn't used.)

variable defaultMasonryProps

const defaultMasonryProps: Readonly<{
    style: any;
    onScroll: MasonryOnScrollCallback;
    role: string;
    scrollingResetTimeInterval: number;
    tabIndex: number;
    keyMapper: MasonryKeyMapper;
    onCellsRendered: MasonryOnCellsRenderedCallback;
    overscanByPixels: number;
    rowDirection: string;
}>;

Default values for Masonry's optional props. (The PURE annotations let bundlers drop this object if it isn't used.)

variable defaultMultiGridProps

const defaultMultiGridProps: Readonly<
    Required<Pick<MultiGridProps, DefaultedPropKeys_5>>
>;

Default values for MultiGrid's optional props. (Props that are relayed to the inner Grids default to the values in defaultGridProps.)

variable defaultTableProps

const defaultTableProps: Readonly<Required<Pick<TableProps, DefaultedPropKeys_7>>>;

Default values for Table's optional props. (The PURE annotations let bundlers drop this object if it isn't used.)

variable Grid

const Grid: NamedExoticComponent<any>;

Renders tabular data with virtualization along the vertical and horizontal axes. Row heights and column widths must be known ahead of time and specified as properties.
Scrolling is done through the imperative handle (ref): see scrollToCell and scrollToPosition.

variable InfiniteLoader

const InfiniteLoader: NamedExoticComponent<any>;

Higher-order component that manages lazy-loading for "infinite" data. This component decorates a virtual component and just-in-time prefetches rows as a user scrolls. It is intended as a convenience component; fork it if you'd like finer-grained control over data-loading.

variable List

const List: NamedExoticComponent<any>;

It is inefficient to create and manage a large list of DOM elements within a scrolling container if only a few of those elements are visible. The primary purpose of this component is to improve performance by only rendering the DOM nodes that a user is able to see based on their current scroll position.
This component renders a virtualized list of elements with either fixed or dynamic heights.

variable Masonry

const Masonry: NamedExoticComponent<any>;

This component efficiently displays arbitrarily positioned cells using windowing techniques. Cell position is determined by an injected cellPositioner property. Windowing is vertical; this component does not support horizontal scrolling.
Rendering occurs in two phases: 1) First pass uses estimated cell sizes (provided by the cache) to determine how many cells to measure in a batch. Batch size is chosen using a fast, naive layout algorithm that stacks images in order until the viewport has been filled. After measurement is complete (once the render has been committed) this component evaluates positioned cells in order to determine if another measurement pass is required (eg if actual cell sizes were less than estimated sizes). All measurements are permanently cached (keyed by keyMapper) for performance purposes. 2) Second pass uses the external cellPositioner to layout cells. At this time the positioner has access to cached size measurements for all cells. The positions it returns are cached by Masonry for fast access later. Phase one is repeated if the user scrolls beyond the current layout's bounds. If the layout is invalidated due to eg a resize, cached positions can be cleared using recomputeCellPositions().
Animation constraints: Simple animations are supported (eg translate/slide into place on initial reveal). More complex animations are not (eg flying from one position to another on resize).
Layout constraints: This component supports multi-column layout. The height of each item may vary. The width of each item must not exceed the width of the column it is "in". The left position of all items within a column must align. (Items may not span multiple columns.)

variable MultiGrid

const MultiGrid: NamedExoticComponent<any>;

Renders 1, 2, or 4 Grids depending on configuration. A main (body) Grid will always be rendered. Optionally, 1-2 Grids for sticky header rows will also be rendered. If no sticky columns, only 1 sticky header Grid will be rendered. If sticky columns, 2 sticky header Grids will be rendered.
Scrolling is done through the imperative handle (ref): see scrollToCell and scrollToPosition.

variable ScrollSync

const ScrollSync: NamedExoticComponent<ScrollSyncProps>;

HOC that simplifies the process of synchronizing scrolling between two or more virtualized components.

variable SortDirection

const SortDirection: { readonly ASC: 'ASC'; readonly DESC: 'DESC' };

Specifies which direction Table data is currently sorted in.

variable Table

const Table: NamedExoticComponent<any>;

Table component with fixed headers and virtualized rows for improved performance with large data sets. This component expects explicit width, height, and padding parameters.
Columns are described by Column children (or components that render a Column). Scrolling is done through the imperative handle (ref): see scrollToRow, scrollToCell, and scrollToPosition.

Functions

function accessibilityOverscanIndicesGetter

accessibilityOverscanIndicesGetter: ({
    cellCount,
    overscanCellsCount,
    scrollDirection,
    startIndex,
    stopIndex,
}: OverscanIndicesGetterParams) => OverscanIndices;

Calculates the number of cells to overscan before and after a specified range. This function ensures that overscanning doesn't exceed the available cells.

function Column

Column: (props: ColumnProps) => null;

Describes the header and cell contents of a table column.
This component does not render anything itself; Table reads the props of its children to render headers and cells (applying defaultColumnProps to each child's props). Components that render a Column (e.g. const MyColumn = (props) => <Column {...props} />) can be used as Table children too; their props are read the same way (the wrapper component itself is never rendered).

function createMasonryCellPositioner

createMasonryCellPositioner: ({
    cellMeasurerCache,
    columnCount,
    columnWidth,
    spacer,
}: CreateCellPositionerParams) => CellPositioner;

Creates a simple Masonry cell positioner that always inserts a cell into the shortest column.

function createTableMultiSort

createTableMultiSort: (
    sortCallback: MultiSortCallback,
    { defaultSortBy, defaultSortDirection }?: MultiSortOptions
) => MultiSortReturn;

Creates sort state (and a sort function compatible with the Table sort prop) for sorting a Table by multiple fields.
- Click sorts by a single field (toggling its direction if it was already sorted). - SHIFT + click appends a field to the existing sort criteria (or toggles its direction). - CONTROL/META + click removes a field from the sort criteria.
Whenever the sort criteria change, new sortBy and sortDirection values are created (previous values are never mutated), so they can be stored in React state (e.g. with useState) as passed to sortCallback.
Parameter sortCallback
Notified (with the updated sortBy and sortDirection values) whenever the sort criteria change.
Parameter options
Optional default sort-by values.

function defaultCellRangeRenderer

defaultCellRangeRenderer: ({
    cellCache,
    cellRenderer,
    columnSizeAndPositionManager,
    columnStartIndex,
    columnStopIndex,
    deferredMeasurementCache,
    horizontalOffsetAdjustment,
    isScrolling,
    isScrollingOptOut,
    parent,
    rowSizeAndPositionManager,
    rowStartIndex,
    rowStopIndex,
    styleCache,
    verticalOffsetAdjustment,
    visibleColumnIndices,
    visibleRowIndices,
}: CellRangeRendererParams) => ReactElement[];

Default implementation of cellRangeRenderer used by Grid. This renderer supports cell-caching while the user is scrolling.

function defaultOverscanIndicesGetter

defaultOverscanIndicesGetter: ({
    cellCount,
    overscanCellsCount,
    scrollDirection,
    startIndex,
    stopIndex,
}: OverscanIndicesGetterParams) => OverscanIndices;

Calculates the number of cells to overscan before and after a specified range. This function ensures that overscanning doesn't exceed the available cells.

function defaultTableCellDataGetter

defaultTableCellDataGetter: ({
    dataKey,
    rowData,
}: Pick<TableCellDataGetterParams, 'dataKey' | 'rowData'>) => any;

Default accessor for returning a cell value for a given attribute. This function expects to operate on either a vanilla Object or an Immutable Map. You should override the column's cellDataGetter if your data is some other type of object.

function defaultTableCellRenderer

defaultTableCellRenderer: ({
    cellData,
}: Pick<TableCellProps, 'cellData'>) => string;

Default cell renderer that displays an attribute as a simple string You should override the column's cellRenderer if your data is some other type of object.

function defaultTableHeaderRenderer

defaultTableHeaderRenderer: ({
    dataKey,
    label,
    sortBy,
    sortDirection,
}: Pick<
    TableHeaderProps,
    'dataKey' | 'label' | 'sortBy' | 'sortDirection'
>) => ReactElement[];

Default table header renderer.

function defaultTableHeaderRowRenderer

defaultTableHeaderRowRenderer: ({
    className,
    columns,
    style,
}: TableHeaderRowProps) => JSX.Element;

Default table header row renderer.

function defaultTableRowRenderer

defaultTableRowRenderer: ({
    className,
    columns,
    index,
    key,
    onRowClick,
    onRowDoubleClick,
    onRowMouseOut,
    onRowMouseOver,
    onRowRightClick,
    rowData,
    style,
}: TableRowProps) => JSX.Element;

Default row renderer for Table.

function SortIndicator

SortIndicator: ({ sortDirection }: SortIndicatorProps) => JSX.Element;

Displayed beside a header to indicate that a Table is currently sorted by this column.

Classes

class CellMeasurerCache

class CellMeasurerCache implements CellMeasureCache, CellMeasurerCacheAPI {}

Caches measurements for a given cell.

constructor

constructor(params?: CellMeasurerCacheParams);

property columnWidth

columnWidth: ({ index }: IndexParam) => number;

Returns the derived width of a column (the widest measured cell in that column) or the default width. Compatible with the columnWidth prop of Grid.

property defaultHeight

readonly defaultHeight: number;

Height reported for unmeasured cells.

property defaultWidth

readonly defaultWidth: number;

Width reported for unmeasured cells.

property rowHeight

rowHeight: ({ index }: IndexParam) => number;

Returns the derived height of a row (the tallest measured cell in that row) or the default height. Compatible with the rowHeight prop of Grid.

method clear

clear: (rowIndex: number, columnIndex?: number) => void;

Reset cached measurements for a specific cell.
This should be called when a cell needs to be re-measured to handle dynamic content (eg. replacing a loading indicator with loaded content or reacting to state-changes for stateful cells).

method clearAll

clearAll: () => void;

Reset cached measurements for all cells.
This method should be called when a Grid, List or Table needs to reflow content due to a resizing event for a responsive layout (eg. a window width resize may have an impact on the height of cells).

method getHeight

getHeight: (rowIndex: number, columnIndex?: number) => number;

Returns the (measured or default) height of the specified cell.

method getWidth

getWidth: (rowIndex: number, columnIndex?: number) => number;

Returns the (measured or default) width of the specified cell.

method has

has: (rowIndex: number, columnIndex?: number) => boolean;

Returns true if the specified cell has already been measured.

method hasFixedHeight

hasFixedHeight: () => boolean;

Returns true if cells have a fixed height (and a dynamic, measured width).

method hasFixedWidth

hasFixedWidth: () => boolean;

Returns true if cells have a fixed width (and a dynamic, measured height).

method set

set: (
    rowIndex: number,
    columnIndex: number,
    width: number,
    height: number
) => void;

Stores the measured size of the specified cell.

Interfaces

interface ArrowKeyStepperChild

interface ArrowKeyStepperChild {}

Imperative API of the component decorated by ArrowKeyStepper (e.g. a Grid ref), registered through the registerChild parameter.

method scrollToCell

scrollToCell: (params: { columnIndex?: number; rowIndex?: number }) => void;

Ensure the specified column and row are visible.

interface ArrowKeyStepperImperativeAPI

interface ArrowKeyStepperImperativeAPI {}

Public methods available on an ArrowKeyStepper ref.

method setScrollIndexes

setScrollIndexes: (params: ScrollIndices) => void;

Override the local state of the component with new values for scrollToRow and scrollToColumn.

interface CellMeasurerCacheAPI

interface CellMeasurerCacheAPI {}

Public API of a CellMeasurerCache instance.

property defaultHeight

readonly defaultHeight: number;

Height reported for unmeasured cells (read-only).

property defaultWidth

readonly defaultWidth: number;

Width reported for unmeasured cells (read-only).

method clear

clear: (rowIndex: number, columnIndex?: number) => void;

Reset cached measurements for a specific cell.
This should be called when a cell needs to be re-measured to handle dynamic content (e.g. replacing a loading indicator with loaded content, or reacting to state changes for stateful cells). columnIndex defaults to 0.

method clearAll

clearAll: () => void;

Reset cached measurements for all cells.
This should be called when a Grid, List or Table needs to reflow its content due to a resize in a responsive layout (e.g. a change in window width may impact the height of cells).

method columnWidth

columnWidth: (params: { index: number }) => number;

Returns the derived width of a column (its widest measured cell) or the default width. Pass this as the columnWidth prop of a Grid (or MultiGrid); it's bound to the cache, so it can be passed as-is.

method getHeight

getHeight: (rowIndex: number, columnIndex?: number) => number;

Returns the (measured or default) height of the specified cell. columnIndex defaults to 0.

method getWidth

getWidth: (rowIndex: number, columnIndex?: number) => number;

Returns the (measured or default) width of the specified cell. columnIndex defaults to 0.

method has

has: (rowIndex: number, columnIndex?: number) => boolean;

Returns true if the specified cell has already been measured. columnIndex defaults to 0.

method hasFixedHeight

hasFixedHeight: () => boolean;

Returns true if cells have a fixed height (and a dynamic, measured width); see the fixedHeight option.

method hasFixedWidth

hasFixedWidth: () => boolean;

Returns true if cells have a fixed width (and a dynamic, measured height); see the fixedWidth option.

method rowHeight

rowHeight: (params: { index: number }) => number;

Returns the derived height of a row (its tallest measured cell) or the default height. Pass this as the rowHeight prop of a Grid, List or Table; it's bound to the cache, so it can be passed as-is.

method set

set: (
    rowIndex: number,
    columnIndex: number,
    width: number,
    height: number
) => void;

Stores the measured size of the specified cell. This is called by CellMeasurer and doesn't usually need to be called directly.

interface GridImperativeAPI

interface GridImperativeAPI {}

Public (imperative) methods of a Grid (its ref handle).

method forceUpdate

forceUpdate: () => void;

Forcefully re-render the Grid (and its visible cells), e.g. because the data rendered by cellRenderer has changed but the Grid's props have not.

method getOffsetForCell

getOffsetForCell: (params?: {
    alignment?: Alignment;
    columnIndex?: number;
    rowIndex?: number;
}) => { scrollLeft: number; scrollTop: number };

Gets offsets for a given cell and alignment (see scrollToCell for the alignment values). The alignment defaults to "auto"; an index of -1 (the default) refers to the last column or row.

method getTotalColumnsWidth

getTotalColumnsWidth: () => number;

Gets estimated total columns' width.

method getTotalRowsHeight

getTotalRowsHeight: () => number;

Gets estimated total rows' height.

method handleScrollEvent

handleScrollEvent: (params: ScrollPosition) => void;

This method handles a scroll event originating from an external scroll control. It's an advanced method and should probably not be used unless you're implementing a custom scroll-bar solution.

method invalidateCellSizeAfterRender

invalidateCellSizeAfterRender: (params: CellPosition) => void;

Invalidate the size of a cell and recompute visible cells after the current render has been committed. This is a deferred version of recomputeGridSize() (batching the invalidations of a render); it is intended for advanced use-cases like CellMeasurer.

method measureAllCells

measureAllCells: () => void;

Pre-measure all columns and rows in a Grid.
Typically cells are only measured as needed and estimated sizes are used for cells that have not yet been measured. This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one).

method recomputeGridSize

recomputeGridSize: (params?: {
    columnIndex?: number;
    rowIndex?: number;
}) => void;

Recomputes row heights and column widths after the specified index (both default to 0).
This function should be called if dynamic column or row sizes have changed but nothing else has. Since Grid only receives columnCount and rowCount it has no way of detecting when the underlying data changes.
This method will also force a render cycle to ensure that the updated measurements are reflected in the rendered grid.

method scrollToCell

scrollToCell: (params: {
    align?: Alignment;
    columnIndex?: number;
    rowIndex?: number;
}) => void;

Ensure the specified column and/or row is visible (scrolling if necessary). This method can be used to safely scroll back to a cell that a user has scrolled away from even if it was previously scrolled to.
The align parameter (default "auto") controls the alignment of the cell: "auto" scrolls the least amount possible to ensure that the specified cell is fully visible (a cell larger than the Grid is aligned to its start, so that its start is visible); "start" aligns the cell to the top/left of the Grid and "end" to the bottom/right; "center" aligns the cell in the middle of the Grid.
This is a one-time scroll: the cell is not kept in view afterwards (e.g. if the Grid's size or its cell sizes change). Cells that haven't been measured yet (e.g. by CellMeasurer) are positioned using their estimated sizes. Nothing is scrolled while the Grid's width or height is 0. The column is ignored for single-column grids (e.g. List, Table).
If the Grid has a scrollElement, the scroll element (e.g. the window) is scrolled vertically instead.

method scrollToPosition

scrollToPosition: (params: ScrollPosition) => void;

Scroll to the specified offset(s); an omitted offset is left unchanged. Offsets are clamped to the scrollable range. Calling this method with the current offsets does nothing.
If the Grid has a scrollElement, scrollTop scrolls the scroll element (e.g. the window) instead (to the position at which the Grid is scrolled by scrollTop).

interface InfiniteLoaderChildInstance

interface InfiniteLoaderChildInstance {}

Structural type describing the virtualized component registered via registerChild: either a component instance or a function component's imperative handle (e.g. List, Table, Grid or MultiGrid).
Once rows have finished loading, InfiniteLoader re-renders the child by calling the **first** of these methods that it implements: recomputeGridSize, recomputeRowHeights, forceUpdateGrid, forceUpdate. Function components have no forceUpdate() method, so a custom function component child should expose one of the other methods through its imperative handle (e.g. via useImperativeHandle).

method forceUpdate

forceUpdate: () => void;

Forces a class component to re-render; used only if none of the other methods are defined. (Function components have no forceUpdate(); expose one of the other methods instead.)

method forceUpdateGrid

forceUpdateGrid: () => void;

Re-renders the inner Grid (e.g. List or Table); used if neither recompute method is defined.

method recomputeGridSize

recomputeGridSize: (params?: Partial<CellPosition>) => void;

Recomputes cell sizes and re-renders (e.g. Grid, List, Table or MultiGrid); preferred over the other methods if defined. Note that InfiniteLoader calls this method with the most recently rendered start index ({ rowIndex }).

method recomputeRowHeights

recomputeRowHeights: (index?: number) => void;

Recomputes row heights after the specified index and re-renders (e.g. List or Table); used if recomputeGridSize is not defined. Note that InfiniteLoader calls this method with the most recently rendered start index.

interface InfiniteLoaderImperativeAPI

interface InfiniteLoaderImperativeAPI {}

Imperative API exposed by InfiniteLoader (e.g. via useRef<InfiniteLoaderImperativeAPI>(null)).

method resetLoadMoreRowsCache

resetLoadMoreRowsCache: (autoReload?: boolean) => void;

Reset any cached data about already-loaded rows. This method should be called if any/all loaded data needs to be refetched (e.g. a filtered list where the search criteria changes). If autoReload is true, the last loaded batch will be automatically reloaded.

interface ListImperativeAPI

interface ListImperativeAPI {}

Public (imperative) methods of a List (its ref handle). The handle is also passed to rowRenderer as parent (e.g. for CellMeasurer).

method forceUpdateGrid

forceUpdateGrid: () => void;

Forcefully re-render the inner Grid component.
Re-rendering a List with the same props does not re-render its rows (both List and the inner Grid are memoized). Use this method if you want to manually trigger a re-render. This may be appropriate if the underlying row data has changed but the row sizes themselves have not.

method getOffsetForRow

getOffsetForRow: (params?: {
    align?: Alignment;
    alignment?: Alignment;
    index?: number;
}) => number;

Gets the vertical offset (scrollTop) for a given row and alignment (see scrollToRow for the align values). The alignment defaults to "auto"; an index of -1 (the default) refers to the last row.
alignment is a deprecated alias of align (align takes precedence if both are specified).

method invalidateCellSizeAfterRender

invalidateCellSizeAfterRender: (params: CellPosition) => void;

Invalidate the size of a row (after the current render has been committed); see Grid#invalidateCellSizeAfterRender. This method is intended for CellMeasurer.

method measureAllRows

measureAllRows: () => void;

Pre-measure all rows in a List.
Typically rows are only measured as needed and estimated heights are used for cells that have not yet been measured. This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one).

method recomputeGridSize

recomputeGridSize: (params?: Partial<CellPosition>) => void;

Recompute row heights and offsets after the specified row index (defaults to 0); see Grid#recomputeGridSize. (The column index is ignored.) This method is intended for CellMeasurer; also see recomputeRowHeights.

method recomputeRowHeights

recomputeRowHeights: (index?: number) => void;

Recompute row heights and offsets after the specified index (defaults to 0).
List has no way of knowing when its underlying list data has changed since it only receives a rowHeight property. If the rowHeight is a number it can compare before and after values but if it is a function that comparison is error prone. In the event that a dynamic rowHeight function is in use and the row heights have changed this function should be manually called by the "smart" container parent.
This method will also force a render cycle (via forceUpdate) to ensure that the updated measurements are reflected in the rendered list.

method scrollToCell

scrollToCell: (params: {
    align?: Alignment;
    columnIndex?: number;
    rowIndex?: number;
}) => void;

Ensure the specified row is visible (scrolling if necessary); the column index is ignored. This allows a List to be used with ArrowKeyStepper; also see scrollToRow.

method scrollToPosition

scrollToPosition: (params: ScrollPosition) => void;

Scroll to the specified vertical offset; scrollLeft is ignored (lists don't scroll horizontally). Offsets are clamped to the scrollable range. This allows a List to be used with ScrollSync. Useful for animating position changes.
If the List has a scrollElement, the scroll element (e.g. the window) is scrolled instead.

method scrollToRow

scrollToRow: (params: { align?: Alignment; index: number }) => void;

Ensure the row at the specified index is visible (scrolling if necessary). This method can be used to safely scroll back to a row that a user has scrolled away from even if it was previously scrolled to.
The align parameter (default "auto") controls the alignment of the row: "auto" scrolls the least amount possible to ensure that the specified row is fully visible (a row taller than the list is aligned to its start, so that its start is visible); "start" aligns the row to the top of the list and "end" to the bottom; "center" aligns it in the middle. This is a one-time scroll: the row is not kept in view afterwards (e.g. if the list's size or its row heights change). Rows that haven't been measured yet (e.g. by CellMeasurer) are positioned using their estimated heights.
If the List has a scrollElement, the scroll element (e.g. the window) is scrolled instead.

interface MasonryImperativeAPI

interface MasonryImperativeAPI {}

Imperative API of a Masonry (accessed using a ref, eg useRef<MasonryImperativeAPI>(null)). This is also the parent value passed to cellRenderer (for CellMeasurer).

method clearCellPositions

clearCellPositions: () => void;

Clears the internal position cache and re-renders. Cells are positioned again (by the cellPositioner) as they are rendered.

method forceUpdate

forceUpdate: () => void;

Forcefully re-renders the Masonry (and its visible cells).
Re-rendering a Masonry with the same props does not re-render its cells (it is memoized). Use this method if the underlying cell data has changed but the props have not.

method invalidateCellSizeAfterRender

invalidateCellSizeAfterRender: (params: MasonryCellPosition) => void;

Notifies the Masonry that the specified cell has been measured for the first time (while rendering); the cell is positioned (by the cellPositioner) once the current render has been committed, then the Masonry re-renders. Only rowIndex (the cell's index) is used. This method is intended for CellMeasurer.

method recomputeCellPositions

recomputeCellPositions: () => void;

Resets the internal position cache, synchronously re-computes the positions of all measured cells (by calling the cellPositioner for each of them, in index order), then re-renders. Reset the cellPositioner (e.g. with its reset method) before calling this method.

method recomputeGridSize

recomputeGridSize: (params?: Partial<MasonryCellPosition>) => void;

Re-renders the Masonry, e.g. after more cells have been loaded (this method is called by InfiniteLoader) or a cell has been re-measured (it is called by CellMeasurer's measure function). Parameters (the index of the first changed cell, as rowIndex) are accepted for compatibility with Grid and ignored.
Cached cell positions are not changed: to re-position cells after their sizes have changed, reset the cellPositioner and call recomputeCellPositions().

interface MultiGridImperativeAPI

interface MultiGridImperativeAPI {}

Public (imperative) methods of a MultiGrid instance.

method forceUpdateGrids

forceUpdateGrids: () => void;

Pass-thru that calls forceUpdate on all child Grids.

method invalidateCellSizeAfterRender

invalidateCellSizeAfterRender: (params?: Partial<CellPosition>) => void;

Invalidate the size of a cell (after the current render has been committed); see Grid#invalidateCellSizeAfterRender. The invalidated cells (of all child Grids) are recomputed, and the MultiGrid re-rendered, once the current render has been committed. This method is intended for CellMeasurer.

method measureAllCells

measureAllCells: () => void;

Pass-thru that calls measureAllCells on all child Grids.

method recomputeGridSize

recomputeGridSize: (params?: {
    columnIndex?: number;
    rowIndex?: number;
}) => void;

Pass-thru that calls recomputeGridSize on all child Grids (adjusting the specified indices for fixed rows and columns). Both indices default to 0.
This also recomputes the MultiGrid's own layout (the height of the fixed rows and the width of the fixed columns) and re-renders it.

method scrollToCell

scrollToCell: (params: {
    align?: Alignment;
    columnIndex?: number;
    rowIndex?: number;
}) => void;

Ensure the specified column and/or row is visible (scrolling if necessary); see Grid#scrollToCell. Indices include the fixed columns and rows (which are always visible, so they are not scrolled to). The fixed rows and columns are kept in sync with the scrolled section.

method scrollToPosition

scrollToPosition: (params: ScrollPosition) => void;

Scroll to the specified offset(s) of the scrollable (bottom-right) section; see Grid#scrollToPosition. The fixed rows and columns are kept in sync with it. This allows a MultiGrid to be used with ScrollSync.

interface TableImperativeAPI

interface TableImperativeAPI {}

Public (imperative) methods of a Table instance.

method forceUpdateGrid

forceUpdateGrid: () => void;

Forcefully re-render the inner Grid component.
Calling forceUpdate on Table may not re-render the inner Grid since it uses shallowCompare as a performance optimization. Use this method if you want to manually trigger a re-render. This may be appropriate if the underlying row data has changed but the row sizes themselves have not.

method getOffsetForRow

getOffsetForRow: (params?: {
    align?: Alignment;
    alignment?: Alignment;
    index?: number;
}) => number;

Gets offset for a given row and alignment (align; alignment is a deprecated alias). The alignment defaults to "auto"; an index of -1 (the default) refers to the last row.

method getScrollbarWidth

getScrollbarWidth: () => number;

Gets the scrollbar width used to pad the table-header.

method invalidateCellSizeAfterRender

invalidateCellSizeAfterRender: (params: CellPosition) => void;

Invalidate the size of a row (after the current render has been committed); see Grid#invalidateCellSizeAfterRender. This method is intended for CellMeasurer.

method measureAllRows

measureAllRows: () => void;

Pre-measure all rows in a Table.
Typically rows are only measured as needed and estimated heights are used for cells that have not yet been measured. This method ensures that the next call to getTotalSize() returns an exact size (as opposed to just an estimated one).

method recomputeGridSize

recomputeGridSize: (params?: Partial<CellPosition>) => void;

Recompute row heights and offsets after the specified row index (defaults to 0); see Grid#recomputeGridSize. (The column index is ignored.) This method is intended for CellMeasurer; also see recomputeRowHeights.

method recomputeRowHeights

recomputeRowHeights: (index?: number) => void;

Recompute row heights and offsets after the specified index (defaults to 0).
Table has no way of knowing when its underlying list data has changed since it only receives a rowHeight property. If the rowHeight is a number it can compare before and after values but if it is a function that comparison is error prone. In the event that a dynamic rowHeight function is in use and the row heights have changed this function should be manually called by the "smart" container parent.
This method will also force a render cycle (via forceUpdate) to ensure that the updated measurements are reflected in the rendered table.

method scrollToCell

scrollToCell: (params: {
    align?: Alignment;
    columnIndex?: number;
    rowIndex?: number;
}) => void;

Ensure the specified row is visible (scrolling if necessary); the column index is ignored. This allows a Table to be used with ArrowKeyStepper; also see scrollToRow.

method scrollToPosition

scrollToPosition: (params: ScrollPosition) => void;

Scroll to the specified vertical offset; scrollLeft is ignored (tables don't scroll horizontally). Offsets are clamped to the scrollable range. This allows a Table to be used with ScrollSync. Useful for animating position changes.
If the Table has a scrollElement, the scroll element (e.g. the window) is scrolled instead.

method scrollToRow

scrollToRow: (params: { align?: Alignment; index: number }) => void;

Ensure the row at the specified index is visible (scrolling if necessary). This method can be used to safely scroll back to a row that a user has scrolled away from even if it was previously scrolled to.
The align parameter (default "auto") controls the alignment of the row: "auto" scrolls the least amount possible to ensure that the specified row is fully visible (a row taller than the table is aligned to its start, so that its start is visible); "start" aligns the row to the top of the table and "end" to the bottom; "center" aligns it in the middle. This is a one-time scroll: the row is not kept in view afterwards (e.g. if the table's size or its row heights change). Rows that haven't been measured yet (e.g. by CellMeasurer) are positioned using their estimated heights.
If the Table has a scrollElement, the scroll element (e.g. the window) is scrolled instead.

Type Aliases

type Alignment

type Alignment = 'auto' | 'end' | 'start' | 'center';

Alignment of a scrolled-to cell within the Grid.

type ArrowKeyStepperChildProps

type ArrowKeyStepperChildProps = {
    /**
     * Pass-through callback to be attached to the child component (e.g. `Grid`'s `onSectionRendered` prop);
     * informs the key-stepper which range of cells are currently visible.
     */
    onSectionRendered: (params: ArrowKeyStepperRenderedSection) => void;
    /**
     * Stable ref callback to be attached to the decorated component (e.g. `<Grid ref={registerChild} />`).
     * Whenever the active cell (`scrollToColumn`/`scrollToRow`) changes, `ArrowKeyStepper` scrolls it into view
     * by calling `scrollToCell({ columnIndex, rowIndex })` on the registered component.
     * The active cell is also scrolled into view when a component is first registered.
     */
    registerChild: (child: ArrowKeyStepperChild | null) => void;
    /**
     * Column index of the active cell.
     * It is scrolled into view automatically (see `registerChild`); it can also be used to e.g. highlight the active cell.
     */
    scrollToColumn: number;
    /**
     * Row index of the active cell.
     * It is scrolled into view automatically (see `registerChild`); it can also be used to e.g. highlight the active cell.
     */
    scrollToRow: number;
};

Parameters passed to the ArrowKeyStepper children render function.

type ArrowKeyStepperProps

type ArrowKeyStepperProps = {
    /**
     * Function responsible for rendering children.
     * It is passed `onSectionRendered` and `registerChild` parameters, which should be attached to the decorated
     * virtualized component (e.g. `<Grid onSectionRendered={onSectionRendered} ref={registerChild} />`),
     * and the `scrollToColumn` and `scrollToRow` indices of the active cell (e.g. to highlight it).
     * The active cell is scrolled into view through the registered component's `scrollToCell` method.
     */
    children: (params: ArrowKeyStepperChildProps) => ReactNode;
    /** CSS class name to attach to the wrapper `<div>`. */
    className?: string;
    /** Number of columns in grid; for `Table` and `List` this property should always be `1`. */
    columnCount: number;
    /**
     * Disables all scrolling using arrow-keys.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * This component is "controlled"; it will not update `scrollToColumn` or `scrollToRow` itself.
     * This property should be used with `onScrollToChange`.
     *
     * @default false
     */
    isControlled?: boolean;
    /**
     * Controls behavior of stepper when arrow key direction changes.
     * "cells" means that the index will only increment or decrement by 1;
     * "edges" means that the opposite side of the grid will be incremented.
     *
     * @default "edges"
     */
    mode?: 'cells' | 'edges';
    /** Called when arrow key navigation should update the current scroll-to values. */
    onScrollToChange?: (params: ScrollIndices) => void;
    /** Number of rows in grid. */
    rowCount: number;
    /**
     * Default/initial `scrollToColumn` value.
     * When `isControlled` is true, this is the current `scrollToColumn` value.
     *
     * @default 0
     */
    scrollToColumn?: number;
    /**
     * Default/initial `scrollToRow` value.
     * When `isControlled` is true, this is the current `scrollToRow` value.
     *
     * @default 0
     */
    scrollToRow?: number;
};

type CellMeasurerCacheParams

type CellMeasurerCacheParams = {
    /**
     * Unmeasured cells will initially report this height
     * (or `minHeight`, if that is greater).
     *
     * @default 30
     */
    defaultHeight?: number;
    /**
     * Unmeasured cells will initially report this width
     * (or `minWidth`, if that is greater).
     *
     * @default 100
     */
    defaultWidth?: number;
    /**
     * Rendered cells will have a fixed height and a dynamic (measured) width.
     *
     * @default false
     */
    fixedHeight?: boolean;
    /**
     * Rendered cells will have a fixed width and a dynamic (measured) height.
     *
     * @default false
     */
    fixedWidth?: boolean;
    /**
     * Derived row height (of multiple cells) should not be less than this value.
     *
     * @default 0
     */
    minHeight?: number;
    /**
     * Derived column width (of multiple cells) should not be less than this value.
     *
     * @default 0
     */
    minWidth?: number;
    /**
     * Maps a cell's row and column index to a cache key, e.g. an item ID.
     * This prevents the cached measurements from being invalidated when the parent collection is modified
     * (e.g. items are inserted or reordered).
     * Defaults to a mapper that returns `` `${rowIndex}-${columnIndex}` ``.
     */
    keyMapper?: (rowIndex: number, columnIndex: number) => unknown;
};

type CellMeasurerChildFunction

type CellMeasurerChildFunction = (params: CellMeasurerChildParams) => ReactNode;

Function child of CellMeasurer.

type CellMeasurerChildParams

type CellMeasurerChildParams = {
    /**
     * Perform the cell measurements (e.g. after an image within the cell has loaded).
     * Calling this after the `CellMeasurer` has unmounted (e.g. from a timer or a load event) does nothing.
     *
     * This function is stable (it's the same function for the lifetime of the `CellMeasurer`).
     */
    measure: () => void;
    /**
     * Specify the DOM element to be measured; can be used as a `ref` (e.g. `<div ref={registerChild} />`).
     * By default the element returned by the function child is measured;
     * an element registered with `registerChild` takes precedence over it.
     * Use this when the element to be measured is nested within the returned element,
     * or when the returned element is a component that doesn't pass its `ref` along to a DOM element.
     *
     * This function is stable (it's the same function for the lifetime of the `CellMeasurer`).
     */
    registerChild: (element: Element | null | undefined) => void;
};

Parameters passed to a CellMeasurer function child.

type CellMeasurerProps

type CellMeasurerProps = {
    /**
     * Cache to be shared between `CellMeasurer` and its parent `Grid`.
     * Typically an instance of `CellMeasurerCache`.
     */
    cache: CellMeasureCache;
    /**
     * Either a React element as a child (eg `<div />`) or a function
     * (eg. `({ measure, registerChild }) => <div ref={registerChild} />`).
     *
     * `CellMeasurer` attaches a `ref` to the child element to find the DOM element to measure
     * (the child's own `ref`, if any, still receives the element).
     * So the child must be a DOM element (e.g. `<div>`) or a component that passes its `ref` along to one:
     * in React 19, a function component can pass its `ref` prop to a DOM element;
     * in React 18, function components must use `forwardRef` for this.
     *
     * The function receives a `measure` callback (to re-measure the cell, e.g. after an image has loaded)
     * and a `registerChild` callback (to specify the DOM element to be measured; can be used as a `ref`).
     * Use `registerChild` if the child doesn't pass its `ref` along to a DOM element,
     * or to measure an element nested within the child.
     *
     * Children that can't be measured (e.g. text, an array or a fragment, without `registerChild`) are rendered as-is,
     * and a warning is logged in development mode.
     */
    children: ReactNode | CellMeasurerChildFunction;
    /**
     * Index of column being measured (within the parent `Grid`) or 0 (if used within a `List` or `Table`).
     *
     * @default 0
     */
    columnIndex?: number;
    /**
     * Index of row being measured; alias of `rowIndex` (as passed to a `List` row renderer).
     * Only used if `rowIndex` is not specified.
     */
    index?: number;
    /**
     * Reference to the parent `Grid` (or `List`, `Table`, `MultiGrid`, `Masonry`);
     * this value is passed by `Grid` to the `cellRenderer` and should be passed along as-is.
     */
    parent: CellMeasurerParent;
    /**
     * Index of row being measured (within the parent `Grid`).
     * Defaults to `index` (or 0 if neither is specified).
     */
    rowIndex?: number;
};

type CellPosition

type CellPosition = {
    columnIndex: number;
    rowIndex: number;
};

Identifies a cell by its column and row index.

type CellRangeRenderer

type CellRangeRenderer = (params: CellRangeRendererParams) => ReactNode[];

Responsible for rendering a group of cells given their index ranges.

type CellRangeRendererParams

type CellRangeRendererParams = {
    /** Temporary cell cache used while scrolling. */
    cellCache: CellCache;
    /** Cell renderer prop supplied to Grid. */
    cellRenderer: CellRenderer;
    /** Manages size and position metadata of columns. */
    columnSizeAndPositionManager: ScalingCellSizeAndPositionManager;
    /** Index of first column (inclusive) to render. */
    columnStartIndex: number;
    /** Index of last column (inclusive) to render. */
    columnStopIndex: number;
    /** CellMeasurer cache, if one was passed to Grid. */
    deferredMeasurementCache?: CellMeasureCache;
    /** Horizontal pixel offset (required for scaling). */
    horizontalOffsetAdjustment: number;
    /** The Grid is currently being scrolled. */
    isScrolling: boolean;
    /** Always cache cells (even when the Grid is not scrolling). */
    isScrollingOptOut: boolean;
    /** Reference to the parent Grid instance (or the component that wraps it). */
    parent: CellMeasurerParent;
    /** Manages size and position metadata of rows. */
    rowSizeAndPositionManager: ScalingCellSizeAndPositionManager;
    /** Index of first row (inclusive) to render. */
    rowStartIndex: number;
    /** Index of last row (inclusive) to render. */
    rowStopIndex: number;
    /** Current horizontal scroll offset of Grid. */
    scrollLeft: number;
    /** Current vertical scroll offset of Grid. */
    scrollTop: number;
    /** Temporary style (size & position) cache used while scrolling. */
    styleCache: StyleCache;
    /** Vertical pixel offset (required for scaling). */
    verticalOffsetAdjustment: number;
    /** Range of visible (not overscanned) columns. */
    visibleColumnIndices: VisibleCellRange;
    /** Range of visible (not overscanned) rows. */
    visibleRowIndices: VisibleCellRange;
};

Parameters passed to a Grid cellRangeRenderer.

type CellRenderer

type CellRenderer = (
    props: CellRendererParams
) => ReactElement | false | null | undefined;

Responsible for rendering a single cell, given its row and column index. Cells must be rendered with the key and style parameters provided.

type CellRendererParams

type CellRendererParams = {
    /** Horizontal (column) index of cell. */
    columnIndex: number;
    /** The Grid is currently being scrolled. */
    isScrolling: boolean;
    /** This cell is visible within the grid (eg it is not an overscanned cell). */
    isVisible: boolean;
    /** Unique key within array of cells. */
    key: string;
    /**
     * Reference to the parent Grid instance (or the component that wraps it, eg `MultiGrid`).
     * This value can be passed as-is to `CellMeasurer`.
     */
    parent: CellMeasurerParent;
    /** Vertical (row) index of cell. */
    rowIndex: number;
    /**
     * Style object to be applied to cell (to position it).
     * This must be passed through to the rendered cell element.
     */
    style: CSSProperties;
};

Parameters passed to a Grid cellRenderer.

type CellSize

type CellSize = CellSizeGetter | number;

Either a fixed cell size (number) or a function that returns the size of a cell given its index.

type ColumnProps

type ColumnProps = {
    /** Optional aria-label value to set on the column header. */
    'aria-label'?: string;
    /**
     * Callback responsible for returning a cell's data, given its `dataKey`:
     * `({ columnData: any, dataKey: string, rowData: any }): any`.
     *
     * The default `cellDataGetter` expects to operate on either a vanilla Object or a Map-like object with a `get` method.
     * You should override it if your data is calculated or requires any custom processing.
     * Defaults to `defaultTableCellDataGetter`.
     */
    cellDataGetter?: TableCellDataGetter;
    /**
     * Callback responsible for rendering a cell's contents:
     * `({ cellData: any, columnData: any, columnIndex: number, dataKey: string, isScrolling: boolean, parent: TableImperativeAPI, rowData: any, rowIndex: number }): ReactNode`.
     *
     * The default `cellRenderer` (`defaultTableCellRenderer`) displays an attribute as a simple string.
     * You should override it if your data is some other type of object or requires custom formatting.
     */
    cellRenderer?: TableCellRenderer;
    /** Optional CSS class to apply to the rendered cell container. */
    className?: string;
    /**
     * Additional data passed to this column's `cellDataGetter`, `cellRenderer`, and `headerRenderer`.
     * Use this object to relay action-creators or relational data.
     */
    columnData?: any;
    /**
     * Uniquely identifies the row-data attribute corresponding to this cell
     * (eg this might be "name" in an array of user objects).
     */
    dataKey: string;
    /**
     * Default sort order when clicked for the first time.
     * @default "ASC"
     */
    defaultSortDirection?: SortDirectionType;
    /** If sort is enabled for the table at large, disable it for this column. */
    disableSort?: boolean;
    /**
     * Flex grow style.
     * @default 0
     */
    flexGrow?: number;
    /**
     * Flex shrink style.
     * @default 1
     */
    flexShrink?: number;
    /** Optional CSS class to apply to this column's header. */
    headerClassName?: string;
    /**
     * Optional callback responsible for rendering a column's header contents:
     * `({ columnData: any, dataKey: string, disableSort: boolean, label: ReactNode, sortBy: string, sortDirection: SortDirection }): ReactNode`.
     *
     * The default `headerRenderer` (`defaultTableHeaderRenderer`) displays the column `label` along with a sort indicator if the column is sort-enabled and active.
     */
    headerRenderer?: TableHeaderRenderer;
    /** Optional inline style to apply to this column's header. */
    headerStyle?: CSSProperties;
    /** Optional id to set on the column header; used for the cells' `aria-describedby`. */
    id?: string;
    /** Header label for this column. */
    label?: ReactNode;
    /** Maximum width of column; this property will only be used if `flexGrow` is greater than 0. */
    maxWidth?: number;
    /** Minimum width of column. */
    minWidth?: number;
    /**
     * Optional inline style to apply to the rendered cell container.
     * @default {}
     */
    style?: CSSProperties;
    /**
     * Flex basis (width) for this column;
     * This value can grow or shrink based on `flexGrow` and `flexShrink` properties.
     */
    width: number;
};

Props of a Column. Table reads these from the props of each of its child elements (applying defaultColumnProps), so a component that renders a Column and accepts these props can be used as a column as well.

type ColumnSizerProps

type ColumnSizerProps = {
    /**
     * Function responsible for rendering a virtualized `Grid`.
     * It is passed `{ adjustedWidth, columnWidth, getColumnWidth, registerChild }`.
     *
     * The `columnWidth` value should be passed to the `Grid`'s `columnWidth` property,
     * and `registerChild` should be passed to the `Grid`'s `ref` property.
     * The `adjustedWidth` value is optional; it reflects the lesser of the overall width or the width of all columns.
     */
    children: (params: ColumnSizerChildProps) => ReactNode;
    /** Optional maximum allowed column width. */
    columnMaxWidth?: number;
    /** Optional minimum allowed column width. */
    columnMinWidth?: number;
    /** Number of columns in the `Grid` or `Table` child. */
    columnCount: number;
    /** Width of the `Grid` or `Table` child. */
    width: number;
};

type GridProps

type GridProps = {
    /**
     * ARIA label for the grid element.
     * @default "grid"
     */
    'aria-label'?: string;
    /**
     * ARIA readonly attribute for the grid element.
     * @default true
     */
    'aria-readonly'?: boolean;
    /**
     * Set the width of the inner scrollable container to 'auto'.
     * This is useful for single-column Grids to ensure that the column doesn't extend below a vertical scrollbar.
     * @default false
     */
    autoContainerWidth?: boolean;
    /**
     * Responsible for rendering a group of cells given their index ranges.
     *
     * This is an advanced property.
     * It is useful for situations where the `Grid` requires additional, overlayed UI (such as a Gantt chart or a calendar application).
     * The easiest way to override it is to decorate `defaultCellRangeRenderer`.
     *
     * Defaults to `defaultCellRangeRenderer`.
     */
    cellRangeRenderer?: CellRangeRenderer;
    /**
     * Responsible for rendering a cell given an row and column index.
     * It receives `columnIndex`, `isScrolling`, `isVisible`, `key`, `parent`, `rowIndex`, and `style` parameters.
     *
     * The `style` parameter specifies how the cell is to be sized and positioned and must be passed through to the rendered cell element.
     * The `key` parameter must also be applied to the rendered element.
     */
    cellRenderer: CellRenderer;
    /**
     * Optional custom CSS class name to attach to root `Grid` element.
     */
    className?: string;
    /**
     * Number of columns in grid.
     */
    columnCount: number;
    /**
     * Either a fixed column width (number) or a function that returns the width of a column given its index: `({ index: number }): number`.
     * If function is used, specify `estimatedColumnSize` for more consistent scrolling behavior.
     */
    columnWidth: CellSize;
    /**
     * Additional props (eg `onWheel`) to spread onto the outer `Grid` element.
     */
    containerProps?: HTMLAttributes<HTMLDivElement>;
    /**
     * ARIA role for the inner cell-container.
     * @default "row"
     */
    containerRole?: string;
    /**
     * Optional custom inline style to attach to inner cell-container element.
     * @default {}
     */
    containerStyle?: CSSProperties;
    /**
     * If CellMeasurer is used to measure this Grid's children, this should be a pointer to its CellMeasurerCache.
     * A shared CellMeasurerCache reference enables Grid and CellMeasurer to share measurement data.
     */
    deferredMeasurementCache?: CellMeasureCache;
    /**
     * Reference to the outer (scrolling) DOM element.
     */
    elementRef?: Ref<HTMLDivElement>;
    /**
     * Used to estimate the total width of a `Grid` before all of its columns have actually been measured.
     * The estimated total width is adjusted as columns are rendered.
     * @default 100
     */
    estimatedColumnSize?: number;
    /**
     * Used to estimate the total height of a `Grid` before all of its rows have actually been measured.
     * The estimated total height is adjusted as rows are rendered.
     * @default 30
     */
    estimatedRowSize?: number;
    /**
     * Returns the size of the browser's scrollbar.
     * Exposed for testing purposes only.
     *
     * Defaults to `dom-helpers`' `scrollbarSize` (which returns `undefined` during server rendering).
     */
    getScrollbarSize?: () => number;
    /**
     * Height of Grid; this property determines the number of visible (vs virtualized) rows.
     * Required, unless a `scrollElement` is specified.
     *
     * With a `scrollElement`, the height of the scroll element's viewport is used instead;
     * this prop is then only used until the scroll element has been measured (e.g. during server rendering).
     */
    height?: number;
    /**
     * Optional custom id to attach to root `Grid` element.
     */
    id?: string;
    /**
     * Horizontal scroll offset to initially render (and scroll to) the `Grid` at.
     * Only the initial value is used: changing this prop later has no effect (use `scrollToPosition` to scroll).
     * This also works with server rendering: the cells at this offset are rendered on the server,
     * and they stay in place when the page is hydrated.
     */
    initialScrollLeft?: number;
    /**
     * Vertical scroll offset to initially render (and scroll to) the `Grid` at.
     * Only the initial value is used: changing this prop later has no effect (use `scrollToPosition` to scroll).
     * This also works with server rendering: the cells at this offset are rendered on the server,
     * and they stay in place when the page is hydrated.
     * Ignored if a `scrollElement` is specified (which then determines the vertical offset).
     */
    initialScrollTop?: number;
    /**
     * Prevents re-rendering of visible cells on scroll end.
     * (Opts out of the isScrolling param passed to cellRangeRenderer, to avoid the extra render when scroll stops.)
     * Visible cells are still re-rendered when the `Grid`'s props change or `forceUpdate()` is called.
     * @default false
     */
    isScrollingOptOut?: boolean;
    /**
     * Optional renderer to be rendered inside the grid when either `rowCount` or `columnCount` is empty.
     * Renders nothing by default.
     */
    noContentRenderer?: NoContentRenderer;
    /**
     * Callback invoked whenever the scroll offset changes within the inner scrollable region:
     * `({ clientHeight: number, clientWidth: number, scrollHeight: number, scrollLeft: number, scrollTop: number, scrollWidth: number }): void`.
     * This callback can be used to sync scrolling between lists, tables, or grids.
     */
    onScroll?: (params: Scroll) => void;
    /**
     * Called whenever a horizontal or vertical scrollbar is added or removed:
     * `({ horizontal: boolean, size: number, vertical: boolean }): void`.
     * This prop is not intended for end-user use;
     * it is used by MultiGrid to support fixed-row/fixed-column scroll syncing.
     */
    onScrollbarPresenceChange?: (params: ScrollbarPresenceChange) => void;
    /**
     * Callback invoked with information about the section of the Grid that was just rendered.
     * This callback is only invoked when visible rows have changed:
     * `({ columnOverscanStartIndex: number, columnOverscanStopIndex: number, columnStartIndex: number, columnStopIndex: number, rowOverscanStartIndex: number, rowOverscanStopIndex: number, rowStartIndex: number, rowStopIndex: number }): void`.
     */
    onSectionRendered?: (params: RenderedSection) => void;
    /**
     * Number of columns to render before/after the visible slice of the grid.
     * This can help reduce flickering during scrolling on certain browsers/devices.
     *
     * Note that this property has performance implications: the higher the value, the more work needs to be done in reaction to each scroll event.
     * Aim to use the lowest value possible that still generally avoids any empty space from appearing during normal scrolling.
     * @default 0
     */
    overscanColumnCount?: number;
    /**
     * Responsible for calculating the number of cells to overscan before and after a specified range.
     * By default, cells are overscanned in the direction the user is scrolling.
     * This function receives `direction`, `cellCount`, `scrollDirection`, `overscanCellsCount`, `startIndex`, and `stopIndex` parameters
     * and returns an `{ overscanStartIndex, overscanStopIndex }` object.
     *
     * Defaults to `defaultOverscanIndicesGetter`.
     */
    overscanIndicesGetter?: OverscanIndicesGetter;
    /**
     * Number of rows to render above/below the visible slice of the grid.
     * This can help reduce flickering during scrolling on certain browsers/devices.
     *
     * Note that this property has performance implications: the higher the value, the more work needs to be done in reaction to each scroll event.
     * The default value (10) is a good starting point; lower it if possible.
     * @default 10
     */
    overscanRowCount?: number;
    /**
     * Optional override of ARIA role default.
     * @default "grid"
     */
    role?: string;
    /**
     * Number of rows in grid.
     */
    rowCount: number;
    /**
     * Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`.
     * If function is used, specify `estimatedRowSize` for more consistent scrolling behavior.
     */
    rowHeight: CellSize;
    /**
     * Element that scrolls the `Grid` (instead of the `Grid` scrolling itself): `"window"`, or a scrollable DOM element
     * (e.g. a container that the `Grid` is rendered within, along with other content).
     *
     * The `Grid` then renders at its full height (it may still scroll horizontally itself), renders only the rows visible within the scroll element's viewport,
     * and its scroll methods scroll the scroll element.
     * Its position within the scroll element is measured when the scroll element scrolls or is resized, and when the `Grid` re-renders
     * (e.g. call `forceUpdate()` if content above the `Grid` changes size without the `Grid` re-rendering).
     * Pass `null` while the scroll element isn't available yet (e.g. before a ref to it has been attached);
     * the `Grid` then renders the rows at its top.
     */
    scrollElement?: ScrollElement | null;
    /**
     * Wait this amount of time (in milliseconds) after the last scroll event before resetting Grid `pointer-events`.
     * @default 150
     */
    scrollingResetTimeInterval?: number;
    /**
     * Optional custom inline style to attach to root `Grid` element.
     * @default {}
     */
    style?: CSSProperties;
    /**
     * Optional override of tab index default.
     * @default 0
     */
    tabIndex?: number | null;
    /**
     * Width of Grid; this property determines the number of visible (vs virtualized) columns.
     */
    width: number;
};

type InfiniteLoaderProps

type InfiniteLoaderProps = {
    /**
     * Function responsible for rendering a virtualized component.
     * It is passed `onRowsRendered` and `registerChild` parameters.
     * The `onRowsRendered` function should be passed through to the child's `onRowsRendered` property.
     * The `registerChild` callback should be set as the virtualized component's `ref`.
     */
    children: (params: InfiniteLoaderChildProps) => ReactNode;
    /**
     * Function responsible for tracking the loaded state of each row.
     * Rows that are currently loading can be treated as loaded to avoid requesting them multiple times.
     */
    isRowLoaded: (params: { index: number }) => boolean;
    /**
     * Callback to be invoked when more rows must be loaded.
     * The returned Promise should be resolved once row data has finished loading.
     * It will be used to determine when to refresh the list with the newly-loaded data.
     * This callback may be called multiple times in reaction to a single scroll event.
     */
    loadMoreRows: (params: IndexRange) => Promise<unknown> | void;
    /**
     * Minimum number of rows to be loaded at a time.
     * This property can be used to batch requests to reduce HTTP requests.
     *
     * @default 10
     */
    minimumBatchSize?: number;
    /**
     * Number of rows in list; can be arbitrary high number if actual number is unknown.
     *
     * @default 0
     */
    rowCount?: number;
    /**
     * Threshold at which to pre-fetch data.
     * A threshold X means that data will start loading when a user scrolls within X rows.
     *
     * @default 15
     */
    threshold?: number;
};

type ListProps

type ListProps = Omit<GridProps, OverriddenGridPropKeys> & {
    /**
     * ARIA label for the list element. There is no default label.
     * (With `role="grid"`, it defaults to `"grid"`, as in version 9.)
     */
    'aria-label'?: string;
    /**
     * ARIA readonly attribute for the list element.
     * Not set by default (it doesn't apply to `role="list"`); with `role="grid"`, it defaults to `true`.
     */
    'aria-readonly'?: boolean;
    /**
     * ARIA role for the inner container of the rows.
     * Defaults to `"presentation"` (so that the rows belong to the list), or to `"row"` with `role="grid"`.
     */
    containerRole?: string;
    /**
     * ARIA role for the list element.
     * With the default `"list"`, rows that don't specify a `role` get `role="listitem"` (#1657).
     * Pass `"grid"` for the version 9 roles (a `grid` element whose rows are `gridcell`s within a single `row`).
     * @default "list"
     */
    role?: string;
    /**
     * Optional custom CSS class name to attach to root `List` element.
     */
    className?: string;
    /**
     * Used to estimate the total height of a `List` before all of its rows have actually been measured.
     * The estimated total height is adjusted as rows are rendered.
     * @default 30
     */
    estimatedRowSize?: number;
    /**
     * Height constraint for list (determines how many actual rows are rendered).
     * Required, unless a `scrollElement` is specified.
     *
     * With a `scrollElement`, the height of the scroll element's viewport is used instead;
     * this prop is then only used until the scroll element has been measured (e.g. during server rendering).
     */
    height?: number;
    /**
     * Optional custom id to attach to root `List` element.
     */
    id?: string;
    /**
     * Callback used to render placeholder content when `rowCount` is 0.
     * By default, nothing is rendered.
     */
    noRowsRenderer?: NoContentRenderer;
    /**
     * Callback invoked with information about the slice of rows that were just rendered:
     * `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void`.
     */
    onRowsRendered?: (params: RenderedRows) => void;
    /**
     * Callback invoked whenever the scroll offset changes within the inner scrollable region:
     * `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void`.
     * This callback can be used to sync scrolling between lists, tables, or grids.
     */
    onScroll?: (params: Scroll_2) => void;
    /**
     * Responsible for calculating the number of rows to overscan before and after a specified range.
     * By default (`accessibilityOverscanIndicesGetter`), at least one row is overscanned in each direction (for accessibility).
     * See `Grid` `overscanIndicesGetter` for details.
     */
    overscanIndicesGetter?: OverscanIndicesGetter;
    /**
     * Number of rows to render above/below the visible bounds of the list.
     * This can help reduce flickering during scrolling on certain browsers/devices.
     *
     * Note that this property has performance implications: the higher the value, the more work needs to be done in reaction to each scroll event.
     * @default 10
     */
    overscanRowCount?: number;
    /**
     * Number of rows in list.
     */
    rowCount: number;
    /**
     * Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`.
     * If function is used, specify `estimatedRowSize` for more consistent scrolling behavior.
     */
    rowHeight: CellSize;
    /**
     * Responsible for rendering a row given its index.
     * It receives `index`, `isScrolling`, `isVisible`, `key`, `parent`, and `style` parameters.
     *
     * The `style` parameter specifies how the row is to be sized and positioned and must be passed through to the rendered row element.
     * The `key` parameter must also be applied to the rendered element.
     */
    rowRenderer: RowRenderer;
    /**
     * Element that scrolls the `List` (instead of the `List` scrolling itself): `"window"`, or a scrollable DOM element
     * (e.g. a container that the `List` is rendered within, along with other content).
     *
     * The `List` then renders at its full height, renders only the rows visible within the scroll element's viewport,
     * and its scroll methods scroll the scroll element.
     * Its position within the scroll element is measured when the scroll element scrolls or is resized, and when the `List` re-renders
     * (e.g. call `forceUpdateGrid()` if content above the `List` changes size without the `List` re-rendering).
     * Pass `null` while the scroll element isn't available yet (e.g. before a ref to it has been attached);
     * the `List` then renders the rows at its top.
     */
    scrollElement?: ScrollElement | null;
    /**
     * Optional custom inline style to attach to root `List` element.
     * @default {}
     */
    style?: CSSProperties;
    /**
     * Optional override of tab index default.
     * @default 0
     */
    tabIndex?: number | null;
    /**
     * Width of the list.
     */
    width: number;
};

List props. All other props are relayed to the inner Grid (see GridProps).

type MasonryProps

type MasonryProps = {
    /** Optional ARIA label to attach to root `Masonry` element. */
    'aria-label'?: string;
    /** Total number of items. */
    cellCount: number;
    /**
     * Caches item measurements (typically an instance of `CellMeasurerCache`).
     * Default sizes help `Masonry` decide how many images to batch-measure.
     */
    cellMeasurerCache: MasonryCellMeasurerCache;
    /**
     * Positions a cell given an index: `(index: number) => ({ left: number, top: number })`.
     * See `createMasonryCellPositioner` for a built-in positioner.
     */
    cellPositioner: Positioner;
    /**
     * Responsible for rendering a cell given an index:
     * `({ index: number, isScrolling: boolean, key: Key, parent: MasonryImperativeAPI, style: CSSProperties }) => ReactNode`.
     * The `style` param must be passed through to the rendered cell element.
     * The cell should typically be wrapped in a `CellMeasurer`.
     */
    cellRenderer: MasonryCellRenderer;
    /** Optional custom CSS class name to attach to root `Masonry` element. */
    className?: string | null;
    /**
     * Height of the component; this value determines the number of visible items.
     * Required, unless a `scrollElement` is specified.
     *
     * With a `scrollElement`, the height of the scroll element's viewport is used instead;
     * this prop is then only used until the scroll element has been measured (e.g. during server rendering).
     */
    height?: number;
    /** Optional custom id to attach to root `Masonry` element. */
    id?: string | null;
    /**
     * Maps an index to a unique id to store cached measurement and position info for a cell.
     * This prevents eg cached measurements from being invalidated when a collection is re-ordered.
     * Defaults to the identity function (`index => index`).
     */
    keyMapper?: MasonryKeyMapper;
    /**
     * Callback invoked with information about the cells that were most recently rendered.
     * This callback is only invoked when visible cells have changed:
     * `({ startIndex: number, stopIndex: number }): void`.
     * Does nothing by default.
     */
    onCellsRendered?: MasonryOnCellsRenderedCallback | null;
    /**
     * Callback invoked whenever the scroll offset changes within the inner scrollable region:
     * `({ clientHeight: number, scrollHeight: number, scrollTop: number }): void`.
     * Does nothing by default.
     */
    onScroll?: MasonryOnScrollCallback | null;
    /**
     * Render this many additional pixels above and below the viewport.
     * This helps reduce flicker when a user scrolls quickly.
     * @default 20
     */
    overscanByPixels?: number;
    /**
     * Optional override of ARIA role default.
     * @default "grid"
     */
    role?: string;
    /**
     * Row direction of items; can be "ltr" or "rtl".
     * @default "ltr"
     */
    rowDirection?: string;
    /**
     * Element that scrolls the `Masonry` (instead of the `Masonry` scrolling itself): `"window"`, or a scrollable DOM element
     * (e.g. a container that the `Masonry` is rendered within, along with other content).
     *
     * The `Masonry` then renders at its full height, and renders only the cells visible within the scroll element's viewport.
     * Its position within the scroll element is measured when the scroll element scrolls or is resized, and when the `Masonry` re-renders
     * (e.g. call `forceUpdate()` if content above the `Masonry` changes size without the `Masonry` re-rendering).
     * Pass `null` while the scroll element isn't available yet (e.g. before a ref to it has been attached);
     * the `Masonry` then renders the cells at its top.
     */
    scrollElement?: ScrollElement | null;
    /**
     * Wait this amount of time (in milliseconds) after the last scroll event before resetting `pointer-events`
     * (and the `isScrolling` parameter passed to `cellRenderer`).
     * @default 150
     */
    scrollingResetTimeInterval?: number;
    /**
     * Optional custom inline style to attach to root `Masonry` element.
     * @default {}
     */
    style?: CSSProperties;
    /**
     * Optional override of tab index default.
     * @default 0
     */
    tabIndex?: number;
    /** Width of the component; this value determines the number of visible items. */
    width: number;
};

type MultiGridProps

type MultiGridProps = Omit<
    GridProps,
    'height' | 'onScrollbarPresenceChange' | 'scrollElement' | 'style'
> & {
    /** Height of the `MultiGrid` (including its fixed rows); determines the number of visible (vs virtualized) rows. */
    height: number;
    /**
     * Optional custom className to attach to bottom-left `Grid` element.
     * @default ""
     */
    classNameBottomLeftGrid?: string;
    /**
     * Optional custom className to attach to bottom-right `Grid` element.
     * @default ""
     */
    classNameBottomRightGrid?: string;
    /**
     * Optional custom className to attach to top-left `Grid` element.
     * @default ""
     */
    classNameTopLeftGrid?: string;
    /**
     * Optional custom className to attach to top-right `Grid` element.
     * @default ""
     */
    classNameTopRightGrid?: string;
    /**
     * Fixed columns can be actively scrolled (e.g. with a mouse wheel while the cursor is over them).
     * @default false
     */
    enableFixedColumnScroll?: boolean;
    /**
     * Fixed rows can be actively scrolled (e.g. with a mouse wheel while the cursor is over them).
     * @default false
     */
    enableFixedRowScroll?: boolean;
    /**
     * Number of fixed columns.
     * @default 0
     */
    fixedColumnCount?: number;
    /**
     * Number of fixed rows.
     * @default 0
     */
    fixedRowCount?: number;
    /**
     * Optionally hides the bottom-left `Grid` scrollbar by adding an additional wrapper.
     * Only useful if `enableFixedColumnScroll` is set to `true`.
     * @default false
     */
    hideBottomLeftGridScrollbar?: boolean;
    /**
     * Optionally hides the top-right `Grid` scrollbar by adding an additional wrapper.
     * Only useful if `enableFixedRowScroll` is set to `true`.
     * @default false
     */
    hideTopRightGridScrollbar?: boolean;
    /**
     * Called whenever a horizontal or vertical scrollbar is added or removed from the bottom-right `Grid`:
     * `({ horizontal: boolean, size: number, vertical: boolean }): void`.
     */
    onScrollbarPresenceChange?: (params: ScrollbarPresenceChange) => void;
    /**
     * Optional custom inline style to attach to root `MultiGrid` element.
     * @default {}
     */
    style?: CSSProperties;
    /**
     * Optional custom inline style to attach to bottom-left `Grid` element.
     * @default {}
     */
    styleBottomLeftGrid?: CSSProperties;
    /**
     * Optional custom inline style to attach to bottom-right `Grid` element.
     * @default {}
     */
    styleBottomRightGrid?: CSSProperties;
    /**
     * Optional custom inline style to attach to top-left `Grid` element.
     * @default {}
     */
    styleTopLeftGrid?: CSSProperties;
    /**
     * Optional custom inline style to attach to top-right `Grid` element.
     * @default {}
     */
    styleTopRightGrid?: CSSProperties;
};

MultiGrid accepts most Grid props (most of which, eg cellRenderer, are relayed to all child Grids; some, eg columnCount and rowCount, are adjusted slightly to support fixed rows and columns), plus the following props.
A MultiGrid always scrolls itself (it doesn't support a scrollElement). To scroll a MultiGrid, use its imperative scrollToCell or scrollToPosition methods.

type MultiSortOptions

type MultiSortOptions = {
    /**
     * Fields to initially sort by, in order of importance.
     * (The array is copied; it isn't mutated.)
     */
    defaultSortBy?: string[] | null;
    /** Initial sort direction of each `defaultSortBy` field; fields not specified default to "ASC". */
    defaultSortDirection?: SortDirectionMap;
};

Options accepted by createMultiSort.

type MultiSortParams

type MultiSortParams = {
    /** Sort direction to use if the column is not already sorted. */
    defaultSortDirection: SortDirectionType;
    /**
     * The event that triggered the sort.
     * SHIFT + click appends a column to the existing sort criteria (or toggles its direction);
     * CONTROL/META + click removes a column from the sort criteria.
     */
    event: {
        ctrlKey: boolean;
        metaKey: boolean;
        shiftKey: boolean;
    };
    /** `dataKey` of the column that was clicked. */
    sortBy: string;
};

Parameters passed to the sort function returned by createMultiSort (compatible with the Table sort prop).

type MultiSortReturn

type MultiSortReturn = {
    /**
     * Sort property to be passed to the `Table` component.
     * This function replaces the `sortBy` and `sortDirection` values (and passes the new values to the sort callback).
     */
    sort: (params: MultiSortParams) => void;
    /**
     * Specifies the fields currently responsible for sorting data,
     * In order of importance.
     * A new array is created whenever the sort criteria change (it isn't mutated), so read it from this object when needed.
     */
    readonly sortBy: string[];
    /**
     * Specifies the direction a specific field is being sorted in.
     * A new object is created whenever the sort criteria change (it isn't mutated), so read it from this object when needed.
     */
    readonly sortDirection: SortDirectionMap;
};

Value returned by createMultiSort.

type NoContentRenderer

type NoContentRenderer = () => ReactNode;

Renders content to be shown when a Grid has no cells.

type OverscanIndicesGetter

type OverscanIndicesGetter = (
    params: OverscanIndicesGetterParams
) => OverscanIndices;

Calculates the number of cells to overscan before and after a specified range.

type RenderedSection

type RenderedSection = {
    columnOverscanStartIndex: number;
    columnOverscanStopIndex: number;
    columnStartIndex: number;
    columnStopIndex: number;
    rowOverscanStartIndex: number;
    rowOverscanStopIndex: number;
    rowStartIndex: number;
    rowStopIndex: number;
};

Parameters passed to the Grid onSectionRendered callback.

type RowRendererParams

type RowRendererParams = {
    /** Index of row. */
    index: number;
    /** The List is currently being scrolled. */
    isScrolling: boolean;
    /** This row is visible within the List (eg it is not an overscanned row). */
    isVisible: boolean;
    /** Unique key within array of rendered rows. */
    key: string;
    /**
     * Reference to the parent `List` (its imperative handle).
     * This value can be passed as-is to `CellMeasurer`.
     */
    parent: ListImperativeAPI;
    /**
     * Style object to be applied to row (to position it).
     * This must be passed through to the rendered row element.
     */
    style: CSSProperties;
};

Parameters passed to a List rowRenderer.

type Scroll

type Scroll = {
    clientHeight: number;
    clientWidth: number;
    scrollHeight: number;
    scrollLeft: number;
    scrollTop: number;
    scrollWidth: number;
};

Parameters passed to the Grid onScroll callback.

type ScrollbarPresenceChange

type ScrollbarPresenceChange = {
    horizontal: boolean;
    vertical: boolean;
    size: number;
};

Parameters passed to the Grid onScrollbarPresenceChange callback.

type ScrollElement

type ScrollElement = 'window' | Element;

Element that scrolls a virtualized component (instead of the component scrolling itself): "window", or a scrollable DOM element.

type ScrollIndices

type ScrollIndices = {
    /** Index of the column that should be scrolled into view. */
    scrollToColumn: number;
    /** Index of the row that should be scrolled into view. */
    scrollToRow: number;
};

Scroll-to indices managed by ArrowKeyStepper.

type ScrollPosition

type ScrollPosition = {
    scrollLeft?: number;
    scrollTop?: number;
};

Scroll offsets (as accepted by scrollToPosition and handleScrollEvent).

type ScrollSyncChild

type ScrollSyncChild = {
    scrollToPosition(params: { scrollLeft?: number; scrollTop?: number }): void;
};

A component that can be registered with ScrollSync (via registerChild), e.g. a Grid. ScrollSync scrolls it by calling its scrollToPosition method.

type ScrollSyncChildProps

type ScrollSyncChildProps = {
    /** Height of the visible portion of the `Grid` (or other scroll-synced component). */
    clientHeight: number;
    /** Width of the visible portion of the `Grid` (or other scroll-synced component). */
    clientWidth: number;
    /**
     * This function should be passed through (as the `onScroll` prop) to every registered child that the user can scroll.
     * Whenever it reports a new scroll offset, the other registered children are scrolled to match it
     * and the render function is called again with the updated scroll and size values.
     */
    onScroll: (params: ScrollSyncScrollParams) => void;
    /**
     * Returns a ref callback that registers a virtualized child (e.g. a `Grid`) under the specified key:
     * `<Grid ref={registerChild("header")} onScroll={onScroll} />`.
     *
     * When a scroll offset is reported through `onScroll`, `ScrollSync` scrolls all registered children to it
     * (only the axes that changed are synced).
     * A child registered after scrolling has happened is scrolled to the current offset.
     *
     * The returned callback is stable for a given key, so it can be passed inline during render.
     * Registering a different component under the same key replaces the previous one.
     */
    registerChild: (
        key: string
    ) => (child: ScrollSyncChild | null) => void | (() => void);
    /** Total height of all rows in the `Grid` (or other scroll-synced component). */
    scrollHeight: number;
    /** The current scroll-left offset. */
    scrollLeft: number;
    /** The current scroll-top offset. */
    scrollTop: number;
    /** Total width of all columns in the `Grid` (or other scroll-synced component). */
    scrollWidth: number;
};

Parameters passed to the ScrollSync children render function.

type ScrollSyncProps

type ScrollSyncProps = {
    /**
     * Function responsible for rendering 2 or more virtualized components.
     * It is passed the current scroll and size values (`clientHeight`, `clientWidth`, `scrollHeight`, `scrollLeft`, `scrollTop`, `scrollWidth`),
     * an `onScroll` callback that should be passed through to the virtualized children that the user can scroll,
     * and a `registerChild` function that returns a ref callback for each virtualized child that should be kept in sync
     * (e.g. `<Grid ref={registerChild("body")} onScroll={onScroll} />`).
     * The scroll and size values can also be used for custom rendering (e.g. shading based on the scroll offset).
     */
    children: (params: ScrollSyncChildProps) => ReactNode;
};

type ScrollSyncScrollParams

type ScrollSyncScrollParams = {
    /** Height of the visible portion of the `Grid` (or other scroll-synced component). */
    clientHeight: number;
    /** Width of the visible portion of the `Grid` (or other scroll-synced component). */
    clientWidth: number;
    /** Total height of all rows in the `Grid` (or other scroll-synced component). */
    scrollHeight: number;
    /** The current scroll-left offset. */
    scrollLeft: number;
    /** The current scroll-top offset. */
    scrollTop: number;
    /** Total width of all columns in the `Grid` (or other scroll-synced component). */
    scrollWidth: number;
};

Scroll and size values tracked by ScrollSync. This is also the shape of the object accepted by the onScroll callback.

type SortDirectionMap

type SortDirectionMap = {
    [dataKey: string]: SortDirectionType;
};

Maps a dataKey to the direction it is sorted in.

type SortDirectionType

type SortDirectionType = 'ASC' | 'DESC';

Specifies which direction Table data is sorted in: - "ASC": ascending order; from the lowest value to the highest (e.g. a-z, 0-9). - "DESC": descending order; from the highest value to the lowest (e.g. z-a, 9-0).

type TableCellDataGetter

type TableCellDataGetter = (params: TableCellDataGetterParams) => any;

Returns a cell's data, given its dataKey and row data.

type TableCellDataGetterParams

type TableCellDataGetterParams = {
    /** Additional data passed to this column (the `Column` `columnData` prop). */
    columnData?: any;
    /** Uniquely identifies the row-data attribute corresponding to this cell. */
    dataKey: string;
    /** Data for the current row (as returned by the `Table` `rowGetter`). */
    rowData: any;
};

Parameters passed to a Column cellDataGetter.

type TableCellProps

type TableCellProps = {
    /** Cell data (as returned by the column's `cellDataGetter`). */
    cellData: any;
    /** Additional data passed to this column (the `Column` `columnData` prop). */
    columnData?: any;
    /** Index of the column being rendered. */
    columnIndex: number;
    /** Uniquely identifies the row-data attribute corresponding to this cell. */
    dataKey: string;
    /** The `Table` is currently being scrolled. */
    isScrolling: boolean;
    /**
     * Reference to the `Table` (its imperative handle), which delegates the `CellMeasurer` methods to the inner `Grid`.
     * This value can be passed as-is to `CellMeasurer`.
     */
    parent: CellMeasurerParent;
    /** Data for the current row (as returned by the `Table` `rowGetter`). */
    rowData: any;
    /** Index of the row being rendered. */
    rowIndex: number;
};

Parameters passed to a Column cellRenderer.

type TableCellRenderer

type TableCellRenderer = (params: TableCellProps) => ReactNode;

Renders a cell's contents.

type TableHeaderProps

type TableHeaderProps = {
    /** Additional data passed to this column (the `Column` `columnData` prop). */
    columnData?: any;
    /** Uniquely identifies the row-data attribute corresponding to this column. */
    dataKey: string;
    /** Sorting has been disabled for this column. */
    disableSort?: boolean;
    /** Header label for this column. */
    label?: ReactNode;
    /** Table data is currently sorted by this `dataKey` (if it is sorted at all). */
    sortBy?: string;
    /** Table data is currently sorted in this direction (if it is sorted at all). */
    sortDirection?: SortDirectionType;
};

Parameters passed to a Column headerRenderer.

type TableHeaderRenderer

type TableHeaderRenderer = (params: TableHeaderProps) => ReactNode;

Renders a column header's contents.

type TableHeaderRowProps

type TableHeaderRowProps = {
    /** Header row class name. */
    className: string;
    /** Array of rendered column headers. */
    columns: ReactNode[];
    /** Header row style object. */
    style: CSSProperties;
};

Parameters passed to a Table headerRowRenderer.

type TableHeaderRowRenderer

type TableHeaderRowRenderer = (params: TableHeaderRowProps) => ReactNode;

Renders the header row of a Table.

type TableProps

type TableProps = Omit<GridProps, OverriddenGridPropKeys_2 | keyof TableOwnProps> &
    TableOwnProps;

Table props. All other props are relayed to the inner Grid (see GridProps).

type TableRowProps

type TableRowProps = {
    /** Row-level class name. */
    className: string;
    /** Array of rendered cells (one per column). */
    columns: ReactNode[];
    /** Row index. */
    index: number;
    /** The `Table` is currently being scrolled. */
    isScrolling: boolean;
    /** Unique key within array of rendered rows. */
    key: string;
    /** Optional row `onClick` handler. */
    onRowClick?: TableRowMouseEventHandler;
    /** Optional row `onDoubleClick` handler. */
    onRowDoubleClick?: TableRowMouseEventHandler;
    /** Optional row `onMouseOut` handler. */
    onRowMouseOut?: TableRowMouseEventHandler;
    /** Optional row `onMouseOver` handler. */
    onRowMouseOver?: TableRowMouseEventHandler;
    /** Optional row `onContextMenu` (right-click) handler. */
    onRowRightClick?: TableRowMouseEventHandler;
    /** Row data (as returned by the `Table` `rowGetter`). */
    rowData: any;
    /** Row-level style object; this must be applied to the rendered row element. */
    style: CSSProperties;
};

Parameters passed to a Table rowRenderer.

type TableRowRenderer

type TableRowRenderer = (params: TableRowProps) => ReactNode;

Renders a Table row, given its rendered columns.

type TableSortParams

type TableSortParams = {
    /** Default sort direction of the clicked column. */
    defaultSortDirection: SortDirectionType;
    /** The DOM event (a keyboard event if the header was activated via the ENTER or SPACE key). */
    event: MouseEvent_2<HTMLDivElement> | KeyboardEvent_2<HTMLDivElement>;
    /** `dataKey` of the clicked column. */
    sortBy: string;
    /**
     * New sort direction: the column's `defaultSortDirection` if the column is not currently sorted,
     * else the opposite of the current `sortDirection`.
     */
    sortDirection: SortDirectionType;
};

Parameters passed to the Table sort callback.

Package Files (1)

dist/react-virtualized.d.ts

Dependencies (2)

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-virtualized.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-virtualized)

HTML

<a href="https://www.jsdocs.io/package/react-virtualized"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 16 days ago.
Package analyzed in 5572 ms.
Missing or incorrect documentation? Open an issue for this package.

react-virtualized

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable ArrowKeyStepper

variable CellMeasurer

variable ColumnSizer

variable defaultArrowKeyStepperProps

variable defaultColumnProps

variable defaultGridProps

variable defaultInfiniteLoaderProps

variable defaultListProps

variable defaultMasonryProps

variable defaultMultiGridProps

variable defaultTableProps

variable Grid

variable InfiniteLoader

variable List

variable Masonry

variable MultiGrid

variable ScrollSync

variable SortDirection

variable Table

Functions

function accessibilityOverscanIndicesGetter

function Column

function createMasonryCellPositioner

function createTableMultiSort

Parameter sortCallback

Parameter options

function defaultCellRangeRenderer

function defaultOverscanIndicesGetter

function defaultTableCellDataGetter

function defaultTableCellRenderer

function defaultTableHeaderRenderer

function defaultTableHeaderRowRenderer

function defaultTableRowRenderer

function SortIndicator

Classes

class CellMeasurerCache

constructor

property columnWidth

property defaultHeight

property defaultWidth

property rowHeight

method clear

method clearAll

method getHeight

method getWidth

method has

method hasFixedHeight

method hasFixedWidth

method set

Interfaces

interface ArrowKeyStepperChild

method scrollToCell

interface ArrowKeyStepperImperativeAPI

method setScrollIndexes

interface CellMeasurerCacheAPI

property defaultHeight

property defaultWidth

method clear

method clearAll

method columnWidth

method getHeight

method getWidth

method has

method hasFixedHeight

method hasFixedWidth

method rowHeight

method set

interface GridImperativeAPI

method forceUpdate

method getOffsetForCell