Package: gridchen
AboutVery lightweight and fast editable web grid with strict MS-Excel adherence to user experience.
Modern as of year 2020 (web components, es6 modules) withnodependencies.If you need to edit mixed hierarchical and grid data, please visit sister projectform-chen.Demos, PlayGrounds and DocumentationSeegridchen at github.ioInstallationEitherUse a CDN such ashttps://raw.githubusercontent.com/decatur/gridchen/0.1.3/gridchenorhttps://unpkg.com/gridchen@0.1.3orhttps://cdn.skypack.dev/gridchen(a bit involved)orhttps://decatur.github.io/gridchen/gridchen(only master)or git-clone a releaseor copy the gridchen module folderorpip install gridchenornpm install gridchenReleasesAll stable releases are tagged.Basic Usage<!DOCTYPE html><grid-chen></grid-chen><scripttype="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.constschema={title:'Array of Row Arrays',type:'array',items:{type:'array',items:[{title:'SomeDate',type:'string',format:'full-date'},{title:'SomeNumber',type:'number'}]}};constrows=[['2019-01-01',1],['2020-01-01',2],['2021-01-01',3]];constview=createView(schema,rows);consttm=createTransactionManager();document.querySelector('grid-chen').resetFromView(view,tm);</script>Expected BehaviourWe try to mimic MS-Excel as close as possible.Supported Keyboard ShortcutsSee alsoKeyboard shortcuts in ExcelKeyActionCtrl+ZUndo last transactionCtrl+YRedo, reverse last undoArrowsMove active cell up/down/left/right (not in edit mode)TabMove active cell right (non-rolling)EnterMove active cell down (non-rolling)Shift+EnterMove active cell up (non-rolling)Shift+TabMove active cell left (non-rolling)SHIFT+ArrowsSelect a range of cellsCtrl+SpaceSelect entire columnShift+SpaceSelect entire rowShift+MouseClickExpand selectionCtrl+MouseClickMulti-select cellsCtrl+'-'Delete selected rowCtrl+'+'Insert row before selectionAlt + EnterIn edit mode, insert newlinePage DownMove one page downPage UpMove one page upCtrl+ASelect all grid cells (same as Ctrl+A in an Excel List Object)Ctrl+A Ctrl+ASelect the entire grid including header (same as Ctrl+A Ctrl+A in an Excel List Object)ESCCancel edit or input modeDeleteRemove selected cells contentsCtrl+CCopy selected cells to clipboardCtrl+VPaste clipboard into selected cellsCtrl+XCutF2Enter edit mode; In input or edit mode, toggle between input and edit.Alt+F1Open a modal chart of the selection.BackspaceIn input or edit mode, deletes one character to the leftDeleteIn input or edit mode, deletes one character to the rightEndIn input or edit mode, move to the end of the textHomeIn input or edit mode, move to the beginning of the textLight / Dark Modegridchen 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 exampleDark Reader) extensions may show inferior
results when converting light to dark mode than gridchen's native dark mode.Undo & RedoTODOsDo not use JSON Patch replace for a remove operation!TransactionManager: Do not add properties cell to patch array.Handle clipboard not permitted errorsImprove encapsulation of JavaScript APIShow 1 empty row at end (Slider issue)Avoid refreshing complete viewport on cell changeHandling of Infinity and NaN (#NV in de-de)ContributePublish as Python PackageBump version insetup.pyandgit tag.pythonsetup.pysdistbdist_wheel
python-mtwineuploaddist/*Publish as npm PackageBump version ingridchen/package.jsonandgit tag.cdgridchen&npmpublishAlternativesSpreadJSSlickGridag-Gridcanvas-datagridfin-hypergridFlexGridAbout JavaScript ModulesAs gridchen has no dependencies, we do not need any packaging or use of bare import spec remapping likeSkypackSeehttps://dev.to/stereobooster/can-i-publish-es6-to-npm-5hfkhttps://jspm.org/jspm-dev-release#subpath-detection