15 |

cut(e)}> 16 |

Cut

17 |

⌘X

18 |

19 |

copy(e)}> 20 |

Copy

21 |

⌘C

22 |

23 |

paste(e)}> 24 |

Paste

25 |

⌘P

26 |

27 |

28 |

Insert

29 |

delet(e)}>Delete

30 |

clear(e)}>Clear contents

31 |

32 | 33 | 68 | -------------------------------------------------------------------------------- /package/Menu.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponentTyped } from "svelte"; 2 | declare const __propDef: { 3 | props: { 4 | show?: boolean; 5 | x: any; 6 | y: any; 7 | data?: (string | number | boolean)[][]; 8 | selected: string; 9 | copy: (e: any) => void; 10 | cut: (e: any) => void; 11 | paste: (e: any) => any[][]; 12 | clear: (e: any) => any[][]; 13 | delet: (e: any) => any[][]; 14 | }; 15 | events: { 16 | [evt: string]: CustomEvent; 17 | }; 18 | slots: {}; 19 | }; 20 | export declare type MenuProps = typeof __propDef.props; 21 | export declare type MenuEvents = typeof __propDef.events; 22 | export declare type MenuSlots = typeof __propDef.slots; 23 | export default class Menu extends SvelteComponentTyped { 24 | } 25 | export {}; 26 | -------------------------------------------------------------------------------- /package/Open.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | 29 | 36 | -------------------------------------------------------------------------------- /package/Open.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponentTyped } from "svelte"; 2 | declare const __propDef: { 3 | props: { 4 | onload: (sheets: any[], sheetNames: any[]) => void; 5 | sheetNames: any; 6 | sheets?: any[]; 7 | open: any; 8 | }; 9 | events: { 10 | [evt: string]: CustomEvent; 11 | }; 12 | slots: {}; 13 | }; 14 | export declare type OpenProps = typeof __propDef.props; 15 | export declare type OpenEvents = typeof __propDef.events; 16 | export declare type OpenSlots = typeof __propDef.slots; 17 | export default class Open extends SvelteComponentTyped { 18 | } 19 | export {}; 20 | -------------------------------------------------------------------------------- /package/Readme.md: -------------------------------------------------------------------------------- 1 | # Svelte Spreadsheets 2 | 3 | Ultra fast excel sheets in the browser. Hugely inspired by JExcel, built on XLSX shoulders. 4 | 5 | => Find a live example [Here](https://ticruz38.github.io/svelte-sheets/) 6 | 7 | ### Motivation 8 | 9 | Making excel sheets a reality in the browser can be incredibly difficult, keeping good performance while drawing and editing large amount of data in the DOM is the ultimate challenge for a web developper. 10 | The best implementation I could find was the awesome vanillajs [jexcel](https://github.com/jspreadsheet/jexcel) by Paul Hodel.
11 | However, opening really big spreadsheet would still block the JS thread for a minute or two. 12 | Following Rich Harris talk about reactivity, I decided to take the idea behind Jexcel and adapt it to Svelte, making use of a Virtual List to keep the DOM small and light at all times. 13 | 14 | ### Known limitation 15 | 16 | You will need to have typescript svelte-preprocess enabled in your webpack/rollup configuration 17 | 18 | ### Installation 19 | 20 | `npm i -S svelte-sheets` 21 | 22 | ### Example 23 | 24 | ```html 25 | 39 | 40 | 41 | ``` 42 | 43 | Alternatively you can use the toolbar to open any kind of excel files 44 | 45 | ```html 46 | 64 | 65 | 66 | 67 | ``` 68 | 69 | You can configure the table such as height and many other things with the options props: 70 | 71 | ```js 72 | let options = { 73 | tableHeight: "90vh", 74 | defaultColWidth: "50px", 75 | }; 76 | ``` 77 | 78 | Many of this options will be implemented later, so expect most of them to be unresponsible. 79 | 80 | ### Things yet to be done 81 | 82 | - Make a svelte REPL demonstrating the library (awaiting repl typescript support) 83 | - ✅ Undo/Redo (mapping keyboard shortcuts) 84 | - ✅ shift+click should extend the selection 85 | - ✅ Resizing rows/columns 86 | - Filtering 87 | - ✅ Copy/Paste 88 | - Comments on cells 89 | - Support more that number, string or boolean in cells. let's say charts, datepickers etc... 90 | - ✅ Implement a tooltip when right clicking a cell with a list of actions 91 | - All other excel features you can think of 92 | -------------------------------------------------------------------------------- /package/Sheet.svelte: -------------------------------------------------------------------------------- 1 | 620 | 621 |

showMenu(e)} 626 | on:mousedown={onMouseDown} 627 | on:mouseup={onMouseUp} 628 | on:mouseover={onMouseOver} 629 | tabindex="1" 630 | > 631 |

643 | (menuX = 0)} 648 | style="padding-top: {top}px; padding-bottom: {bottom}px; padding-left: {left}px; padding-right: {right}px;" 649 | bind:this={contents} 650 | > 651 |

656 |

661 |

666 |

671 |

672 |

673 |

674 |

675 |

676 |

677 |

{ 681 | squareX = e.detail.x; 682 | squareY = e.detail.y; 683 | }} 684 | class="square absolute" 685 | id="square" 686 | bind:this={square} 687 | /> 688 | (clipboard = selected)} 693 | cut={(e) => (clipboard = selected)} 694 | paste={(e) => (data = pasteSelection(data, clipboard, selected))} 695 | clear={(e) => (data = clearSelection(data, selected))} 696 | delet={(e) => (data = deleteSelection(data, selected))} 697 | /> 698 |

699 | 700 | {#each visibleX as v} 701 | 702 | {/each} 703 | 704 | 709 | 710 | 763 | {/each} 764 | 765 | 766 | 767 | {#each visibleY as r} 768 | 773 | 826 | {#each visibleX as x, i} 827 | 865 | {/each} 866 | 867 | {/each} 868 | 869 |

711 \| {#each visibleX as c, i} 712 \|	714 \| (selected = 715 \| keypressed[16] && selected && selected[0] 716 \| ? [ 717 \| encode({ 718 \| c: decoded[0].c, 719 \| r: 0, 720 \| }), 721 \| encode({ 722 \| c: c.i, 723 \| r: data.length - 1, 724 \| }), 725 \| ] 726 \| : [ 727 \| encode({ 728 \| c: c.i, 729 \| r: 0, 730 \| }), 731 \| encode({ c: c.i, r: data.length - 1 }), 732 \| ])} 733 \| data-x={c.i} 734 \| title={c.data.title \|\| ""} 735 \| class="virtual-col" 736 \| class:selected={selected && 737 \| c.i >= topLeft.c && 738 \| bottomRight.c - 1 >= c.i} 739 \| class:hidden={c.data.type == "hidden"} 740 \| style={`text-align: ${c.data.align \|\| config.defaultColAlign};`} 741 \| > 742 \| {c.data.title \|\| XLSX.utils.encode_col(c.i)} 743 \| 746 \| c.i != 0 && 747 \| (columns[c.i - 1] = { 748 \| ...(columns[c.i - 1] \|\| {}), 749 \| width: getColumnsWidth(c.i - 1) + e.detail.x, 750 \| })} 751 \| class="col-resize left" 752 \| /> 753 \| 757 \| (columns[c.i] = { 758 \| ...(columns[c.i] \|\| {}), 759 \| width: getColumnsWidth(c.i) + e.detail.x, 760 \| })} 761 \| /> 762 \|
= topLeft.r && 777 \| bottomRight.r - 1 >= r.i} 778 \| style={`background-color: 779 \| #f3f3f3; 780 \| text-align: 781 \| center; 782 \| height: 783 \| ${getRowHeight(r.i)}px;`} 784 \| on:click={(e) => 785 \| (selected = 786 \| keypressed[16] && selected && selected[0] 787 \| ? [ 788 \| encode({ 789 \| c: 0, 790 \| r: decoded[0].r, 791 \| }), 792 \| encode({ 793 \| c: data[0].length - 1, 794 \| r: r.i, 795 \| }), 796 \| ] 797 \| : [ 798 \| encode({ 799 \| c: 0, 800 \| r: r.i, 801 \| }), 802 \| encode({ c: data[0].length - 1, r: r.i }), 803 \| ])} 804 \| > 805 \| 809 \| r.i != 0 && 810 \| (rows[r.i - 1] = { 811 \| ...(rows[r.i - 1] \|\| {}), 812 \| height: getRowHeight(r.i - 1) + e.detail.y, 813 \| })} 814 \| /> 815 \| 819 \| (rows[r.i] = { 820 \| ...(rows[r.i] \|\| {}), 821 \| height: getRowHeight(r.i) + e.detail.y, 822 \| })} 823 \| /> 824 \| {r.i + 1} 825 \|	= topLeft.c && 835 \| x.i < bottomRight.c && 836 \| r.i >= topLeft.r && 837 \| r.i < bottomRight.r} 838 \| on:dblclick={(_) => (edition = [x.i, r.i])} 839 \| class:readonly={columns[x.i] && columns[x.i].readOnly} 840 \| style={computeStyles( 841 \| x.i, 842 \| r.i, 843 \| rows[r.i], 844 \| style, 845 \| config, 846 \| r.data && r.data[x.i], 847 \| r.data && r.data[x.i + 1] 848 \| )} 849 \| > 850 \| {#if String(edition) == String([x.i, r.i])} 851 \| { 854 \| cmdz = false; 855 \| historyPush(data, rows, columns, style); 856 \| }} 857 \| on:input={(e) => onInputChange(e.target.value, r, x)} 858 \| value={(data[r.i] && data[r.i][x.i]) \|\| ""} 859 \| style={`width: ${getColumnsWidth( 860 \| x.i 861 \| )}px; height: ${getRowHeight(r.i)}px; min-height: 22px;`} 862 \| /> 863 \| {:else}{(r.data && r.data[x.i]) \|\| ""}{/if} 864 \|

711 | {#each visibleX as c, i} 712 |

714 | (selected = 715 | keypressed[16] && selected && selected[0] 716 | ? [ 717 | encode({ 718 | c: decoded[0].c, 719 | r: 0, 720 | }), 721 | encode({ 722 | c: c.i, 723 | r: data.length - 1, 724 | }), 725 | ] 726 | : [ 727 | encode({ 728 | c: c.i, 729 | r: 0, 730 | }), 731 | encode({ c: c.i, r: data.length - 1 }), 732 | ])} 733 | data-x={c.i} 734 | title={c.data.title || ""} 735 | class="virtual-col" 736 | class:selected={selected && 737 | c.i >= topLeft.c && 738 | bottomRight.c - 1 >= c.i} 739 | class:hidden={c.data.type == "hidden"} 740 | style={`text-align: ${c.data.align || config.defaultColAlign};`} 741 | > 742 | {c.data.title || XLSX.utils.encode_col(c.i)} 743 |

746 | c.i != 0 && 747 | (columns[c.i - 1] = { 748 | ...(columns[c.i - 1] || {}), 749 | width: getColumnsWidth(c.i - 1) + e.detail.x, 750 | })} 751 | class="col-resize left" 752 | /> 753 |

757 | (columns[c.i] = { 758 | ...(columns[c.i] || {}), 759 | width: getColumnsWidth(c.i) + e.detail.x, 760 | })} 761 | /> 762 |

= topLeft.r && 777 | bottomRight.r - 1 >= r.i} 778 | style={`background-color: 779 | #f3f3f3; 780 | text-align: 781 | center; 782 | height: 783 | ${getRowHeight(r.i)}px;`} 784 | on:click={(e) => 785 | (selected = 786 | keypressed[16] && selected && selected[0] 787 | ? [ 788 | encode({ 789 | c: 0, 790 | r: decoded[0].r, 791 | }), 792 | encode({ 793 | c: data[0].length - 1, 794 | r: r.i, 795 | }), 796 | ] 797 | : [ 798 | encode({ 799 | c: 0, 800 | r: r.i, 801 | }), 802 | encode({ c: data[0].length - 1, r: r.i }), 803 | ])} 804 | > 805 |

809 | r.i != 0 && 810 | (rows[r.i - 1] = { 811 | ...(rows[r.i - 1] || {}), 812 | height: getRowHeight(r.i - 1) + e.detail.y, 813 | })} 814 | /> 815 |

819 | (rows[r.i] = { 820 | ...(rows[r.i] || {}), 821 | height: getRowHeight(r.i) + e.detail.y, 822 | })} 823 | /> 824 | {r.i + 1} 825 |

= topLeft.c && 835 | x.i < bottomRight.c && 836 | r.i >= topLeft.r && 837 | r.i < bottomRight.r} 838 | on:dblclick={(_) => (edition = [x.i, r.i])} 839 | class:readonly={columns[x.i] && columns[x.i].readOnly} 840 | style={computeStyles( 841 | x.i, 842 | r.i, 843 | rows[r.i], 844 | style, 845 | config, 846 | r.data && r.data[x.i], 847 | r.data && r.data[x.i + 1] 848 | )} 849 | > 850 | {#if String(edition) == String([x.i, r.i])} 851 | { 854 | cmdz = false; 855 | historyPush(data, rows, columns, style); 856 | }} 857 | on:input={(e) => onInputChange(e.target.value, r, x)} 858 | value={(data[r.i] && data[r.i][x.i]) || ""} 859 | style={`width: ${getColumnsWidth( 860 | x.i 861 | )}px; height: ${getRowHeight(r.i)}px; min-height: 22px;`} 862 | /> 863 | {:else}{(r.data && r.data[x.i]) || ""}{/if} 864 |

870 |

871 |

872 | 873 | 1050 | -------------------------------------------------------------------------------- /package/Sheet.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponentTyped } from "svelte"; 2 | import type { Config } from "./defaultconfig"; 3 | declare const __propDef: { 4 | props: { 5 | data?: (string | number | boolean)[][]; 6 | columns?: any[]; 7 | rows?: any[]; 8 | mergeCells?: Record; 9 | style?: { 10 | [cellIndex: string]: string; 11 | }; 12 | selected?: [string, string]; 13 | extended?: [string, string]; 14 | currentValue?: string | number | boolean; 15 | clipboard: [string, string]; 16 | options: Config; 17 | startY?: number; 18 | startX?: number; 19 | endY?: number; 20 | endX?: number; 21 | onInputChange?: (value: any, row: any, column: any) => void; 22 | }; 23 | events: { 24 | [evt: string]: CustomEvent; 25 | }; 26 | slots: {}; 27 | }; 28 | export declare type SheetProps = typeof __propDef.props; 29 | export declare type SheetEvents = typeof __propDef.events; 30 | export declare type SheetSlots = typeof __propDef.slots; 31 | export default class Sheet extends SvelteComponentTyped { 32 | get onInputChange(): (value: any, row: any, column: any) => void; 33 | } 34 | export {}; 35 | -------------------------------------------------------------------------------- /package/Toolbar.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 34 | 35 |

36 | 37 | {#each sheetNames as sn, i} 38 |

{ 40 | active = i; 41 | }} 42 | class={"ml-4 cursor-pointer " + (i == active ? "active" : "")} 43 | > 44 | {sn} 45 |

46 | {/each} 47 |

48 | 49 | 70 | -------------------------------------------------------------------------------- /package/Toolbar.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponentTyped } from "svelte"; 2 | declare const __propDef: { 3 | props: { 4 | sheetNames: any; 5 | sheets?: any[]; 6 | active?: number; 7 | }; 8 | events: { 9 | [evt: string]: CustomEvent; 10 | }; 11 | slots: {}; 12 | }; 13 | export declare type ToolbarProps = typeof __propDef.props; 14 | export declare type ToolbarEvents = typeof __propDef.events; 15 | export declare type ToolbarSlots = typeof __propDef.slots; 16 | export default class Toolbar extends SvelteComponentTyped { 17 | } 18 | export {}; 19 | -------------------------------------------------------------------------------- /package/actions/copypaste.d.ts: -------------------------------------------------------------------------------- 1 | export declare function copypaste(node: any): void; 2 | -------------------------------------------------------------------------------- /package/actions/copypaste.js: -------------------------------------------------------------------------------- 1 | // copy-paste action (also support cut) 2 | export function copypaste(node) { 3 | const keyPressed = {}; 4 | function onKeyDown(e) { 5 | keyPressed[e.keyCode] = true; 6 | if (keyPressed[91] && keyPressed[88]) { 7 | e.preventDefault(); 8 | node.dispatchEvent(new CustomEvent("cut")); 9 | } 10 | if (keyPressed[91] && keyPressed[88]) { 11 | e.preventDefault(); 12 | node.dispatchEvent(new CustomEvent("paste")); 13 | } 14 | if (keyPressed[91] && keyPressed[88]) { 15 | e.preventDefault(); 16 | node.dispatchEvent(new CustomEvent("copy")); 17 | } 18 | } 19 | function onKeyUp(e) { 20 | keyPressed[e.keyCode] = false; 21 | } 22 | node.addEventListener("keydown", onKeyDown); 23 | node.addEventListener("keyup", onKeyUp); 24 | } 25 | -------------------------------------------------------------------------------- /package/actions/draggable.d.ts: -------------------------------------------------------------------------------- 1 | export declare function draggable(node: any): { 2 | destroy(): void; 3 | }; 4 | -------------------------------------------------------------------------------- /package/actions/draggable.js: -------------------------------------------------------------------------------- 1 | export function draggable(node) { 2 | let x; 3 | let y; 4 | function handleMousedown(event) { 5 | x = event.clientX; 6 | y = event.clientY; 7 | node.dispatchEvent(new CustomEvent("dragging", { 8 | detail: { x: 0, y: 0 }, 9 | })); 10 | window.addEventListener("mousemove", handleMousemove); 11 | window.addEventListener("mouseup", handleMouseup); 12 | } 13 | function handleMousemove(event) { 14 | const dx = event.clientX - x; 15 | const dy = event.clientY - y; 16 | // x = event.clientX; 17 | // y = event.clientY; 18 | node.dispatchEvent(new CustomEvent("dragging", { 19 | detail: { x: dx, y: dy }, 20 | })); 21 | } 22 | function handleMouseup(event) { 23 | const dx = event.clientX - x; 24 | const dy = event.clientY - y; 25 | node.dispatchEvent(new CustomEvent("dragging", { 26 | detail: { x: dx, y: dy }, 27 | })); 28 | window.removeEventListener("mousemove", handleMousemove); 29 | window.removeEventListener("mouseup", handleMouseup); 30 | } 31 | node.addEventListener("mousedown", handleMousedown); 32 | return { 33 | destroy() { 34 | node.removeEventListener("mousedown", handleMousedown); 35 | }, 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /package/actions/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from "./copypaste"; 2 | export * from "./draggable"; 3 | export * from "./resizable"; 4 | export * from "./rightclick"; 5 | export * from "./selected"; 6 | -------------------------------------------------------------------------------- /package/actions/index.js: -------------------------------------------------------------------------------- 1 | export * from "./copypaste"; 2 | export * from "./draggable"; 3 | export * from "./resizable"; 4 | export * from "./rightclick"; 5 | export * from "./selected"; 6 | -------------------------------------------------------------------------------- /package/actions/resizable.d.ts: -------------------------------------------------------------------------------- 1 | export declare function resizable(node: any): { 2 | destroy(): void; 3 | }; 4 | -------------------------------------------------------------------------------- /package/actions/resizable.js: -------------------------------------------------------------------------------- 1 | export function resizable(node) { 2 | let x; 3 | let y; 4 | function handleMousedown(event) { 5 | x = event.clientX; 6 | y = event.clientY; 7 | node.dispatchEvent(new CustomEvent("resizing", { 8 | detail: { x: 0, y: 0 }, 9 | })); 10 | window.addEventListener("mousemove", handleMousemove); 11 | window.addEventListener("mouseup", handleMouseup); 12 | } 13 | function handleMousemove(event) { 14 | const dx = event.clientX - x; 15 | const dy = event.clientY - y; 16 | x = event.clientX; 17 | y = event.clientY; 18 | node.dispatchEvent(new CustomEvent("resizing", { 19 | detail: { x: dx, y: dy }, 20 | })); 21 | } 22 | function handleMouseup(event) { 23 | const dx = event.clientX - x; 24 | const dy = event.clientY - y; 25 | node.dispatchEvent(new CustomEvent("resizing", { 26 | detail: { x: dx, y: dy }, 27 | })); 28 | window.removeEventListener("mousemove", handleMousemove); 29 | window.removeEventListener("mouseup", handleMouseup); 30 | } 31 | node.addEventListener("mousedown", handleMousedown); 32 | return { 33 | destroy() { 34 | node.removeEventListener("mousedown", handleMousedown); 35 | }, 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /package/actions/rightclick.d.ts: -------------------------------------------------------------------------------- 1 | export declare function rightclick(node: any): void; 2 | -------------------------------------------------------------------------------- /package/actions/rightclick.js: -------------------------------------------------------------------------------- 1 | export function rightclick(node) { } 2 | -------------------------------------------------------------------------------- /package/actions/selected.d.ts: -------------------------------------------------------------------------------- 1 | export declare function selection(node: any, { selection, rows, columns }: { 2 | selection: any; 3 | rows: any; 4 | columns: any; 5 | }): void; 6 | -------------------------------------------------------------------------------- /package/actions/selected.js: -------------------------------------------------------------------------------- 1 | import XLSX from "xlsx"; 2 | export function selection(node, { selection, rows, columns }) { 3 | const viewport = node.getBoundingClientRect(); 4 | const topleft = XLSX.utils.decode_cell(selection[0]); 5 | const bottomRight = XLSX.utils.decode_cell(selection[1]); 6 | const top = node.getElementByClassName(".top"); 7 | const bottom = node.getElementByClassName(".bottom"); 8 | const left = node.getElementByClassName(".left"); 9 | const right = node.getElementByClassName(".right"); 10 | } 11 | -------------------------------------------------------------------------------- /package/convert.d.ts: -------------------------------------------------------------------------------- 1 | export declare function getColumnName(i: any): string; 2 | /** 3 | * Convert jexcel id to excel like column name 4 | * 5 | * @param string id 6 | * @return string id 7 | */ 8 | export declare function getColumnNameFromId(cellId: any): string; 9 | /** 10 | * Convert excel like column to jexcel id 11 | * 12 | * @param string id 13 | * @return string id 14 | */ 15 | export declare function getIdFromColumnName(id: any, arr: any): any; 16 | export declare function convert(workbook: any): any[]; 17 | -------------------------------------------------------------------------------- /package/convert.js: -------------------------------------------------------------------------------- 1 | export function getColumnName(i) { 2 | var letter = ""; 3 | if (i > 701) { 4 | letter += String.fromCharCode(64 + parseInt(i / 676)); 5 | letter += String.fromCharCode(64 + parseInt((i % 676) / 26)); 6 | } 7 | else if (i > 25) { 8 | letter += String.fromCharCode(64 + parseInt(i / 26)); 9 | } 10 | letter += String.fromCharCode(65 + (i % 26)); 11 | return letter; 12 | } 13 | /** 14 | * Convert jexcel id to excel like column name 15 | * 16 | * @param string id 17 | * @return string id 18 | */ 19 | export function getColumnNameFromId(cellId) { 20 | if (!Array.isArray(cellId)) { 21 | cellId = cellId.split("-"); 22 | } 23 | return getColumnName(parseInt(cellId[0])) + (parseInt(cellId[1]) + 1); 24 | } 25 | /** 26 | * Convert excel like column to jexcel id 27 | * 28 | * @param string id 29 | * @return string id 30 | */ 31 | export function getIdFromColumnName(id, arr) { 32 | // Get the letters 33 | var t = /^[a-zA-Z]+/.exec(id); 34 | if (t) { 35 | // Base 26 calculation 36 | var code = 0; 37 | for (var i = 0; i < t[0].length; i++) { 38 | code += 39 | parseInt(t[0].charCodeAt(i) - 64) * Math.pow(26, t[0].length - 1 - i); 40 | } 41 | code--; 42 | // Make sure jexcel starts on zero 43 | if (code < 0) { 44 | code = 0; 45 | } 46 | // Number 47 | var number = parseInt(/[0-9]+$/.exec(id)); 48 | if (number > 0) { 49 | number--; 50 | } 51 | if (arr == true) { 52 | id = [code, number]; 53 | } 54 | else { 55 | id = code + "-" + number; 56 | } 57 | } 58 | return id; 59 | } 60 | export function convert(workbook) { 61 | var spreadsheets = []; 62 | workbook.SheetNames.forEach(function (sheetName) { 63 | var spreadsheet = { 64 | rows: [], 65 | columns: [], 66 | data: [], 67 | style: {}, 68 | sheetName: sheetName, 69 | mergeCells: [], 70 | }; 71 | // Column widths 72 | var temp = workbook.Sheets[sheetName]["!cols"]; 73 | if (temp && temp.length) { 74 | for (var i = 0; i < temp.length; i++) { 75 | spreadsheet.columns[i] = {}; 76 | if (temp[i] && temp[i].wpx) { 77 | spreadsheet.columns[i].width = temp[i].wpx + "px"; 78 | } 79 | } 80 | } 81 | // Rows heights 82 | var temp = workbook.Sheets[sheetName]["!rows"]; 83 | if (temp && temp.length) { 84 | for (var i = 0; i < temp.length; i++) { 85 | if (temp[i] && temp[i].hpx) { 86 | spreadsheet.rows[i] = {}; 87 | spreadsheet.rows[i].height = temp[i].hpx + "px"; 88 | } 89 | } 90 | } 91 | // Merge cells 92 | var temp = workbook.Sheets[sheetName]["!merges"]; 93 | if (temp && temp.length > 0) { 94 | for (var i = 0; i < temp.length; i++) { 95 | var x1 = temp[i].s.c; 96 | var y1 = temp[i].s.r; 97 | var x2 = temp[i].e.c; 98 | var y2 = temp[i].e.r; 99 | var key = getColumnNameFromId([x1, y1]); 100 | spreadsheet.mergeCells[key] = [x2 - x1 + 1, y2 - y1 + 1]; 101 | } 102 | } 103 | // Data container 104 | var max_x = 0; 105 | var max_y = 0; 106 | var temp = Object.keys(workbook.Sheets[sheetName]); 107 | for (var i = 0; i < temp.length; i++) { 108 | if (temp[i].substr(0, 1) != "!") { 109 | var cell = workbook.Sheets[sheetName][temp[i]]; 110 | var info = getIdFromColumnName(temp[i], true); 111 | if (!spreadsheet.data[info[1]]) { 112 | spreadsheet.data[info[1]] = []; 113 | } 114 | spreadsheet.data[info[1]][info[0]] = cell.f ? "=" + cell.f : cell.w; 115 | if (max_x < info[0]) { 116 | max_x = info[0]; 117 | } 118 | if (max_y < info[1]) { 119 | max_y = info[1]; 120 | } 121 | // Style 122 | if (cell.style && Object.keys(cell.style).length > 0) { 123 | spreadsheet.style[temp[i]] = cell.style; 124 | } 125 | if (cell.s && cell.s.fgColor) { 126 | if (spreadsheet.style[temp[i]]) { 127 | spreadsheet.style[temp[i]] += ";"; 128 | } 129 | // console.log( 130 | // "style bg-color ", 131 | // spreadsheet.style[temp[i]], 132 | // cell.s.fgColor.rgb 133 | // ); 134 | spreadsheet.style[temp[i]] = 135 | (spreadsheet.style[temp[i]] || "") + 136 | "background-color:#" + 137 | cell.s.fgColor.rgb; 138 | } 139 | } 140 | } 141 | // ensure we have enough columns to display all the data 142 | const maxColumns = spreadsheet.data.reduce((acc, cur) => (cur.length > acc ? (acc = cur.length) : acc), 0); 143 | spreadsheet.columns = spreadsheet.columns.slice(0, maxColumns); 144 | for (var i = 0; i <= maxColumns; i++) { 145 | if (!spreadsheet.columns[i]) { 146 | spreadsheet.columns[i] = { width: "100px" }; 147 | } 148 | } 149 | for (var j = 0; j <= max_y; j++) { 150 | for (var i = 0; i <= max_x; i++) { 151 | if (!spreadsheet.data[j]) { 152 | spreadsheet.data[j] = []; 153 | } 154 | if (!spreadsheet.data[j][i]) { 155 | if (maxColumns < i) { 156 | spreadsheet.data[j][i] = ""; 157 | } 158 | } 159 | } 160 | } 161 | spreadsheets.push(spreadsheet); 162 | }); 163 | return spreadsheets; 164 | } 165 | -------------------------------------------------------------------------------- /package/defaultconfig.d.ts: -------------------------------------------------------------------------------- 1 | export declare const defaultconfig: { 2 | url: any; 3 | copyCompatibility: boolean; 4 | root: any; 5 | colHeaders: any[]; 6 | colWidths: any[]; 7 | colAlignments: any[]; 8 | nestedHeaders: any; 9 | defaultColWidth: number; 10 | defaultColAlign: string; 11 | minSpareRows: number; 12 | minSpareCols: number; 13 | minDimensions: number[]; 14 | allowExport: boolean; 15 | includeHeadersOnDownload: boolean; 16 | includeHeadersOnCopy: boolean; 17 | columnSorting: boolean; 18 | columnDrag: boolean; 19 | columnResize: boolean; 20 | rowResize: boolean; 21 | rowDrag: boolean; 22 | editable: boolean; 23 | allowInsertRow: boolean; 24 | allowManualInsertRow: boolean; 25 | allowInsertColumn: boolean; 26 | allowManualInsertColumn: boolean; 27 | allowDeleteRow: boolean; 28 | allowDeletingAllRows: boolean; 29 | allowDeleteColumn: boolean; 30 | allowRenameColumn: boolean; 31 | allowComments: boolean; 32 | wordWrap: boolean; 33 | imageOptions: any; 34 | csv: any; 35 | csvFileName: string; 36 | csvHeaders: boolean; 37 | csvDelimiter: string; 38 | parseTableFirstRowAsHeader: boolean; 39 | parseTableAutoCellType: boolean; 40 | selectionCopy: boolean; 41 | toolbar: any; 42 | search: boolean; 43 | pagination: boolean; 44 | paginationOptions: any; 45 | fullscreen: boolean; 46 | lazyLoading: boolean; 47 | loadingSpin: boolean; 48 | tableOverflow: boolean; 49 | tableHeight: string; 50 | tableWidth: any; 51 | meta: any; 52 | style: any; 53 | parseFormulas: boolean; 54 | autoIncrement: boolean; 55 | autoCasting: boolean; 56 | secureFormulas: boolean; 57 | stripHTML: boolean; 58 | stripHTMLOnCopy: boolean; 59 | filters: boolean; 60 | footers: any; 61 | onundo: any; 62 | onredo: any; 63 | onload: any; 64 | onchange: any; 65 | oncomments: any; 66 | onbeforechange: any; 67 | onafterchanges: any; 68 | onbeforeinsertrow: any; 69 | oninsertrow: any; 70 | onbeforeinsertcolumn: any; 71 | oninsertcolumn: any; 72 | onbeforedeleterow: any; 73 | ondeleterow: any; 74 | onbeforedeletecolumn: any; 75 | ondeletecolumn: any; 76 | onmoverow: any; 77 | onmovecolumn: any; 78 | onresizerow: any; 79 | onresizecolumn: any; 80 | onsort: any; 81 | onselection: any; 82 | oncopy: any; 83 | onpaste: any; 84 | onbeforepaste: any; 85 | onmerge: any; 86 | onfocus: any; 87 | onblur: any; 88 | onchangeheader: any; 89 | oncreateeditor: any; 90 | oneditionstart: any; 91 | oneditionend: any; 92 | onchangestyle: any; 93 | onchangemeta: any; 94 | onchangepage: any; 95 | onbeforesave: any; 96 | onsave: any; 97 | onevent: any; 98 | persistance: boolean; 99 | updateTable: any; 100 | detachForUpdates: boolean; 101 | freezeColumns: any; 102 | text: { 103 | noRecordsFound: string; 104 | showingPage: string; 105 | show: string; 106 | search: string; 107 | entries: string; 108 | columnName: string; 109 | insertANewColumnBefore: string; 110 | insertANewColumnAfter: string; 111 | deleteSelectedColumns: string; 112 | renameThisColumn: string; 113 | orderAscending: string; 114 | orderDescending: string; 115 | insertANewRowBefore: string; 116 | insertANewRowAfter: string; 117 | deleteSelectedRows: string; 118 | editComments: string; 119 | addComments: string; 120 | comments: string; 121 | clearComments: string; 122 | copy: string; 123 | paste: string; 124 | saveAs: string; 125 | about: string; 126 | areYouSureToDeleteTheSelectedRows: string; 127 | areYouSureToDeleteTheSelectedColumns: string; 128 | thisActionWillDestroyAnyExistingMergedCellsAreYouSure: string; 129 | thisActionWillClearYourSearchResultsAreYouSure: string; 130 | thereIsAConflictWithAnotherMergedCell: string; 131 | invalidMergeProperties: string; 132 | cellAlreadyMerged: string; 133 | noCellsSelected: string; 134 | }; 135 | }; 136 | export declare type Config = typeof defaultconfig; 137 | -------------------------------------------------------------------------------- /package/defaultconfig.js: -------------------------------------------------------------------------------- 1 | export const defaultconfig = { 2 | // External data 3 | url: null, 4 | // Data 5 | // data, 6 | // Copy behavior 7 | copyCompatibility: false, 8 | root: null, 9 | // Rows and columns definitions 10 | // rows: [], 11 | // columns, 12 | // Deprected legacy options 13 | colHeaders: [], 14 | colWidths: [], 15 | colAlignments: [], 16 | nestedHeaders: null, 17 | // Column width that is used by default 18 | defaultColWidth: 50, 19 | defaultColAlign: "center", 20 | // Spare rows and columns 21 | minSpareRows: 0, 22 | minSpareCols: 0, 23 | // Minimal table dimensions 24 | minDimensions: [0, 0], 25 | // Allow Export 26 | allowExport: true, 27 | // @type {boolean} - Include the header titles on download 28 | includeHeadersOnDownload: false, 29 | // @type {boolean} - Include the header titles on copy 30 | includeHeadersOnCopy: false, 31 | // Allow column sorting 32 | columnSorting: true, 33 | // Allow column dragging 34 | columnDrag: false, 35 | // Allow column resizing 36 | columnResize: true, 37 | // Allow row resizing 38 | rowResize: false, 39 | // Allow row dragging 40 | rowDrag: true, 41 | // Allow table edition 42 | editable: true, 43 | // Allow new rows 44 | allowInsertRow: true, 45 | // Allow new rows 46 | allowManualInsertRow: true, 47 | // Allow new columns 48 | allowInsertColumn: true, 49 | // Allow new rows 50 | allowManualInsertColumn: true, 51 | // Allow row delete 52 | allowDeleteRow: true, 53 | // Allow deleting of all rows 54 | allowDeletingAllRows: false, 55 | // Allow column delete 56 | allowDeleteColumn: true, 57 | // Allow rename column 58 | allowRenameColumn: true, 59 | // Allow comments 60 | allowComments: false, 61 | // Global wrap 62 | wordWrap: false, 63 | // Image options 64 | imageOptions: null, 65 | // CSV source 66 | csv: null, 67 | // Filename 68 | csvFileName: "jexcel", 69 | // Consider first line as header 70 | csvHeaders: true, 71 | // Delimiters 72 | csvDelimiter: ",", 73 | // First row as header 74 | parseTableFirstRowAsHeader: false, 75 | parseTableAutoCellType: false, 76 | // Disable corner selection 77 | selectionCopy: true, 78 | // Merged cells 79 | // mergeCells: {}, 80 | // Create toolbar 81 | toolbar: null, 82 | // Allow search 83 | search: false, 84 | // Create pagination 85 | pagination: false, 86 | paginationOptions: null, 87 | // Full screen 88 | fullscreen: false, 89 | // Lazy loading 90 | lazyLoading: false, 91 | loadingSpin: false, 92 | // Table overflow 93 | tableOverflow: false, 94 | tableHeight: "300px", 95 | tableWidth: null, 96 | // Meta 97 | meta: null, 98 | // Style 99 | style: null, 100 | // Execute formulas 101 | parseFormulas: true, 102 | autoIncrement: true, 103 | autoCasting: true, 104 | // Security 105 | secureFormulas: true, 106 | stripHTML: true, 107 | stripHTMLOnCopy: false, 108 | // Filters 109 | filters: false, 110 | footers: null, 111 | // Event handles 112 | onundo: null, 113 | onredo: null, 114 | onload: null, 115 | onchange: null, 116 | oncomments: null, 117 | onbeforechange: null, 118 | onafterchanges: null, 119 | onbeforeinsertrow: null, 120 | oninsertrow: null, 121 | onbeforeinsertcolumn: null, 122 | oninsertcolumn: null, 123 | onbeforedeleterow: null, 124 | ondeleterow: null, 125 | onbeforedeletecolumn: null, 126 | ondeletecolumn: null, 127 | onmoverow: null, 128 | onmovecolumn: null, 129 | onresizerow: null, 130 | onresizecolumn: null, 131 | onsort: null, 132 | onselection: null, 133 | oncopy: null, 134 | onpaste: null, 135 | onbeforepaste: null, 136 | onmerge: null, 137 | onfocus: null, 138 | onblur: null, 139 | onchangeheader: null, 140 | oncreateeditor: null, 141 | oneditionstart: null, 142 | oneditionend: null, 143 | onchangestyle: null, 144 | onchangemeta: null, 145 | onchangepage: null, 146 | onbeforesave: null, 147 | onsave: null, 148 | // Global event dispatcher 149 | onevent: null, 150 | // Persistance 151 | persistance: false, 152 | // Customize any cell behavior 153 | updateTable: null, 154 | // Detach the HTML table when calling updateTable 155 | detachForUpdates: false, 156 | freezeColumns: null, 157 | // Texts 158 | text: { 159 | noRecordsFound: "No records found", 160 | showingPage: "Showing page {0} of {1} entries", 161 | show: "Show ", 162 | search: "Search", 163 | entries: " entries", 164 | columnName: "Column name", 165 | insertANewColumnBefore: "Insert a new column before", 166 | insertANewColumnAfter: "Insert a new column after", 167 | deleteSelectedColumns: "Delete selected columns", 168 | renameThisColumn: "Rename this column", 169 | orderAscending: "Order ascending", 170 | orderDescending: "Order descending", 171 | insertANewRowBefore: "Insert a new row before", 172 | insertANewRowAfter: "Insert a new row after", 173 | deleteSelectedRows: "Delete selected rows", 174 | editComments: "Edit comments", 175 | addComments: "Add comments", 176 | comments: "Comments", 177 | clearComments: "Clear comments", 178 | copy: "Copy...", 179 | paste: "Paste...", 180 | saveAs: "Save as...", 181 | about: "About", 182 | areYouSureToDeleteTheSelectedRows: "Are you sure to delete the selected rows?", 183 | areYouSureToDeleteTheSelectedColumns: "Are you sure to delete the selected columns?", 184 | thisActionWillDestroyAnyExistingMergedCellsAreYouSure: "This action will destroy any existing merged cells. Are you sure?", 185 | thisActionWillClearYourSearchResultsAreYouSure: "This action will clear your search results. Are you sure?", 186 | thereIsAConflictWithAnotherMergedCell: "There is a conflict with another merged cell", 187 | invalidMergeProperties: "Invalid merged properties", 188 | cellAlreadyMerged: "Cell already merged", 189 | noCellsSelected: "No cells selected", 190 | }, 191 | }; 192 | -------------------------------------------------------------------------------- /package/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default as Menu } from "./Menu.svelte"; 2 | export { default as Open } from "./Open.svelte"; 3 | export { default as Sheet } from "./Sheet.svelte"; 4 | export { default as Toolbar } from "./Toolbar.svelte"; 5 | export * from "./actions"; 6 | export * from "./utilities"; 7 | -------------------------------------------------------------------------------- /package/index.js: -------------------------------------------------------------------------------- 1 | // quick fix for SSR support 2 | if (typeof window == "undefined") { 3 | global.document = {}; 4 | global.window = {}; 5 | } 6 | export { default as Menu } from "./Menu.svelte"; 7 | export { default as Open } from "./Open.svelte"; 8 | export { default as Sheet } from "./Sheet.svelte"; 9 | export { default as Toolbar } from "./Toolbar.svelte"; 10 | export * from "./actions"; 11 | export * from "./utilities"; 12 | -------------------------------------------------------------------------------- /package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-sheets", 3 | "version": "1.0.0", 4 | "description": "Run your excel sheet in the browser!", 5 | "main": "index.js", 6 | "types": "index.d.ts", 7 | "keywords": [ 8 | "svelte", 9 | "xlsx", 10 | "excel", 11 | "spreadsheets" 12 | ], 13 | "author": "Thibaut Duchêne", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "@sveltejs/adapter-auto": "next", 17 | "@sveltejs/adapter-static": "^1.0.0-next.30", 18 | "@sveltejs/kit": "next", 19 | "@tsconfig/svelte": "^3.0.0", 20 | "prettier": "^2.5.1", 21 | "prettier-plugin-svelte": "^2.5.0", 22 | "svelte": "^3.44.0", 23 | "svelte-check": "^2.2.6", 24 | "svelte-preprocess": "^4.10.1", 25 | "svelte2tsx": "^0.5.10", 26 | "tslib": "^2.3.1", 27 | "typescript": "~4.6.2" 28 | }, 29 | "peerDependencies": { 30 | "xlsx": "^0.16.9", 31 | "b64-to-blob": "^1.2.19", 32 | "hotkeys-js": "^3.8.1" 33 | }, 34 | "dependencies": { 35 | "b64-to-blob": "^1.2.19", 36 | "hotkeys-js": "^3.8.1", 37 | "xlsx": "^0.16.9" 38 | }, 39 | "type": "module", 40 | "exports": { 41 | "./package.json": "./package.json", 42 | "./Menu.svelte": "./Menu.svelte", 43 | "./Open.svelte": "./Open.svelte", 44 | "./Sheet.svelte": "./Sheet.svelte", 45 | "./Toolbar.svelte": "./Toolbar.svelte", 46 | "./actions/copypaste": "./actions/copypaste.js", 47 | "./actions/draggable": "./actions/draggable.js", 48 | "./actions": "./actions/index.js", 49 | "./actions/resizable": "./actions/resizable.js", 50 | "./actions/rightclick": "./actions/rightclick.js", 51 | "./actions/selected": "./actions/selected.js", 52 | "./convert": "./convert.js", 53 | "./defaultconfig": "./defaultconfig.js", 54 | ".": "./index.js", 55 | "./utilities": "./utilities.js" 56 | }, 57 | "svelte": "./index.js" 58 | } -------------------------------------------------------------------------------- /package/utilities.d.ts: -------------------------------------------------------------------------------- 1 | import * as XLSX from "xlsx"; 2 | export declare const computeStyles: (c: any, r: any, row: any, style: any, options: any, value: any, nextValue: any) => string; 3 | export declare function GetCellByAddress(map: any, c: any, r: any): any; 4 | export declare function GetColSpan(map: any, c: any, r: any): any; 5 | export declare function GetRowSpan(map: any, c: any, r: any): any; 6 | export declare function download(sheets: any[], fileName: string): Promise; 7 | export declare function upload(sheets: any[], uploadURL: string): Promise; 8 | export declare function removeColumns(selection: XLSX.CellAddress[], data: any[][]): any[][]; 9 | export declare function removeRows(selection: XLSX.CellAddress[], data: any[][]): any[][]; 10 | export declare function pasteSelection(data: any, pasted: [string, string], selected: [string, string]): any; 11 | export declare function clearSelection(data: any, selected: [string, string]): any; 12 | export declare function deleteSelection(data: any, selected: [string, string]): any; 13 | export declare function mergeSelectExtends(data: any[][], selected: [string, string], extended: [string, string]): any[][]; 14 | -------------------------------------------------------------------------------- /package/utilities.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 3 | return new (P || (P = Promise))(function (resolve, reject) { 4 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 5 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 6 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 7 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 8 | }); 9 | }; 10 | import * as XLSX from "xlsx"; 11 | import btob from "b64-to-blob"; 12 | function getRowHeight(row) { 13 | var _a; 14 | try { 15 | const height = Number(typeof (row === null || row === void 0 ? void 0 : row.height) == "string" 16 | ? (_a = row === null || row === void 0 ? void 0 : row.height) === null || _a === void 0 ? void 0 : _a.replace("px", "") 17 | : (row === null || row === void 0 ? void 0 : row.height) || 24 // consider adding a config.defaultRowHeight 18 | ); 19 | return height > 24 ? height : 24; 20 | } 21 | catch (e) { 22 | return 24; 23 | } 24 | } 25 | export const computeStyles = (c, r, row, style, options, value, nextValue) => { 26 | // ${ 27 | // c.wordWrap != false && 28 | // (options.wordWrap || c.wordwrap || value?.length > 200) 29 | // ? "white-space: pre-wrap;" 30 | // : "" 31 | // } 32 | return `text-align: ${c.align || "center"}; 33 | height: ${getRowHeight(row)}px; 34 | overflow: ${nextValue && nextValue.length ? "hidden" : "visible"}; 35 | ${style[XLSX.utils.encode_cell({ c, r })]}; 36 | `; 37 | }; 38 | export function GetCellByAddress(map, c, r) { 39 | return map[XLSX.utils.encode_cell({ 40 | c, 41 | r, 42 | })]; 43 | } 44 | export function GetColSpan(map, c, r) { 45 | return ((GetCellByAddress(map, c, r) && GetCellByAddress(map, c, r)[0]) || undefined); 46 | } 47 | export function GetRowSpan(map, c, r) { 48 | return ((GetCellByAddress(map, c, r) && GetCellByAddress(map, c, r)[1]) || undefined); 49 | } 50 | export function download(sheets, fileName) { 51 | return __awaiter(this, void 0, void 0, function* () { 52 | const wb = XLSX.utils.book_new(); 53 | const wss = []; 54 | sheets.map((s, i) => { 55 | const ws = XLSX.utils.aoa_to_sheet(s.data); 56 | XLSX.utils.book_append_sheet(wb, ws, s.sheetName); 57 | }); 58 | XLSX.writeFile(wb, fileName); 59 | }); 60 | } 61 | export function upload(sheets, uploadURL) { 62 | return __awaiter(this, void 0, void 0, function* () { 63 | if (!sheets) 64 | return; 65 | const wb = XLSX.utils.book_new(); 66 | sheets.map((s, i) => { 67 | const ws = XLSX.utils.aoa_to_sheet(s.data); 68 | XLSX.utils.book_append_sheet(wb, ws, s.sheetName); 69 | }); 70 | const wbout = XLSX.write(wb, { 71 | bookType: "xlsx", 72 | bookSST: false, 73 | type: "base64", 74 | }); 75 | const formData = new FormData(); 76 | formData.append("file", btob(wbout, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"), "test.xlsx"); 77 | const req = yield fetch(uploadURL, { 78 | method: "POST", 79 | body: formData, 80 | }); 81 | if (req.status == 400) { 82 | const res = yield req.json(); // res contains the list of errors 83 | return res; 84 | } 85 | return []; 86 | }); 87 | } 88 | // Return bottomRight, and topLeft border for one selection 89 | function getBorder(selection) { 90 | const br = { 91 | c: selection[0].c > selection[1].c ? selection[0].c : selection[1].c, 92 | r: selection[0].r > selection[1].r ? selection[0].r : selection[1].r, 93 | }; 94 | const tl = { 95 | c: selection[0].c < selection[1].c ? selection[0].c : selection[1].c, 96 | r: selection[0].r < selection[1].r ? selection[0].r : selection[1].r, 97 | }; 98 | return { tl, br }; 99 | } 100 | export function removeColumns(selection, data) { 101 | const { tl, br } = getBorder(selection); 102 | return data.map((d) => d.filter((_, i) => !(i >= tl.c && i <= br.c))); 103 | } 104 | export function removeRows(selection, data) { 105 | const { tl, br } = getBorder(selection); 106 | return data.filter((d, i) => !(i >= tl.c && i <= br.c)); 107 | } 108 | function decode(address) { 109 | return [ 110 | XLSX.utils.decode_cell(address[0]), 111 | XLSX.utils.decode_cell(address[1]), 112 | ]; 113 | } 114 | export function pasteSelection(data, pasted, selected) { 115 | const dpaste = getBorder(decode(pasted)); 116 | const dselect = getBorder(decode(selected)); 117 | const dx = dselect.tl.c - dpaste.tl.c; 118 | const dy = dselect.tl.r - dpaste.tl.r; 119 | console.log(dx, dy); 120 | for (var r = dpaste.tl.r; r <= dpaste.br.r; r++) { 121 | for (var c = dpaste.tl.c; c <= dpaste.br.c; c++) { 122 | if (data.length - 1 < r + dy) { 123 | data = [...data, Array.from({ length: r + dy - data.length + 1 })]; 124 | } 125 | data[r + dy][c + dx] = data[r][c]; 126 | } 127 | } 128 | return data; 129 | } 130 | export function clearSelection(data, selected) { 131 | console.log("clear"); 132 | const dselect = getBorder(decode(selected)); 133 | for (var r = dselect.tl.r; r <= dselect.br.r; r++) { 134 | for (var c = dselect.tl.c; r <= dselect.br.c; c++) { 135 | if (data.length - 1 < r) 136 | return; 137 | data[r][c] = ""; 138 | } 139 | } 140 | return data; 141 | } 142 | export function deleteSelection(data, selected) { 143 | const dselect = getBorder(decode(selected)); 144 | if (dselect.br.c == data[0].length - 1) { 145 | // delete rows 146 | data = data.filter((v, i) => { 147 | return i < dselect.tl.r || i > dselect.br.r; 148 | }); 149 | } 150 | if (dselect.br.r == data.length - 1) { 151 | // delete columns 152 | console.log("delete columns"); 153 | data = data.map((c) => c.filter((v, i) => { 154 | return i < dselect.tl.c || i > dselect.br.c; 155 | })); 156 | } 157 | return data; 158 | } 159 | export function mergeSelectExtends(data, selected, extended) { 160 | // merge logic here... 161 | const sel = getBorder(decode(selected)); 162 | const ext = getBorder(decode(extended)); 163 | // if extended is inside selected 164 | if (ext.tl.c >= sel.tl.c && 165 | ext.br.c <= sel.br.c && 166 | ext.tl.r >= sel.tl.r && 167 | ext.br.r <= sel.br.r) { 168 | // every cells outside ext and inside sel are emptied 169 | for (var c = sel.tl.c; c <= sel.br.c; c++) { 170 | for (var r = sel.tl.r; r <= sel.br.r; r++) { 171 | // if the cell is outside extended and inside selected erase it 172 | if (c > ext.br.c || r > ext.br.r) { 173 | data[r][c] = ""; 174 | } 175 | } 176 | } 177 | } 178 | else { 179 | // extended extend the selection 180 | // for all cells outside selection 181 | for (var c = ext.tl.c; c <= ext.br.c; c++) { 182 | for (var r = ext.tl.r; r <= ext.br.r; r++) { 183 | const brsel = { c: sel.br.c + 1, r: sel.br.r + 1 }; 184 | const selwidth = brsel.c - sel.tl.c; 185 | const selheight = brsel.r - sel.tl.r; 186 | if (c < sel.tl.c) { 187 | // cell is on the left 188 | data[r][c] = 189 | data[r][sel.br.c - (Math.abs(c - sel.tl.c + 1) % selwidth)]; 190 | } 191 | if (c > sel.br.c) { 192 | // cell is on the right 193 | data[r][c] = data[r][sel.tl.c + ((c - sel.br.c - 1) % selwidth)]; 194 | } 195 | // if extended to unknown rows territory 196 | if (data.length - 1 < r) { 197 | data = [...data, Array.from({ length: r - data.length + 1 })]; 198 | } 199 | if (r < sel.tl.r) { 200 | // cell is on top 201 | data[r][c] = 202 | data[sel.br.r - (Math.abs(r - sel.tl.r + 1) % selheight)][c]; 203 | } 204 | if (r > sel.br.r) { 205 | // cell is below 206 | data[r][c] = data[sel.tl.r + ((r - sel.br.r - 1) % selheight)][c]; 207 | } 208 | } 209 | } 210 | } 211 | return data; 212 | } 213 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // See https://kit.svelte.dev/docs/types#app 4 | // for information about these interfaces 5 | declare namespace App { 6 | // interface Locals {} 7 | // interface Platform {} 8 | // interface Session {} 9 | // interface Stuff {} 10 | } 11 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | %svelte.head% 9 | 10 | 11 |

%svelte.body%

12 | 13 | 14 | -------------------------------------------------------------------------------- /src/lib/Menu.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 |

16 |

cut(e)}> 17 |

Cut

18 |

⌘X

19 |

20 |

copy(e)}> 21 |

Copy

22 |

⌘C

23 |

24 |

paste(e)}> 25 |

Paste

26 |

⌘P

27 |

28 |

29 |

Insert

30 |

delet(e)}>Delete

31 |

clear(e)}>Clear contents

32 |

33 | 34 | 69 | -------------------------------------------------------------------------------- /src/lib/Open.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | 34 | 41 | -------------------------------------------------------------------------------- /src/lib/Sheet.svelte: -------------------------------------------------------------------------------- 1 | 662 | 663 |

showMenu(e)} 668 | on:mousedown={onMouseDown} 669 | on:mouseup={onMouseUp} 670 | on:mouseover={onMouseOver} 671 | tabindex="1" 672 | > 673 |

685 | (menuX = 0)} 690 | style="padding-top: {top}px; padding-bottom: {bottom}px; padding-left: {left}px; padding-right: {right}px;" 691 | bind:this={contents} 692 | > 693 |

698 |

703 |

708 |

713 |

714 |

715 |

716 |

717 |

718 |

719 |

{ 723 | squareX = e.detail.x; 724 | squareY = e.detail.y; 725 | }} 726 | class="square absolute" 727 | id="square" 728 | bind:this={square} 729 | /> 730 | (clipboard = selected)} 735 | cut={(e) => (clipboard = selected)} 736 | paste={(e) => (data = pasteSelection(data, clipboard, selected))} 737 | clear={(e) => (data = clearSelection(data, selected))} 738 | delet={(e) => (data = deleteSelection(data, selected))} 739 | /> 740 |

741 | 742 | {#each visibleX as v} 743 | 744 | {/each} 745 | 746 | 751 | 752 | 805 | {/each} 806 | 807 | 808 | 809 | {#each visibleY as r} 810 | 815 | 868 | {#each visibleX as x, i} 869 | 907 | {/each} 908 | 909 | {/each} 910 | 911 |

753 \| {#each visibleX as c, i} 754 \|	756 \| (selected = 757 \| keypressed[16] && selected && selected[0] 758 \| ? [ 759 \| encode({ 760 \| c: decoded[0].c, 761 \| r: 0, 762 \| }), 763 \| encode({ 764 \| c: c.i, 765 \| r: data.length - 1, 766 \| }), 767 \| ] 768 \| : [ 769 \| encode({ 770 \| c: c.i, 771 \| r: 0, 772 \| }), 773 \| encode({ c: c.i, r: data.length - 1 }), 774 \| ])} 775 \| data-x={c.i} 776 \| title={c.data.title \|\| ""} 777 \| class="virtual-col" 778 \| class:selected={selected && 779 \| c.i >= topLeft.c && 780 \| bottomRight.c - 1 >= c.i} 781 \| class:hidden={c.data.type == "hidden"} 782 \| style={`text-align: ${c.data.align \|\| config.defaultColAlign};`} 783 \| > 784 \| {c.data.title \|\| XLSX.utils.encode_col(c.i)} 785 \| 788 \| c.i != 0 && 789 \| (columns[c.i - 1] = { 790 \| ...(columns[c.i - 1] \|\| {}), 791 \| width: getColumnsWidth(c.i - 1) + e.detail.x, 792 \| })} 793 \| class="col-resize left" 794 \| /> 795 \| 799 \| (columns[c.i] = { 800 \| ...(columns[c.i] \|\| {}), 801 \| width: getColumnsWidth(c.i) + e.detail.x, 802 \| })} 803 \| /> 804 \|
= topLeft.r && 819 \| bottomRight.r - 1 >= r.i} 820 \| style={`background-color: 821 \| #f3f3f3; 822 \| text-align: 823 \| center; 824 \| height: 825 \| ${getRowHeight(r.i)}px;`} 826 \| on:click={(e) => 827 \| (selected = 828 \| keypressed[16] && selected && selected[0] 829 \| ? [ 830 \| encode({ 831 \| c: 0, 832 \| r: decoded[0].r, 833 \| }), 834 \| encode({ 835 \| c: data[0].length - 1, 836 \| r: r.i, 837 \| }), 838 \| ] 839 \| : [ 840 \| encode({ 841 \| c: 0, 842 \| r: r.i, 843 \| }), 844 \| encode({ c: data[0].length - 1, r: r.i }), 845 \| ])} 846 \| > 847 \| 851 \| r.i != 0 && 852 \| (rows[r.i - 1] = { 853 \| ...(rows[r.i - 1] \|\| {}), 854 \| height: getRowHeight(r.i - 1) + e.detail.y, 855 \| })} 856 \| /> 857 \| 861 \| (rows[r.i] = { 862 \| ...(rows[r.i] \|\| {}), 863 \| height: getRowHeight(r.i) + e.detail.y, 864 \| })} 865 \| /> 866 \| {r.i + 1} 867 \|	= topLeft.c && 877 \| x.i < bottomRight.c && 878 \| r.i >= topLeft.r && 879 \| r.i < bottomRight.r} 880 \| on:dblclick={(_) => (edition = [x.i, r.i])} 881 \| class:readonly={columns[x.i] && columns[x.i].readOnly} 882 \| style={computeStyles( 883 \| x.i, 884 \| r.i, 885 \| rows[r.i], 886 \| style, 887 \| config, 888 \| r.data && r.data[x.i], 889 \| r.data && r.data[x.i + 1] 890 \| )} 891 \| > 892 \| {#if String(edition) == String([x.i, r.i])} 893 \| { 896 \| cmdz = false; 897 \| historyPush(data, rows, columns, style); 898 \| }} 899 \| on:input={(e) => onInputChange(e.target.value, r, x)} 900 \| value={(data[r.i] && data[r.i][x.i]) \|\| ""} 901 \| style={`width: ${getColumnsWidth( 902 \| x.i 903 \| )}px; height: ${getRowHeight(r.i)}px; min-height: 22px;`} 904 \| /> 905 \| {:else}{(r.data && r.data[x.i]) \|\| ""}{/if} 906 \|

753 | {#each visibleX as c, i} 754 |

756 | (selected = 757 | keypressed[16] && selected && selected[0] 758 | ? [ 759 | encode({ 760 | c: decoded[0].c, 761 | r: 0, 762 | }), 763 | encode({ 764 | c: c.i, 765 | r: data.length - 1, 766 | }), 767 | ] 768 | : [ 769 | encode({ 770 | c: c.i, 771 | r: 0, 772 | }), 773 | encode({ c: c.i, r: data.length - 1 }), 774 | ])} 775 | data-x={c.i} 776 | title={c.data.title || ""} 777 | class="virtual-col" 778 | class:selected={selected && 779 | c.i >= topLeft.c && 780 | bottomRight.c - 1 >= c.i} 781 | class:hidden={c.data.type == "hidden"} 782 | style={`text-align: ${c.data.align || config.defaultColAlign};`} 783 | > 784 | {c.data.title || XLSX.utils.encode_col(c.i)} 785 |

788 | c.i != 0 && 789 | (columns[c.i - 1] = { 790 | ...(columns[c.i - 1] || {}), 791 | width: getColumnsWidth(c.i - 1) + e.detail.x, 792 | })} 793 | class="col-resize left" 794 | /> 795 |

799 | (columns[c.i] = { 800 | ...(columns[c.i] || {}), 801 | width: getColumnsWidth(c.i) + e.detail.x, 802 | })} 803 | /> 804 |

= topLeft.r && 819 | bottomRight.r - 1 >= r.i} 820 | style={`background-color: 821 | #f3f3f3; 822 | text-align: 823 | center; 824 | height: 825 | ${getRowHeight(r.i)}px;`} 826 | on:click={(e) => 827 | (selected = 828 | keypressed[16] && selected && selected[0] 829 | ? [ 830 | encode({ 831 | c: 0, 832 | r: decoded[0].r, 833 | }), 834 | encode({ 835 | c: data[0].length - 1, 836 | r: r.i, 837 | }), 838 | ] 839 | : [ 840 | encode({ 841 | c: 0, 842 | r: r.i, 843 | }), 844 | encode({ c: data[0].length - 1, r: r.i }), 845 | ])} 846 | > 847 |

851 | r.i != 0 && 852 | (rows[r.i - 1] = { 853 | ...(rows[r.i - 1] || {}), 854 | height: getRowHeight(r.i - 1) + e.detail.y, 855 | })} 856 | /> 857 |

861 | (rows[r.i] = { 862 | ...(rows[r.i] || {}), 863 | height: getRowHeight(r.i) + e.detail.y, 864 | })} 865 | /> 866 | {r.i + 1} 867 |

= topLeft.c && 877 | x.i < bottomRight.c && 878 | r.i >= topLeft.r && 879 | r.i < bottomRight.r} 880 | on:dblclick={(_) => (edition = [x.i, r.i])} 881 | class:readonly={columns[x.i] && columns[x.i].readOnly} 882 | style={computeStyles( 883 | x.i, 884 | r.i, 885 | rows[r.i], 886 | style, 887 | config, 888 | r.data && r.data[x.i], 889 | r.data && r.data[x.i + 1] 890 | )} 891 | > 892 | {#if String(edition) == String([x.i, r.i])} 893 | { 896 | cmdz = false; 897 | historyPush(data, rows, columns, style); 898 | }} 899 | on:input={(e) => onInputChange(e.target.value, r, x)} 900 | value={(data[r.i] && data[r.i][x.i]) || ""} 901 | style={`width: ${getColumnsWidth( 902 | x.i 903 | )}px; height: ${getRowHeight(r.i)}px; min-height: 22px;`} 904 | /> 905 | {:else}{(r.data && r.data[x.i]) || ""}{/if} 906 |

912 |

913 |

914 | 915 | 1092 | -------------------------------------------------------------------------------- /src/lib/Toolbar.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 39 | 40 |

41 | 42 | {#each sheetNames as sn, i} 43 |

{ 45 | active = i; 46 | }} 47 | class={"ml-4 cursor-pointer " + (i == active ? "active" : "")} 48 | > 49 | {sn} 50 |

51 | {/each} 52 |

53 | 54 | 75 | -------------------------------------------------------------------------------- /src/lib/actions/copypaste.ts: -------------------------------------------------------------------------------- 1 | // copy-paste action (also support cut) 2 | export function copypaste(node) { 3 | const keyPressed = {}; 4 | function onKeyDown(e) { 5 | keyPressed[e.keyCode] = true; 6 | 7 | if (keyPressed[91] && keyPressed[88]) { 8 | e.preventDefault(); 9 | node.dispatchEvent(new CustomEvent("cut")); 10 | } 11 | if (keyPressed[91] && keyPressed[88]) { 12 | e.preventDefault(); 13 | node.dispatchEvent(new CustomEvent("paste")); 14 | } 15 | if (keyPressed[91] && keyPressed[88]) { 16 | e.preventDefault(); 17 | node.dispatchEvent(new CustomEvent("copy")); 18 | } 19 | } 20 | 21 | function onKeyUp(e) { 22 | keyPressed[e.keyCode] = false; 23 | } 24 | 25 | node.addEventListener("keydown", onKeyDown); 26 | node.addEventListener("keyup", onKeyUp); 27 | } 28 | -------------------------------------------------------------------------------- /src/lib/actions/draggable.ts: -------------------------------------------------------------------------------- 1 | export function draggable(node) { 2 | let x; 3 | let y; 4 | 5 | function handleMousedown(event) { 6 | x = event.clientX; 7 | y = event.clientY; 8 | 9 | node.dispatchEvent( 10 | new CustomEvent("dragging", { 11 | detail: { x: 0, y: 0 }, 12 | }) 13 | ); 14 | 15 | window.addEventListener("mousemove", handleMousemove); 16 | window.addEventListener("mouseup", handleMouseup); 17 | } 18 | 19 | function handleMousemove(event) { 20 | const dx = event.clientX - x; 21 | const dy = event.clientY - y; 22 | // x = event.clientX; 23 | // y = event.clientY; 24 | 25 | node.dispatchEvent( 26 | new CustomEvent("dragging", { 27 | detail: { x: dx, y: dy }, 28 | }) 29 | ); 30 | } 31 | 32 | function handleMouseup(event) { 33 | const dx = event.clientX - x; 34 | const dy = event.clientY - y; 35 | 36 | node.dispatchEvent( 37 | new CustomEvent("dragging", { 38 | detail: { x: dx, y: dy }, 39 | }) 40 | ); 41 | 42 | window.removeEventListener("mousemove", handleMousemove); 43 | window.removeEventListener("mouseup", handleMouseup); 44 | } 45 | 46 | node.addEventListener("mousedown", handleMousedown); 47 | 48 | return { 49 | destroy() { 50 | node.removeEventListener("mousedown", handleMousedown); 51 | }, 52 | }; 53 | } 54 | -------------------------------------------------------------------------------- /src/lib/actions/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./copypaste"; 2 | export * from "./draggable"; 3 | export * from "./resizable"; 4 | export * from "./rightclick"; 5 | export * from "./selected"; 6 | -------------------------------------------------------------------------------- /src/lib/actions/resizable.ts: -------------------------------------------------------------------------------- 1 | export function resizable(node) { 2 | let x; 3 | let y; 4 | 5 | function handleMousedown(event) { 6 | x = event.clientX; 7 | y = event.clientY; 8 | 9 | node.dispatchEvent( 10 | new CustomEvent("resizing", { 11 | detail: { x: 0, y: 0 }, 12 | }) 13 | ); 14 | 15 | window.addEventListener("mousemove", handleMousemove); 16 | window.addEventListener("mouseup", handleMouseup); 17 | } 18 | 19 | function handleMousemove(event) { 20 | const dx = event.clientX - x; 21 | const dy = event.clientY - y; 22 | x = event.clientX; 23 | y = event.clientY; 24 | 25 | node.dispatchEvent( 26 | new CustomEvent("resizing", { 27 | detail: { x: dx, y: dy }, 28 | }) 29 | ); 30 | } 31 | 32 | function handleMouseup(event) { 33 | const dx = event.clientX - x; 34 | const dy = event.clientY - y; 35 | 36 | node.dispatchEvent( 37 | new CustomEvent("resizing", { 38 | detail: { x: dx, y: dy }, 39 | }) 40 | ); 41 | 42 | window.removeEventListener("mousemove", handleMousemove); 43 | window.removeEventListener("mouseup", handleMouseup); 44 | } 45 | 46 | node.addEventListener("mousedown", handleMousedown); 47 | 48 | return { 49 | destroy() { 50 | node.removeEventListener("mousedown", handleMousedown); 51 | }, 52 | }; 53 | } 54 | -------------------------------------------------------------------------------- /src/lib/actions/rightclick.ts: -------------------------------------------------------------------------------- 1 | export function rightclick(node) {} 2 | -------------------------------------------------------------------------------- /src/lib/actions/selected.ts: -------------------------------------------------------------------------------- 1 | import XLSX from "xlsx"; 2 | 3 | export function selection(node, { selection, rows, columns }) { 4 | const viewport = node.getBoundingClientRect(); 5 | const topleft = XLSX.utils.decode_cell(selection[0]); 6 | const bottomRight = XLSX.utils.decode_cell(selection[1]); 7 | 8 | const top = node.getElementByClassName(".top"); 9 | const bottom = node.getElementByClassName(".bottom"); 10 | const left = node.getElementByClassName(".left"); 11 | const right = node.getElementByClassName(".right"); 12 | } 13 | -------------------------------------------------------------------------------- /src/lib/convert.ts: -------------------------------------------------------------------------------- 1 | export function getColumnName(i) { 2 | var letter = ""; 3 | if (i > 701) { 4 | letter += String.fromCharCode(64 + parseInt(i / 676)); 5 | letter += String.fromCharCode(64 + parseInt((i % 676) / 26)); 6 | } else if (i > 25) { 7 | letter += String.fromCharCode(64 + parseInt(i / 26)); 8 | } 9 | letter += String.fromCharCode(65 + (i % 26)); 10 | 11 | return letter; 12 | } 13 | 14 | /** 15 | * Convert jexcel id to excel like column name 16 | * 17 | * @param string id 18 | * @return string id 19 | */ 20 | export function getColumnNameFromId(cellId) { 21 | if (!Array.isArray(cellId)) { 22 | cellId = cellId.split("-"); 23 | } 24 | 25 | return getColumnName(parseInt(cellId[0])) + (parseInt(cellId[1]) + 1); 26 | } 27 | 28 | /** 29 | * Convert excel like column to jexcel id 30 | * 31 | * @param string id 32 | * @return string id 33 | */ 34 | export function getIdFromColumnName(id, arr) { 35 | // Get the letters 36 | var t = /^[a-zA-Z]+/.exec(id); 37 | 38 | if (t) { 39 | // Base 26 calculation 40 | var code = 0; 41 | for (var i = 0; i < t[0].length; i++) { 42 | code += 43 | parseInt(t[0].charCodeAt(i) - 64) * Math.pow(26, t[0].length - 1 - i); 44 | } 45 | code--; 46 | // Make sure jexcel starts on zero 47 | if (code < 0) { 48 | code = 0; 49 | } 50 | 51 | // Number 52 | var number = parseInt(/[0-9]+$/.exec(id)); 53 | if (number > 0) { 54 | number--; 55 | } 56 | 57 | if (arr == true) { 58 | id = [code, number]; 59 | } else { 60 | id = code + "-" + number; 61 | } 62 | } 63 | 64 | return id; 65 | } 66 | 67 | export function convert(workbook) { 68 | var spreadsheets = []; 69 | workbook.SheetNames.forEach(function (sheetName) { 70 | var spreadsheet = { 71 | rows: [], 72 | columns: [], 73 | data: [], 74 | style: {}, 75 | sheetName: sheetName, 76 | mergeCells: [], 77 | }; 78 | 79 | // Column widths 80 | var temp = workbook.Sheets[sheetName]["!cols"]; 81 | if (temp && temp.length) { 82 | for (var i = 0; i < temp.length; i++) { 83 | spreadsheet.columns[i] = {}; 84 | if (temp[i] && temp[i].wpx) { 85 | spreadsheet.columns[i].width = temp[i].wpx + "px"; 86 | } 87 | } 88 | } 89 | // Rows heights 90 | var temp = workbook.Sheets[sheetName]["!rows"]; 91 | if (temp && temp.length) { 92 | for (var i = 0; i < temp.length; i++) { 93 | if (temp[i] && temp[i].hpx) { 94 | spreadsheet.rows[i] = {}; 95 | spreadsheet.rows[i].height = temp[i].hpx + "px"; 96 | } 97 | } 98 | } 99 | // Merge cells 100 | var temp = workbook.Sheets[sheetName]["!merges"]; 101 | if (temp && temp.length > 0) { 102 | for (var i = 0; i < temp.length; i++) { 103 | var x1 = temp[i].s.c; 104 | var y1 = temp[i].s.r; 105 | var x2 = temp[i].e.c; 106 | var y2 = temp[i].e.r; 107 | var key = getColumnNameFromId([x1, y1]); 108 | spreadsheet.mergeCells[key] = [x2 - x1 + 1, y2 - y1 + 1]; 109 | } 110 | } 111 | // Data container 112 | var max_x = 0; 113 | var max_y = 0; 114 | var temp = Object.keys(workbook.Sheets[sheetName]); 115 | for (var i = 0; i < temp.length; i++) { 116 | if (temp[i].substr(0, 1) != "!") { 117 | var cell = workbook.Sheets[sheetName][temp[i]]; 118 | var info = getIdFromColumnName(temp[i], true); 119 | if (!spreadsheet.data[info[1]]) { 120 | spreadsheet.data[info[1]] = []; 121 | } 122 | spreadsheet.data[info[1]][info[0]] = cell.f ? "=" + cell.f : cell.w; 123 | if (max_x < info[0]) { 124 | max_x = info[0]; 125 | } 126 | if (max_y < info[1]) { 127 | max_y = info[1]; 128 | } 129 | // Style 130 | if (cell.style && Object.keys(cell.style).length > 0) { 131 | spreadsheet.style[temp[i]] = cell.style; 132 | } 133 | if (cell.s && cell.s.fgColor) { 134 | if (spreadsheet.style[temp[i]]) { 135 | spreadsheet.style[temp[i]] += ";"; 136 | } 137 | // console.log( 138 | // "style bg-color ", 139 | // spreadsheet.style[temp[i]], 140 | // cell.s.fgColor.rgb 141 | // ); 142 | spreadsheet.style[temp[i]] = 143 | (spreadsheet.style[temp[i]] || "") + 144 | "background-color:#" + 145 | cell.s.fgColor.rgb; 146 | } 147 | } 148 | } 149 | // ensure we have enough columns to display all the data 150 | const maxColumns = spreadsheet.data.reduce( 151 | (acc, cur) => (cur.length > acc ? (acc = cur.length) : acc), 152 | 0 153 | ); 154 | spreadsheet.columns = spreadsheet.columns.slice(0, maxColumns); 155 | for (var i = 0; i <= maxColumns; i++) { 156 | if (!spreadsheet.columns[i]) { 157 | spreadsheet.columns[i] = { width: "100px" }; 158 | } 159 | } 160 | 161 | for (var j = 0; j <= max_y; j++) { 162 | for (var i = 0; i <= max_x; i++) { 163 | if (!spreadsheet.data[j]) { 164 | spreadsheet.data[j] = []; 165 | } 166 | if (!spreadsheet.data[j][i]) { 167 | if (maxColumns < i) { 168 | spreadsheet.data[j][i] = ""; 169 | } 170 | } 171 | } 172 | } 173 | spreadsheets.push(spreadsheet); 174 | }); 175 | 176 | return spreadsheets; 177 | } 178 | -------------------------------------------------------------------------------- /src/lib/defaultconfig.ts: -------------------------------------------------------------------------------- 1 | export const defaultconfig = { 2 | // External data 3 | url: null, 4 | // Data 5 | // data, 6 | // Copy behavior 7 | copyCompatibility: false, 8 | root: null, 9 | // Rows and columns definitions 10 | // rows: [], 11 | // columns, 12 | // Deprected legacy options 13 | colHeaders: [], 14 | colWidths: [], 15 | colAlignments: [], 16 | nestedHeaders: null, 17 | // Column width that is used by default 18 | defaultColWidth: 50, 19 | defaultColAlign: "center", 20 | // Spare rows and columns 21 | minSpareRows: 0, 22 | minSpareCols: 0, 23 | // Minimal table dimensions 24 | minDimensions: [0, 0], 25 | // Allow Export 26 | allowExport: true, 27 | // @type {boolean} - Include the header titles on download 28 | includeHeadersOnDownload: false, 29 | // @type {boolean} - Include the header titles on copy 30 | includeHeadersOnCopy: false, 31 | // Allow column sorting 32 | columnSorting: true, 33 | // Allow column dragging 34 | columnDrag: false, 35 | // Allow column resizing 36 | columnResize: true, 37 | // Allow row resizing 38 | rowResize: false, 39 | // Allow row dragging 40 | rowDrag: true, 41 | // Allow table edition 42 | editable: true, 43 | // Allow new rows 44 | allowInsertRow: true, 45 | // Allow new rows 46 | allowManualInsertRow: true, 47 | // Allow new columns 48 | allowInsertColumn: true, 49 | // Allow new rows 50 | allowManualInsertColumn: true, 51 | // Allow row delete 52 | allowDeleteRow: true, 53 | // Allow deleting of all rows 54 | allowDeletingAllRows: false, 55 | // Allow column delete 56 | allowDeleteColumn: true, 57 | // Allow rename column 58 | allowRenameColumn: true, 59 | // Allow comments 60 | allowComments: false, 61 | // Global wrap 62 | wordWrap: false, 63 | // Image options 64 | imageOptions: null, 65 | // CSV source 66 | csv: null, 67 | // Filename 68 | csvFileName: "jexcel", 69 | // Consider first line as header 70 | csvHeaders: true, 71 | // Delimiters 72 | csvDelimiter: ",", 73 | // First row as header 74 | parseTableFirstRowAsHeader: false, 75 | parseTableAutoCellType: false, 76 | // Disable corner selection 77 | selectionCopy: true, 78 | // Merged cells 79 | // mergeCells: {}, 80 | // Create toolbar 81 | toolbar: null, 82 | // Allow search 83 | search: false, 84 | // Create pagination 85 | pagination: false, 86 | paginationOptions: null, 87 | // Full screen 88 | fullscreen: false, 89 | // Lazy loading 90 | lazyLoading: false, 91 | loadingSpin: false, 92 | // Table overflow 93 | tableOverflow: false, 94 | tableHeight: "300px", 95 | tableWidth: null, 96 | // Meta 97 | meta: null, 98 | // Style 99 | style: null, 100 | // Execute formulas 101 | parseFormulas: true, 102 | autoIncrement: true, 103 | autoCasting: true, 104 | // Security 105 | secureFormulas: true, 106 | stripHTML: true, 107 | stripHTMLOnCopy: false, 108 | // Filters 109 | filters: false, 110 | footers: null, 111 | // Event handles 112 | onundo: null, 113 | onredo: null, 114 | onload: null, 115 | onchange: null, 116 | oncomments: null, 117 | onbeforechange: null, 118 | onafterchanges: null, 119 | onbeforeinsertrow: null, 120 | oninsertrow: null, 121 | onbeforeinsertcolumn: null, 122 | oninsertcolumn: null, 123 | onbeforedeleterow: null, 124 | ondeleterow: null, 125 | onbeforedeletecolumn: null, 126 | ondeletecolumn: null, 127 | onmoverow: null, 128 | onmovecolumn: null, 129 | onresizerow: null, 130 | onresizecolumn: null, 131 | onsort: null, 132 | onselection: null, 133 | oncopy: null, 134 | onpaste: null, 135 | onbeforepaste: null, 136 | onmerge: null, 137 | onfocus: null, 138 | onblur: null, 139 | onchangeheader: null, 140 | oncreateeditor: null, 141 | oneditionstart: null, 142 | oneditionend: null, 143 | onchangestyle: null, 144 | onchangemeta: null, 145 | onchangepage: null, 146 | onbeforesave: null, 147 | onsave: null, 148 | // Global event dispatcher 149 | onevent: null, 150 | // Persistance 151 | persistance: false, 152 | // Customize any cell behavior 153 | updateTable: null, 154 | // Detach the HTML table when calling updateTable 155 | detachForUpdates: false, 156 | freezeColumns: null, 157 | // Texts 158 | text: { 159 | noRecordsFound: "No records found", 160 | showingPage: "Showing page {0} of {1} entries", 161 | show: "Show ", 162 | search: "Search", 163 | entries: " entries", 164 | columnName: "Column name", 165 | insertANewColumnBefore: "Insert a new column before", 166 | insertANewColumnAfter: "Insert a new column after", 167 | deleteSelectedColumns: "Delete selected columns", 168 | renameThisColumn: "Rename this column", 169 | orderAscending: "Order ascending", 170 | orderDescending: "Order descending", 171 | insertANewRowBefore: "Insert a new row before", 172 | insertANewRowAfter: "Insert a new row after", 173 | deleteSelectedRows: "Delete selected rows", 174 | editComments: "Edit comments", 175 | addComments: "Add comments", 176 | comments: "Comments", 177 | clearComments: "Clear comments", 178 | copy: "Copy...", 179 | paste: "Paste...", 180 | saveAs: "Save as...", 181 | about: "About", 182 | areYouSureToDeleteTheSelectedRows: 183 | "Are you sure to delete the selected rows?", 184 | areYouSureToDeleteTheSelectedColumns: 185 | "Are you sure to delete the selected columns?", 186 | thisActionWillDestroyAnyExistingMergedCellsAreYouSure: 187 | "This action will destroy any existing merged cells. Are you sure?", 188 | thisActionWillClearYourSearchResultsAreYouSure: 189 | "This action will clear your search results. Are you sure?", 190 | thereIsAConflictWithAnotherMergedCell: 191 | "There is a conflict with another merged cell", 192 | invalidMergeProperties: "Invalid merged properties", 193 | cellAlreadyMerged: "Cell already merged", 194 | noCellsSelected: "No cells selected", 195 | }, 196 | }; 197 | 198 | export type Config = typeof defaultconfig; 199 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | // quick fix for SSR support 2 | if (typeof window == "undefined") { 3 | global.document = {} as any; 4 | global.window = {} as any; 5 | } 6 | 7 | export { default as Menu } from "./Menu.svelte"; 8 | export { default as Open } from "./Open.svelte"; 9 | export { default as Sheet } from "./Sheet.svelte"; 10 | export { default as Toolbar } from "./Toolbar.svelte"; 11 | 12 | export * from "./actions"; 13 | export * from "./utilities"; 14 | -------------------------------------------------------------------------------- /src/lib/utilities.ts: -------------------------------------------------------------------------------- 1 | import * as XLSX from "xlsx"; 2 | import btob from "b64-to-blob"; 3 | 4 | function getRowHeight(row) { 5 | try { 6 | const height = Number( 7 | typeof row?.height == "string" 8 | ? row?.height?.replace("px", "") 9 | : row?.height || 24 // consider adding a config.defaultRowHeight 10 | ); 11 | return height > 24 ? height : 24; 12 | } catch (e) { 13 | return 24; 14 | } 15 | } 16 | 17 | export const computeStyles = (c, r, row, style, options, value, nextValue) => { 18 | // ${ 19 | // c.wordWrap != false && 20 | // (options.wordWrap || c.wordwrap || value?.length > 200) 21 | // ? "white-space: pre-wrap;" 22 | // : "" 23 | // } 24 | return `text-align: ${c.align || "center"}; 25 | height: ${getRowHeight(row)}px; 26 | overflow: ${nextValue && nextValue.length ? "hidden" : "visible"}; 27 | ${style[XLSX.utils.encode_cell({ c, r })]}; 28 | `; 29 | }; 30 | 31 | export function GetCellByAddress(map, c, r) { 32 | return map[ 33 | XLSX.utils.encode_cell({ 34 | c, 35 | r, 36 | }) 37 | ]; 38 | } 39 | 40 | export function GetColSpan(map, c, r) { 41 | return ( 42 | (GetCellByAddress(map, c, r) && GetCellByAddress(map, c, r)[0]) || undefined 43 | ); 44 | } 45 | 46 | export function GetRowSpan(map, c, r) { 47 | return ( 48 | (GetCellByAddress(map, c, r) && GetCellByAddress(map, c, r)[1]) || undefined 49 | ); 50 | } 51 | 52 | export async function download(sheets: any[], fileName: string) { 53 | const wb = XLSX.utils.book_new(); 54 | const wss: XLSX.WorkSheet[] = []; 55 | sheets.map((s, i) => { 56 | const ws = XLSX.utils.aoa_to_sheet(s.data); 57 | XLSX.utils.book_append_sheet(wb, ws, s.sheetName); 58 | }); 59 | XLSX.writeFile(wb, fileName); 60 | } 61 | 62 | export async function upload( 63 | sheets: any[], 64 | uploadURL: string 65 | ): Promise { 66 | if (!sheets) return; 67 | const wb = XLSX.utils.book_new(); 68 | sheets.map((s, i) => { 69 | const ws = XLSX.utils.aoa_to_sheet(s.data); 70 | XLSX.utils.book_append_sheet(wb, ws, s.sheetName); 71 | }); 72 | const wbout = XLSX.write(wb, { 73 | bookType: "xlsx", 74 | bookSST: false, 75 | type: "base64", 76 | }); 77 | const formData = new FormData(); 78 | formData.append( 79 | "file", 80 | btob( 81 | wbout, 82 | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 83 | ), 84 | "test.xlsx" 85 | ); 86 | const req = await fetch(uploadURL, { 87 | method: "POST", 88 | body: formData, 89 | }); 90 | if (req.status == 400) { 91 | const res = await req.json(); // res contains the list of errors 92 | return res; 93 | } 94 | return []; 95 | } 96 | 97 | // Return bottomRight, and topLeft border for one selection 98 | function getBorder( 99 | selection: XLSX.CellAddress[] 100 | ): { tl: XLSX.CellAddress; br: XLSX.CellAddress } { 101 | const br = { 102 | c: selection[0].c > selection[1].c ? selection[0].c : selection[1].c, 103 | r: selection[0].r > selection[1].r ? selection[0].r : selection[1].r, 104 | }; 105 | const tl = { 106 | c: selection[0].c < selection[1].c ? selection[0].c : selection[1].c, 107 | r: selection[0].r < selection[1].r ? selection[0].r : selection[1].r, 108 | }; 109 | return { tl, br }; 110 | } 111 | 112 | export function removeColumns( 113 | selection: XLSX.CellAddress[], 114 | data: any[][] 115 | ): any[][] { 116 | const { tl, br } = getBorder(selection); 117 | return data.map((d) => d.filter((_, i) => !(i >= tl.c && i <= br.c))); 118 | } 119 | 120 | export function removeRows( 121 | selection: XLSX.CellAddress[], 122 | data: any[][] 123 | ): any[][] { 124 | const { tl, br } = getBorder(selection); 125 | return data.filter((d, i) => !(i >= tl.c && i <= br.c)); 126 | } 127 | 128 | function decode(address: [string, string]): XLSX.CellAddress[] { 129 | return [ 130 | XLSX.utils.decode_cell(address[0]), 131 | XLSX.utils.decode_cell(address[1]), 132 | ]; 133 | } 134 | 135 | export function pasteSelection( 136 | data, 137 | pasted: [string, string], 138 | selected: [string, string] 139 | ) { 140 | const dpaste = getBorder(decode(pasted)); 141 | const dselect = getBorder(decode(selected)); 142 | const dx = dselect.tl.c - dpaste.tl.c; 143 | const dy = dselect.tl.r - dpaste.tl.r; 144 | console.log(dx, dy); 145 | for (var r = dpaste.tl.r; r <= dpaste.br.r; r++) { 146 | for (var c = dpaste.tl.c; c <= dpaste.br.c; c++) { 147 | if (data.length - 1 < r + dy) { 148 | data = [...data, Array.from({ length: r + dy - data.length + 1 })]; 149 | } 150 | data[r + dy][c + dx] = data[r][c]; 151 | } 152 | } 153 | return data; 154 | } 155 | 156 | export function clearSelection(data, selected: [string, string]) { 157 | console.log("clear"); 158 | const dselect = getBorder(decode(selected)); 159 | for (var r = dselect.tl.r; r <= dselect.br.r; r++) { 160 | for (var c = dselect.tl.c; r <= dselect.br.c; c++) { 161 | if (data.length - 1 < r) return; 162 | data[r][c] = ""; 163 | } 164 | } 165 | return data; 166 | } 167 | 168 | export function deleteSelection(data, selected: [string, string]) { 169 | const dselect = getBorder(decode(selected)); 170 | if (dselect.br.c == data[0].length - 1) { 171 | // delete rows 172 | data = data.filter((v, i) => { 173 | return i < dselect.tl.r || i > dselect.br.r; 174 | }); 175 | } 176 | if (dselect.br.r == data.length - 1) { 177 | // delete columns 178 | console.log("delete columns"); 179 | data = data.map((c) => 180 | c.filter((v, i) => { 181 | return i < dselect.tl.c || i > dselect.br.c; 182 | }) 183 | ); 184 | } 185 | return data; 186 | } 187 | 188 | export function mergeSelectExtends( 189 | data: any[][], 190 | selected: [string, string], 191 | extended: [string, string] 192 | ): any[][] { 193 | // merge logic here... 194 | const sel = getBorder(decode(selected)); 195 | const ext = getBorder(decode(extended)); 196 | // if extended is inside selected 197 | if ( 198 | ext.tl.c >= sel.tl.c && 199 | ext.br.c <= sel.br.c && 200 | ext.tl.r >= sel.tl.r && 201 | ext.br.r <= sel.br.r 202 | ) { 203 | // every cells outside ext and inside sel are emptied 204 | for (var c = sel.tl.c; c <= sel.br.c; c++) { 205 | for (var r = sel.tl.r; r <= sel.br.r; r++) { 206 | // if the cell is outside extended and inside selected erase it 207 | if (c > ext.br.c || r > ext.br.r) { 208 | data[r][c] = ""; 209 | } 210 | } 211 | } 212 | } else { 213 | // extended extend the selection 214 | // for all cells outside selection 215 | for (var c = ext.tl.c; c <= ext.br.c; c++) { 216 | for (var r = ext.tl.r; r <= ext.br.r; r++) { 217 | const brsel = { c: sel.br.c + 1, r: sel.br.r + 1 }; 218 | const selwidth = brsel.c - sel.tl.c; 219 | const selheight = brsel.r - sel.tl.r; 220 | if (c < sel.tl.c) { 221 | // cell is on the left 222 | data[r][c] = 223 | data[r][sel.br.c - (Math.abs(c - sel.tl.c + 1) % selwidth)]; 224 | } 225 | if (c > sel.br.c) { 226 | // cell is on the right 227 | data[r][c] = data[r][sel.tl.c + ((c - sel.br.c - 1) % selwidth)]; 228 | } 229 | // if extended to unknown rows territory 230 | if (data.length - 1 < r) { 231 | data = [...data, Array.from({ length: r - data.length + 1 })]; 232 | } 233 | if (r < sel.tl.r) { 234 | // cell is on top 235 | data[r][c] = 236 | data[sel.br.r - (Math.abs(r - sel.tl.r + 1) % selheight)][c]; 237 | } 238 | if (r > sel.br.r) { 239 | // cell is below 240 | data[r][c] = data[sel.tl.r + ((r - sel.br.r - 1) % selheight)][c]; 241 | } 242 | } 243 | } 244 | } 245 | return data; 246 | } 247 | -------------------------------------------------------------------------------- /src/routes/_example.json: -------------------------------------------------------------------------------- 1 | { 2 | "rows": [], 3 | "columns": [ 4 | { 5 | "width": "150px" 6 | }, 7 | { 8 | "width": "150px" 9 | }, 10 | { 11 | "width": "150px" 12 | }, 13 | { 14 | "width": "150px" 15 | }, 16 | { 17 | "width": "150px" 18 | }, 19 | { 20 | "width": "150px" 21 | }, 22 | { 23 | "width": "150px" 24 | }, 25 | { 26 | "width": "150px" 27 | }, 28 | { 29 | "width": "100px" 30 | } 31 | ], 32 | "data": [ 33 | [ 34 | "0", 35 | "First Name", 36 | "Last Name", 37 | "Gender", 38 | "Country", 39 | "Age", 40 | "Date", 41 | "Id", 42 | "" 43 | ], 44 | [ 45 | "1", 46 | "Dulce", 47 | "Abril", 48 | "Female", 49 | "United States", 50 | "32", 51 | "15/10/2017", 52 | "1562", 53 | "" 54 | ], 55 | [ 56 | "2", 57 | "Mara", 58 | "Hashimoto", 59 | "Female", 60 | "Great Britain", 61 | "25", 62 | "16/08/2016", 63 | "1582", 64 | "" 65 | ], 66 | [ 67 | "3", 68 | "Philip", 69 | "Gent", 70 | "Male", 71 | "France", 72 | "36", 73 | "21/05/2015", 74 | "2587", 75 | "" 76 | ], 77 | [ 78 | "4", 79 | "Kathleen", 80 | "Hanner", 81 | "Female", 82 | "United States", 83 | "25", 84 | "15/10/2017", 85 | "3549", 86 | "" 87 | ], 88 | [ 89 | "5", 90 | "Nereida", 91 | "Magwood", 92 | "Female", 93 | "United States", 94 | "58", 95 | "16/08/2016", 96 | "2468", 97 | "" 98 | ], 99 | [ 100 | "6", 101 | "Gaston", 102 | "Brumm", 103 | "Male", 104 | "United States", 105 | "24", 106 | "21/05/2015", 107 | "2554", 108 | "" 109 | ], 110 | [ 111 | "7", 112 | "Etta", 113 | "Hurn", 114 | "Female", 115 | "Great Britain", 116 | "56", 117 | "15/10/2017", 118 | "3598", 119 | "" 120 | ], 121 | [ 122 | "8", 123 | "Earlean", 124 | "Melgar", 125 | "Female", 126 | "United States", 127 | "27", 128 | "16/08/2016", 129 | "2456", 130 | "" 131 | ], 132 | [ 133 | "9", 134 | "Vincenza", 135 | "Weiland", 136 | "Female", 137 | "United States", 138 | "40", 139 | "21/05/2015", 140 | "6548", 141 | "" 142 | ], 143 | [ 144 | "10", 145 | "Fallon", 146 | "Winward", 147 | "Female", 148 | "Great Britain", 149 | "28", 150 | "16/08/2016", 151 | "5486", 152 | "" 153 | ], 154 | [ 155 | "11", 156 | "Arcelia", 157 | "Bouska", 158 | "Female", 159 | "Great Britain", 160 | "39", 161 | "21/05/2015", 162 | "1258", 163 | "" 164 | ], 165 | [ 166 | "12", 167 | "Franklyn", 168 | "Unknow", 169 | "Male", 170 | "France", 171 | "38", 172 | "15/10/2017", 173 | "2579", 174 | "" 175 | ], 176 | [ 177 | "13", 178 | "Sherron", 179 | "Ascencio", 180 | "Female", 181 | "Great Britain", 182 | "32", 183 | "16/08/2016", 184 | "3256", 185 | "" 186 | ], 187 | [ 188 | "14", 189 | "Marcel", 190 | "Zabriskie", 191 | "Male", 192 | "Great Britain", 193 | "26", 194 | "21/05/2015", 195 | "2587", 196 | "" 197 | ], 198 | [ 199 | "15", 200 | "Kina", 201 | "Hazelton", 202 | "Female", 203 | "Great Britain", 204 | "31", 205 | "16/08/2016", 206 | "3259", 207 | "" 208 | ], 209 | [ 210 | "16", 211 | "Shavonne", 212 | "Pia", 213 | "Female", 214 | "France", 215 | "24", 216 | "21/05/2015", 217 | "1546", 218 | "" 219 | ], 220 | [ 221 | "17", 222 | "Shavon", 223 | "Benito", 224 | "Female", 225 | "France", 226 | "39", 227 | "15/10/2017", 228 | "3579", 229 | "" 230 | ], 231 | [ 232 | "18", 233 | "Lauralee", 234 | "Perrine", 235 | "Female", 236 | "Great Britain", 237 | "28", 238 | "16/08/2016", 239 | "6597", 240 | "" 241 | ], 242 | [ 243 | "19", 244 | "Loreta", 245 | "Curren", 246 | "Female", 247 | "France", 248 | "26", 249 | "21/05/2015", 250 | "9654", 251 | "" 252 | ], 253 | [ 254 | "20", 255 | "Teresa", 256 | "Strawn", 257 | "Female", 258 | "France", 259 | "46", 260 | "21/05/2015", 261 | "3569", 262 | "" 263 | ], 264 | [ 265 | "21", 266 | "Belinda", 267 | "Partain", 268 | "Female", 269 | "United States", 270 | "37", 271 | "15/10/2017", 272 | "2564", 273 | "" 274 | ], 275 | [ 276 | "22", 277 | "Holly", 278 | "Eudy", 279 | "Female", 280 | "United States", 281 | "52", 282 | "16/08/2016", 283 | "8561", 284 | "" 285 | ], 286 | [ 287 | "23", 288 | "Many", 289 | "Cuccia", 290 | "Female", 291 | "Great Britain", 292 | "46", 293 | "21/05/2015", 294 | "5489", 295 | "" 296 | ], 297 | [ 298 | "24", 299 | "Libbie", 300 | "Dalby", 301 | "Female", 302 | "France", 303 | "42", 304 | "21/05/2015", 305 | "5489", 306 | "" 307 | ], 308 | [ 309 | "25", 310 | "Lester", 311 | "Prothro", 312 | "Male", 313 | "France", 314 | "21", 315 | "15/10/2017", 316 | "6574", 317 | "" 318 | ], 319 | [ 320 | "26", 321 | "Marvel", 322 | "Hail", 323 | "Female", 324 | "Great Britain", 325 | "28", 326 | "16/08/2016", 327 | "5555", 328 | "" 329 | ], 330 | [ 331 | "27", 332 | "Angelyn", 333 | "Vong", 334 | "Female", 335 | "United States", 336 | "29", 337 | "21/05/2015", 338 | "6125", 339 | "" 340 | ], 341 | [ 342 | "28", 343 | "Francesca", 344 | "Beaudreau", 345 | "Female", 346 | "France", 347 | "23", 348 | "15/10/2017", 349 | "5412", 350 | "" 351 | ], 352 | [ 353 | "29", 354 | "Garth", 355 | "Gangi", 356 | "Male", 357 | "United States", 358 | "41", 359 | "16/08/2016", 360 | "3256", 361 | "" 362 | ], 363 | [ 364 | "30", 365 | "Carla", 366 | "Trumbull", 367 | "Female", 368 | "Great Britain", 369 | "28", 370 | "21/05/2015", 371 | "3264", 372 | "" 373 | ], 374 | [ 375 | "31", 376 | "Veta", 377 | "Muntz", 378 | "Female", 379 | "Great Britain", 380 | "37", 381 | "15/10/2017", 382 | "4569", 383 | "" 384 | ], 385 | [ 386 | "32", 387 | "Stasia", 388 | "Becker", 389 | "Female", 390 | "Great Britain", 391 | "34", 392 | "16/08/2016", 393 | "7521", 394 | "" 395 | ], 396 | [ 397 | "33", 398 | "Jona", 399 | "Grindle", 400 | "Female", 401 | "Great Britain", 402 | "26", 403 | "21/05/2015", 404 | "6458", 405 | "" 406 | ], 407 | [ 408 | "34", 409 | "Judie", 410 | "Claywell", 411 | "Female", 412 | "France", 413 | "35", 414 | "16/08/2016", 415 | "7569", 416 | "" 417 | ], 418 | [ 419 | "35", 420 | "Dewitt", 421 | "Borger", 422 | "Male", 423 | "United States", 424 | "36", 425 | "21/05/2015", 426 | "8514", 427 | "" 428 | ], 429 | [ 430 | "36", 431 | "Nena", 432 | "Hacker", 433 | "Female", 434 | "United States", 435 | "29", 436 | "15/10/2017", 437 | "8563", 438 | "" 439 | ], 440 | [ 441 | "37", 442 | "Kelsie", 443 | "Wachtel", 444 | "Female", 445 | "France", 446 | "27", 447 | "16/08/2016", 448 | "8642", 449 | "" 450 | ], 451 | [ 452 | "38", 453 | "Sau", 454 | "Pfau", 455 | "Female", 456 | "United States", 457 | "25", 458 | "21/05/2015", 459 | "9536", 460 | "" 461 | ], 462 | [ 463 | "39", 464 | "Shanice", 465 | "Mccrystal", 466 | "Female", 467 | "United States", 468 | "36", 469 | "21/05/2015", 470 | "2567", 471 | "" 472 | ], 473 | [ 474 | "40", 475 | "Chase", 476 | "Karner", 477 | "Male", 478 | "United States", 479 | "37", 480 | "15/10/2017", 481 | "2154", 482 | "" 483 | ], 484 | [ 485 | "41", 486 | "Tommie", 487 | "Underdahl", 488 | "Male", 489 | "United States", 490 | "26", 491 | "16/08/2016", 492 | "3265", 493 | "" 494 | ], 495 | [ 496 | "42", 497 | "Dorcas", 498 | "Darity", 499 | "Female", 500 | "United States", 501 | "37", 502 | "21/05/2015", 503 | "8765", 504 | "" 505 | ], 506 | [ 507 | "43", 508 | "Angel", 509 | "Sanor", 510 | "Male", 511 | "France", 512 | "24", 513 | "15/10/2017", 514 | "3259", 515 | "" 516 | ], 517 | [ 518 | "44", 519 | "Willodean", 520 | "Harn", 521 | "Female", 522 | "United States", 523 | "39", 524 | "16/08/2016", 525 | "3567", 526 | "" 527 | ], 528 | [ 529 | "45", 530 | "Weston", 531 | "Martina", 532 | "Male", 533 | "United States", 534 | "26", 535 | "21/05/2015", 536 | "6540", 537 | "" 538 | ], 539 | [ 540 | "46", 541 | "Roma", 542 | "Lafollette", 543 | "Female", 544 | "United States", 545 | "34", 546 | "15/10/2017", 547 | "2654", 548 | "" 549 | ], 550 | [ 551 | "47", 552 | "Felisa", 553 | "Cail", 554 | "Female", 555 | "United States", 556 | "28", 557 | "16/08/2016", 558 | "6525", 559 | "" 560 | ], 561 | [ 562 | "48", 563 | "Demetria", 564 | "Abbey", 565 | "Female", 566 | "United States", 567 | "32", 568 | "21/05/2015", 569 | "3265", 570 | "" 571 | ], 572 | [ 573 | "49", 574 | "Jeromy", 575 | "Danz", 576 | "Male", 577 | "United States", 578 | "39", 579 | "15/10/2017", 580 | "3265", 581 | "" 582 | ], 583 | [ 584 | "50", 585 | "Rasheeda", 586 | "Alkire", 587 | "Female", 588 | "United States", 589 | "29", 590 | "16/08/2016", 591 | "6125", 592 | "" 593 | ], 594 | [ 595 | "51", 596 | "Dulce", 597 | "Abril", 598 | "Female", 599 | "United States", 600 | "32", 601 | "15/10/2017", 602 | "1562", 603 | "" 604 | ], 605 | [ 606 | "52", 607 | "Mara", 608 | "Hashimoto", 609 | "Female", 610 | "Great Britain", 611 | "25", 612 | "16/08/2016", 613 | "1582", 614 | "" 615 | ], 616 | [ 617 | "53", 618 | "Philip", 619 | "Gent", 620 | "Male", 621 | "France", 622 | "36", 623 | "21/05/2015", 624 | "2587", 625 | "" 626 | ], 627 | [ 628 | "54", 629 | "Kathleen", 630 | "Hanner", 631 | "Female", 632 | "United States", 633 | "25", 634 | "15/10/2017", 635 | "3549", 636 | "" 637 | ], 638 | [ 639 | "55", 640 | "Nereida", 641 | "Magwood", 642 | "Female", 643 | "United States", 644 | "58", 645 | "16/08/2016", 646 | "2468", 647 | "" 648 | ], 649 | [ 650 | "56", 651 | "Gaston", 652 | "Brumm", 653 | "Male", 654 | "United States", 655 | "24", 656 | "21/05/2015", 657 | "2554", 658 | "" 659 | ], 660 | [ 661 | "57", 662 | "Etta", 663 | "Hurn", 664 | "Female", 665 | "Great Britain", 666 | "56", 667 | "15/10/2017", 668 | "3598", 669 | "" 670 | ], 671 | [ 672 | "58", 673 | "Earlean", 674 | "Melgar", 675 | "Female", 676 | "United States", 677 | "27", 678 | "16/08/2016", 679 | "2456", 680 | "" 681 | ], 682 | [ 683 | "59", 684 | "Vincenza", 685 | "Weiland", 686 | "Female", 687 | "United States", 688 | "40", 689 | "21/05/2015", 690 | "6548", 691 | "" 692 | ], 693 | [ 694 | "60", 695 | "Fallon", 696 | "Winward", 697 | "Female", 698 | "Great Britain", 699 | "28", 700 | "16/08/2016", 701 | "5486", 702 | "" 703 | ], 704 | [ 705 | "61", 706 | "Arcelia", 707 | "Bouska", 708 | "Female", 709 | "Great Britain", 710 | "39", 711 | "21/05/2015", 712 | "1258", 713 | "" 714 | ], 715 | [ 716 | "62", 717 | "Franklyn", 718 | "Unknow", 719 | "Male", 720 | "France", 721 | "38", 722 | "15/10/2017", 723 | "2579", 724 | "" 725 | ], 726 | [ 727 | "63", 728 | "Sherron", 729 | "Ascencio", 730 | "Female", 731 | "Great Britain", 732 | "32", 733 | "16/08/2016", 734 | "3256", 735 | "" 736 | ], 737 | [ 738 | "64", 739 | "Marcel", 740 | "Zabriskie", 741 | "Male", 742 | "Great Britain", 743 | "26", 744 | "21/05/2015", 745 | "2587", 746 | "" 747 | ], 748 | [ 749 | "65", 750 | "Kina", 751 | "Hazelton", 752 | "Female", 753 | "Great Britain", 754 | "31", 755 | "16/08/2016", 756 | "3259", 757 | "" 758 | ], 759 | [ 760 | "66", 761 | "Shavonne", 762 | "Pia", 763 | "Female", 764 | "France", 765 | "24", 766 | "21/05/2015", 767 | "1546", 768 | "" 769 | ], 770 | [ 771 | "67", 772 | "Shavon", 773 | "Benito", 774 | "Female", 775 | "France", 776 | "39", 777 | "15/10/2017", 778 | "3579", 779 | "" 780 | ], 781 | [ 782 | "68", 783 | "Lauralee", 784 | "Perrine", 785 | "Female", 786 | "Great Britain", 787 | "28", 788 | "16/08/2016", 789 | "6597", 790 | "" 791 | ], 792 | [ 793 | "69", 794 | "Loreta", 795 | "Curren", 796 | "Female", 797 | "France", 798 | "26", 799 | "21/05/2015", 800 | "9654", 801 | "" 802 | ], 803 | [ 804 | "70", 805 | "Teresa", 806 | "Strawn", 807 | "Female", 808 | "France", 809 | "46", 810 | "21/05/2015", 811 | "3569", 812 | "" 813 | ], 814 | [ 815 | "71", 816 | "Belinda", 817 | "Partain", 818 | "Female", 819 | "United States", 820 | "37", 821 | "15/10/2017", 822 | "2564", 823 | "" 824 | ], 825 | [ 826 | "72", 827 | "Holly", 828 | "Eudy", 829 | "Female", 830 | "United States", 831 | "52", 832 | "16/08/2016", 833 | "8561", 834 | "" 835 | ], 836 | [ 837 | "73", 838 | "Many", 839 | "Cuccia", 840 | "Female", 841 | "Great Britain", 842 | "46", 843 | "21/05/2015", 844 | "5489", 845 | "" 846 | ], 847 | [ 848 | "74", 849 | "Libbie", 850 | "Dalby", 851 | "Female", 852 | "France", 853 | "42", 854 | "21/05/2015", 855 | "5489", 856 | "" 857 | ], 858 | [ 859 | "75", 860 | "Lester", 861 | "Prothro", 862 | "Male", 863 | "France", 864 | "21", 865 | "15/10/2017", 866 | "6574", 867 | "" 868 | ], 869 | [ 870 | "76", 871 | "Marvel", 872 | "Hail", 873 | "Female", 874 | "Great Britain", 875 | "28", 876 | "16/08/2016", 877 | "5555", 878 | "" 879 | ], 880 | [ 881 | "77", 882 | "Angelyn", 883 | "Vong", 884 | "Female", 885 | "United States", 886 | "29", 887 | "21/05/2015", 888 | "6125", 889 | "" 890 | ], 891 | [ 892 | "78", 893 | "Francesca", 894 | "Beaudreau", 895 | "Female", 896 | "France", 897 | "23", 898 | "15/10/2017", 899 | "5412", 900 | "" 901 | ], 902 | [ 903 | "79", 904 | "Garth", 905 | "Gangi", 906 | "Male", 907 | "United States", 908 | "41", 909 | "16/08/2016", 910 | "3256", 911 | "" 912 | ], 913 | [ 914 | "80", 915 | "Carla", 916 | "Trumbull", 917 | "Female", 918 | "Great Britain", 919 | "28", 920 | "21/05/2015", 921 | "3264", 922 | "" 923 | ], 924 | [ 925 | "81", 926 | "Veta", 927 | "Muntz", 928 | "Female", 929 | "Great Britain", 930 | "37", 931 | "15/10/2017", 932 | "4569", 933 | "" 934 | ], 935 | [ 936 | "82", 937 | "Stasia", 938 | "Becker", 939 | "Female", 940 | "Great Britain", 941 | "34", 942 | "16/08/2016", 943 | "7521", 944 | "" 945 | ], 946 | [ 947 | "83", 948 | "Jona", 949 | "Grindle", 950 | "Female", 951 | "Great Britain", 952 | "26", 953 | "21/05/2015", 954 | "6458", 955 | "" 956 | ], 957 | [ 958 | "84", 959 | "Judie", 960 | "Claywell", 961 | "Female", 962 | "France", 963 | "35", 964 | "16/08/2016", 965 | "7569", 966 | "" 967 | ], 968 | [ 969 | "85", 970 | "Dewitt", 971 | "Borger", 972 | "Male", 973 | "United States", 974 | "36", 975 | "21/05/2015", 976 | "8514", 977 | "" 978 | ], 979 | [ 980 | "86", 981 | "Nena", 982 | "Hacker", 983 | "Female", 984 | "United States", 985 | "29", 986 | "15/10/2017", 987 | "8563", 988 | "" 989 | ], 990 | [ 991 | "87", 992 | "Kelsie", 993 | "Wachtel", 994 | "Female", 995 | "France", 996 | "27", 997 | "16/08/2016", 998 | "8642", 999 | "" 1000 | ], 1001 | [ 1002 | "88", 1003 | "Sau", 1004 | "Pfau", 1005 | "Female", 1006 | "United States", 1007 | "25", 1008 | "21/05/2015", 1009 | "9536", 1010 | "" 1011 | ], 1012 | [ 1013 | "89", 1014 | "Shanice", 1015 | "Mccrystal", 1016 | "Female", 1017 | "United States", 1018 | "36", 1019 | "21/05/2015", 1020 | "2567", 1021 | "" 1022 | ], 1023 | [ 1024 | "90", 1025 | "Chase", 1026 | "Karner", 1027 | "Male", 1028 | "United States", 1029 | "37", 1030 | "15/10/2017", 1031 | "2154", 1032 | "" 1033 | ], 1034 | [ 1035 | "91", 1036 | "Tommie", 1037 | "Underdahl", 1038 | "Male", 1039 | "United States", 1040 | "26", 1041 | "16/08/2016", 1042 | "3265", 1043 | "" 1044 | ], 1045 | [ 1046 | "92", 1047 | "Dorcas", 1048 | "Darity", 1049 | "Female", 1050 | "United States", 1051 | "37", 1052 | "21/05/2015", 1053 | "8765", 1054 | "" 1055 | ], 1056 | [ 1057 | "93", 1058 | "Angel", 1059 | "Sanor", 1060 | "Male", 1061 | "France", 1062 | "24", 1063 | "15/10/2017", 1064 | "3259", 1065 | "" 1066 | ], 1067 | [ 1068 | "94", 1069 | "Willodean", 1070 | "Harn", 1071 | "Female", 1072 | "United States", 1073 | "39", 1074 | "16/08/2016", 1075 | "3567", 1076 | "" 1077 | ], 1078 | [ 1079 | "95", 1080 | "Weston", 1081 | "Martina", 1082 | "Male", 1083 | "United States", 1084 | "26", 1085 | "21/05/2015", 1086 | "6540", 1087 | "" 1088 | ], 1089 | [ 1090 | "96", 1091 | "Roma", 1092 | "Lafollette", 1093 | "Female", 1094 | "United States", 1095 | "34", 1096 | "15/10/2017", 1097 | "2654", 1098 | "" 1099 | ], 1100 | [ 1101 | "97", 1102 | "Felisa", 1103 | "Cail", 1104 | "Female", 1105 | "United States", 1106 | "28", 1107 | "16/08/2016", 1108 | "6525", 1109 | "" 1110 | ], 1111 | [ 1112 | "98", 1113 | "Demetria", 1114 | "Abbey", 1115 | "Female", 1116 | "United States", 1117 | "32", 1118 | "21/05/2015", 1119 | "3265", 1120 | "" 1121 | ], 1122 | [ 1123 | "99", 1124 | "Jeromy", 1125 | "Danz", 1126 | "Male", 1127 | "United States", 1128 | "39", 1129 | "15/10/2017", 1130 | "3265", 1131 | "" 1132 | ], 1133 | [ 1134 | "100", 1135 | "Rasheeda", 1136 | "Alkire", 1137 | "Female", 1138 | "United States", 1139 | "29", 1140 | "16/08/2016", 1141 | "6125", 1142 | "" 1143 | ] 1144 | ], 1145 | "style": {}, 1146 | "sheetName": "Sheet1", 1147 | "mergeCells": [] 1148 | } -------------------------------------------------------------------------------- /src/routes/index.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 26 | 27 |