CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-virtualized

React components for efficiently rendering large lists and tabular data

—

Pending
Overview
Eval results
Files

table-components.mddocs/

Table Components

Specialized components for building feature-rich, sortable tables with column management and customizable rendering.

Capabilities

Column Component

Describes the header and cell contents of a table column, defining how data should be displayed and processed.

/**
 * Table column descriptor component
 * @param props - Column configuration
 */
function Column(props: {
  /** Aria label for column header */
  'aria-label'?: string;
  /** Function to extract cell data from row data */
  cellDataGetter?: (params: {columnData: any, dataKey: string, rowData: any}) => any;
  /** Function to render cell content */
  cellRenderer?: (params: {cellData: any, columnData: any, dataKey: string, rowData: any, rowIndex: number}) => React.Node;
  /** Optional CSS class for cells */
  className?: string;
  /** Additional data passed to cell renderers */
  columnData?: object;
  /** Key to identify the data field */
  dataKey: any;
  /** Default sort direction when first clicked */
  defaultSortDirection?: 'ASC' | 'DESC';
  /** Disable sorting for this column */
  disableSort?: boolean;
  /** Flex grow factor */
  flexGrow?: number;
  /** Flex shrink factor */
  flexShrink?: number;
  /** Function to render column header */
  headerRenderer?: (params: {columnData: any, dataKey: string, disableSort: boolean, label: any, sortBy: string, sortDirection: string}) => React.Node;
  /** Optional header CSS class */
  headerClassName?: string;
  /** Header inline style */
  headerStyle?: object;
  /** Optional element ID */
  id?: string;
  /** Column header label */
  label?: any;
  /** Maximum column width */
  maxWidth?: number;
  /** Minimum column width */
  minWidth?: number;
  /** Optional inline style for cells */
  style?: object;
  /** Fixed column width */
  width: number;
}): React.Component;

Usage Examples:

import React from 'react';
import { Table, Column } from 'react-virtualized';

// Basic table with custom column renderers
function UserTable({ users, onSort, sortBy, sortDirection }) {
  const rowGetter = ({ index }) => users[index];

  // Custom avatar renderer
  const avatarRenderer = ({ cellData, rowData }) => (
    <div className="avatar-cell">
      <img
        src={cellData || '/default-avatar.png'}
        alt={`${rowData.name} avatar`}
        className="user-avatar"
      />
    </div>
  );

  // Custom status renderer with badges
  const statusRenderer = ({ cellData }) => (
    <span className={`status-badge status-${cellData.toLowerCase()}`}>
      {cellData}
    </span>
  );

  // Custom actions renderer
  const actionsRenderer = ({ rowData, rowIndex }) => (
    <div className="actions-cell">
      <button onClick={() => editUser(rowData.id)}>Edit</button>
      <button onClick={() => deleteUser(rowData.id)}>Delete</button>
    </div>
  );

  // Custom header with tooltip
  const headerWithTooltip = ({ label, dataKey, sortBy, sortDirection }) => (
    <div className="header-with-tooltip" title={`Click to sort by ${label}`}>
      {label}
      {sortBy === dataKey && (
        <span className="sort-indicator">
          {sortDirection === 'ASC' ? ' ▲' : ' ▼'}
        </span>
      )}
    </div>
  );

  return (
    <Table
      width={900}
      height={400}
      headerHeight={50}
      rowHeight={60}
      rowCount={users.length}
      rowGetter={rowGetter}
      sort={onSort}
      sortBy={sortBy}
      sortDirection={sortDirection}
    >
      <Column
        label="Avatar"
        dataKey="avatarUrl"
        width={80}
        cellRenderer={avatarRenderer}
        disableSort={true}
        headerRenderer={headerWithTooltip}
      />
      <Column
        label="Name"
        dataKey="name"
        width={200}
        flexGrow={1}
        headerRenderer={headerWithTooltip}
      />
      <Column
        label="Email"
        dataKey="email"
        width={250}
        headerRenderer={headerWithTooltip}
      />
      <Column
        label="Status"
        dataKey="status"
        width={100}
        cellRenderer={statusRenderer}
        headerRenderer={headerWithTooltip}
      />
      <Column
        label="Actions"
        dataKey="actions"
        width={120}
        cellRenderer={actionsRenderer}
        disableSort={true}
      />
    </Table>
  );
}

// Advanced table with custom data getters
function SalesTable({ salesData }) {
  const rowGetter = ({ index }) => salesData[index];

  // Custom data getter for calculated fields
  const totalSalesGetter = ({ rowData }) => {
    return rowData.q1Sales + rowData.q2Sales + rowData.q3Sales + rowData.q4Sales;
  };

  // Custom data getter for formatting
  const formattedDateGetter = ({ rowData, dataKey }) => {
    const date = new Date(rowData[dataKey]);
    return date.toLocaleDateString();
  };

  // Currency formatter
  const currencyRenderer = ({ cellData }) => (
    <span className="currency">
      ${cellData.toLocaleString()}
    </span>
  );

  // Performance indicator
  const performanceRenderer = ({ cellData }) => {
    const percentage = cellData * 100;
    const className = percentage >= 100 ? 'over-target' : 'under-target';
    
    return (
      <div className={`performance-indicator ${className}`}>
        <div className="performance-bar">
          <div 
            className="performance-fill"
            style={{ width: `${Math.min(percentage, 100)}%` }}
          />
        </div>
        <span>{percentage.toFixed(1)}%</span>
      </div>
    );
  };

  return (
    <Table
      width={1000}
      height={500}
      headerHeight={40}
      rowHeight={50}
      rowCount={salesData.length}
      rowGetter={rowGetter}
    >
      <Column
        label="Sales Rep"
        dataKey="name"
        width={150}
      />
      <Column
        label="Start Date"
        dataKey="startDate"
        width={120}
        cellDataGetter={formattedDateGetter}
      />
      <Column
        label="Q1 Sales"
        dataKey="q1Sales"
        width={100}
        cellRenderer={currencyRenderer}
      />
      <Column
        label="Q2 Sales"
        dataKey="q2Sales"
        width={100}
        cellRenderer={currencyRenderer}
      />
      <Column
        label="Q3 Sales"
        dataKey="q3Sales"
        width={100}
        cellRenderer={currencyRenderer}
      />
      <Column
        label="Q4 Sales"
        dataKey="q4Sales"
        width={100}
        cellRenderer={currencyRenderer}
      />
      <Column
        label="Total Sales"
        dataKey="totalSales"
        width={120}
        cellDataGetter={totalSalesGetter}
        cellRenderer={currencyRenderer}
      />
      <Column
        label="vs Target"
        dataKey="performanceRatio"
        width={150}
        cellRenderer={performanceRenderer}
      />
    </Table>
  );
}

SortDirection Constants

Constants for table sort directions, used with sortable columns.

/**
 * Sort direction constants
 */
const SortDirection = {
  /** Sort items in ascending order (a-z, 0-9) */
  ASC: 'ASC',
  /** Sort items in descending order (z-a, 9-0) */
  DESC: 'DESC'
};

Usage Examples:

import React, { useState } from 'react';
import { Table, Column, SortDirection } from 'react-virtualized';

function SortableTable({ data }) {
  const [sortBy, setSortBy] = useState('name');
  const [sortDirection, setSortDirection] = useState(SortDirection.ASC);
  const [sortedData, setSortedData] = useState(data);

  const sort = ({ sortBy: newSortBy, sortDirection: newSortDirection }) => {
    const sorted = [...data].sort((a, b) => {
      const aVal = a[newSortBy];
      const bVal = b[newSortBy];
      
      let result = 0;
      if (aVal < bVal) result = -1;
      else if (aVal > bVal) result = 1;
      
      return newSortDirection === SortDirection.DESC ? -result : result;
    });

    setSortBy(newSortBy);
    setSortDirection(newSortDirection);
    setSortedData(sorted);
  };

  const rowGetter = ({ index }) => sortedData[index];

  return (
    <Table
      width={600}
      height={400}
      headerHeight={50}
      rowHeight={40}
      rowCount={sortedData.length}
      rowGetter={rowGetter}
      sort={sort}
      sortBy={sortBy}
      sortDirection={sortDirection}
    >
      <Column
        label="Name"
        dataKey="name"
        width={200}
        defaultSortDirection={SortDirection.ASC}
      />
      <Column
        label="Age"
        dataKey="age"
        width={100}
        defaultSortDirection={SortDirection.DESC}
      />
      <Column
        label="Score"
        dataKey="score"
        width={100}
        defaultSortDirection={SortDirection.DESC}
      />
    </Table>
  );
}

SortIndicator Component

Visual indicator component for showing sort direction in table headers.

/**
 * Sort indicator component
 * @param props - SortIndicator configuration
 */
function SortIndicator(props: {
  /** Current sort direction */
  sortDirection?: 'ASC' | 'DESC';
}): React.Component;

Usage Examples:

import React from 'react';
import { SortIndicator, SortDirection } from 'react-virtualized';

// Custom header renderer with SortIndicator
function CustomHeaderRenderer({ label, sortBy, sortDirection, dataKey }) {
  const showSortIndicator = sortBy === dataKey;
  
  return (
    <div className="custom-header">
      <span className="header-label">{label}</span>
      {showSortIndicator && (
        <SortIndicator sortDirection={sortDirection} />
      )}
    </div>
  );
}

// Table with custom sort indicators
function TableWithSortIndicators({ data, onSort, sortBy, sortDirection }) {
  const rowGetter = ({ index }) => data[index];

  return (
    <Table
      width={700}
      height={400}
      headerHeight={50}
      rowHeight={40}
      rowCount={data.length}
      rowGetter={rowGetter}
      sort={onSort}
      sortBy={sortBy}
      sortDirection={sortDirection}
      headerStyle={{ fontWeight: 'bold' }}
    >
      <Column
        label="Product Name"
        dataKey="name"
        width={250}
        headerRenderer={CustomHeaderRenderer}
      />
      <Column
        label="Price"
        dataKey="price"
        width={100}
        headerRenderer={CustomHeaderRenderer}
        cellRenderer={({ cellData }) => `$${cellData.toFixed(2)}`}
      />
      <Column
        label="Stock"
        dataKey="stock"
        width={80}
        headerRenderer={CustomHeaderRenderer}
      />
      <Column
        label="Rating"
        dataKey="rating"
        width={100}
        headerRenderer={CustomHeaderRenderer}
        cellRenderer={({ cellData }) => (
          <div className="rating">
            {'★'.repeat(Math.floor(cellData))}
            {'☆'.repeat(5 - Math.floor(cellData))}
            <span className="rating-value">{cellData.toFixed(1)}</span>
          </div>
        )}
      />
    </Table>
  );
}

Default Table Renderers

Built-in rendering functions for common table functionality.

/**
 * Default cell data getter - extracts data from row object
 */
function defaultTableCellDataGetter(params: {
  columnData: any,
  dataKey: string,
  rowData: any
}): any;

/**
 * Default cell renderer - renders cell data as text
 */
function defaultTableCellRenderer(params: {
  cellData: any,
  columnData: any,
  dataKey: string,
  rowData: any,
  rowIndex: number
}): React.Node;

/**
 * Default header renderer - renders column header with sort indicators
 */
function defaultTableHeaderRenderer(params: {
  columnData: any,
  dataKey: string,
  disableSort: boolean,
  label: any,
  sortBy: string,
  sortDirection: string
}): React.Node;

/**
 * Default header row renderer - renders the entire header row
 */
function defaultTableHeaderRowRenderer(params: {
  className: string,
  columns: React.Node[],
  style: object
}): React.Node;

/**
 * Default row renderer - renders an entire table row
 */
function defaultTableRowRenderer(params: {
  className: string,
  columns: React.Node[],
  index: number,
  key: string,
  onRowClick?: (params: {event: Event, index: number, rowData: object}) => void,
  onRowDoubleClick?: (params: {event: Event, index: number, rowData: object}) => void,
  onRowMouseOut?: (params: {event: Event, index: number, rowData: object}) => void,
  onRowMouseOver?: (params: {event: Event, index: number, rowData: object}) => void,
  onRowRightClick?: (params: {event: Event, index: number, rowData: object}) => void,
  rowData: object,
  style: object
}): React.Node;

/**
 * Multi-column sort utility
 */
function createTableMultiSort(
  sortFunction: (params: {sortBy: string, sortDirection: string}) => void,
  options?: {
    defaultSortBy?: Array<string>,
    defaultSortDirection?: {[key: string]: string}
  }
): (params: {event: Event, sortBy: string, sortDirection: string}) => void;

Usage Examples:

import React from 'react';
import { 
  Table, 
  Column, 
  createTableMultiSort,
  defaultTableRowRenderer 
} from 'react-virtualized';

// Table with multi-column sorting
function MultiSortTable({ data }) {
  const [sortBy, setSortBy] = useState(['name']);
  const [sortDirection, setSortDirection] = useState({ name: 'ASC' });

  const multiSort = createTableMultiSort(
    ({ sortBy, sortDirection }) => {
      // Custom multi-sort logic here
      console.log('Multi-sort:', sortBy, sortDirection);
    },
    {
      defaultSortBy: ['name', 'age'],
      defaultSortDirection: { name: 'ASC', age: 'DESC' }
    }
  );

  // Custom row renderer with hover effects
  const customRowRenderer = (props) => {
    return (
      <div
        {...props}
        className={`${props.className} custom-row`}
        style={{
          ...props.style,
          cursor: 'pointer'
        }}
        onMouseEnter={() => console.log('Row hovered:', props.index)}
      >
        {props.columns}
      </div>
    );
  };

  const rowGetter = ({ index }) => data[index];

  return (
    <Table
      width={800}
      height={400}
      headerHeight={50}
      rowHeight={45}
      rowCount={data.length}
      rowGetter={rowGetter}
      rowRenderer={customRowRenderer}
      onHeaderClick={multiSort}
    >
      <Column label="Name" dataKey="name" width={200} />
      <Column label="Age" dataKey="age" width={100} />
      <Column label="Department" dataKey="department" width={150} />
      <Column label="Salary" dataKey="salary" width={120} />
    </Table>
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-react-virtualized

docs

core-components.md

dynamic-content.md

index.md

layout-components.md

navigation-components.md

specialized-layouts.md

table-components.md

utilities.md

tile.json