Excel-like grid for React

An Excel-like data grid for React

Users who live in spreadsheets expect to click a cell and type, drag across a block, copy it, paste one in from Excel and pull the corner to fill. This grid does that on a virtualized table that stays fast on a million rows.

Editing a cell in place and copying are free in the Community edition. Range selection, the fill handle, pasting a block, cell formulas and undo are Enterprise.

Try range selection live Range selection, fill handle and clipboard guide

Edit a cell like a spreadsheet — free

Double-click, press F2 or just start typing on a cell. Enter commits and moves down, Tab moves to the next editable cell, Esc cancels, and your onSave receives each change. Ctrl+C copies, with or without the headers.

Ranges, fill and paste — Enterprise

Drag a rectangle across cells (Ctrl or Cmd adds another), drag the corner to fill it, and paste a block copied from Excel straight into a range. Clipboard callbacks decide what a copy writes and how a paste is read.

Formulas that survive sorting — Enterprise

Type =A1*B2 into a cell. References are stored against the rows, not the positions, so they keep pointing at the same cells when the user sorts or filters, and the fill handle moves them the way a spreadsheet does.

Ranges, fill and paste

import { EnterpriseDataGrid } from '@kanunilabs/datagrid-react-enterprise';

<EnterpriseDataGrid
  licenseKey={key}
  dataSource={rows}
  rowKey="id"
  columns={columns}
  editing={{ mode: 'cell', range: true }}
/>

Every option: Range selection, fill handle and clipboard guide.

Questions

Can I let users edit cells without a licence?
Yes. Single-cell editing is in the free DataGrid: pass editing={{ onSave }} and every editable column opens an editor in place.
Does pasting from Excel keep numbers as numbers?
Numbers and true/false values are converted for their columns. A pasted date is written as text, and so is a number the parser cannot read. Paste uses the browser’s asynchronous clipboard, so it needs HTTPS and whatever permission the browser asks for.
Is there undo?
In the Enterprise edition: Ctrl+Z and Ctrl+Y, and controller.undo() for your own buttons.

Related