or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-components.mddynamic-content.mdindex.mdlayout-components.mdnavigation-components.mdspecialized-layouts.mdtable-components.mdutilities.md
tile.json

tessl/npm-react-virtualized

React components for efficiently rendering large lists and tabular data

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-virtualized@9.22.x

To install, run

npx @tessl/cli install tessl/npm-react-virtualized@9.22.0

index.mddocs/

React Virtualized

React Virtualized is a collection of React components for efficiently rendering large, scrollable lists and tabular data through virtualization techniques. It provides high-performance virtualized components that only render the visible items in large datasets, dramatically improving performance when dealing with thousands of rows or columns.

Package Information

  • Package Name: react-virtualized
  • Package Type: npm
  • Language: JavaScript (React)
  • Installation: npm install react-virtualized

Core Imports

import { List, Grid, Table, AutoSizer, WindowScroller } from 'react-virtualized';

For CommonJS:

const { List, Grid, Table, AutoSizer, WindowScroller } = require('react-virtualized');

Individual component imports for smaller bundle sizes:

import List from 'react-virtualized/dist/commonjs/List';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';

Basic Usage

import React from 'react';
import { List, AutoSizer } from 'react-virtualized';

// Basic virtualized list
function MyList({ items }) {
  const rowRenderer = ({ index, key, style }) => (
    <div key={key} style={style}>
      {items[index]}
    </div>
  );

  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          height={height}
          width={width}
          rowCount={items.length}
          rowHeight={50}
          rowRenderer={rowRenderer}
        />
      )}
    </AutoSizer>
  );
}

Architecture

React Virtualized is built around several key design patterns:

  • Virtualization Core: Only renders visible items plus an "overscan" buffer for smooth scrolling
  • Measurement System: Dynamic height/width calculation with caching for performance
  • Higher-Order Components: Decorators like AutoSizer and WindowScroller that enhance other components
  • Render Props Pattern: Components use children functions to provide flexible rendering control
  • Position Management: Sophisticated scrolling and positioning system with alignment options

Capabilities

Core Virtualization Components

Essential components for rendering large datasets efficiently.

// Primary virtualized list component
function List(props: {
  height: number;
  width: number;
  rowCount: number;
  rowHeight: number | ((params: {index: number}) => number);
  rowRenderer: (params: {index: number, key: string, style: object}) => React.Node;
  // ... additional props
}): React.Component;

// 2D virtualized grid component  
function Grid(props: {
  columnCount: number;
  columnWidth: number | ((params: {index: number}) => number);
  height: number;
  rowCount: number;
  rowHeight: number | ((params: {index: number}) => number);
  cellRenderer: (params: {columnIndex: number, rowIndex: number, key: string, style: object}) => React.Node;
  // ... additional props
}): React.Component;

// Table with fixed headers and virtualized rows
function Table(props: {
  width: number;
  height: number;
  headerHeight: number;
  rowHeight: number | ((params: {index: number}) => number);
  rowCount: number;
  rowGetter: (params: {index: number}) => object;
  children: Column[];
  // ... additional props  
}): React.Component;

Core Components

Layout and Sizing

Components that handle automatic sizing and layout management.

// Automatically sizes children to fill available space
function AutoSizer(props: {
  children: (params: {height: number, width: number}) => React.Node;
  disableHeight?: boolean;
  disableWidth?: boolean;
  // ... additional props
}): React.Component;

// Manages column width distribution
function ColumnSizer(props: {
  children: (params: {adjustedWidth: number, getColumnWidth: function, registerChild: function}) => React.Node;
  columnMaxWidth?: number;
  columnMinWidth?: number;
  columnCount: number;
  width: number;
}): React.Component;

Layout Components

Dynamic Content and Measurement

Components for handling dynamic content sizing and infinite loading.

// Measures dynamic cell content for accurate virtualization
function CellMeasurer(props: {
  cache: CellMeasurerCache;
  children: (params: {measure: function, registerChild: function}) => React.Node;
  columnIndex?: number;
  parent: React.Component;
  rowIndex: number;
}): React.Component;

// Cache for CellMeasurer measurements
class CellMeasurerCache {
  constructor(params: {
    defaultHeight?: number;
    defaultWidth?: number;
    fixedHeight?: boolean;
    fixedWidth?: boolean;
    minHeight?: number;
    minWidth?: number;
    keyMapper?: function;
  });
}

// Manages loading additional data as user scrolls
function InfiniteLoader(props: {
  children: (params: {onRowsRendered: function, registerChild: function}) => React.Node;
  isRowLoaded: (params: {index: number}) => boolean;
  loadMoreRows: (params: {startIndex: number, stopIndex: number}) => Promise;
  rowCount: number;
  threshold?: number;
}): React.Component;

Dynamic Content

Navigation and Interaction

Components that add keyboard navigation and scroll synchronization.

// Adds arrow key navigation to virtualized components
function ArrowKeyStepper(props: {
  children: (params: {onSectionRendered: function, scrollToColumn: number, scrollToRow: number}) => React.Node;
  columnCount: number;
  rowCount: number;
  mode?: 'cells' | 'edges';
  // ... additional props
}): React.Component;

// Synchronizes scrolling between multiple components
function ScrollSync(props: {
  children: (params: {clientHeight: number, clientWidth: number, onScroll: function, scrollHeight: number, scrollLeft: number, scrollTop: number, scrollWidth: number}) => React.Node;
}): React.Component;

// Enables window-based scrolling for components
function WindowScroller(props: {
  children: (params: {height: number, isScrolling: boolean, onChildScroll: function, scrollTop: number, width: number}) => React.Node;
  onResize?: function;
  onScroll?: function;
  scrollElement?: Element;
}): React.Component;

Navigation Components

Specialized Layouts

Advanced components for complex layout requirements.

// Renders arbitrarily positioned cells efficiently
function Collection(props: {
  cellCount: number;
  cellRenderer: (params: {index: number, key: string, style: object}) => React.Node;
  cellSizeAndPositionGetter: (params: {index: number}) => {height: number, width: number, x: number, y: number};
  height: number;
  width: number;
  // ... additional props
}): React.Component;

// Pinterest-style masonry layout
function Masonry(props: {
  cellCount: number;
  cellMeasurerCache: CellMeasurerCache;
  cellPositioner: object;
  cellRenderer: (params: {index: number, key: string, parent: object, style: object}) => React.Node;
  height: number;
  width: number;
  // ... additional props
}): React.Component;

// Grid with fixed columns and/or rows
function MultiGrid(props: {
  fixedColumnCount?: number;
  fixedRowCount?: number;
  columnWidth: number | function;
  rowHeight: number | function;
  columnCount: number;
  rowCount: number;
  cellRenderer: function;
  width: number;
  height: number;
  // ... additional props
}): React.Component;

Specialized Layouts

Table Components

Specialized components for table functionality.

// Table column descriptor
function Column(props: {
  cellDataGetter?: (params: {columnData: any, dataKey: string, rowData: any}) => any;
  cellRenderer?: (params: {cellData: any, columnData: any, dataKey: string, rowData: any, rowIndex: number}) => React.Node;
  dataKey: any;
  headerRenderer?: (params: {columnData: any, dataKey: string, disableSort: boolean, label: any, sortBy: string, sortDirection: string}) => React.Node;
  width: number;
  // ... additional props
}): React.Component;

// Sort direction constants
const SortDirection = {
  ASC: 'ASC',
  DESC: 'DESC'
};

// Sort indicator component
function SortIndicator(props: {
  sortDirection?: 'ASC' | 'DESC';
}): React.Component;

Table Components

Utility Functions

Helper functions and utilities for customization.

// Default overscan calculation for standard usage
function defaultOverscanIndicesGetter(params: {
  cellCount: number;
  overscanCellsCount: number;
  startIndex: number;
  stopIndex: number;
}): {overscanStartIndex: number, overscanStopIndex: number};

// Enhanced overscan calculation for accessibility
function accessibilityOverscanIndicesGetter(params: {
  cellCount: number;
  overscanCellsCount: number;
  startIndex: number;
  stopIndex: number;
}): {overscanStartIndex: number, overscanStopIndex: number};

// Default cell range renderer
function defaultCellRangeRenderer(params: {
  cellCache: object;
  cellRenderer: function;
  columnStartIndex: number;
  columnStopIndex: number;
  deferredMeasurementCache?: object;
  horizontalOffsetAdjustment: number;
  isScrolling: boolean;
  parent: object;
  rowStartIndex: number;
  rowStopIndex: number;
  styleCache: object;
  verticalOffsetAdjustment: number;
  visibleColumnIndices: object;
  visibleRowIndices: object;
}): React.Node[];

// Multi-column sort utility for tables
function createTableMultiSort(sortFunction: function, options?: {defaultSortBy?: Array, defaultSortDirection?: object}): function;

// Masonry cell positioner creator
function createMasonryCellPositioner(params: {
  cellMeasurerCache: CellMeasurerCache;
  columnCount: number;
  columnWidth: number;
  spacer?: number;
}): object;

Utilities

Type Definitions

// Common alignment options
type Alignment = 'auto' | 'end' | 'start' | 'center';

// Cell position information
interface CellPosition {
  columnIndex: number;
  rowIndex: number;
}

// Rendered section information
interface RenderedSection {
  columnStartIndex: number;
  columnStopIndex: number;
  rowStartIndex: number;
  rowStopIndex: number;
}

// Scroll event parameters
interface Scroll {
  clientHeight: number;
  clientWidth: number;
  scrollHeight: number;
  scrollLeft: number;
  scrollTop: number;
  scrollWidth: number;
}

// Cell size specification
type CellSize = number | ((params: {index: number}) => number);

// No content renderer function
type NoContentRenderer = () => React.Node;

// Overscan indices getter function
type OverscanIndicesGetter = (params: {
  cellCount: number;
  overscanCellsCount: number;
  scrollDirection: number;
  startIndex: number;
  stopIndex: number;
}) => {overscanStartIndex: number, overscanStopIndex: number};