Very lightweight and fast editable web grid with strict MS-Excel adherence to user experience.

Project description

About

Very lightweight and fast editable web grid with strict MS-Excel adherence to user experience. Modern as of year 2020 (web components, es6 modules) with no dependencies.

If you need to edit mixed hierarchical and grid data, please visit sister project form-chen.

Demos, PlayGrounds and Documentation

See gridchen at github.io

Installation

Either

Use a CDN such as
- https://raw.githubusercontent.com/decatur/gridchen/0.1.3/gridchen
- or https://unpkg.com/gridchen@0.1.3
- or https://cdn.skypack.dev/gridchen (a bit involved)
- or https://decatur.github.io/gridchen/gridchen (only master)
or git-clone a release
or copy the gridchen module folder
or pip install gridchen
or npm install gridchen

Releases

All stable releases are tagged.

Basic Usage

<!DOCTYPE html>
<grid-chen></grid-chen>
<script type="module">
    import "https://decatur.github.io/gridchen/gridchen/webcomponent.js"
    import {createView} from "https://decatur.github.io/gridchen/gridchen/matrixview.js"
    import {createTransactionManager} from "https://decatur.github.io/gridchen/gridchen/utils.js";

    // The JSON schema defines the data structure of the matrix.
    const schema = {
        title: 'Array of Row Arrays',
        type: 'array',
        items: {
            type: 'array',
            items: [
                {title: 'SomeDate', type: 'string', format:'full-date'},
                {title: 'SomeNumber', type: 'number'}
            ]
        }
    };

    const rows = [['2019-01-01', 1], ['2020-01-01', 2], ['2021-01-01', 3]];
    const view = createView(schema, rows);
    const tm = createTransactionManager();
    document.querySelector('grid-chen').resetFromView(view, tm);
</script>

Expected Behaviour

We try to mimic MS-Excel as close as possible.

Supported Keyboard Shortcuts

See also Keyboard shortcuts in Excel

Key	Action
Ctrl+Z	Undo last transaction
Ctrl+Y	Redo, reverse last undo
Arrows	Move active cell up/down/left/right (not in edit mode)
Tab	Move active cell right (non-rolling)
Enter	Move active cell down (non-rolling)
Shift+Enter	Move active cell up (non-rolling)
Shift+Tab	Move active cell left (non-rolling)
SHIFT+Arrows	Select a range of cells
Ctrl+Space	Select entire column
Shift+Space	Select entire row
Shift+MouseClick	Expand selection
Ctrl+MouseClick	Multi-select cells
Ctrl+'-'	Delete selected row
Ctrl+'+'	Insert row before selection
Alt + Enter	In edit mode, insert newline
Page Down	Move one page down
Page Up	Move one page up
Ctrl+A	Select all grid cells (same as Ctrl+A in an Excel List Object)
Ctrl+A Ctrl+A	Select the entire grid including header (same as Ctrl+A Ctrl+A in an Excel List Object)
ESC	Cancel edit or input mode
Delete	Remove selected cells contents
Ctrl+C	Copy selected cells to clipboard
Ctrl+V	Paste clipboard into selected cells
Ctrl+X	Cut
F2	Enter edit mode; In input or edit mode, toggle between input and edit.
Alt+F1	Open a modal chart of the selection.
Backspace	In input or edit mode, deletes one character to the left
Delete	In input or edit mode, deletes one character to the right
End	In input or edit mode, move to the end of the text
Home	In input or edit mode, move to the beginning of the text

Light / Dark Mode

gridchen has a light and dark mode. The desired mode is sniffed through the background color intensity of the body element. There are currently no other explicit CSS hooks, such as CSS custom properties.

⚠ Some dark reader (for example Dark Reader) extensions may show inferior results when converting light to dark mode than gridchen's native dark mode.

Undo & Redo

TODOs

Do not use JSON Patch replace for a remove operation!
TransactionManager: Do not add properties cell to patch array.
Handle clipboard not permitted errors
Improve encapsulation of JavaScript API
Show 1 empty row at end (Slider issue)
Avoid refreshing complete viewport on cell change
Handling of Infinity and NaN (#NV in de-de)

Contribute

Publish as Python Package

Bump version in setup.py and git tag.

python setup.py sdist bdist_wheel
python -m twine upload dist/*

Publish as npm Package

Bump version in gridchen/package.json and git tag.

cd gridchen & npm publish

Alternatives

About JavaScript Modules

As gridchen has no dependencies, we do not need any packaging or use of bare import spec remapping like Skypack

See

Project details

Release history Release notifications | RSS feed

This version

0.1.5

Feb 24, 2021

0.1.3

Sep 11, 2020

0.1.2

Aug 6, 2020

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

gridchen-0.1.5.tar.gz (51.2 kB view details)

Uploaded Feb 24, 2021 Source

Built Distribution

gridchen-0.1.5-py3-none-any.whl (57.3 kB view details)

Uploaded Feb 24, 2021 Python 3

File details

Details for the file gridchen-0.1.5.tar.gz.

File metadata

Download URL: gridchen-0.1.5.tar.gz
Upload date: Feb 24, 2021
Size: 51.2 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/49.2.1 requests-toolbelt/0.9.1 tqdm/4.56.0 CPython/3.8.6

File hashes

Hashes for gridchen-0.1.5.tar.gz
Algorithm	Hash digest
SHA256	`eb2ab7e04275c9710fda335fbb97e181162811d2cfeb1f21c192b0bb864a4d15`
MD5	`337d75a92da4fef92ff8e64638ea8b5c`
BLAKE2b-256	`ccaf4c1004d05e053051fddd4a27b893314e4625de0a9d8caa06130b709f9fcd`

See more details on using hashes here.

File details

Details for the file gridchen-0.1.5-py3-none-any.whl.

File metadata

Download URL: gridchen-0.1.5-py3-none-any.whl
Upload date: Feb 24, 2021
Size: 57.3 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/49.2.1 requests-toolbelt/0.9.1 tqdm/4.56.0 CPython/3.8.6

File hashes

Hashes for gridchen-0.1.5-py3-none-any.whl
Algorithm	Hash digest
SHA256	`15ac852babd089247fb26811d5640b1750e40575cb24ebc68bdd847f04bfda79`
MD5	`45c2d7f4f0c603513da9d273582dcff6`
BLAKE2b-256	`194aaed6ca0f9b4faff16cf397307f0474415f9c3a890ec8230820bd990dc0b5`