tessl/npm-react-data-grid

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Data Grid

Name: tessl/npm-react-data-grid
Author: tessl

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 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>;
};

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;
}

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>;
};

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[];
};

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>;
};