Data Grid

Spreadsheet-like data grid built on react-data-grid with inline editing, copy-paste, keyboard navigation, and dynamic column generation.

Basic Usage

The simplest form displays an editable grid with text and number columns.

Dynamic Columns

Generate columns dynamically from external data source definitions. This is useful when column structure comes from an API or configuration.

Row Selection & Batch Operations

Enable row selection with checkboxes and batch operations like delete and copy.

Custom Cell Editors

Use different editor types for different data types: text, number, date, and dropdown select.

Full-Featured Grid

All features enabled: search, add/delete rows, row selection, sorting, and custom toolbar actions.

Variants

Striped Variant (Compact)

Alternating row backgrounds with compact spacing for dense data.

Minimal Variant

Clean design with top border only.

Column Helper Functions

The component provides helper functions to create commonly used column types:

Copy// Row numbering column (frozen, non-editable)
createRowNumberColumn<TData>(): Column<TData>
 
// Selection checkbox column
createSelectColumn<TData>(): Column<TData>
 
// Editable text input
createEditableTextColumn<TData>(key: string, name: string, width?: number): Column<TData>
 
// Editable number input
createEditableNumberColumn<TData>(key: string, name: string, width?: number): Column<TData>
 
// Editable date picker
createEditableDateColumn<TData>(key: string, name: string, width?: number): Column<TData>
 
// Editable dropdown select
createEditableSelectColumn<TData>(
  key: string,
  name: string,
  options: string[],
  width?: number
): Column<TData>
 
// Read-only text column
createTextColumn<TData>(key: string, name: string, width?: number): Column<TData>
 
// Generate columns from external definitions
createDynamicColumns<TData>(definitions: ColumnDefinition[]): Column<TData>[]

Keyboard Shortcuts

The Data Grid includes built-in keyboard navigation for a spreadsheet-like experience:

Copy-Paste Functionality

The Data Grid supports Excel-compatible copy-paste:

1. Cell-level: Select cells and press Ctrl+C to copy in TSV format
2. Row-level: Use toolbar "Copy Selected Rows" button
3. All data: Use toolbar "Copy All Data" button

Copied data can be pasted directly into Excel, Google Sheets, or any application that accepts TSV format.

Props API

ColumnDefinition Type

When using dynamic columns via columnDefinitions:

Copyinterface ColumnDefinition {
  key: string;               // Data property key
  name: string;              // Column header label
  type: "text" | "number" | "date" | "select";  // Editor type
  editable?: boolean;        // Whether column is editable (default: true)
  options?: string[];        // Options for "select" type
  width?: number;            // Column width in pixels
}