Spreadsheet like react canvas datagrid optimized for performance built entirely typescript and react functional components with react hooks.
Spreadsheet like react canvas datagrid optimized for performance built entirely typescript and react functional components with react hooks.
50000 rows x 200 cols example ( LIVE EXAMPLE : click EX1 button )
direct cell editing, just click on a cell then type, hit ENTER or arrows keys to move next ( native cell types )
cell or row selection mode
rows and cols numbering can be shown or hidden
if column numbering visible automatic sort can be customized through less-than-op ( helper )
column click behavior can be full column select, column toggle sort or none to disable sort/select behavior
column header can be customized ( helper )
canvas size can be specified through width, height ( fullwidth option available )
column width can be changed intractively using mouse
column width autoexpand
column custom initial sort ( note: prepareCellDataset, rowSetCellData, commitCellDataset must defined to make sort working ); also see example6 for tip about ensure initial sort on subsequent datasource applications
data getter/setter can follow a worksheet or a db record type ( example of nested field using getFieldData and setFieldData methods)
data filter global
optional dataset on external object with ds rows getter mapper useful in some circumstance when need to preserve rows array object ref
api and handlers available for control interactions ( example ) ; props can be accessed inversely through api; retrieve list of selected row idxs example
custom multi select with material-ui ( example )
custom date picker with material pickers ( example )
container height min and canvas styles
each individual cell type can be customized ( column helper )
clipboard copy to/from spreadsheet with ctrl-c and ctrl-v or api ( example api )
eventually install create-react-app
npm install -g create-react-app
create-react-app test --template typescriptcd testyarn add react-ws-canvas
App.tsx as follows
import React, { useState, useEffect } from 'react';import { WSCanvas, useWindowSize, WSCanvasColumnClickBehavior } from 'react-ws-canvas';const AppQuickStart: React.FC = () => {const [rows, setRows] = useState<any[][]>([]);const winSize = useWindowSize();const ROWS = 500000;const COLS = 20;useEffect(() => {const _rows = [];for (let ri = 0; ri < ROWS; ++ri) {const row = [];for (let ci = 0; ci < COLS; ++ci) {row.push("r:" + ri + " c:" + ci);}_rows.push(row);}setRows(_rows);}, []);return <WSCanvaswidth={winSize.width} height={winSize.height}rowsCount={rows.length} colsCount={COLS}showColNumber={true} showRowNumber={true}columnClickBehavior={WSCanvasColumnClickBehavior.ToggleSort}rows={rows}rowGetCellData={(row, colIdx) => row[colIdx]}prepareCellDataset={() => rows.slice()}commitCellDataset={(q) => setRows(q)}rowSetCellData={(row, colIdx, value) => row[colIdx] = value}/>;}export default AppQuickStart;
yarn start
| example | description |
|---|---|
| quickstart | 500000 x 20 grid with minimal props |
| Sample1 | 50000 x 200 grid with frozen row/col, filter, custom column width |
| Sample2 | 5000 x 6 grid db-record-like column mapping, initial sort, custom sort, api onMouseDown, global filter, cell changing/changed |
| Sample3 | 5000 x 7 grid db-record-like, data interact del/change row, custom cell editor, rowHover |
| Sample4 | add/insert/del/move/currentRealRowSel rows using api |
| Sample5 | custom multi select with material-ui ; custom render chip with color picker |
| Sample6 | resetView behavior to force sync ds ; resetSorting and resetFilters resetView arguments |
prevent direct editing on editor customized cells
customize onPreviewKeyDown event handler on datagrid and preventDefault for matching cell
onPreviewKeyDown={(states, e) => {if (states.props.columns && api && api.isDirectEditingKey(e)) {const fieldname = states.props.columns[states.state.focusedCell.col].field;if (fieldname === "colname") {//const row = states.props.rows[states.state.focusedCell.row];e.preventDefault();}}}}
git clone https://github.com/devel0/react-ws-canvas.git
cd react-ws-canvascode .
lib folder )
cd exampleyarn installyarn start
cd libyarn build && yalc publish
npm uninstall react-ws-canvas --save && yalc add react-ws-canvas && npm install
yarn create react-app react-ws-canvas --template typescript
Because I need a library to publish and either a working example to test/debug the library project structured this way:
/package.json ( workspaces “example” and “lib” )/example ( example and library sources )/example/package.json/example/.env with BROWSER=none to avoid browser start when issue yarn start because I use F5 from vscode to open debugging session/example/lib ( library source codes )/lib ( library publishing related files )/lib/package.json/lib/rollup.config.json ( specifically input: '../example/src/lib/index.tsx', )/lib/tsconfig.json ( specifically "rootDirs": ["../example/src/lib"], and "include": ["../example/src/lib"], )/lib/prepatch-and-publish ( helper script to prepatch version and publish with README.md )from "react-ws-canvas";