react worksheet like editor
react worksheet like editor
NEWS : improved version of this control available here react-ws-canvas
yarn create react-app my-app --template typescript
cd my-app
yarn add react-wseditor
code .
from vscode terminal issue a yarn start
this will open browser for application debug
follow an example of react functional component ( requires yarn add chance @types/chance
in order to work )
import React, { useState, useEffect } from "react";
import Chance from 'chance';
import { WSEditor, WSEditorColumn } from 'react-wseditor';
interface MyData {
name: string;
value1: number;
value2: number;
value3: number;
}
export default function MyComponent() {
const [rows, setRows] = useState<MyData[]>([]);
const [cols, setCols] = useState<WSEditorColumn<MyData>[]>([]);
const SIZE_TEST = 10000;
useEffect(() => {
setCols([
{ header: "name", field: "name", defaultEditor: "text" },
{ header: 'value1', field: 'value1', defaultEditor: "number" },
{ header: 'value2', field: 'value2', defaultEditor: "number" },
{ header: 'value3', field: 'value3', defaultEditor: "number" },
]);
const r: MyData[] = [];
const chance = new Chance();
for (let i = 0; i < SIZE_TEST; ++i) {
r.push({
name: chance.word(),
value1: chance.minute(),
value2: chance.floating({ min: 0, max: 1e6, fixed: 4 }),
value3: chance.floating({ min: 0, max: 1e9, fixed: 2 })
});
}
setRows(r);
}, []);
return <WSEditor
debug={true}
viewRowCount={6}
rows={rows} setRows={setRows}
cols={cols} setCols={setCols} />
}
to establish development environment to contribute with PR see here
to allow grid manage tons of rows was required by design to react only for view cells ( virtualized grid ) and manage mapping between rows data and cell views by pointing and converting view cell row index to data cell row index by a scroll offset information stored in editor state.
npm create react-library react-wseditor --typescript