CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-virtualized

React components for efficiently rendering large lists and tabular data

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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};
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-virtualized@9.22.x
Publish Source
CLI
Badge
tessl/npm-react-virtualized badge