react-virtualized
Version:
React components for efficiently rendering large, scrollable lists and tabular data
3,059 lines • 134 kB
TypeScript
import { CSSProperties } from 'react';
import { HTMLAttributes } from 'react';
import { JSX } from 'react/jsx-runtime';
import { Key } from 'react';
import { KeyboardEvent as KeyboardEvent_2 } from 'react';
import { MouseEvent as MouseEvent_2 } from 'react';
import { NamedExoticComponent } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { Ref } from 'react';
import { RefAttributes } from 'react';
/**
* Calculates the number of cells to overscan before and after a specified range.
* This function ensures that overscanning doesn't exceed the available cells.
*/
export declare function accessibilityOverscanIndicesGetter({ cellCount, overscanCellsCount, scrollDirection, startIndex, stopIndex }: OverscanIndicesGetterParams): OverscanIndices;
/** Alignment of a scrolled-to cell within the Grid. */
export declare type Alignment = "auto" | "end" | "start" | "center";
/**
* 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.
*/
export declare const ArrowKeyStepper: NamedExoticComponent<ArrowKeyStepperProps & RefAttributes<ArrowKeyStepperImperativeAPI>>;
/**
* Imperative API of the component decorated by `ArrowKeyStepper` (e.g. a `Grid` ref),
* registered through the `registerChild` parameter.
*/
export declare interface ArrowKeyStepperChild {
/** Ensure the specified column and row are visible. */
scrollToCell(params: {
columnIndex?: number;
rowIndex?: number;
}): void;
}
/**
* Parameters passed to the `ArrowKeyStepper` children render function.
*/
export declare 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;
};
/**
* Public methods available on an `ArrowKeyStepper` ref.
*/
export declare interface ArrowKeyStepperImperativeAPI {
/**
* Override the local state of the component with new values for `scrollToRow` and `scrollToColumn`.
*/
setScrollIndexes(params: ScrollIndices): void;
}
export declare 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;
};
/**
* Range of cells currently visible in the decorated component.
* This is a subset of the parameters passed to `Grid`'s `onSectionRendered` callback.
*/
declare type ArrowKeyStepperRenderedSection = Pick<RenderedSection, "columnStartIndex" | "columnStopIndex" | "rowStartIndex" | "rowStopIndex">;
declare type Cache_2 = Record<string, number>;
/** Temporary cell cache (used while scrolling), mapped by `${rowIndex}-${columnIndex}` key. */
declare type CellCache = {
[key: string]: ReturnType<CellRenderer>;
};
/**
* Interface for a cache of cell measurements shared between `CellMeasurer` and its parent
* (e.g. `Grid`, `List`, `Table`, `MultiGrid` or `Masonry`).
* `CellMeasurerCache` is the default implementation.
*/
declare interface CellMeasureCache {
/** Returns true if cells have a fixed width (and a dynamic, measured height). */
hasFixedWidth(): boolean;
/** Returns true if cells have a fixed height (and a dynamic, measured width). */
hasFixedHeight(): boolean;
/** Returns true if the specified cell has already been measured. */
has(rowIndex: number, columnIndex: number): boolean;
/** Stores the measured size of the specified cell. */
set(rowIndex: number, columnIndex: number, width: number, height: number): void;
/** Returns the (measured or default) height of the specified cell. */
getHeight(rowIndex: number, columnIndex?: number): number;
/** Returns the (measured or default) width of the specified cell. */
getWidth(rowIndex: number, columnIndex?: number): number;
}
/**
* 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.
*/
export declare const CellMeasurer: NamedExoticComponent<CellMeasurerProps> & {
__internalCellMeasurerFlag: boolean;
};
/**
* Caches measurements for a given cell.
*/
export declare class CellMeasurerCache implements CellMeasureCache, CellMeasurerCacheAPI {
_cellHeightCache: Cache_2;
_cellWidthCache: Cache_2;
_columnWidthCache: Cache_2;
_rowHeightCache: Cache_2;
_columnWidthRowCount: Cache_2;
_rowHeightColumnCount: Cache_2;
_defaultHeight: number;
_defaultWidth: number;
_minHeight: number;
_minWidth: number;
_keyMapper: KeyMapper;
_hasFixedHeight: boolean;
_hasFixedWidth: boolean;
_columnCount: number;
_rowCount: number;
constructor(params?: CellMeasurerCacheParams);
/**
* 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).
*/
clear(rowIndex: number, columnIndex?: number): 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).
*/
clearAll(): void;
/**
* 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`.
*/
columnWidth: ({ index }: IndexParam) => number;
/** Height reported for unmeasured cells. */
get defaultHeight(): number;
/** Width reported for unmeasured cells. */
get defaultWidth(): number;
/** Returns true if cells have a fixed height (and a dynamic, measured width). */
hasFixedHeight(): boolean;
/** Returns true if cells have a fixed width (and a dynamic, measured height). */
hasFixedWidth(): boolean;
/** Returns the (measured or default) height of the specified cell. */
getHeight(rowIndex: number, columnIndex?: number): number;
/** Returns the (measured or default) width of the specified cell. */
getWidth(rowIndex: number, columnIndex?: number): number;
/** Returns true if the specified cell has already been measured. */
has(rowIndex: number, columnIndex?: number): boolean;
/**
* 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`.
*/
rowHeight: ({ index }: IndexParam) => number;
/** Stores the measured size of the specified cell. */
set(rowIndex: number, columnIndex: number, width: number, height: number): void;
/**
* Whether a derived column width (or row height) can be updated incrementally after a cell is measured:
* i.e. whether the previous derived size is still a lower bound of the new one.
* The maximum can only decrease if the cell's previous size was the maximum and it got smaller.
*
* @param derivedSize The current derived size (the maximum of the measured cells counted so far, if any)
* @param countedCells The number of cells (rows of a column, or columns of a row) that the derived size was computed over
* @param cellIndex The index of the measured cell within the column (or row)
* @param size The cell's new (effective) size
* @param previousSize The cell's previous (effective) size, or undefined if it wasn't measured (so it wasn't part of the maximum)
*/
_canUpdateIncrementally(derivedSize: number | undefined, countedCells: number | undefined, cellIndex: number, size: number, previousSize: number | undefined): boolean;
_updateCachedColumnAndRowSizes(rowIndex: number, columnIndex: number, incremental?: {
height: boolean;
width: boolean;
}): void;
}
/**
* Public API of a `CellMeasurerCache` instance.
*/
export declare interface CellMeasurerCacheAPI {
/**
* 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`.
*/
clear(rowIndex: number, columnIndex?: number): 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).
*/
clearAll(): void;
/**
* 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.
*/
columnWidth(params: {
index: number;
}): number;
/**
* Height reported for unmeasured cells (read-only).
*/
readonly defaultHeight: number;
/**
* Width reported for unmeasured cells (read-only).
*/
readonly defaultWidth: number;
/**
* Returns the (measured or default) height of the specified cell.
* `columnIndex` defaults to `0`.
*/
getHeight(rowIndex: number, columnIndex?: number): number;
/**
* Returns the (measured or default) width of the specified cell.
* `columnIndex` defaults to `0`.
*/
getWidth(rowIndex: number, columnIndex?: number): number;
/**
* Returns true if the specified cell has already been measured.
* `columnIndex` defaults to `0`.
*/
has(rowIndex: number, columnIndex?: number): boolean;
/**
* Returns true if cells have a fixed height (and a dynamic, measured width);
* see the `fixedHeight` option.
*/
hasFixedHeight(): boolean;
/**
* Returns true if cells have a fixed width (and a dynamic, measured height);
* see the `fixedWidth` option.
*/
hasFixedWidth(): boolean;
/**
* 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.
*/
rowHeight(params: {
index: number;
}): number;
/**
* Stores the measured size of the specified cell.
* This is called by `CellMeasurer` and doesn't usually need to be called directly.
*/
set(rowIndex: number, columnIndex: number, width: number, height: number): void;
}
export declare 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;
};
/**
* Identifies a cell within a parent `Grid`.
*/
declare type CellMeasurerCellPosition = {
columnIndex: number;
rowIndex: number;
};
/**
* Function child of `CellMeasurer`.
*/
export declare type CellMeasurerChildFunction = (params: CellMeasurerChildParams) => ReactNode;
/**
* Parameters passed to a `CellMeasurer` function child.
*/
export declare 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;
};
/**
* Structural type of the parent component (e.g. a `Grid`, `List`, `Table`, `MultiGrid` or `Masonry` instance)
* that `CellMeasurer` notifies when a cell's measured size changes.
*/
declare type CellMeasurerParent = {
/** Called after a cell has been measured for the first time (while rendering). */
invalidateCellSizeAfterRender?: (cell: CellMeasurerCellPosition) => void;
/** Called when a cell has been re-measured (via `measure`) and its size has changed. */
recomputeGridSize?: (cell: CellMeasurerCellPosition) => void;
};
export declare 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;
};
/** Identifies a cell by its column and row index. */
export declare type CellPosition = {
columnIndex: number;
rowIndex: number;
};
/**
* Positioner returned by `createCellPositioner`.
*/
declare type CellPositioner = Positioner & {
/**
* Updates the configuration settings (eg after a window resize) and resets the layout.
* Call `recomputeCellPositions()` on the `Masonry` instance afterward.
*/
reset: (params: CellPositionerResetParams) => void;
};
/**
* Parameters for the `reset` method of a positioner created by `createCellPositioner`.
*/
declare type CellPositionerResetParams = {
/** Number of columns to use in layout. */
columnCount: number;
/** Column width. */
columnWidth: number;
/**
* Empty space between columns.
* Defaults to 0 (like `createCellPositioner`).
*/
spacer?: number;
};
/** Responsible for rendering a group of cells given their index ranges. */
export declare type CellRangeRenderer = (params: CellRangeRendererParams) => ReactNode[];
/** Parameters passed to a `Grid` `cellRangeRenderer`. */
export declare 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;
};
/**
* Responsible for rendering a single cell, given its row and column index.
* Cells must be rendered with the `key` and `style` parameters provided.
*/
export declare type CellRenderer = (props: CellRendererParams) => ReactElement | false | null | undefined;
/** Parameters passed to a `Grid` `cellRenderer`. */
export declare 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;
};
/** Either a fixed cell size (number) or a function that returns the size of a cell given its index. */
export declare type CellSize = CellSizeGetter | number;
/**
* Just-in-time calculates and caches size and position information for a collection of cells.
*/
declare class CellSizeAndPositionManager {
_cellSizeAndPositionData: {
[index: number]: SizeAndPositionData;
};
_lastMeasuredIndex: number;
_lastBatchedIndex: number;
_cellCount: number;
_cellSizeGetter: CellSizeGetter;
_estimatedCellSize: number;
constructor({ cellCount, cellSizeGetter, estimatedCellSize }: CellSizeAndPositionManagerParams);
areOffsetsAdjusted(): boolean;
configure({ cellCount, estimatedCellSize, cellSizeGetter }: ConfigureParams): void;
getCellCount(): number;
getEstimatedCellSize(): number;
getLastMeasuredIndex(): number;
getOffsetAdjustment(): number;
/**
* This method returns the size and position for the cell at the specified index.
* It just-in-time calculates (or used cached values) for cells leading up to the index.
*/
getSizeAndPositionOfCell(index: number): SizeAndPositionData;
getSizeAndPositionOfLastMeasuredCell(): SizeAndPositionData;
/**
* Total size of all cells being measured.
* This value will be completely estimated initially.
* As cells are measured, the estimate will be updated.
*/
getTotalSize(): number;
/**
* Determines a new offset that ensures a certain cell is visible, given the current offset.
* If the cell is already visible then the current offset will be returned.
* If the current offset is too great or small, it will be adjusted just enough to ensure the specified index is visible.
*
* @param align Desired alignment within container; one of "auto" (default), "start", or "end"
* @param containerSize Size (width or height) of the container viewport
* @param currentOffset Container's current (x or y) offset
* @param totalSize Total size (width or height) of all cells
* @return Offset to use to ensure the specified cell is visible
*/
getUpdatedOffsetForIndex({ align, containerSize, currentOffset, targetIndex }: GetUpdatedOffsetForIndex): number;
getVisibleCellRange(params: GetVisibleCellRangeParams): VisibleCellRange;
/**
* Clear all cached values for cells after the specified index.
* This method should be called for any cell that has changed its size.
* It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionOfCell() is called.
*/
resetCell(index: number): void;
_binarySearch(high: number, low: number, offset: number): number;
_exponentialSearch(index: number, offset: number): number;
/**
* Searches for the cell (index) nearest the specified offset.
*
* If no exact match is found the next lowest cell index will be returned.
* This allows partially visible cells (with offsets just before/above the fold) to be visible.
*/
_findNearestCell(offset: number): number;
}
declare type CellSizeAndPositionManagerParams = {
cellCount: number;
cellSizeGetter: CellSizeGetter;
estimatedCellSize: number;
};
/** Returns the size (width or height) of the cell at the specified index. */
declare type CellSizeGetter = (params: {
index: number;
}) => number;
/**
* 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).
*/
export declare function Column(props: ColumnProps): null;
/**
* 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.
*/
export declare 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;
};
/**
* High-order component that auto-calculates column-widths for `Grid` cells.
*/
export declare const ColumnSizer: NamedExoticComponent<ColumnSizerProps>;
/**
* Parameters passed to the `ColumnSizer` children render function.
*/
declare type ColumnSizerChildProps = {
/**
* This number reflects the lesser of the overall `Grid` width or the width of all columns.
* Use this to make your `Grid` shrink to fit sparse content.
*/
adjustedWidth: number;
/** This value should be passed to the `Grid`'s `columnWidth` property. */
columnWidth: number;
/**
* This value can be passed to the `Grid`'s `columnWidth` property,
* but it's recommended that you use the `columnWidth` property instead.
*
* @deprecated This is a legacy property; use `columnWidth` instead.
*/
getColumnWidth: () => number;
/**
* This function should be set as the child's `ref` property.
* It enables column sizes to be recomputed when the `ColumnSizer` props change.
* Only `Grid`/`MultiGrid` children (components with a `recomputeGridSize` method) are supported;
* registering any other type of component throws an error.
*
* This function is stable; it does not change between renders.
*/
registerChild: (child: ColumnSizerRegisteredChild | null) => void;
};
export declare 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;
};
/**
* A child that can be registered with `ColumnSizer` (e.g. a `Grid` or `MultiGrid`, or its imperative handle).
* It must implement a `recomputeGridSize` method.
*/
declare type ColumnSizerRegisteredChild = {
/** Recomputes column sizes; called by `ColumnSizer` whenever its sizing props change. */
recomputeGridSize: () => void;
};
declare type ConfigureParams = {
cellCount: number;
estimatedCellSize: number;
cellSizeGetter: CellSizeGetter;
};
declare type ContainerSizeAndOffset = {
containerSize: number;
offset: number;
};
/**
* Configuration parameters for `createCellPositioner` (exported publicly as `createMasonryCellPositioner`).
*/
declare type CreateCellPositionerParams = {
/** Contains cell measurements (eg item height). */
cellMeasurerCache: MasonryCellMeasurerCache;
/** Number of columns to use in layout. */
columnCount: number;
/** Column width. */
columnWidth: number;
/** Empty space between columns; defaults to 0. */
spacer?: number;
};
/**
* Creates a simple `Masonry` cell positioner that always inserts a cell into the shortest column.
*/
export declare function createMasonryCellPositioner({ cellMeasurerCache, columnCount, columnWidth, spacer }: CreateCellPositionerParams): CellPositioner;
/**
* 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`.
*
* @param sortCallback Notified (with the updated `sortBy` and `sortDirection` values) whenever the sort criteria change.
* @param options Optional default sort-by values.
*/
export declare function createTableMultiSort(sortCallback: MultiSortCallback, { defaultSortBy, defaultSortDirection }?: MultiSortOptions): MultiSortReturn;
/**
* Default values for `ArrowKeyStepper`'s optional props.
*/
export declare const defaultArrowKeyStepperProps: Readonly<Required<Pick<ArrowKeyStepperProps, DefaultedPropKeys>>>;
/**
* Default implementation of cellRangeRenderer used by Grid.
* This renderer supports cell-caching while the user is scrolling.
*/
export declare function defaultCellRangeRenderer({ cellCache, cellRenderer, columnSizeAndPositionManager, columnStartIndex, columnStopIndex, deferredMeasurementCache, horizontalOffsetAdjustment, isScrolling, isScrollingOptOut, parent, // Grid (or List or Table)
rowSizeAndPositionManager, rowStartIndex, rowStopIndex, styleCache, verticalOffsetAdjustment, visibleColumnIndices, visibleRowIndices }: CellRangeRendererParams): ReactElement[];
/**
* 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.)
*/
export declare const defaultColumnProps: Readonly<Required<Pick<ColumnProps, DefaultedPropKeys_6>>>;
declare type DefaultedPropKeys = "disabled" | "isControlled" | "mode" | "scrollToColumn" | "scrollToRow";
declare type DefaultedPropKeys_2 = "aria-label" | "aria-readonly" | "autoContainerWidth" | "cellRangeRenderer" | "containerRole" | "containerStyle" | "estimatedColumnSize" | "estimatedRowSize" | "getScrollbarSize" | "isScrollingOptOut" | "noContentRenderer" | "onScroll" | "onScrollbarPresenceChange" | "onSectionRendered" | "overscanColumnCount" | "overscanIndicesGetter" | "overscanRowCount" | "role" | "scrollingResetTimeInterval" | "style" | "tabIndex";
declare type DefaultedPropKeys_3 = "estimatedRowSize" | "noRowsRenderer" | "onRowsRendered" | "onScroll" | "overscanIndicesGetter" | "overscanRowCount" | "role" | "style" | "tabIndex";
declare type DefaultedPropKeys_4 = "keyMapper" | "onCellsRendered" | "onScroll" | "overscanByPixels" | "role" | "rowDirection" | "scrollingResetTimeInterval" | "style" | "tabIndex";
declare type DefaultedPropKeys_5 = "classNameBottomLeftGrid" | "classNameBottomRightGrid" | "classNameTopLeftGrid" | "classNameTopRightGrid" | "enableFixedColumnScroll" | "enableFixedRowScroll" | "fixedColumnCount" | "fixedRowCount" | "hideBottomLeftGridScrollbar" | "hideTopRightGridScrollbar" | "style" | "styleBottomLeftGrid" | "styleBottomRightGrid" | "styleTopLeftGrid" | "styleTopRightGrid";
declare type DefaultedPropKeys_6 = "cellDataGetter" | "cellRenderer" | "defaultSortDirection" | "flexGrow" | "flexShrink" | "headerRenderer" | "style";
declare type DefaultedPropKeys_7 = "disableHeader" | "estimatedRowSize" | "headerHeight" | "headerRowRenderer" | "headerStyle" | "noRowsRenderer" | "onRowsRendered" | "onScroll" | "overscanIndicesGetter" | "overscanRowCount" | "rowRenderer" | "rowStyle" | "style";
/**
* Default values for `Grid`'s optional props.
* (The PURE annotations let bundlers drop this object if it isn't used.)
*/
export declare const defaultGridProps: Readonly<Required<Pick<GridProps, DefaultedPropKeys_2>>>;
/**
* Default values for `InfiniteLoader`'s optional props.
*/
export declare const defaultInfiniteLoaderProps: Readonly<{
readonly minimumBatchSize: 10;
readonly rowCount: 0;
readonly threshold: 15;
}>;
/**
* Default values for `List`'s optional props.
* (The PURE annotations let bundlers drop this object if it isn't used.)
*/
export declare const defaultListProps: Readonly<Required<Pick<ListProps, DefaultedPropKeys_3>>>;
/**
* Default values for `Masonry`'s optional props.
* (The PURE annotations let bundlers drop this object if it isn't used.)
*/
export declare const defaultMasonryProps: Readonly<{
[Key in DefaultedPropKeys_4]-?: NonNullable<MasonryProps[Key]>;
}>;
/**
* Default values for `MultiGrid`'s optional props.
* (Props that are relayed to the inner `Grid`s default to the values in `defaultGridProps`.)
*/
export declare const defaultMultiGridProps: Readonly<Required<Pick<MultiGridProps, DefaultedPropKeys_5>>>;
/**
* Calculates the number of cells to overscan before and after a specified range.
* This function ensures that overscanning doesn't exceed the available cells.
*/
export declare function defaultOverscanIndicesGetter({ cellCount, overscanCellsCount, scrollDirection, startIndex, stopIndex }: OverscanIndicesGetterParams): OverscanIndices;
/**
* 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.
*/
export declare function defaultTableCellDataGetter({ dataKey, rowData }: Pick<TableCellDataGetterParams, "dataKey" | "rowData">): any;
/**
* 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.
*/
export declare function defaultTableCellRenderer({ cellData }: Pick<TableCellProps, "cellData">): string;
/**
* Default table header renderer.
*/
export declare function defaultTableHeaderRenderer({ dataKey, label, sortBy, sortDirection }: Pick<TableHeaderProps, "dataKey" | "label" | "sortBy" | "sortDirection">): ReactElement[];
/**
* Default table header row renderer.
*/
export declare function defaultTableHeaderRowRenderer({ className, columns, style }: TableHeaderRowProps): JSX.Element;
/**
* Default values for `Table`'s optional props.
* (The PURE annotations let bundlers drop this object if it isn't used.)
*/
export declare const defaultTableProps: Readonly<Required<Pick<TableProps, DefaultedPropKeys_7>>>;
/**
* Default row renderer for Table.
*/
export declare function defaultTableRowRenderer({ className, columns, index, key, onRowClick, onRowDoubleClick, onRowMouseOut, onRowMouseOver, onRowRightClick, rowData, style }: TableRowProps): JSX.Element;
declare type GetUpdatedOffsetForIndex = {
align?: Alignment;
containerSize: number;
currentOffset: number;
targetIndex: number;
};
declare type GetVisibleCellRangeParams = {
containerSize: number;
offset: number;
};
/**
* 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`.
*/
export declare const Grid: NamedExoticComponent<GridProps & RefAttributes<GridImperativeAPI>>;
/** Public (imperative) methods of a `Grid` (its ref handle). */
export declare interface GridImperativeAPI {
/**
* 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.
*/
forceUpdate(): void;
/**
* 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.
*/
getOffsetForCell(params?: {
alignment?: Alignment;
columnIndex?: number;
rowIndex?: number;
}): {
scrollLeft: number;
scrollTop: number;
};
/**
* Gets estimated total rows' height.
*/
getTotalRowsHeight(): number;
/**
* Gets estimated total columns' width.
*/
getTotalColumnsWidth(): number;
/**
* 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.
*/
handleScrollEvent(params: ScrollPosition): 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`.
*/
invalidateCellSizeAfterRender(params: CellPosition): 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).
*/
measureAllCells(): 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.
*/
recomputeGridSize(params?: {
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.
*/
scrollToCell(params: {
align?: Alignment;
columnIndex?: number;
rowIndex?: number;
}): 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`).
*/
scrollToPosition(params: ScrollPosition): void;
}
export declare 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;
};
declare type IndexParam = {
index: number;
};
/**
* A range of rows (inclusive).
*/
declare type IndexRange = {
/** Index of the first row in the range. */
startIndex: number;
/** Index of the last row in the range (inclusive). */
stopIndex: number;
};
/**
* 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.
*/
export declare const InfiniteLoader: NamedExoticComponent<InfiniteLoaderProps & RefAttributes<InfiniteLoaderImperativeAPI>>;
/**
* 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`).
*/
export declare interface InfiniteLoaderChildInstance {
/**
* 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 }`).
*/
recomputeGridSize?(params?: Partial<CellPosition>): 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.
*/
recomputeRowHeights?(index?: number): void;
/** Re-renders the inner `Grid` (e.g. `List` or `Table`); used if neither recompute method is defined. */
forceUpdateGrid?(): 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.)
*/
forceUpdate?(): void;
}
/**
* Parameters passed to the `InfiniteLoader` children render function.
*/
declare type InfiniteLoaderChildProps = {
/**
* This function should be passed as the child's `onRowsRendered` property.
* It informs the loader when the user is scrolling.
*/
onRowsRendered: (params: IndexRange) => void;
/**
* This function should be set as the child's `ref` property.
* The child (instance or imperative handle) should implement one of the methods described by `InfiniteLoaderChildInstance`.
* It enables a set of rows to be refreshed once their data has finished loading.
*/
registerChild: (registeredChild: InfiniteLoaderChildInstance | null) => void;
};
/**
* Imperative API exposed by `InfiniteLoader` (e.g. via `useRef<InfiniteLoaderImperativeAPI>(null)`).
*/
export declare interface InfiniteLoaderImperativeAPI {
/**
* 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.
*/
resetLoadMoreRowsCache(autoReload?: boolean): void;
}
export declare 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;
};
declare type KeyMapper = (rowIndex: number, columnIndex: number) => string;
/**
* 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.
*/
export declare const List: NamedExoticComponent<Omit<GridProps, "className" | "columnCount" | "rowCount" | "style" | "height" | "width" | "cellRenderer" | "role" | "aria-label" | "aria-readonly" | "autoContainerWidth" | "containerRole" | "estimatedColumnSize" | "estimatedRowSize" | "noContentRenderer" | "onScroll" | "onSectionRendered" | "overscanColumnCount" | "overscanIndicesGetter" | "overscanRowCount" | "tabIndex" | "columnWidth" | "id" | "initialScrollLeft" | "rowHeight" | "scrollElement"> & {
"aria-label"?: string;
"aria-readonly"?: boolean;
containerRole?: string;
role?: string;
className?: string;
estimatedRowSize?: number;
height?: number;
id?: string;
noRowsRenderer?: NoContentRenderer;
onRowsRendered?: (params: RenderedRows) => void;
onScroll?: (params: Scroll_2) => void;
overscanIndicesGetter?: OverscanIndicesGetter;
overscanRowCount?: number;
rowCount: number;
rowHeight: CellSize;
rowRenderer: RowRenderer;
scrollElement?: ScrollElement | null;
style?: CSSProperties;
tabIndex?: number | null;
width: number;
} & RefAttributes<ListImperativeAPI>>;
/**
* Public (imperative) methods of a `List` (its ref handle).
* The handle is also passed to `rowRenderer` as `parent` (e.g. for `CellMeasurer`).
*/
export declare interface ListImperativeAPI {
/**
* 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.
*/
forceUpdateGrid(): void;
/**
* 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).
*/
getOffsetForRow(params?: {
align?: Alignment;
/** @deprecated Use `align` instead. */
alignment?: Alignment;
index?: number;
}): number;
/**
* Invalidate the size of a row (after the current render has been committed); see `Grid#invalidateCellSizeAfterRender`.
* This method is intended for `CellMeasurer`.
*/
invalidateCellSizeAfterRender(params: CellPosition): 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).
*/
measureAllRows(): 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.
*/
recomputeRowHeights(index?: number): 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`.
*/
recomputeGridSize(params?: Partial<CellPosition>): 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`.
*/
scrollToCell(params: {
align?: Alignment;
columnIndex?: number;
rowIndex?: number;
}): 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.
*/
scrollToPosition(params: ScrollPosition): 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.
*/
scrollToRow(params: {
align?: Alignment;
index: number;
}): void;
}
/**
* `List` props.
* All other props are relayed to the inner `Grid` (see `GridProps`).
*/
export declare 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;
};
/**
* 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.)
*/
export declare const Masonry: NamedExoticComponent<MasonryProps & RefAttributes<MasonryImperativeAPI>>;
/**
* Cache of cell measurements used by `Masonry` (typically an instance of `CellMeasurerCache`).
* Default sizes help `Masonry` decide how many cells to batch-measure.
*/
declare type MasonryCellMeasurerCache = Pick<CellMeasureCache, "getHeight" | "getWidth"> & {
/** Height reported for cells that have not yet been measured. */
readonly defaultHeight: number;
/** Width reported for cells that have not yet been measured. */
readonly defaultWidth: number;
};
/**
* Identifies a cell within a `Masonry` (for the `CellMeasurer` interop methods).
* Only `rowIndex` (the cell's index) is used; `columnIndex` is accepted (and ignored) for compatibility with `Grid`.
*/
declare type MasonryCellPosition = {
columnIndex?: number;
rowIndex: number;
};
/**
* Responsible for rendering a single cell given its index.
*/
declare type MasonryCellRenderer = (params: MasonryCellRendererParams) => ReactNode;
/**
* Parameters passed to the `Masonry` `cellRenderer` prop.
*/
declare type MasonryCellRendererParams = {
/** Index of item within the collection. */
index: number;
/** The `Masonry` is currently being scrolled. */
isScrolling: boolean;
/** Unique key within array of cells. */
key: Key;
/**
* Reference to the parent `Masonry` (its imperative handle).
* This value should be passed as-is to `CellMeasurer`.
*/
parent: MasonryImperativeAPI;
/**
* Style object to be applied to cell (to position it).
* This must be passed through to the rendered cell element.
*/
style: CSSProperties;
};
/**
* Imperative API of a `Masonry` (accessed using a ref, eg `useRef<MasonryImperativeAPI>(null)`).
* This is also the `parent` value passed to `cellRenderer` (for `CellMeasurer`).
*/
export declare interface MasonryImperativeAPI {
/**
* Clears the internal position cache and re-renders.
* Cells are positioned again (by the `cellPositioner`) as they are rendered.
*/
clearCellPositions(): 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.
*/
forceUpdate(): 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`.
*/
invalidateCellSizeAfterRender(params: MasonryCellPosition): 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.
*/
recomputeCellPositions(): 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()`.
*/
recomputeGridSize(params?: Partial<MasonryCellPosition>): void;
}
/**
* Maps an index to a unique id to store cached measurement and position info for a cell.
*/
declare type MasonryKeyMapper = (index: number) => Key;
/**
* Callback invoked with information about the cells that were most recently rendered.
*/
declare type MasonryOnCellsRenderedCallback = (params: MasonryOnCellsRenderedParams) => void;
/**
* Parameters passed to the `Masonry` `onCellsRendered` callback.
*/
declare type MasonryOnCellsRenderedParams = {
/** Index of the first rendered cell (0 if no cells were rendered). */
startIndex: number;
/** Index of the last rendered cell (undefined if no cells were rendered). */
stopIndex: number | undefined;
};
/**
* Callback invoked whenever the scroll offset changes within the inner scrollable region.
*/
declare type MasonryOnScrollCallback = (params: MasonryOnScrollParams) => void;
/**
* Parameters passed to the `Masonry` `onScroll` callback.
*/
declare type MasonryOnScrollParams = {
/** Height of the visible area (the `height` prop). */
clientHeight: number;
/** Estimated total height of all cells. */
scrollHeight: number;
/** Current vertical scroll offset. */
scrollTop: number;
};
export declare 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;
};
/**
* 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`.
*/
export declare const MultiGrid: NamedExoticComponent<Omit<GridProps, "style" | "height" | "onScrollbarPresenceChange" | "scrollElement"> & {
height: number;
classNameBottomLeftGrid?: string;
classNameBottomRightGrid?: string;
classNameTopLeftGrid?: string;
classNameTopRightGrid?: string;
enableFixedColumnScroll?: boolean;
enableFixedRowScroll?: boolean;
fixedColumnCount?: number;
fixedRowCount?: number;
hideBottomLeftGridScrollbar?: boolean;
hideTopRightGridScrollbar?: boolean;
onScrollbarPresenceChange?: (params: ScrollbarPresenceChange) => void;
style?: CSSProperties;
styleBottomLeftGrid?: CSSProperties;
styleBottomRightGrid?: CSSProperties;
styleTopLeftGrid?: CSSProperties;
styleTopRightGrid?: CSSProperties;
} & RefAttributes<MultiGridImperativeAPI>>;
/** Public (imperative) methods of a `MultiGrid` instance. */
export declare interface MultiGridImperativeAPI {
/**
* Pass-thru that calls `forceUpdate` on all child `Grid`s.
*/
forceUpdateGrids(): void;
/**
* Invalidate the size of a cell (after the current render has been committed); see `Grid#invalidateCellSizeAfterRender`.
* The invalidated cells (of all child `Grid`s) are recomputed, and the `MultiGrid` re-rendered, once the current render has been committed.
* This method is intended for `CellMeasurer`.
*/
invalidateCellSizeAfterRender(params?: Partial<CellPosition>): void;
/**
* Pass-thru that calls `measureAllCells` on all child `Grid`s.
*/
measureAllCells(): void;
/**
* Pass-thru that calls `recomputeGridSize` on all child `Grid`s
* (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.
*/
recomputeGridSize(params?: {
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.
*/
scrollToCell(params: {
align?: Alignment;
columnIndex?: number;
rowIndex?: number;
}): 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`.
*/
scrollToPosition(params: ScrollPosition): void;
}
/**
* `MultiGrid` accepts most `Grid` props (most of which, eg `cellRenderer`, are relayed to all child `Grid`s;
* 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.
*/
export declare 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;
};
/** Callback notified (by `createMultiSort`) whenever the sort criteria change. */
declare type MultiSortCallback = (params: MultiSortCallbackParams) => void;
/** Parameters passed to the `createMultiSort` `sortCallback`. */
declare type MultiSortCallbackParams = {
/** Ordered array of fields to sort by, in order of importance. */
sortBy: string[];
/** Map of field name to "ASC" or "DESC" direction. */
sortDirection: SortDirectionMap;
};
/** Options accepted by `createMultiSort`. */
export declare 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;
};
/** Parameters passed to the `sort` function returned by `createMultiSort` (compatible with the `Table` `sort` prop). */
export declare 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;
};
/** Value returned by `createMultiSort`. */
export declare 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;
};
/** Renders content to be shown when a Grid has no cells. */
export declare type NoContentRenderer = () => ReactNode;
/**
* `Grid` props that `List` sets itself (and so cannot be passed to `List`),
* that don't apply to a (vertical) `List`,
* or that `List` redefines with list-specific documentation.
*/
declare type OverriddenGridPropKeys = "aria-label" | "aria-readonly" | "autoContainerWidth" | "cellRenderer" | "className" | "columnCount" | "columnWidth" | "containerRole" | "estimatedColumnSize" | "estimatedRowSize" | "height" | "id" | "initialScrollLeft" | "noContentRenderer" | "onScroll" | "onSectionRendered" | "overscanColumnCount" | "overscanIndicesGetter" | "overscanRowCount" | "role" | "rowCount" | "rowHeight" | "scrollElement" | "style" | "tabIndex" | "width";
declare type OverriddenGridPropKeys_2 = "aria-readonly" | "autoContainerWidth" | "cellRenderer" | "columnCount" | "columnWidth" | "elementRef" | "estimatedColumnSize" | "initialScrollLeft" | "noContentRenderer" | "onSectionRendered" | "overscanColumnCount" | "role";
/** Range of cells (inclusive) to render, including overscanned cells. */
declare type OverscanIndices = {
overscanStartIndex: number;
overscanStopIndex: number;
};
/** Calculates the number of cells to overscan before and after a specified range. */
export declare type OverscanIndicesGetter = (params: OverscanIndicesGetterParams) => OverscanIndices;
/** Parameters passed to an `OverscanIndicesGetter`. */
declare type OverscanIndicesGetterParams = {
/** One of SCROLL_DIRECTION_HORIZONTAL or SCROLL_DIRECTION_VERTICAL */
direction: "horizontal" | "vertical";
/** One of SCROLL_DIRECTION_BACKWARD (-1) or SCROLL_DIRECTION_FORWARD (1) */
scrollDirection: -1 | 1;
/** Number of rows or columns in the current axis */
cellCount: number;
/** Maximum number of cells to over-render in either direction */
overscanCellsCount: number;
/** Begin of range of visible cells */
startIndex: number;
/** End of range of visible cells */
stopIndex: number;
};
/**
* Browsers have scroll offset limitations (eg Chrome stops scrolling at ~33.5M pixels where as Edge tops out at ~1.5M pixels).
* After a certain position, the browser won't allow the user to scroll further (even via JavaScript scroll offset adjustments).
* This util picks a lower ceiling for max size and artificially adjusts positions within to make it transparent for users.
*/
declare type Params = {
maxScrollSize?: number;
cellCount: number;
cellSizeGetter: CellSizeGetter;
estimatedCellSize: number;
};
/**
* Position of a cell within the `Masonry` layout.
*/
declare type Position = {
/** Offset (in pixels) from the left (or right, for `rtl` row direction) edge of the container. */
left: number;
/** Offset (in pixels) from the top edge of the container. */
top: number;
};
/**
* Positions a cell given its index.
*/
declare type Positioner = (index: number) => Position;
/** Parameters passed to the `List` `onRowsRendered` callback. */
declare type RenderedRows = {
overscanStartIndex: number;
overscanStopIndex: number;
startIndex: number;
stopIndex: number;
};
/** Parameters passed to the `Grid` `onSectionRendered` callback. */
export declare type RenderedSection = {
columnOverscanStartIndex: number;
columnOverscanStopIndex: number;
columnStartIndex: number;
columnStopIndex: number;
rowOverscanStartIndex: number;
rowOverscanStopIndex: number;
rowStartIndex: number;
rowStopIndex: number;
};
/**
* Responsible for rendering a single row, given its index.
* Rows must be rendered with the `key` and `style` parameters provided.
*/
declare type RowRenderer = (params: RowRendererParams) => ReturnType<CellRenderer>;
/** Parameters passed to a `List` `rowRenderer`. */
export declare 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;
};
/**
* Extends CellSizeAndPositionManager and adds scaling behavior for lists that are too large to fit within a browser's native limits.
*/
declare class ScalingCellSizeAndPositionManager {
_cellSizeAndPositionManager: CellSizeAndPositionManager;
_maxScrollSize: number;
constructor({ maxScrollSize, ...params }: Params);
areOffsetsAdjusted(): boolean;
configure(params: {
cellCount: number;
estimatedCellSize: number;
cellSizeGetter: CellSizeGetter;
}): void;
getCellCount(): number;
getEstimatedCellSize(): number;
getLastMeasuredIndex(): number;
/**
* Number of pixels a cell at the given position (offset) should be shifted in order to fit within the scaled container.
* The offset passed to this function is scaled (safe) as well.
*/
getOffsetAdjustment({ containerSize, offset }: ContainerSizeAndOffset): number;
getSizeAndPositionOfCell(index: number): SizeAndPositionData;
getSizeAndPositionOfLastMeasuredCell(): SizeAndPositionData;
/** See CellSizeAndPositionManager#getTotalSize */
getTotalSize(): number;
/** See CellSizeAndPositionManager#getUpdatedOffsetForIndex */
getUpdatedOffsetForIndex({ align, containerSize, currentOffset, // safe
targetIndex }: {
align?: Alignment;
containerSize: number;
currentOffset: number;
targetIndex: number;
}): number;
/** See CellSizeAndPositionManager#getVisibleCellRange */
getVisibleCellRange({ containerSize, offset }: ContainerSizeAndOffset): VisibleCellRange;
resetCell(index: number): void;
_getOffsetPercentage({ containerSize, offset, // safe
totalSize }: {
containerSize: number;
offset: number;
totalSize: number;
}): number;
_offsetToSafeOffset({ containerSize, offset }: ContainerSizeAndOffset): number;
_safeOffsetToOffset({ containerSize, offset }: ContainerSizeAndOffset): number;
}
/** Parameters passed to the `Grid` `onScroll` callback. */
export declare type Scroll = {
clientHeight: number;
clientWidth: number;
scrollHeight: number;
scrollLeft: number;
scrollTop: number;
scrollWidth: number;
};
/** Parameters passed to the `List` `onScroll` callback. */
declare type Scroll_2 = Pick<Scroll, "clientHeight" | "scrollHeight" | "scrollTop">;
/** Parameters passed to the `Grid` `onScrollbarPresenceChange` callback. */
export declare type ScrollbarPresenceChange = {
horizontal: boolean;
vertical: boolean;
size: number;
};
/**
* Element that scrolls a virtualized component (instead of the component scrolling itself):
* `"window"`, or a scrollable DOM element.
*/
export declare type ScrollElement = "window" | Element;
/**
* Scroll-to indices managed by `ArrowKeyStepper`.
*/
export declare 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 offsets (as accepted by `scrollToPosition` and `handleScrollEvent`). */
export declare type ScrollPosition = {
scrollLeft?: number;
scrollTop?: number;
};
/**
* HOC that simplifies the process of synchronizing scrolling between two or more virtualized components.
*/
export declare const ScrollSync: NamedExoticComponent<ScrollSyncProps>;
/**
* A component that can be registered with `ScrollSync` (via `registerChild`), e.g. a `Grid`.
* `ScrollSync` scrolls it by calling its `scrollToPosition` method.
*/
export declare type ScrollSyncChild = {
scrollToPosition(params: {
scrollLeft?: number;
scrollTop?: number;
}): void;
};
/**
* Parameters passed to the `ScrollSync` children render function.
*/
export declare 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;
};
export declare 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;
};
/**
* Scroll and size values tracked by `ScrollSync`.
* This is also the shape of the object accepted by the `onScroll` callback.
*/
export declare 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;
};
declare type SizeAndPositionData = {
offset: number;
size: number;
};
/**
* Specifies which direction `Table` data is currently sorted in.
*/
export declare const SortDirection: {
/**
* Sort items in ascending order.
* This means arranging from the lowest value to the highest (e.g. a-z, 0-9).
*/
readonly ASC: "ASC";
/**
* Sort items in descending order.
* This means arranging from the highest value to the lowest (e.g. z-a, 9-0).
*/
readonly DESC: "DESC";
};
/** Maps a `dataKey` to the direction it is sorted in. */
export declare type SortDirectionMap = {
[dataKey: string]: SortDirectionType;
};
/**
* 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).
*/
export declare type SortDirectionType = "ASC" | "DESC";
/**
* Displayed beside a header to indicate that a Table is currently sorted by this column.
*/
export declare function SortIndicator({ sortDirection }: SortIndicatorProps): JSX.Element;
declare type SortIndicatorProps = {
/** Direction the column is currently sorted in. */
sortDirection?: SortDirectionType;
};
/** Temporary cell style cache, mapped by `${rowIndex}-${columnIndex}` key. */
declare type StyleCache = {
[key: string]: CSSProperties;
};
/**
* 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`.
*/
export declare const Table: NamedExoticComponent<Omit<GridProps, ("columnCount" | "cellRenderer" | "role" | "aria-readonly" | "autoContainerWidth" | "estimatedColumnSize" | "noContentRenderer" | "onSectionRendered" | "overscanColumnCount" | "columnWidth" | "elementRef" | "initialScrollLeft") | keyof {
"aria-label"?: string;
"aria-labelledby"?: string;
children?: ReactNode;
className?: string;
deferredMeasurementCache?: CellMeasureCache;
disableHeader?: boolean;
estimatedRowSize?: number;
gridClassName?: string;
gridStyle?: CSSProperties;
headerClassName?: string;
headerHeight?: number;
headerRowRenderer?: TableHeaderRowRenderer;
headerStyle?: CSSProperties;
height?: number;
id?: string;
initialScrollTop?: number;
noRowsRenderer?: () => ReactNode;
onColumnClick?: (params: TableColumnEventHandlerParams) => void;
onHeaderClick?: (params: TableColumnEventHandlerParams) => void;
onRowClick?: TableRowMouseEventHandler;
onRowDoubleClick?: TableRowMouseEventHandler;
onRowMouseOut?: TableRowMouseEventHandler;
onRowMouseOver?: TableRowMouseEventHandler;
onRowRightClick?: TableRowMouseEventHandler;
onRowsRendered?: (params: TableRowsRenderedParams) => void;
onScroll?: (params: TableScrollParams) => void;
overscanIndicesGetter?: OverscanIndicesGetter;
overscanRowCount?: number;
rowClassName?: string | ((params: {
index: number;
}) => string);
rowCount: number;
rowGetter: (params: {
index: number;
}) => any;
rowHeight: CellSize;
rowRenderer?: TableRowRenderer;
rowStyle?: CSSProperties | ((params: {
index: number;
}) => CSSProperties);
sort?: (params: TableSortParams) => void;
sortBy?: string;
sortDirection?: SortDirectionType;
scrollElement?: ScrollElement | null;
style?: CSSProperties;
tabIndex?: number | null;
width: number;
}> & {
"aria-label"?: string;
"aria-labelledby"?: string;
children?: ReactNode;
className?: string;
deferredMeasurementCache?: CellMeasureCache;
disableHeader?: boolean;
estimatedRowSize?: number;
gridClassName?: string;
gridStyle?: CSSProperties;
headerClassName?: string;
headerHeight?: number;
headerRowRenderer?: TableHeaderRowRenderer;
headerStyle?: CSSProperties;
height?: number;
id?: string;
initialScrollTop?: number;
noRowsRenderer?: () => ReactNode;
onColumnClick?: (params: TableColumnEventHandlerParams) => void;
onHeaderClick?: (params: TableColumnEventHandlerParams) => void;
onRowClick?: TableRowMouseEventHandler;
onRowDoubleClick?: TableRowMouseEventHandler;
onRowMouseOut?: TableRowMouseEventHandler;
onRowMouseOver?: TableRowMouseEventHandler;
onRowRightClick?: TableRowMouseEventHandler;
onRowsRendered?: (params: TableRowsRenderedParams) => void;
onScroll?: (params: TableScrollParams) => void;
overscanIndicesGetter?: OverscanIndicesGetter;
overscanRowCount?: number;
rowClassName?: string | ((params: {
index: number;
}) => string);
rowCount: number;
rowGetter: (params: {
index: number;
}) => any;
rowHeight: CellSize;
rowRenderer?: TableRowRenderer;
rowStyle?: CSSProperties | ((params: {
index: number;
}) => CSSProperties);
sort?: (params: TableSortParams) => void;
sortBy?: string;
sortDirection?: SortDirectionType;
scrollElement?: ScrollElement | null;
style?: CSSProperties;
tabIndex?: number | null;
width: number;
} & RefAttributes<TableImperativeAPI>>;
/** Returns a cell's data, given its `dataKey` and row data. */
export declare type TableCellDataGetter = (params: TableCellDataGetterParams) => any;
/** Parameters passed to a `Column` `cellDataGetter`. */
export declare 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` `cellRenderer`. */
export declare 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;
};
/** Renders a cell's contents. */
export declare type TableCellRenderer = (params: TableCellProps) => ReactNode;
/** Parameters passed to the `Table` `onColumnClick` and `onHeaderClick` callbacks. */
declare type TableColumnEventHandlerParams = {
/** Additional data passed to this column (the `Column` `columnData` prop). */
columnData: any;
/** Uniquely identifies the row-data attribute corresponding to this column. */
dataKey: string;
/** The DOM event (a keyboard event if a header was activated via the ENTER or SPACE key). */
event: MouseEvent_2<HTMLDivElement> | KeyboardEvent_2<HTMLDivElement>;
};
/** Parameters passed to a `Column` `headerRenderer`. */
export declare 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;
};
/** Renders a column header's contents. */
export declare type TableHeaderRenderer = (params: TableHeaderProps) => ReactNode;
/** Parameters passed to a `Table` `headerRowRenderer`. */
export declare type TableHeaderRowProps = {
/** Header row class name. */
className: string;
/** Array of rendered column headers. */
columns: ReactNode[];
/** Header row style object. */
style: CSSProperties;
};
/** Renders the header row of a `Table`. */
export declare type TableHeaderRowRenderer = (params: TableHeaderRowProps) => ReactNode;
/** Public (imperative) methods of a `Table` instance. */
export declare interface TableImperativeAPI {
/**
* 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.
*/
forceUpdateGrid(): void;
/**
* 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.
*/
getOffsetForRow(params?: {
align?: Alignment;
/** @deprecated Use `align` instead. */
alignment?: Alignment;
index?: number;
}): number;
/**
* Gets the scrollbar width used to pad the table-header.
*/
getScrollbarWidth(): number;
/**
* Invalidate the size of a row (after the current render has been committed); see `Grid#invalidateCellSizeAfterRender`.
* This method is intended for `CellMeasurer`.
*/
invalidateCellSizeAfterRender(params: CellPosition): 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).
*/
measureAllRows(): 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.
*/
recomputeRowHeights(index?: number): 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`.
*/
recomputeGridSize(params?: Partial<CellPosition>): 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`.
*/
scrollToCell(params: {
align?: Alignment;
columnIndex?: number;
rowIndex?: number;
}): 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.
*/
scrollToPosition(params: ScrollPosition): 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.
*/
scrollToRow(params: {
align?: Alignment;
index: number;
}): void;
}
declare type TableOwnProps = {
/** ARIA label set on the outer `Table` element. */
"aria-label"?: string;
/** ARIA labelledby attribute set on the outer `Table` element. */
"aria-labelledby"?: string;
/**
* One or more `Column`s describing the data displayed in this table.
* Falsy children are ignored, to allow easier dynamic showing/hiding of columns.
*
* `Table` reads the props of its children (with `defaultColumnProps` applied) without rendering them,
* so components that wrap `Column` (e.g. `const MyColumn = (props: ColumnProps) => <Column {...props} />`) can be used as children too.
* (Subclassing `Column` is no longer supported.)
*/
children?: ReactNode;
/** Optional custom CSS class name to attach to root `Table` element. */
className?: string;
/**
* If `CellMeasurer` is used to measure this Table's cells, this should be a pointer to its `CellMeasurerCache`.
* It is passed through to the inner `Grid`.
*/
deferredMeasurementCache?: CellMeasureCache;
/**
* Do not render the table header (only the rows).
* @default false
*/
disableHeader?: boolean;
/**
* Used to estimate the total height of a `Table` before all of its rows have actually been measured.
* The estimated total height is adjusted as rows are rendered.
* @default 30
*/
estimatedRowSize?: number;
/** Optional custom CSS class name to attach to inner `Grid` element. */
gridClassName?: string;
/** Optional inline style to attach to inner `Grid` element. */
gridStyle?: CSSProperties;
/** Optional CSS class to apply to all column headers. */
headerClassName?: string;
/**
* Fixed height of header row.
* @default 0
*/
headerHeight?: number;
/**
* Responsible for rendering the table header row given an array of columns:
* `({ className: string, columns: ReactNode[], style: CSSProperties }): ReactNode`.
*
* This is an advanced property.
* It is useful for situations where you require additional hooks into `Table` to render additional custom UI elements.
* You may want to start by forking the `defaultTableHeaderRowRenderer` function (the default).
*/
headerRowRenderer?: TableHeaderRowRenderer;
/**
* Optional custom inline style to attach to table header columns.
* @default {}
*/
headerStyle?: CSSProperties;
/**
* Fixed/available height for the outer DOM element.
* 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 `Table` element. */
id?: string;
/**
* Vertical scroll offset to initially render (and scroll to) the `Table` 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 rows 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;
/** Optional renderer to be used in place of table body rows when `rowCount` is 0. */
noRowsRenderer?: () => ReactNode;
/**
* Callback invoked when a user clicks on a table column (cell):
* `({ columnData: any, dataKey: string, event: Event }): void`.
*/
onColumnClick?: (params: TableColumnEventHandlerParams) => void;
/**
* Callback invoked when a user clicks on (or activates via the ENTER or SPACE key) a table header:
* `({ columnData: any, dataKey: string, event: Event }): void`.
*/
onHeaderClick?: (params: TableColumnEventHandlerParams) => void;
/**
* Callback invoked when a user clicks on a table row:
* `({ event: Event, index: number, rowData: any }): void`.
*/
onRowClick?: TableRowMouseEventHandler;
/**
* Callback invoked when a user double-clicks on a table row:
* `({ event: Event, index: number, rowData: any }): void`.
*/
onRowDoubleClick?: TableRowMouseEventHandler;
/**
* Callback invoked when the mouse leaves a table row:
* `({ event: Event, index: number, rowData: any }): void`.
*/
onRowMouseOut?: TableRowMouseEventHandler;
/**
* Callback invoked when a user moves the mouse over a table row:
* `({ event: Event, index: number, rowData: any }): void`.
*/
onRowMouseOver?: TableRowMouseEventHandler;
/**
* Callback invoked when a user right-clicks on a table row:
* `({ event: Event, index: number, rowData: any }): void`.
*/
onRowRightClick?: TableRowMouseEventHandler;
/**
* Callback invoked with information about the slice of rows that were just rendered:
* `({ overscanStartIndex: number, overscanStopIndex: number, startIndex: number, stopIndex: number }): void`.
*/
onRowsRendered?: (params: TableRowsRenderedParams) => 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: TableScrollParams) => void;
/**
* Responsible for calculating the number of rows to overscan before and after a specified range (see `Grid` `overscanIndicesGetter`).
* By default (`accessibilityOverscanIndicesGetter`), `Table` overscans by at least one row in each direction (for accessibility).
*/
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.
* @default 10
*/
overscanRowCount?: number;
/**
* Optional CSS class to apply to all table rows (including the header row).
* This value may be either a static string or a function with the signature `({ index: number }): string`.
* Note that for the header row an index of `-1` is provided.
*/
rowClassName?: string | ((params: {
index: number;
}) => string);
/** Number of rows in table. */
rowCount: number;
/**
* Callback responsible for returning a data row given an index:
* `({ index: number }): any`.
*/
rowGetter: (params: {
index: number;
}) => any;
/**
* Either a fixed row height (number) or a function that returns the height of a row given its index:
* `({ index: number }): number`.
*/
rowHeight: CellSize;
/**
* Responsible for rendering a table row given an array of columns.
*
* This is an advanced property.
* It is useful for situations where you require additional hooks into `Table` (eg integration with a library like `react-sortable-hoc`).
* The easiest way to override it is to decorate (or fork) the `defaultTableRowRenderer` function (the default).
*/
rowRenderer?: TableRowRenderer;
/**
* Optional custom inline style to attach to table rows (including the header row).
* This value may be either a style object or a function with the signature `({ index: number }): CSSProperties`.
* Note that for the header row an index of `-1` is provided.
* @default {}
*/
rowStyle?: CSSProperties | ((params: {
index: number;
}) => CSSProperties);
/**
* Sort function to be called if a sortable header is clicked:
* `({ defaultSortDirection: SortDirection, event: Event, sortBy: string, sortDirection: SortDirection }): void`.
*/
sort?: (params: TableSortParams) => void;
/** Data is currently sorted by this `dataKey` (if it is sorted at all). */
sortBy?: string;
/** Data is currently sorted in this direction (if it is sorted at all). */
sortDirection?: SortDirectionType;
/**
* Element that scrolls the `Table` (instead of the `Table` scrolling itself): `"window"`, or a scrollable DOM element
* (e.g. a container that the `Table` is rendered within, along with other content).
*
* The `Table` then renders all of its rows at their full height (below its header, which scrolls along with them), 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 `Table` re-renders
* (e.g. call `forceUpdateGrid()` if content above the `Table` changes size without the `Table` re-rendering).
* Pass `null` while the scroll element isn't available yet (e.g. before a ref to it has been attached);
* the `Table` then renders the rows at its top.
*/
scrollElement?: ScrollElement | null;
/**
* Optional custom inline style to attach to root `Table` element.
* @default {}
*/
style?: CSSProperties;
/**
* Optional override of inner `Grid` tab index default.
* @default 0
*/
tabIndex?: number | null;
/** Width of the table. */
width: number;
};
/**
* `Table` props.
* All other props are relayed to the inner `Grid` (see `GridProps`).
*/
export declare type TableProps = Omit<GridProps, OverriddenGridPropKeys_2 | keyof TableOwnProps> & TableOwnProps;
/** Callback invoked in response to a mouse event on a `Table` row. */
declare type TableRowMouseEventHandler = (params: TableRowMouseEventHandlerParams) => void;
/** Parameters passed to `Table` row mouse event callbacks (e.g. `onRowClick`). */
declare type TableRowMouseEventHandlerParams = {
/** The DOM event. */
event: MouseEvent_2<HTMLDivElement>;
/** Index of the row. */
index: number;
/** Data for the row (as returned by the `Table` `rowGetter`). */
rowData: any;
};
/** Parameters passed to a `Table` `rowRenderer`. */
export declare 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;
};
/** Renders a `Table` row, given its rendered columns. */
export declare type TableRowRenderer = (params: TableRowProps) => ReactNode;
/** Parameters passed to the `Table` `onRowsRendered` callback. */
declare type TableRowsRenderedParams = {
/** Index of the first rendered row (including overscanned rows). */
overscanStartIndex: number;
/** Index of the last rendered row (including overscanned rows). */
overscanStopIndex: number;
/** Index of the first visible row. */
startIndex: number;
/** Index of the last visible row. */
stopIndex: number;
};
/** Parameters passed to the `Table` `onScroll` callback. */
declare type TableScrollParams = {
clientHeight: number;
scrollHeight: number;
scrollTop: number;
};
/** Parameters passed to the `Table` `sort` callback. */
export declare 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;
};
/** Range of visible cells; empty if there are no cells. */
declare type VisibleCellRange = {
start?: number;
stop?: number;
};
export { }