Very lightweight and fast editable web grid with strict MS-Excel adherence to user experience. Very modern (web components, es6 modules) with no dependencies.
If you need to edit mixed hierarchical and grid data, please visit sister project https://decatur.github.io/form-chen.
See https://decatur.github.io/grid-chen
<!DOCTYPE html>
<body>
<grid-chen></grid-chen>
</body>
<script type="module">
import "./webwebcomponent.js"
import {createView} from "./grid-chen/matrixview.js"
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]];
document.querySelector('grid-chen').resetFromView(createView(schema, rows));
</script>- onselectionchanged fires too often
- Paste must select pasted region (pasted region differs from selection if selection cannot be tiled by source); easy
- Type violation of cell value must align left; easy
- 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)
We try to mimic MS-Excel as close as possible.
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 |
grid-chen 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 grid-chen's native dark mode.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent