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