@types/react-window

method scrollTo

scrollTo: (params: { scrollLeft?: number; scrollTop?: number }) => void;

• Scroll to the specified offsets.

method scrollToItem

scrollToItem: (params: {
    align?: Align | undefined;
    columnIndex?: number | undefined;
    rowIndex?: number | undefined;
}) => void;

• Scroll to the specified item.

  By default, the Grid will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying an align property. Acceptable values are:

  - auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.) - smart - If the item is already visible, don't scroll at all. - If it is less than one viewport away, scroll as little as possible so that it becomes visible. - If it is more than one viewport away, scroll so that it is centered within the grid. - center - Center align the item within the grid. - end - Align the item to the bottom, right hand side of the grid. - start - Align the item to the top, left hand of the grid.

  If either columnIndex or rowIndex are omitted, scrollLeft or scrollTop will be unchanged (respectively).

method scrollTo

scrollTo: (scrollOffset: number) => void;

• Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).

method scrollToItem

scrollToItem: (index: number, align?: Align) => void;

• Scroll to the specified item.

  By default, the List will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:

  - auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.) - smart - If the item is already visible, don't scroll at all. - If it is less than one viewport away, scroll as little as possible so that it becomes visible. - If it is more than one viewport away, scroll so that it is centered within the list. - center - Center align the item within the list. - end - Align the item to the end of the list (the bottom for vertical lists or the right for horizontal lists). - start - Align the item to the beginning of the list (the top for vertical lists or the left for horizontal lists).

method resetAfterColumnIndex

resetAfterColumnIndex: (index: number, shouldForceUpdate?: boolean) => void;

• VariableSizeGrid caches offsets and measurements for each column index for performance purposes. This method clears that cached data for all columns after (and including) the specified index. It should be called whenever a column's width changes. (Note that this is not a typical occurrence.)

  By default the grid will automatically re-render after the index is reset. If you would like to delay this re-render until e.g. a state update has completed in the parent component, specify a value of false for the second, optional parameter.

method resetAfterIndices

resetAfterIndices: (params: {
    columnIndex: number;
    rowIndex: number;
    shouldForceUpdate?: boolean | undefined;
}) => void;

• VariableSizeGrid caches offsets and measurements for each item for performance purposes. This method clears that cached data for all items after (and including) the specified indices. It should be called whenever an items size changes. (Note that this is not a typical occurrence.)

  By default the grid will automatically re-render after the index is reset. If you would like to delay this re-render until e.g. a state update has completed in the parent component, specify a value of false for the optional shouldForceUpdate parameter.

method resetAfterRowIndex

resetAfterRowIndex: (index: number, shouldForceUpdate?: boolean) => void;

• VariableSizeGrid caches offsets and measurements for each row index for performance purposes. This method clears that cached data for all rows after (and including) the specified index. It should be called whenever a row's height changes. (Note that this is not a typical occurrence.)

  By default the grid will automatically re-render after the index is reset. If you would like to delay this re-render until e.g. a state update has completed in the parent component, specify a value of false for the second, optional parameter.

method scrollTo

scrollTo: (params: { scrollLeft?: number; scrollTop?: number }) => void;

• Scroll to the specified offsets.

method scrollToItem

scrollToItem: (params: {
    align?: Align | undefined;
    columnIndex?: number | undefined;
    rowIndex?: number | undefined;
}) => void;

• Scroll to the specified item.

  By default, the Grid will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying an align property. Acceptable values are:

  - auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.) - smart - If the item is already visible, don't scroll at all. - If it is less than one viewport away, scroll as little as possible so that it becomes visible. - If it is more than one viewport away, scroll so that it is centered within the grid. - center - Center align the item within the grid. - end - Align the item to the bottom, right hand side of the grid. - start - Align the item to the top, left hand of the grid.

  If either columnIndex or rowIndex are omitted, scrollLeft or scrollTop will be unchanged (respectively).

method resetAfterIndex

resetAfterIndex: (index: number, shouldForceUpdate?: boolean) => void;

• VariableSizeList caches offsets and measurements for each index for performance purposes. This method clears that cached data for all items after (and including) the specified index. It should be called whenever a item's size changes. (Note that this is not a typical occurrence.)

  By default the list will automatically re-render after the index is reset. If you would like to delay this re-render until e.g. a state update has completed in the parent component, specify a value of false for the second, optional parameter.

method scrollTo

scrollTo: (scrollOffset: number) => void;

• Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).

method scrollToItem

scrollToItem: (index: number, align?: Align) => void;

• Scroll to the specified item.

  By default, the List will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:

  - auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.) - smart - If the item is already visible, don't scroll at all. - If it is less than one viewport away, scroll as little as possible so that it becomes visible. - If it is more than one viewport away, scroll so that it is centered within the list. - center - Center align the item within the list. - end - Align the item to the end of the list (the bottom for vertical lists or the right for horizontal lists). - start - Align the item to the beginning of the list (the top for vertical lists or the left for horizontal lists).

property className

className?: string | undefined;

• Optional CSS class to attach to outermost element.

property innerElementType

innerElementType?: ReactElementType | undefined;

• Tag name passed to document.createElement to create the inner container element. This is an advanced property; in most cases, the default ("div") should be used.

property innerRef

innerRef?: Ref<any> | undefined;

• Ref to attach to the inner container element. This is an advanced property.

property innerTagName

innerTagName?: string | undefined;

• Tag name passed to document.createElement to create the inner container element. This is an advanced property; in most cases, the default ("div") should be used.

  Deprecated

  since 1.4.0

property itemData

itemData?: T | undefined;

• Contextual data to be passed to the item renderer as a data prop. This is a light-weight alternative to React's built-in context API.

  Item data is useful for item renderers that are class components.

property outerElementType

outerElementType?: ReactElementType | undefined;

• Tag name passed to document.createElement to create the outer container element. This is an advanced property; in most cases, the default ("div") should be used.

property outerRef

outerRef?: Ref<any> | undefined;

• Ref to attach to the outer container element. This is an advanced property.

property outerTagName

outerTagName?: string | undefined;

• Tag name passed to document.createElement to create the outer container element. This is an advanced property; in most cases, the default ("div") should be used.

  Deprecated

  since 1.4.0

property style

style?: CSSProperties | undefined;

• Optional inline style to attach to outermost element.

property useIsScrolling

useIsScrolling?: boolean | undefined;

• Adds an additional isScrolling parameter to the children render function. This parameter can be used to show a placeholder row or column while the list is being scrolled.

  Note that using this parameter will result in an additional render call after scrolling has stopped (when isScrolling changes from true to false).

property columnWidth

columnWidth: number;

• Width of an individual column within the grid.

property rowHeight

rowHeight: number;

• Height of an individual row within the grid.

property itemSize

itemSize: number;

• Size of a item in the direction being windowed. For vertical lists, this is the row height. For horizontal lists, this is the column width.

property columnIndex

columnIndex: number;

property data

data: T;

property isScrolling

isScrolling?: boolean | undefined;

property rowIndex

rowIndex: number;

property style

style: CSSProperties;

property overscanColumnStartIndex

overscanColumnStartIndex: number;

property overscanColumnStopIndex

overscanColumnStopIndex: number;

property overscanRowStartIndex

overscanRowStartIndex: number;

property overscanRowStopIndex

overscanRowStopIndex: number;

property visibleColumnStartIndex

visibleColumnStartIndex: number;

property visibleColumnStopIndex

visibleColumnStopIndex: number;

property visibleRowStartIndex

visibleRowStartIndex: number;

property visibleRowStopIndex

visibleRowStopIndex: number;

property horizontalScrollDirection

horizontalScrollDirection: ScrollDirection;

property scrollLeft

scrollLeft: number;

property scrollTop

scrollTop: number;

property scrollUpdateWasRequested

scrollUpdateWasRequested: boolean;

property verticalScrollDirection

verticalScrollDirection: ScrollDirection;

property children

children: ComponentType<GridChildComponentProps<T>>;

• React component responsible for rendering the individual item specified by an index prop. This component also receives a style prop (used for positioning).

  If useIsScrolling is enabled for the list, the component also receives an additional isScrolling boolean prop.

property columnCount

columnCount: number;

• Number of columns in the grid. Note that only a few columns will be rendered and displayed at a time.

property direction

direction?: CSSDirection | undefined;

• Determines the direction of text and horizontal scrolling.

  This property also automatically sets the CSS direction style for the grid component.

  "ltr"

property height

height: number;

• Height of the grid. This affects the number of rows that will be rendered (and displayed) at any given time.

property initialScrollLeft

initialScrollLeft?: number | undefined;

• Horizontal scroll offset for initial render.

property initialScrollTop

initialScrollTop?: number | undefined;

• Vertical scroll offset for initial render.

property itemKey

itemKey?: GridItemKeySelector<T> | undefined;

• By default, grids will use an item's indices as its key. This is okay if:

  - Your collections of items is never sorted or modified - Your item renderer is not stateful and does not extend PureComponent

  If your grid does not satisfy the above constraints, use the itemKey property to specify your own keys for items.

property onItemsRendered

onItemsRendered?: ((props: GridOnItemsRenderedProps) => any) | undefined;

• Called when the items rendered by the grid change.

property onScroll

onScroll?: ((props: GridOnScrollProps) => any) | undefined;

• Called when the grid scroll positions changes, as a result of user scrolling or scroll-to method calls.

property overscanColumnCount

overscanColumnCount?: number | undefined;

• The number of columns to render outside of the visible area. This property can be important for two reasons:

  - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.

  Note that overscanning too much can negatively impact performance. By default, grid overscans by one item.

property overscanColumnsCount

overscanColumnsCount?: number | undefined;

• Deprecated

  since version 1.8.2, please use overscanColumnCount

property overscanCount

overscanCount?: number | undefined;

• The number of items (rows or columns) to render outside of the visible area. This property can be important for two reasons:

  - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.

  Note that overscanning too much can negatively impact performance. By default, grid overscans by one item.

  Deprecated

  since version 1.4.0

property overscanRowCount

overscanRowCount?: number | undefined;

• The number of rows to render outside of the visible area. This property can be important for two reasons:

  - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.

  Note that overscanning too much can negatively impact performance. By default, grid overscans by one item.

property overscanRowsCount

overscanRowsCount?: number | undefined;

• Deprecated

  since version 1.8.2, please use overscanRowCount

property rowCount

rowCount: number;

• Number of rows in the grid. Note that only a few rows will be rendered and displayed at a time.

property width

width: number;

• Width of the grid. This affects the number of columns that will be rendered (and displayed) at any given time.

property data

data: T;

property index

index: number;

property isScrolling

isScrolling?: boolean | undefined;

property style

style: CSSProperties;

property overscanStartIndex

overscanStartIndex: number;

property overscanStopIndex

overscanStopIndex: number;

property visibleStartIndex

visibleStartIndex: number;

property visibleStopIndex

visibleStopIndex: number;

property scrollDirection

scrollDirection: ScrollDirection;

property scrollOffset

scrollOffset: number;

property scrollUpdateWasRequested

scrollUpdateWasRequested: boolean;

property children

children: ComponentType<ListChildComponentProps<T>>;

• React component responsible for rendering the individual item specified by an index prop. This component also receives a style prop (used for positioning).

  If useIsScrolling is enabled for the list, the component also receives an additional isScrolling boolean prop.

property direction

direction?: CSSDirection | Direction | undefined;

• Determines the direction of text and horizontal scrolling.

  This property also automatically sets the CSS direction style for the list component.

  Specifying "horizontal" or "vertical" for this value is deprecated. Use "layout" prop instead.

  "ltr"

property height

height: number | string;

• Height of the list.

  For vertical lists, this must be a number. It affects the number of rows that will be rendered (and displayed) at any given time.

  For horizontal lists, this can be a number or a string (e.g. "50%").

property initialScrollOffset

initialScrollOffset?: number | undefined;

• Scroll offset for initial render.

  For vertical lists, this affects scrollTop. For horizontal lists, this affects scrollLeft.

property itemCount

itemCount: number;

• Total number of items in the list. Note that only a few items will be rendered and displayed at a time.

property itemKey

itemKey?: ListItemKeySelector<T> | undefined;

• By default, lists will use an item's index as its key. This is okay if:

  - Your collections of items is never sorted or modified - Your item renderer is not stateful and does not extend PureComponent

  If your list does not satisfy the above constraints, use the itemKey property to specify your own keys for items

property layout

layout?: Layout | undefined;

• Layout/orientation of the list.

  Acceptable values are: - "vertical" (default) - Up/down scrolling. - "horizontal" - Left/right scrolling.

  Note that lists may scroll in both directions (depending on CSS) but content will only be windowed in the layout direction specified.

property onItemsRendered

onItemsRendered?: ((props: ListOnItemsRenderedProps) => any) | undefined;

• Called when the items rendered by the list change.

property onScroll

onScroll?: ((props: ListOnScrollProps) => any) | undefined;

• Called when the list scroll positions changes, as a result of user scrolling or scroll-to method calls.

property overscanCount

overscanCount?: number | undefined;

• The number of items (rows or columns) to render outside of the visible area. This property can be important for two reasons:

  - Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. - Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling.

  Note that overscanning too much can negatively impact performance. By default, List overscans by one item.

property width

width: number | string;

• Width of the list.

  For horizontal lists, this must be a number. It affects the number of columns that will be rendered (and displayed) at any given time.

  For vertical lists, this can be a number or a string (e.g. "50%").

property columnWidth

columnWidth: (index: number) => number;

• Returns the width of the specified column.

property estimatedColumnWidth

estimatedColumnWidth?: number | undefined;

• Average (or estimated) column width for unrendered columns.

  This value is used to calculated the estimated total width of a Grid before its columns have all been measured. The estimated width impacts user scrolling behavior. It is updated whenever new columns are measured.

property estimatedRowHeight

estimatedRowHeight?: number | undefined;

• Average (or estimated) row height for unrendered rows.

  This value is used to calculated the estimated total height of a Grid before its rows have all been measured. The estimated height impacts user scrolling behavior. It is updated whenever new rows are measured.

property rowHeight

rowHeight: (index: number) => number;

• Returns the height of the specified row.

property estimatedItemSize

estimatedItemSize?: number | undefined;

• Estimated size of a item in the direction being windowed. For vertical lists, this is the row height. For horizontal lists, this is the column width.

  This value is used to calculated the estimated total size of a list before its items have all been measured. The total size impacts user scrolling behavior. It is updated whenever new items are measured.

property itemSize

itemSize: (index: number) => number;

• Returns the size of a item in the direction being windowed. For vertical lists, this is the row height. For horizontal lists, this is the column width.