or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mdcore-grid.mdeditors.mdformatters.mdindex.mdselection.mdutilities.md
tile.json

tessl/npm-react-data-grid

Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-data-grid@6.1.x

To install, run

npx @tessl/cli install tessl/npm-react-data-grid@6.1.0

index.mddocs/

React Data Grid

React Data Grid is a comprehensive Excel-like data grid component built with React, featuring virtual rendering, inline editing, keyboard navigation, copy & paste operations, sorting, filtering, and extensive customization options. It provides lightning-fast performance capable of handling hundreds of thousands of rows without performance degradation.

Package Information

  • Package Name: react-data-grid
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation:
    • Core package: npm install react-data-grid
    • Addons package: npm install react-data-grid-addons
    • Both packages: npm install react-data-grid react-data-grid-addons

Core Imports

Core Package:

import ReactDataGrid from 'react-data-grid';

For named imports:

import ReactDataGrid, { 
  Row, 
  Cell, 
  HeaderCell,
  EmptyChildRow,
  RowComparer,
  editors, 
  formatters,
  shapes,
  _constants,
  _helpers
} from 'react-data-grid';

Addons Package:

import { 
  Editors, 
  Formatters, 
  Toolbar, 
  Menu, 
  Data, 
  ToolsPanel, 
  Draggable, 
  DraggableHeader, 
  Filters, 
  Utils 
} from 'react-data-grid-addons';

CommonJS:

const ReactDataGrid = require('react-data-grid');
const { 
  Row, 
  Cell, 
  HeaderCell, 
  EmptyChildRow,
  RowComparer,
  editors, 
  formatters,
  shapes,
  _constants,
  _helpers 
} = ReactDataGrid;

const { 
  Editors, 
  Formatters, 
  Toolbar, 
  Menu, 
  Data, 
  ToolsPanel, 
  Draggable, 
  DraggableHeader, 
  Filters, 
  Utils 
} = require('react-data-grid-addons');

Basic Usage

import ReactDataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'complete', name: 'Complete' }
];

const rows = [
  { id: 1, title: 'Task 1', complete: true },
  { id: 2, title: 'Task 2', complete: false },
  { id: 3, title: 'Task 3', complete: false }
];

function Grid() {
  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => rows[i]}
      rowsCount={rows.length}
      minHeight={500}
    />
  );
}

Architecture

React Data Grid is built around several key components:

  • ReactDataGrid: Main grid component that orchestrates all functionality
  • Virtual Rendering: Uses viewport-based rendering to handle large datasets efficiently
  • Component System: Modular architecture with separate components for rows, cells, headers, and editors
  • Event System: Comprehensive event handling for user interactions, editing, and data updates
  • Column Definition: Flexible column configuration supporting custom renderers, editors, and behaviors

Capabilities

Core Grid Component

The main ReactDataGrid component providing Excel-like data grid functionality with virtual rendering, editing, sorting, and filtering capabilities.

function ReactDataGrid(props: ReactDataGridProps): JSX.Element;

interface ReactDataGridProps {
  // Required props
  columns: Column[];
  rowGetter: (index: number) => any;
  rowsCount: number;
  minHeight: number;
  
  // Optional configuration
  rowHeight?: number;
  headerRowHeight?: number;
  enableCellSelect?: boolean;
  cellNavigationMode?: 'none' | 'loopOverRow' | 'changeRow';
  
  // Event handlers
  onGridRowsUpdated?: (updates: GridRowsUpdatedEvent) => void;
  onRowSelect?: (rowIdx: number, row: any) => void;
  onCellSelected?: (position: Position) => void;
  onGridSort?: (sortColumn: string, sortDirection: string) => void;
}

interface Column {
  key: string;
  name: string;
  width?: number;
  resizable?: boolean;
  sortable?: boolean;
  filterable?: boolean;
  editable?: boolean;
  formatter?: React.ComponentType<any>;
  editor?: React.ComponentType<any>;
  frozen?: boolean;
}

Core Grid API

Cell Editing and Editors

Built-in and customizable cell editors for inline data editing with keyboard navigation support.

const editors = {
  CheckboxEditor: React.ComponentType<EditorProps>;
  SimpleTextEditor: React.ComponentType<EditorProps>;
  EditorBase: React.ComponentType<EditorProps>;
};

interface EditorProps {
  value: any;
  onKeyDown: (event: KeyboardEvent) => void;
  onBlur: () => void;
  commit: () => void;
  column: Column;
}

Editors and Editing

Cell Formatting and Display

Customizable cell formatters for controlling how data is displayed in grid cells.

const formatters = {
  SimpleCellFormatter: React.ComponentType<FormatterProps>;
  SelectAll: React.ComponentType<FormatterProps>;
};

interface FormatterProps {
  value: any;
  row: any;
  column: Column;
  rowIdx: number;
}

Formatters and Display

Row and Cell Components

Core building blocks for custom grid rendering and advanced customization scenarios.

const Row: React.ComponentType<RowProps>;
const Cell: React.ComponentType<CellProps>;
const HeaderCell: React.ComponentType<HeaderCellProps>;
const EmptyChildRow: React.ComponentType<EmptyChildRowProps>;

interface RowProps {
  idx: number;
  visibleStart: number;
  visibleEnd: number;
  row: any;
  height: number;
  columns: Column[];
}

interface EmptyChildRowProps {
  height: number;
  columns: Column[];
}

Components and Customization

Selection and Interaction

Comprehensive selection system supporting single cells, multiple rows, and range selection with keyboard shortcuts.

interface RowSelection {
  enableShiftSelect?: boolean;
  onRowsSelected?: (rows: SelectedRow[]) => void;
  onRowsDeselected?: (rows: SelectedRow[]) => void;
  showCheckbox?: boolean;
  selectBy: SelectionMethod;
}

interface CellRangeSelection {
  onStart?: (selectedRange: SelectionRange) => void;
  onUpdate?: (selectedRange: SelectionRange) => void;
  onComplete?: (selectedRange: SelectionRange) => void;
}

Selection and Events

Constants and Utilities

Helper constants, utilities, and configuration options for advanced grid customization.

const _constants = {
  CellNavigationMode: {
    NONE: 'none';
    CHANGE_ROW: 'changeRow';
    LOOP_OVER_ROW: 'loopOverRow';
  };
  UpdateActions: {
    CELL_UPDATE: 'CELL_UPDATE';
    COLUMN_FILL: 'COLUMN_FILL';
    COPY_PASTE: 'COPY_PASTE';
    CELL_DRAG: 'CELL_DRAG';
  };
};

const RowComparer: (nextProps: any, currentProps: any) => boolean;

Utilities and Constants

Addons Package Capabilities

The react-data-grid-addons package provides extended functionality including advanced editors, filtering, drag & drop, toolbar components, and data management utilities.

Advanced Editors

Extended editor components including dropdowns, auto-complete, and date pickers for rich data input experiences.

const Editors = {
  AutoComplete: React.ComponentType<AutoCompleteEditorProps>;
  DropDownEditor: React.ComponentType<DropDownEditorProps>;
  DateEditor: React.ComponentType<DateEditorProps>;
  CheckboxEditor: React.ComponentType<CheckboxEditorProps>;
  EditorContainer: React.ComponentType<EditorContainerProps>;
};

Advanced Editors

Advanced Filters

Sophisticated filtering system with support for text, numeric, dropdown, and custom filter types.

const Filters = {
  NumericFilter: React.ComponentType<NumericFilterProps>;
  SingleSelectFilter: React.ComponentType<SingleSelectFilterProps>;
  MultiSelectFilter: React.ComponentType<MultiSelectFilterProps>;
  AutoCompleteFilter: React.ComponentType<AutoCompleteFilterProps>;
};

Advanced Filters

Toolbar and UI Components

Ready-to-use toolbar components and panels for common grid operations and data manipulation.

const Toolbar: React.ComponentType<ToolbarProps>;
const ToolsPanel: React.ComponentType<ToolsPanelProps>;

interface ToolbarProps {
  children?: React.ReactNode;
  onToggleFilter?: () => void;
  enableFilter?: boolean;
  numberOfRows?: number;
}

Toolbar and UI

Drag and Drop

Complete drag and drop system for row and column reordering with visual feedback.

const Draggable: {
  Container: React.ComponentType<DraggableContainerProps>;
  RowActionsCell: React.ComponentType<RowActionsCellProps>;
};

const DraggableHeader: {
  DraggableHeaderCell: React.ComponentType<DraggableHeaderCellProps>;
};

Drag and Drop

Data Management

Redux integration utilities and selectors for efficient state management with large datasets.

const Data = {
  Selectors: {
    getRows: (state: any) => any[];
    getSelectedRowsByKey: (state: any, key: string) => any[];
  };
  
  groupBy: (rows: any[], groupKeys: string[]) => any[];
  createGroupedData: (data: any[], groupBy: string[]) => any[];
};

Data Management

Context Menu

Right-click context menu system for row and cell-level actions.

const Menu = {
  ContextMenu: React.ComponentType<ContextMenuProps>;
  MenuHeader: React.ComponentType<MenuHeaderProps>;
  MenuItem: React.ComponentType<MenuItemProps>;
  SubMenu: React.ComponentType<SubMenuProps>;
};

Context Menu