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
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
- SpreadJS
- SlickGrid
- ag-Grid
- canvas-datagrid
- fin-hypergrid
- FlexGrid
About JavaScript Modules
As gridchen has no dependencies, we do not need any packaging or use of bare import spec remapping like Skypack
See
1 maintainer
Metadata
1 maintainer
Release files for gridchen 0.1.5
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | Provenance | Actions |
|---|---|---|---|---|
| gridchen-0.1.5.tar.gz | 51.2 kB | Without provenance | Details for gridchen-0.1.5.tar.gz |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Actions Reset |
|---|---|---|---|---|
| gridchen-0.1.5-py3-none-any.whl | Python 3 | none | any | Details for gridchen-0.1.5-py3-none-any.whl |
Total release size: 108.5 kB
Release files / gridchen-0.1.5.tar.gz
| Download URL | gridchen-0.1.5.tar.gz |
|---|---|
| Size | 51.2 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
eb2ab7e04275c9710fda335fbb97e181162811d2cfeb1f21c192b0bb864a4d15
|
|
BLAKE2b-256 checksum How to use checksums |
ccaf4c1004d05e053051fddd4a27b893314e4625de0a9d8caa06130b709f9fcd
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is 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
|
Release files / gridchen-0.1.5-py3-none-any.whl
| Download URL | gridchen-0.1.5-py3-none-any.whl |
|---|---|
| Size | 57.3 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
15ac852babd089247fb26811d5640b1750e40575cb24ebc68bdd847f04bfda79
|
|
BLAKE2b-256 checksum How to use checksums |
194aaed6ca0f9b4faff16cf397307f0474415f9c3a890ec8230820bd990dc0b5
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is 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
|
Security for gridchen 0.1.5
Provenance
Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.
No provenance found
None of the files in this release were uploaded with provenance metadata.
A note on package security
PyPI is a repository for distributing packages, not a service for auditing them. While third-party security researchers and our staff do their best to detect and remove malicious packages, PyPI cannot guarantee the quality, security or suitability of any given package.
To learn more about protecting yourself from malicious actors, visit our package security documentation.
