Svelte Spreadsheet Frontend

Demo

[REPL](https://svelte.dev/repl/7d3cfaadb28c4f1e9324762c614ff440?version=3.55.1)

Svelte Standalone Table/Spreadsheet front end

This is a spreadsheet front end written using [Svelte](https://svelte.dev). You need to implement any calculations yourself. You also need to supply a 2D array of cell values & formats along with a config for rows & columns info. The REPL has an example of all that.

Try dbl clicking (or hit Enter/F2) on a cell to edit. Or select some with mouse or keyboard.

The buttons show how easy it is to format a cell or display something other than the raw cell value eg a currency.

Features

Cells are editable. F2 or = or Enter or just type alpha-numerics, or DblClick
Cells each have their own format
Each cell supports attributes for borders x 4, italics, bold, font-size, bg & fg colours. Other attributes can easily be added.
Read Only cells supported
Keyboard nav using Home,End, Arrows
Ctrl+nav key moves to next full/empty cell boundary
Select cells with mouse or shift+nav keys
Tab/BackTab moves through selected cells
Supports 3 cell data values... just like a spreadsheet.
- cell.value is the raw content that the user enters
- cell.result is the result of any calc you may implement
- cell.display is what gets displayed. So setting cell.value will show nothing - you need to do a calc and populate cell.result/display or just copy cell.value to cell.display. Or make your own Formatter that takes cell.value/result and puts e.g. a currency/date string into cell.display
Row/Col select with mouse (+shift for multiple)
Row/Col resize with mouse. (Can be disabled in config)
^A selects all, so does click at top left
Del deletes selected cells
Rows/Cols can be added dynamically. data[ ] [ ] must be extended too!
Copy/del/paste ^C ^X ^V using clipboard. (Some caveats apply!)
Navigation scrolls the newly selected cell into view
Edit of cell is highly visible
Various user actions can be allowed/denied at the Table level. See
```
allowedActions="EDIT RESIZE FORMAT DELETE COPY PASTE NAVIGATE"
```

Only 3 events that are dispatched are

 onselchange(selectedCells) - when the user navigates somewhere
 startedit(selectedCells) - before the user edits a cell
 onendedit(selectedCells) - when the user changes a cells value

Adding more for e.g. row/col resize would be straightforward

Supports lots of row/cols with scrolling. Only limited by DOM and memory
Compact data requirements. Config & Data are easily JSONable.
Multiple Tables can be in DOM at same time
No dependencies - approx 1100 LOC inc styling

Usage

Needs only 3 params - config, data (2D array) and a uid.

Two optional params - title (useful when displaying multiple Tables) and allowedActions (see above) - default is all allowed

defaultGridConfig is the default config. It contains row & column initial configs sizings. It's self explanatory - see utils.js

data[ ][ ] is a 2D array of cell object. Each cell object looks like

 let cell = {
    value:'', // raw string. Often what is entered by the user.
    display:'', // what is displayed often isn't the same as the value. E.G. formulas, 12=>$12.00, -12=>($12.00). It is the parents responsibility to populate this
    result:'', // the result of a formula or just the value as a string/number
    format:JSON.parse(JSON.stringify(defaultCellFormat)),
 };

Each cell has its' own format. The format object looks like -

 const defaultCellFormat = {
  "italics":  0,
  "bold":     0,
  "underline":0,
  "fontsize": 13,
  "align":    "left",
  "colour":   "#888",
  "background": "#fff",
  "border":   [false,false,false,false],  //    TLBR
  "readonly": false,
}

Again, it's self explanatory, and straightforward to extend.

Notes

In production uncomment the .focus() in onMount() of Table.svelte. It's highly irritating to keep having the focus ripped away when testing in the REPL.

Licence

MIT

Top categories