tessl/npm-react-virtualized

React components for efficiently rendering large lists and tabular data

—

Pending

Overview

Eval results

Files

Layout and Sizing Components

Name: tessl/npm-react-virtualized
Author: tessl

Components that handle automatic sizing and layout management for virtualized components.

Capabilities

AutoSizer Component

Automatically adjusts its children's width and height to fill the available space in the parent container.

/**
 * Automatically sizes children to fill available space
 * @param props - AutoSizer configuration
 */
function AutoSizer(props: {
  /** Function that renders children with calculated dimensions */
  children: (params: {height: number, width: number}) => React.Node;
  /** Optional CSS class name */
  className?: string;
  /** Default height for SSR */
  defaultHeight?: number;
  /** Default width for SSR */
  defaultWidth?: number;
  /** Disable dynamic height property (default: false) */
  disableHeight?: boolean;
  /** Disable dynamic width property (default: false) */
  disableWidth?: boolean;
  /** CSP nonce for inline styles */
  nonce?: string;
  /** Callback invoked on resize (default: () => {}) */
  onResize?: (params: {height: number, width: number}) => void;
  /** Optional inline style (default: {}) */
  style?: object;
}): React.Component;

Usage Examples:

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

// Basic AutoSizer usage
function ResponsiveList({ items }) {
  const rowRenderer = ({ index, key, style }) => (
    <div key={key} style={style}>
      {items[index]}
    </div>
  );

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <AutoSizer>
        {({ height, width }) => (
          <List
            height={height}
            width={width}
            rowCount={items.length}
            rowHeight={50}
            rowRenderer={rowRenderer}
          />
        )}
      </AutoSizer>
    </div>
  );
}

// AutoSizer with resize callback
function MonitoredList({ items, onResize }) {
  const handleResize = ({ height, width }) => {
    console.log(`Container resized to ${width}x${height}`);
    onResize?.(width, height);
  };

  return (
    <div className="container">
      <AutoSizer onResize={handleResize}>
        {({ height, width }) => (
          <List
            height={height}
            width={width}
            rowCount={items.length}
            rowHeight={35}
            rowRenderer={({ index, key, style }) => (
              <div key={key} style={style}>
                Item {index}: {items[index]}
              </div>
            )}
          />
        )}
      </AutoSizer>
    </div>
  );
}

// AutoSizer with disabled height (fixed height container)
function FixedHeightList({ items }) {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <AutoSizer disableHeight>
        {({ width }) => (
          <List
            height={300}
            width={width}
            rowCount={items.length}
            rowHeight={40}
            rowRenderer={({ index, key, style }) => (
              <div key={key} style={style}>
                {items[index]}
              </div>
            )}
          />
        )}
      </AutoSizer>
    </div>
  );
}

ColumnSizer Component

Higher-order component that calculates column widths for Grid-based components based on available space and constraints.

/**
 * Manages column width distribution for Grid components
 * @param props - ColumnSizer configuration
 */
function ColumnSizer(props: {
  /** Function that renders children with calculated column widths */
  children: (params: {
    adjustedWidth: number,
    getColumnWidth: (params: {index: number}) => number,
    registerChild: (element: React.Component) => void
  }) => React.Node;
  /** Maximum width for any column */
  columnMaxWidth?: number;
  /** Minimum width for any column */
  columnMinWidth?: number;
  /** Total number of columns */
  columnCount: number;
  /** Total available width */
  width: number;
}): React.Component;

Usage Examples:

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

// Basic ColumnSizer usage with Grid
function ResponsiveGrid({ data }) {
  const cellRenderer = ({ columnIndex, key, rowIndex, style }) => (
    <div key={key} style={style} className="grid-cell">
      {data[rowIndex][columnIndex]}
    </div>
  );

  return (
    <AutoSizer>
      {({ height, width }) => (
        <ColumnSizer
          columnCount={data[0].length}
          columnMinWidth={60}
          columnMaxWidth={200}
          width={width}
        >
          {({ adjustedWidth, getColumnWidth, registerChild }) => (
            <Grid
              ref={registerChild}
              cellRenderer={cellRenderer}
              columnCount={data[0].length}
              columnWidth={getColumnWidth}
              height={height}
              rowCount={data.length}
              rowHeight={50}
              width={adjustedWidth}
            />
          )}
        </ColumnSizer>
      )}
    </AutoSizer>
  );
}

// ColumnSizer with Table for responsive columns
function ResponsiveTable({ tableData, columns }) {
  const rowGetter = ({ index }) => tableData[index];

  return (
    <AutoSizer>
      {({ height, width }) => (
        <ColumnSizer
          columnCount={columns.length}
          columnMinWidth={80}
          columnMaxWidth={300}
          width={width}
        >
          {({ adjustedWidth, getColumnWidth, registerChild }) => (
            <Table
              ref={registerChild}
              width={adjustedWidth}
              height={height}
              headerHeight={50}
              rowHeight={40}
              rowCount={tableData.length}
              rowGetter={rowGetter}
            >
              {columns.map((column, index) => (
                <Column
                  key={column.dataKey}
                  label={column.label}
                  dataKey={column.dataKey}
                  width={getColumnWidth({ index })}
                />
              ))}
            </Table>
          )}
        </ColumnSizer>
      )}
    </AutoSizer>
  );
}

// Advanced ColumnSizer with custom width calculation
function CustomColumnGrid({ data, columnConfig }) {
  const cellRenderer = ({ columnIndex, key, rowIndex, style }) => {
    const config = columnConfig[columnIndex];
    return (
      <div key={key} style={style} className={`cell-${config.type}`}>
        {data[rowIndex][columnIndex]}
      </div>
    );
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <AutoSizer>
        {({ height, width }) => (
          <ColumnSizer
            columnCount={columnConfig.length}
            columnMinWidth={50}
            width={width}
          >
            {({ adjustedWidth, getColumnWidth, registerChild }) => {
              // Custom width calculation based on column type
              const customGetColumnWidth = ({ index }) => {
                const baseWidth = getColumnWidth({ index });
                const config = columnConfig[index];
                
                // Adjust width based on column type
                if (config.type === 'number') return Math.max(baseWidth, 80);
                if (config.type === 'date') return Math.max(baseWidth, 120);
                if (config.type === 'text') return baseWidth;
                
                return baseWidth;
              };

              return (
                <Grid
                  ref={registerChild}
                  cellRenderer={cellRenderer}
                  columnCount={columnConfig.length}
                  columnWidth={customGetColumnWidth}
                  height={height}
                  rowCount={data.length}
                  rowHeight={45}
                  width={adjustedWidth}
                />
              );
            }}
          </ColumnSizer>
        )}
      </AutoSizer>
    </div>
  );
}

Install with Tessl CLI