react-wseditor

react worksheet like editor

• Quickstart
• Examples
• Features
• How to contribute (quickstart)
• development keynotes

Limitations

NEWS : improved version of this control available here react-ws-canvas

• design : each component row, cell should have data and other informations in their prop in order to take advantage of React PureComponent or useMemo ( functional component ) to allow automatic avoid of rendering when props doesn't change. This implementation make use of direct access to editor information through object preventing this practice.
• performance : when rows x count = cells count is big there are problem during cell change using keys ( arrow up/down )
• alternatives :
  • react-data-grid / demo edit 1000x20
  • react-virtualized
  • base-table

Quickstart

yarn create react-app my-app --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} />
}

Examples

• basic example ( test03 - source )

• customization example ( test02 - source )

Features

• virtualized grid ( allow to manage millions of rows )
• text/numeric/boolean or inline custom cell controls
• easy to extend from base cell editor
• cell container and control styles can be overriden
• programmatic control of editor ( see example add, del rows and scroll )
• cell/row selection mode ( multiple selection through mouse and ctrl key )
• worksheet like keyboard navigation ( cursor, home/end, ctrl+home/end, direct editing or F2, canc to delete cell content )
• sortable columns ( hold shift for multilevel sort ) with optional custom sort
• column width adjustable ( % or fixed )
• initial sort
• scroll horizontal if set editor width in an overflow div
• scrollbar slider can be hidden
• readonly mode
• more ui style options and their default values

How to contribute (quickstart)

to establish development environment to contribute with PR see here

development keynotes

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.

• editor
  • props
  • non templated optional props
  • state with info about scroll offset, focused view cell, selection, grid/header height
  • all displayed view cells are referenced through
    • a map for their key to cell div element
    • a map for their key to cell editor element
  • view cell coord can be converted to data cell coord
  • grid is created following this flow:
    • main grid
      • first row headers
      • view rows render that render in turn each row editor
    • side slider
• row editor is the point where keyboard (2), mouse (2) interactions happens
  • if key handled by engine then current cell could change and editor set current cell handler can handle to extend or replace current selection while row editor represent cell/row selection by changing style
  • finally row render each cell choosing between default or custom cell editor
• columns
  • toggle sort uses editor sort handler
• other keyboard/mouse managements points
  • slider
  • horizontal scroll and workaround

how this project was built

npm create react-library react-wseditor --typescript