├── .gitignore
├── src
    ├── main.svelte
    ├── checkbox-cell.svelte
    ├── select-cell.svelte
    ├── textbox-cell.svelte
    ├── edit-history.js
    └── index.svelte
├── TODO.md
├── rollup.config.js
├── LICENSE.txt
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | yarn.lock
4 | package-lock.json
5 | index.mjs
6 | index.js
7 | 


--------------------------------------------------------------------------------
/src/main.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { onMount } from 'svelte';
 3 | 
 4 | 	let MyComponent;
 5 | 
 6 | 	onMount(async () => {
 7 | 		const module = await import('./index.svelte')
 8 | 		MyComponent = module.default
 9 | 	})
10 | 
11 | </script>
12 | 
13 | <svelte:component this={MyComponent} {...$$props} />
14 | 


--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
1 | # TODO
2 | 
3 |  - Add accessible ways of resizing and reordering columns using only a keyboard
4 |  - Add mechanism for loading chunks of data asynchronously so the entire data set does not need to be loaded at once
5 |  - Add ability to affix columns and rows so they remain visible when scrolling horizontally or vertically


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from "rollup-plugin-svelte";
 2 | import resolve from "@rollup/plugin-node-resolve";
 3 | import pkg from "./package.json";
 4 | 
 5 | const name = pkg.name
 6 |   .replace(/^(@\S+\/)?(svelte-)?(\S+)/, "$3")
 7 |   .replace(/^\w/, m => m.toUpperCase())
 8 |   .replace(/-\w/g, m => m[1].toUpperCase());
 9 | 
10 | export default {
11 |   input: "src/index.svelte",
12 |   output: [
13 |     { file: pkg.module, format: "es" },
14 |     { file: pkg.main, format: "umd", name }
15 |   ],
16 |   plugins: [svelte(), resolve()]
17 | };
18 | 


--------------------------------------------------------------------------------
/src/checkbox-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { createEventDispatcher } from "svelte";
 3 |   const dispatch = createEventDispatcher();
 4 |   export let checkbox = null;
 5 |   export let row;
 6 |   export let column;
 7 |   export let rowNumber;
 8 |   // [svelte-upgrade suggestion]
 9 |   // review these functions and remove unnecessary 'export' keywords
10 |   export function onChange(event) {
11 |     // delay this until after the ui updates on the screen
12 |     setTimeout(() => {
13 |       dispatch("valueupdate", {
14 |         row,
15 |         column,
16 |         value: checkbox.checked,
17 |         rowNumber
18 |       });
19 |     }, 0);
20 |   }
21 | </script>
22 | 
23 | <style>
24 |   .checkbox-cell {
25 |     text-align: center;
26 |     background: white;
27 |   }
28 | </style>
29 | 
30 | <div class="checkbox-cell">
31 |   <input
32 |     type="checkbox"
33 |     bind:this={checkbox}
34 |     checked={row.data[column.dataName]}
35 |     on:click={onChange} />
36 | </div>
37 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019 Brian Simon <bsssshhhhhhh@gmail.com> (https://github.com/bsssshhhhhhh)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-data-grid",
 3 |   "description": "High-performance svelte data table component for displaying huge datasets",
 4 |   "version": "3.0.1",
 5 |   "author": {
 6 |     "name": "Brian Simon",
 7 |     "email": "bsssshhhhhhh@gmail.com",
 8 |     "url": "https://github.com/bsssshhhhhhh"
 9 |   },
10 |   "homepage": "https://github.com/bsssshhhhhhh/svelte-data-grid",
11 |   "svelte": "src/main.svelte",
12 |   "module": "index.mjs",
13 |   "main": "index.js",
14 |   "scripts": {
15 |     "build": "rollup -c",
16 |     "dev": "rollup -wc",
17 |     "prepublishOnly": "npm run build"
18 |   },
19 |   "devDependencies": {
20 |     "@rollup/plugin-node-resolve": "^8.0.1",
21 |     "rollup": "^2.17.1",
22 |     "rollup-plugin-commonjs": "^10.1.0",
23 |     "rollup-plugin-svelte": "^5.1.1",
24 |     "svelte": "^3.23.2"
25 |   },
26 |   "keywords": [
27 |     "svelte",
28 |     "data-grid",
29 |     "data-table",
30 |     "table",
31 |     "virtual-list"
32 |   ],
33 |   "repository": "bsssshhhhhhh/svelte-data-grid",
34 |   "license": "MIT",
35 |   "files": [
36 |     "src",
37 |     "README.md",
38 |     "LICENSE.txt"
39 |   ],
40 |   "dependencies": {
41 |     "debounce": "^1.2.0",
42 |     "deep-diff": "^1.0.2",
43 |     "detect-browser": "^5.0.0"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/select-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { createEventDispatcher } from "svelte";
 3 |   const dispatch = createEventDispatcher();
 4 |   export let select = null;
 5 |   export let column;
 6 |   export let row;
 7 |   export let rowNumber;
 8 |   function getOptionDisplay(display) {
 9 |     if (display instanceof Function) {
10 |       return display();
11 |     }
12 |     return display;
13 |   }
14 |   // [svelte-upgrade suggestion]
15 |   // review these functions and remove unnecessary 'export' keywords
16 |   export function onChange(event) {
17 |     // delay this until after the ui updates on the screen
18 |     setTimeout(() => {
19 |       dispatch("valueupdate", {
20 |         row,
21 |         column,
22 |         value: select.value,
23 |         rowNumber
24 |       });
25 |     }, 0);
26 |   }
27 | </script>
28 | 
29 | <style>
30 |   .select-cell {
31 |     background: white;
32 |     overflow: hidden;
33 |     text-overflow: ellipsis;
34 |   }
35 |   select {
36 |     border: none;
37 |   }
38 |   select {
39 |     width: 100%;
40 |     height: 100%;
41 |     padding: 0 5px;
42 |   }
43 | </style>
44 | 
45 | <div class="select-cell">
46 |   {#if column.options instanceof Array}
47 |     <select on:change={onChange} bind:this={select}>
48 |       {#each column.options as option}
49 |         <option
50 |           value={option.value}
51 |           selected={option.value === row.data[column.dataName]}>
52 |           {getOptionDisplay(option.display)}
53 |         </option>
54 |       {/each}
55 |     </select>
56 |   {/if}
57 | </div>
58 | 


--------------------------------------------------------------------------------
/src/textbox-cell.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { afterUpdate, beforeUpdate, createEventDispatcher } from "svelte";
 3 |   import debounce from "debounce";
 4 |   const INPUT_DEBOUNCE_INTERVAL = 400;
 5 |   const dispatch = createEventDispatcher();
 6 |   export let textbox = null;
 7 |   export let column;
 8 |   export let rowNumber;
 9 |   export let row;
10 |   let prevColumn;
11 |   let prevRow;
12 |   // [svelte-upgrade warning]
13 |   // beforeUpdate and afterUpdate handlers behave
14 |   // differently to their v2 counterparts
15 |   beforeUpdate(() => {
16 |     if (prevColumn !== column || prevRow !== row) {
17 |       const updateTextbox = () => {
18 |         if (textbox) textbox.value = row.data[column.dataName];
19 |       };
20 |       if (textbox) {
21 |         updateTextbox();
22 |       } else {
23 |         setTimeout(updateTextbox, 0);
24 |       }
25 |       prevColumn = column;
26 |     }
27 |   });
28 |   // [svelte-upgrade warning]
29 |   // beforeUpdate and afterUpdate handlers behave
30 |   // differently to their v2 counterparts
31 |   afterUpdate(() => {
32 |     /* Since data-grid isn't using a keyed each block to display the rows, we need to update
33 |       the focus as the grid scrolls. When this cell component receives a new row, check if the column's active row
34 |       is this row, and focus or blur if necessary */
35 |     if (prevRow !== row) {
36 |       if (column.activeRow && column.activeRow === rowNumber && textbox) {
37 |         textbox.focus();
38 |       } else if (textbox === document.activeElement) {
39 |         textbox.blur();
40 |       }
41 |       prevRow = row;
42 |     }
43 |   });
44 |   // [svelte-upgrade suggestion]
45 |   // review these functions and remove unnecessary 'export' keywords
46 |   export function onFocus(event) {
47 |     column.activeRow = rowNumber;
48 |   }
49 |   export function onBlur(event) {
50 |     // if blur event was user-initiated and not initiated by the blur call above,
51 |     // remove the activeRow property
52 |     if (event.sourceCapabilities) {
53 |       delete column.activeRow;
54 |     }
55 |   }
56 |   export function onInput(event) {
57 |     const value = textbox.value;
58 |     setTimeout(() => {
59 |       dispatch("valueupdate", {
60 |         row,
61 |         column,
62 |         value,
63 |         rowNumber
64 |       });
65 |     }, 0);
66 |   }
67 | </script>
68 | 
69 | <style>
70 |   .textbox-cell {
71 |     position: relative;
72 |     width: 100%;
73 |     height: 100%;
74 |     background: white;
75 |     z-index: 3;
76 |   }
77 |   input {
78 |     height: 100%;
79 |     width: 100%;
80 |     border: 0;
81 |     margin: 0;
82 |     padding: 0 5px;
83 |     box-sizing: border-box;
84 |   }
85 |   input:active,
86 |   input:focus {
87 |     border: 1px solid lime;
88 |   }
89 | </style>
90 | 
91 | <div class="textbox-cell">
92 |   <input
93 |     type="text"
94 |     on:input={onInput}
95 |     on:focus={onFocus}
96 |     on:blur={onBlur}
97 |     bind:this={textbox} />
98 | </div>
99 | 


--------------------------------------------------------------------------------
/src/edit-history.js:
--------------------------------------------------------------------------------
  1 | import DeepDiff from  'deep-diff';
  2 | const applyChange = DeepDiff.applyChange;
  3 | const diff = DeepDiff.diff;
  4 | /**
  5 |  * Edit history tracker for a javascript object using deep-diff to generate and apply patches
  6 |  */
  7 | export default class EditHistory {
  8 |   /**
  9 |    * Instantiates an instance of EditHistory
 10 |    * @param {Object} obj The object or array to track
 11 |    */
 12 |   constructor(obj) {
 13 |     this.obj = JSON.parse(JSON.stringify(obj));
 14 | 
 15 |     // initialize arrays for forwards and backwards patches
 16 |     this.forward = [];
 17 |     this.backward = [];
 18 |   }
 19 | 
 20 |   /**
 21 |    * Clears all forward and backward patches
 22 |    */
 23 |   clear() {
 24 |     this.forward = [];
 25 |     this.backward = [];
 26 |   }
 27 | 
 28 |   /**
 29 |    * Records a change to an object
 30 |    * @param {Object} newObj The new object
 31 |    */
 32 |   recordChange(newObj) {
 33 |     const patch = {
 34 |       redo: diff(this.obj, newObj),
 35 |       undo: diff(newObj, this.obj)
 36 |     };
 37 | 
 38 |     if (!patch.redo || !patch.undo) {
 39 |       console.warn("Objects could not be diffed");
 40 |     } else {
 41 |       this.obj = JSON.parse(JSON.stringify(newObj));
 42 |       this.backward.push(patch);
 43 |     }
 44 |   }
 45 | 
 46 |   /**
 47 |    * Applies the most recent undo patch and returns the new object
 48 |    * @returns {Object} The tracked object
 49 |    */
 50 |   undo() {
 51 |     if (this.backward.length === 0) {
 52 |       return null;
 53 |     }
 54 | 
 55 |     // grab the most recent backwards patch
 56 |     const patch = this.backward.pop();
 57 | 
 58 |     // applyChange doesn't accept arrays, only its members
 59 |     patch.undo.forEach(x => applyChange(this.obj, x));
 60 | 
 61 |     // put the patch into the forward queue
 62 |     this.forward.push(patch);
 63 | 
 64 |     return JSON.parse(JSON.stringify(this.obj));
 65 |   }
 66 | 
 67 |   /**
 68 |    * Applies the most recent redo patch and returns the new object
 69 |    * @returns {Object} The tracked object
 70 |    */
 71 |   redo() {
 72 |     if (this.forward.length === 0) {
 73 |       return null;
 74 |     }
 75 | 
 76 |     // grab the most recent forwards patch
 77 |     const patch = this.forward.pop();
 78 | 
 79 |     // applyChange doesn't accept arrays, only its members
 80 |     patch.redo.forEach(x => applyChange(this.obj, x));
 81 | 
 82 |     // put the patch into the backward queue
 83 |     this.backward.push(patch);
 84 | 
 85 |     return JSON.parse(JSON.stringify(this.obj));
 86 |   }
 87 | 
 88 |   /**
 89 |    * Applies all the undo patches in the queue and returns the new object
 90 |    * @returns {Object} The tracked object
 91 |    */
 92 |   undoAll() {
 93 |     while (this.backward.length > 0) {
 94 |       this.undo();
 95 |     }
 96 | 
 97 |     return this.obj;
 98 |   }
 99 | 
100 |   /**
101 |    * Applies all the redo patches in the queue and returns the new object
102 |    * @returns {Object} The tracked object
103 |    */
104 |   redoAll() {
105 |     while (this.forward.length > 0) {
106 |       this.redo();
107 |     }
108 | 
109 |     return this.obj;
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![npm](https://img.shields.io/npm/v/svelte-data-grid.svg?style=flat-square)](https://npmjs.org/package/svelte-data-grid)
  2 | # Svelte Data Grid
  3 | 
  4 | ## [Demo](https://bsssshhhhhhh.github.io/svelte-data-grid-demo/)
  5 | 
  6 | 
  7 | Svelte Data Grid is a svelte v3 component for displaying and editing any amount of data.
  8 | 
  9 | ## Features:
 10 |  - Excellent scrolling performance
 11 |  - ARIA attributes set on elements
 12 |  - Lightweight even when displaying a huge dataset due to implementation of a "virtual list" mechanism
 13 |  - Column headers remain fixed at the top of the grid
 14 |  - Custom components can be specified to control how individual table cells or column headers are displayed
 15 |  - Columns can be resized and reordered
 16 | 
 17 | ## Current Limitations:
 18 |  - Every row must have the same height and text cannot break onto the next line
 19 | 
 20 | ## Usage:
 21 | 
 22 | If using within Sapper:
 23 | ```
 24 | npm install svelte-data-grid --save-dev
 25 | ```
 26 | 
 27 | If using from inside a svelte component:
 28 | ```
 29 | import DataGrid from "svelte-data-grid";
 30 | <DataGrid rows={myRows} allowColumnReordering={false} columns={myColumnDefinitions} on:columnOrderUpdated={saveNewColumnOrder}>
 31 | ```
 32 | 
 33 | If using from outside svelte:
 34 | ```
 35 | import DataGrid from "svelte-data-grid";
 36 | const grid = new DataGrid({
 37 |   target: document.querySelector('#my-grid-wrapper'),
 38 |   data: {
 39 |     rows: [ ... ],
 40 |     columns: [ ... ],
 41 |     allowResizeFromTableCells: true
 42 |   }
 43 | });
 44 | 
 45 | grid.$on('columnOrderUpdated', () => {
 46 |   const { columns } = grid.get();
 47 |   // save new column  order
 48 | });
 49 | ```
 50 | To learn more about using DataGrid outside of svelte, read [svelte's guide](https://svelte.dev/docs#Client-side_component_API) on how to interact with a svelte component. It is possible to integrate into any framework.
 51 | 
 52 | DataGrid requires 2 properties to be passed in order to display data: `rows` and `columns`.
 53 | 
 54 | `columns` is an array of objects containing at least 3 properties: `display`, `dataName`, and `width`. A svelte component can be specified in `headerComponent` and `cellComponent` if any custom cell behavior is required.
 55 | 
 56 | ```
 57 | [
 58 |   {
 59 |     display: 'Fruit Name',  // What will be displayed as the column header
 60 |     dataName: 'fruitName',  // The key of a row to get the column's data from
 61 |     width: 300,             // Width, in pixels, of column
 62 |     disallowResize: true    // Optional - disables resizing this column
 63 |   },
 64 |   {
 65 |     display: 'Color',
 66 |     dataName: 'fruitColor',
 67 |     width: 600,
 68 |     myExtraData: 12345
 69 |   }
 70 | ]
 71 | ```
 72 | 
 73 | 
 74 | `rows` is an array of objects containing the data for each table row.
 75 | 
 76 | ```
 77 | [
 78 |   {
 79 |     fruitName: 'Apple',
 80 |     fruitColor: 'Red'
 81 |   },
 82 |   {
 83 |     fruitName: 'Blueberry',
 84 |     fruitColor: 'Blue'
 85 |   },
 86 |   {
 87 |     fruitName: 'Tomato',
 88 |     fruitColor: 'Red'
 89 |   }
 90 | ]
 91 | 
 92 | ```
 93 | 
 94 | ## Editing Data
 95 | 
 96 | Version 2 added early support for editing data. Due to the lack of using a keyed each block to render the rows, maintaining focus on controls as the user scrolls is a tad wonky. This will be resolved in a future version.
 97 | 
 98 | Import the components:
 99 | ```
100 | import TextboxCell from 'svelte-data-grid/src/textbox-cell.svelte';
101 | import SelectCell from 'svelte-data-grid/src/select-cell.svelte';
102 | import CheckboxCell from 'svelte-data-grid/src/checkbox-cell.svelte';
103 | ```
104 | 
105 | ### Textbox Cell
106 | Textbox cell will debounce the user input, only recording changes after 400ms has elapsed since the user stops typing.
107 | ```
108 | {
109 |   display: 'Name',
110 |   dataName: 'name',
111 |   width: 250,
112 |   cellComponent: TextboxCell
113 | }
114 | ```
115 | 
116 | ### Select Cell
117 | 
118 | SelectCell requires that you provide an `options` array in your cell definition:
119 | ```
120 | {
121 |   display: 'Eye Color',
122 |   dataName: 'eyeColor',
123 |   width: 75,
124 |   cellComponent: SelectCell,
125 |   options: [
126 |     {
127 |       display: 'Green',
128 |       value: 'green'
129 |     },
130 |     {
131 |       display: 'Blue',
132 |       value: 'blue'
133 |     },
134 |     {
135 |       display: 'Brown',
136 |       value: 'brown'
137 |     }
138 |   ]
139 | }
140 | ```
141 | 
142 | ### Checkbox Cell
143 | CheckboxCell will set the checked state of the checkbox depending on the boolean value of the row's data.
144 | ```
145 | {
146 |   display: 'Active',
147 |   dataName: 'isActive',
148 |   width: 75,
149 |   cellComponent: CheckboxCell
150 | }
151 | ```
152 | 
153 | 
154 | ## Custom Cell Components
155 | 
156 | Need to customize how your data is displayed or build more complex functionality into your grid? Specify `cellComponent` in your definition in the `columns` property.
157 | 
158 | Components will be passed the following properties:
159 | - `rowNumber` - The index of the row within `rows`
160 | - `row` - The entire row object from `rows`
161 | - `column` - The entire column object from `columns`
162 | 
163 | 
164 | MyCustomCell.svelte
165 | ```
166 | <script>
167 | export let data = {
168 |   colors: {
169 |     Red: '#FF0000',
170 |     Blue: '#0000FF'
171 |   }
172 | };
173 | </script>
174 | 
175 | <div style="color: {colors[row.data[column.dataName]] || 'black'};">
176 |   {row.data[column.dataName]}
177 | </div>
178 | ```
179 | 
180 | Import the component
181 | ```
182 | import MyCustomCell from './MyCustomCell.svelte';
183 | ```
184 | 
185 | `columns` option:
186 | ```
187 | [
188 |   {
189 |     display: 'Fruit Color'
190 |     dataName: 'fruitColor',
191 |     width: 300,
192 |     cellComponent: MyCustomCell
193 |   }
194 | ]
195 | ```
196 | 
197 | ## Custom Header Components
198 | Header components can also be specified in `columns` entries as the `headerComponent` property. Header components are only passed `column`, the column object from `columns`.
199 | 
200 | ## Options:
201 | 
202 | Svelte Data Grid provides a few options for controlling the grid and its interactions:
203 | 
204 | - `rowHeight` - The row height in pixels *(Default: 24)*
205 | - `allowResizeFromTableCells` - Allow user to click and drag the right border of a table cell to resize the column *(Default: false)*
206 | - `allowResizeFromTableHeaders` - Allow user to click and drag the right border of a column header to resize the column *(Default: true)*
207 | - `allowColumnReordering` - Allow user to drag a column header to move that column to a new position *(Default: true)*
208 | - `allowColumnAffix` - Allow user to drag the double line to affix columns to the left side of the grid. See section below for caveats *(Default: true if the browser is chrome, false otherwise)*
209 | - `__extraRows` - If it is desired that the virtual list include more DOM rows than are visible, the number of extra rows can be specified in `__extraRows` *(Default: 0)*
210 | - `__columnHeaderResizeCaptureWidth` The width of the element, in pixels, placed at the right border of a column that triggers that column's resize. *(Default: 20)*
211 | 
212 | 
213 | ## Events:
214 |  - `columnOrderUpdated` - Fired when the user has dragged a column to a new position. The updated column order can be accessed from `component.get().columns`
215 |  - `columnWidthUpdated` - Fired when a user has resized a column. The updated column width can be accessed from `event.width` and the column index can be accessed from `event.idx`
216 | 
217 | ## Column Affixing
218 | 
219 | This feature works well on Chrome because Chrome's scroll events are not fired asynchronously from the scroll action. Firefox, Edge, and IE all fire scroll events *after* the overflow container has scroll on screen. This causes a jittery effect that we cannot easily work around while providing a cross-browser solution.
220 | 
221 | To fix the jitteriness on Firefox, a setting in about:config can be changed to turn off APZ. Set `layers.async-pan-zoom.enabled` to `false`. Obviously this is not a solution we can reasonably ask users to try, so I'm looking for other solutions.
222 | 
223 | ## Bugs? Suggestions?
224 | Feedback is always appreciated. Feel free to open a GitHub issue if DataGrid doesn't work the way you expect or want it to.
225 | 


--------------------------------------------------------------------------------
/src/index.svelte:
--------------------------------------------------------------------------------
   1 | <script>
   2 |   import { onMount, afterUpdate } from "svelte";
   3 |   import EditHistory from "./edit-history";
   4 |   import { createEventDispatcher } from "svelte";
   5 | 
   6 |   const dispatch = createEventDispatcher();
   7 | 
   8 |   const MIN_COLUMN_SIZE = 30;
   9 | 
  10 |   let wrapper;
  11 |   let tableSpace;
  12 | 
  13 |   /**
  14 |    * Computes the 'left' value for a grid-cell.
  15 |    * @param {Number} i The cell index
  16 |    * @param {Array} columnWidths The array of column widths in order
  17 |    * @returns {Number}
  18 |    */
  19 |   function getCellLeft({
  20 |     i,
  21 |     columnWidths,
  22 |     __affixedColumnIndices,
  23 |     __scrollLeft
  24 |   }) {
  25 |     if (__affixedColumnIndices.indexOf(i) >= 0) {
  26 |       if (i === 0) {
  27 |         return __scrollLeft;
  28 |       }
  29 |       let left = __scrollLeft;
  30 |       for (let j = i - 1; j >= 0; j--) {
  31 |         left += columnWidths[j];
  32 |       }
  33 |       return left;
  34 |     }
  35 | 
  36 |     let left = 0;
  37 |     for (let j = 0; j < i; j++) {
  38 |       left += columnWidths[j];
  39 |     }
  40 |     return left;
  41 |   }
  42 | 
  43 |   /**
  44 |    * Gets the closest column index given an x offset
  45 |    * @param {Number} x The x offset
  46 |    * @param {Array} columnWidths Array of column widths
  47 |    * @param {Array} __affixedColumnIndices Array of column indices that have been affixed
  48 |    * @param {Number} __scrollLeft The scrollLeft value of the scrollable container
  49 |    * @returns {Number}
  50 |    */
  51 | 
  52 |   function getClosestIndex(
  53 |     x,
  54 |     columnWidths,
  55 |     __affixedColumnIndices,
  56 |     __scrollLeft
  57 |   ) {
  58 |     let closest = 0;
  59 | 
  60 |     for (let i = 0; i < columnWidths.length; i++) {
  61 |       const left =
  62 |         getCellLeft({ i, columnWidths, __affixedColumnIndices, __scrollLeft }) +
  63 |         Math.floor(columnWidths[i] / 2);
  64 | 
  65 |       if (left < x) {
  66 |         closest = i + 1;
  67 |       }
  68 |     }
  69 | 
  70 |     // special handling required when there are affixed columns, because
  71 |     // if the grid is scrolled horizontally to the right, we want to have this function return the closest
  72 |     // affixed column, rather than any columns that might be closer to x but are being overlapped by an affixed column
  73 |     if (__affixedColumnIndices.length > 0) {
  74 |       const firstAffixedLeft = getCellLeft({
  75 |         i: __affixedColumnIndices[0],
  76 |         columnWidths,
  77 |         __affixedColumnIndices,
  78 |         __scrollLeft
  79 |       });
  80 |       const lastAffixedLeft = getCellLeft({
  81 |         i: __affixedColumnIndices[__affixedColumnIndices.length - 1],
  82 |         columnWidths,
  83 |         __affixedColumnIndices,
  84 |         __scrollLeft
  85 |       });
  86 |       const lastAffixedRight =
  87 |         lastAffixedLeft +
  88 |         columnWidths[__affixedColumnIndices[__affixedColumnIndices.length - 1]];
  89 |       const closestLeft = getCellLeft({
  90 |         i: closest,
  91 |         columnWidths,
  92 |         __affixedColumnIndices,
  93 |         __scrollLeft
  94 |       });
  95 |       if (closestLeft > firstAffixedLeft && closestLeft < lastAffixedRight) {
  96 |         if (closestLeft < lastAffixedRight && closestLeft > lastAffixedLeft) {
  97 |           closest = __affixedColumnIndices[__affixedColumnIndices.length - 1];
  98 |         } else {
  99 |           for (let i = 0; i < __affixedColumnIndices.length; i++) {
 100 |             const left =
 101 |               getCellLeft({
 102 |                 i: __affixedColumnIndices[i],
 103 |                 columnWidths,
 104 |                 __affixedColumnIndices,
 105 |                 __scrollLeft
 106 |               }) + Math.floor(columnWidths[__affixedColumnIndices[i]] / 2);
 107 | 
 108 |             if (left < x) {
 109 |               closest = __affixedColumnIndices[i] + 1;
 110 |             }
 111 |           }
 112 |         }
 113 |       }
 114 |     }
 115 | 
 116 |     return closest;
 117 |   }
 118 | 
 119 |   function getBodyScrollTop() {
 120 |     return (
 121 |       window.pageYOffset ||
 122 |       (document.documentElement.clientHeight
 123 |         ? document.documentElement.scrollTop
 124 |         : document.body.scrollTop)
 125 |     );
 126 |   }
 127 | 
 128 |   let editHistory = null;
 129 | 
 130 |   export let rows = []; // Rows to display
 131 |   export let columns = []; // Array of column definitions: { display: '', dataName: ''}, where display is what the display value is and dataName is what the key on the row object is
 132 |   export let rowHeight = 24; // Row height in pixels
 133 |   export let allowResizeFromTableCells = false; // Allow the user to click on table cell borders to resize columns
 134 |   export let allowResizeFromTableHeaders = true; // Allow the user to clikc on table header borders to resize columns
 135 |   export let allowColumnReordering = true; // Allow the user to drag column headers to reorder columns
 136 |   export let allowColumnAffix = true; // Alow the user to affix columns to the left of the grid
 137 | 
 138 |   export let __extraRows = 0; // Number of extra rows to render beyond what is visible in the scrollable area
 139 |   export let __columnHeaderResizeCaptureWidth = 20; // The width of the area on column borders that can be clicked to resize the column
 140 |   /**** Do not modify any of the data variables below. Some of them are temporarily commented out to hide warnings. ****/
 141 |   // export let __affixedRowIndices = []; // DO NOT MODIFY DIRECTLY. The row indices to affix to the top of the grid
 142 |   export let __affixedColumnIndices = []; // DO NOT MODIFY DIRECTLY. The column indices to affix to the left side of the grid
 143 |   export let __affixingRow = false; // DO NOT MODIFY DIRECTLY. Whether a row affix operation is in progress
 144 |   export let __affixingColumn = false; // DO NOT MODIFY DIRECTLY. Whether a column affix operation is in progress
 145 |   export let __rowActionLineTop = 0; // DO NOT MODIFY DIRECTLY. The 'top' position of the row action line
 146 |   export let __rowAffixLineTop = 0; // DO NOT MODIFY DIRECTLY. The 'top' position of the row affix line
 147 |   // export let __columnAffixLineLeft = 0; // DO NOT MODIFY DIRECTLY. The 'left' position of the column affix line
 148 |   export let __columnDragging = false; // DO NOT MODIFY DIRECTLY. Whether a column is being dragged
 149 |   export let __columnIndexBeingDragged = null; // DO NOT MODIFY DIRECTLY. The column index that is being dragged
 150 |   export let __columnDragOffsetX = 0; // DO NOT MODIFY DIRECTLY. The X offset of where the user clicked on the column header
 151 |   export let __resizing = false; // DO NOT MODIFY DIRECTLY. Whether or not a column is currently being resized
 152 |   export let __columnIndexBeingResized = null; // DO NOT MODIFY DIRECTLY. The column index being resized
 153 |   export let __columnActionLineLeft = 0; // DO NOT MODIFY DIRECTLY. The 'left' position of the action line
 154 |   export let __innerOffsetHeight = 0; // DO NOT MODIFY DIRECTLY. The height of the scrollable area on screen
 155 |   export let __scrollTop = 0; // DO NOT MODIFY DIRECTLY. The scrollTop position of the scrollable area
 156 |   export let __scrollLeft = 0; // DO NOT MODIFY DIRECTLY. The scrollLeft position of the scrollable area
 157 |   export let __scrolledAllTheWayToTheRight = false; // DO NOT MODIFY DIRECTLY. Whether the container is scrolled all the way to the right as of the last onscroll event
 158 | 
 159 |   onMount(() => {
 160 |     editHistory = new EditHistory(rows);
 161 |   });
 162 | 
 163 |   /**
 164 |    * TODO handle svelte 2's onupdate
 165 |    **/
 166 |   // onupdate(({ changed, current, previous }) => {
 167 |   //   // Record the change in onupdate to allow the DOM to change before doing the deep diff
 168 |   //   if (changed.rows && previous && previous.rows && previous.rows.length > 0) {
 169 |   //     if (!current.skipRecord) {
 170 |   //       this.editHistory.recordChange(current.rows);
 171 |   //     } else {
 172 |   //       this.set({ skipRecord: false });
 173 |   //     }
 174 |   //   }
 175 |   // });
 176 | 
 177 |   /**
 178 |    * This action creates a half-opaque 'ghost' column header to visualize dragging a column into a different position
 179 |    * This is put in an action because ultimately the ghost image has nothing to do with the actual column index move
 180 |    */
 181 |   function dragCopy(node, enabled) {
 182 |     let copy = null;
 183 |     let dragging = false;
 184 |     let offsetX = 0;
 185 | 
 186 |     function onWindowMouseMove(event) {
 187 |       if (!dragging) {
 188 |         return;
 189 |       }
 190 |       copy.style.left = event.pageX - offsetX + "px";
 191 |     }
 192 | 
 193 |     function onWindowMouseUp(event) {
 194 |       if (!dragging || event.which !== 1) {
 195 |         return;
 196 |       }
 197 | 
 198 |       dragging = false;
 199 |       document.body.removeChild(copy);
 200 |       copy = null;
 201 |     }
 202 | 
 203 |     function onNodeMouseDown(event) {
 204 |       if (event.which !== 1) {
 205 |         return;
 206 |       }
 207 | 
 208 |       dragging = true;
 209 |       if (copy) {
 210 |         document.body.removeChild(copy);
 211 |       }
 212 | 
 213 |       copy = createCopy();
 214 |       offsetX = event.offsetX;
 215 |       copy.style.top =
 216 |         node.getBoundingClientRect().top + getBodyScrollTop() + "px";
 217 |       copy.style.left = event.pageX - offsetX + "px";
 218 |       document.body.appendChild(copy);
 219 |     }
 220 | 
 221 |     function createCopy() {
 222 |       const copy = document.createElement("div");
 223 |       copy.innerHTML = node.innerHTML;
 224 |       const { width, height, textAlign, fontWeight } = getComputedStyle(node);
 225 |       copy.style.width = width;
 226 |       copy.style.height = height;
 227 |       copy.style.maxHeight = height;
 228 |       copy.style.textAlign = textAlign;
 229 |       copy.style.fontWeight = fontWeight;
 230 |       copy.style.position = "absolute";
 231 |       copy.style.opacity = "0.5";
 232 |       copy.style.pointerEvents = "none";
 233 |       copy.style.overflow = "hidden";
 234 |       copy.style.background = "#dddddd";
 235 |       copy.style["z-index"] = "99999";
 236 | 
 237 |       return copy;
 238 |     }
 239 | 
 240 |     function attachEvents() {
 241 |       window.addEventListener("mousemove", onWindowMouseMove);
 242 |       window.addEventListener("mouseup", onWindowMouseUp);
 243 |       node.addEventListener("mousedown", onNodeMouseDown);
 244 |     }
 245 | 
 246 |     function detachEvents() {
 247 |       window.removeEventListener("mousemove", onWindowMouseMove);
 248 |       window.removeEventListener("mouseup", onWindowMouseUp);
 249 |       node.removeEventListener("mousedown", onNodeMouseDown);
 250 |     }
 251 |     if (enabled) {
 252 |       attachEvents();
 253 |     }
 254 | 
 255 |     return {
 256 |       destroy() {
 257 |         detachEvents();
 258 |       },
 259 |       update(enabled) {
 260 |         if (enabled) {
 261 |           attachEvents();
 262 |         } else {
 263 |           detachEvents();
 264 |         }
 265 |       }
 266 |     };
 267 |   }
 268 | 
 269 |   function onWindowKeyDown(event) {
 270 |     if (event.ctrlKey) {
 271 |       if (event.keyCode === 90) {
 272 |         undo();
 273 |         event.preventDefault();
 274 |       }
 275 | 
 276 |       if (event.keyCode === 89) {
 277 |         redo();
 278 |         event.preventDefault();
 279 |       }
 280 |     }
 281 |   }
 282 | 
 283 |   /**
 284 |    * Event handler for window's mousemove event
 285 |    * @param {MouseEvent} event The MouseEvent object
 286 |    */
 287 |   function onMouseMove(event) {
 288 |     onColumnDragMouseMove(event);
 289 |     onColumnResizeMouseMove(event);
 290 |     onRowAffixMouseMove(event);
 291 |     onColumnAffixMouseMove(event);
 292 |   }
 293 | 
 294 |   /**
 295 |    * Event handler for window's mouseup event
 296 |    * @param {MouseEvent} event The MouseEvent object
 297 |    */
 298 |   function onMouseUp(event) {
 299 |     onColumnDragEnd(event);
 300 |     onColumnResizeEnd(event);
 301 |     onRowAffixEnd(event);
 302 |     onColumnAffixEnd(event);
 303 |   }
 304 | 
 305 |   /**
 306 |    * Event handler for when a value has been updated
 307 |    * @param {Object} event Event object with row and column objects
 308 |    */
 309 |   function onCellUpdated(event) {
 310 |     rows[event.detail.rowNumber][event.detail.column.dataName] =
 311 |       event.detail.value;
 312 |     dispatch("valueUpdated", event);
 313 |   }
 314 | 
 315 |   /**
 316 |    * Applies the most recent backward change
 317 |    */
 318 |   function undo() {
 319 |     const eRows = editHistory.undo();
 320 |     if (eRows) {
 321 |       rows = eRows;
 322 |     }
 323 |   }
 324 | 
 325 |   /**
 326 |    * Applies the most recent forward change
 327 |    */
 328 | 
 329 |   function redo() {
 330 |     const eRows = editHistory.redo();
 331 |     if (eRows) {
 332 |       rows = eRows;
 333 |     }
 334 |   }
 335 | 
 336 |   /**
 337 |    * Event handler for starting column affix operation
 338 |    */
 339 |   function onColumnAffixStart(event) {
 340 |     // left click only
 341 |     if (event.which !== 1) {
 342 |       return;
 343 |     }
 344 |     if (__affixedColumnIndices.length > 0) {
 345 |       tableSpace.scrollLeft = 0;
 346 |       __affixingColumn = true;
 347 |     } else {
 348 |       __affixingColumn = true;
 349 |     }
 350 |   }
 351 | 
 352 |   /**
 353 |    * Event handler for mousemove column affix operation
 354 |    */
 355 |   function onColumnAffixMouseMove(event) {
 356 |     if (!__affixingColumn) {
 357 |       return;
 358 |     }
 359 | 
 360 |     if (event.which !== 1) {
 361 |       onColumnAffixEnd(event);
 362 |       return;
 363 |     }
 364 | 
 365 |     const { left: wrapperPageX } = wrapper.getBoundingClientRect();
 366 | 
 367 |     const offsetPoint = event.pageX - wrapperPageX + __scrollLeft;
 368 | 
 369 |     const idx = getClosestIndex(
 370 |       offsetPoint,
 371 |       columnWidths,
 372 |       __affixedColumnIndices,
 373 |       __scrollLeft
 374 |     );
 375 |     const indices = [];
 376 |     for (let i = 0; i < idx; i++) {
 377 |       indices.push(i);
 378 |     }
 379 | 
 380 |     __columnActionLineLeft = offsetPoint;
 381 |     __affixedColumnIndices = indices;
 382 |     event.preventDefault();
 383 | 
 384 |     // check to see if horizontal scroll position doesn't match where the
 385 |   }
 386 | 
 387 |   /**
 388 |    * Event handler for ending column affix operation
 389 |    */
 390 |   function onColumnAffixEnd(event) {
 391 |     __affixingColumn = false;
 392 |   }
 393 | 
 394 |   /**
 395 |    * Event handler for starting row affix operation
 396 |    */
 397 |   function onRowAffixStart(event) {
 398 |     __affixingRow = true;
 399 |   }
 400 | 
 401 |   /**
 402 |    * Event handler for mousemove row affix operation
 403 |    */
 404 |   function onRowAffixMouseMove(event) {
 405 |     if (!__affixingRow) {
 406 |       return;
 407 |     }
 408 |   }
 409 | 
 410 |   /**
 411 |    * Event handler for ending row affix operation
 412 |    */
 413 |   function onRowAffixEnd(event) {
 414 |     __affixingRow = false;
 415 |   }
 416 | 
 417 |   /**
 418 |    * Event handler for column dragging
 419 |    */
 420 |   function onColumnDragStart(event, columnIndex) {
 421 |     if (event.which !== 1) {
 422 |       return;
 423 |     }
 424 | 
 425 |     // if the developer has disabled column reordering, don't begin a reorder
 426 |     if (!allowColumnReordering) {
 427 |       return;
 428 |     }
 429 | 
 430 |     __columnDragging = true;
 431 |     __columnIndexBeingDragged = columnIndex;
 432 |     __columnDragOffsetX = event.offsetX;
 433 |     __columnActionLineLeft =
 434 |       getCellLeft({
 435 |         i: columnIndex,
 436 |         columnWidths,
 437 |         __scrollLeft,
 438 |         __affixedColumnIndices
 439 |       }) - __scrollLeft;
 440 |   }
 441 | 
 442 |   function onColumnDragMouseMove(event) {
 443 |     if (!__columnDragging) {
 444 |       return;
 445 |     }
 446 | 
 447 |     // if user is no longer pressing the left mouse button and we are out of sync
 448 |     // with __columnDragging because mouseup didn't fire, finish the reorder
 449 |     if (event.which !== 1) {
 450 |       onColumnDragEnd(event);
 451 |       return;
 452 |     }
 453 | 
 454 |     const { left: wrapperPageX } = wrapper.getBoundingClientRect();
 455 | 
 456 |     // change the position of the action line to the closest column index under the mouse
 457 |     const offsetPoint =
 458 |       event.pageX - wrapperPageX + __scrollLeft - __columnDragOffsetX;
 459 |     const idx = getClosestIndex(
 460 |       offsetPoint,
 461 |       columnWidths,
 462 |       __affixedColumnIndices,
 463 |       __scrollLeft
 464 |     );
 465 |     __columnActionLineLeft =
 466 |       getCellLeft({
 467 |         i: idx,
 468 |         columnWidths,
 469 |         __affixedColumnIndices,
 470 |         __scrollLeft
 471 |       }) - __scrollLeft;
 472 |   }
 473 | 
 474 |   /**
 475 |    * Window mouseup handler for column dragging
 476 |    */
 477 |   function onColumnDragEnd(event) {
 478 |     // user might try to be clever and middle-click to scroll horizontally while dragging a column
 479 |     // don't stop the drag for middle clicks
 480 |     if (event.which !== 1) {
 481 |       return;
 482 |     }
 483 | 
 484 |     // if a column isn't being dragged, don't reorder anything
 485 |     if (!__columnDragging) {
 486 |       return;
 487 |     }
 488 | 
 489 |     const { left: wrapperPageX } = wrapper.getBoundingClientRect();
 490 |     const offsetPoint =
 491 |       event.pageX - wrapperPageX + __scrollLeft - __columnDragOffsetX;
 492 | 
 493 |     // move column object to its new position in the array based off the mouse position and scroll position
 494 |     const newIdx = getClosestIndex(
 495 |       offsetPoint,
 496 |       columnWidths,
 497 |       __affixedColumnIndices,
 498 |       __scrollLeft
 499 |     );
 500 |     let mColumns = columns;
 501 |     mColumns.splice(
 502 |       newIdx > __columnIndexBeingDragged ? newIdx - 1 : newIdx,
 503 |       0,
 504 |       mColumns.splice(__columnIndexBeingDragged, 1)[0]
 505 |     );
 506 |     columns = mColumns;
 507 |     // delay firing of event so that new column order is accessible when handlers are called
 508 |     setTimeout(() => dispatch("columnOrderUpdated"), 0);
 509 | 
 510 |     __columnDragging = false;
 511 |     __columnDragOffsetX = 0;
 512 |     __columnIndexBeingDragged = null;
 513 |   }
 514 | 
 515 |   /**
 516 |    * Mousedown handler for column resizing
 517 |    */
 518 |   function onColumnResizeStart(event, columnIndex) {
 519 |     // left click only
 520 |     if (event.which !== 1) {
 521 |       return;
 522 |     }
 523 |     const { left: wrapperPageX } = wrapper.getBoundingClientRect();
 524 | 
 525 |     __resizing = true;
 526 |     __columnActionLineLeft = event.pageX - wrapperPageX - __scrollLeft;
 527 |     __columnIndexBeingResized = columnIndex;
 528 |     event.stopPropagation();
 529 |   }
 530 | 
 531 |   /**
 532 |    * Mousemove handler for column resizing
 533 |    */
 534 |   function onColumnResizeMouseMove(event) {
 535 |     // if not currently resizing a column, ignore the event
 536 |     if (!__resizing) {
 537 |       return;
 538 |     }
 539 | 
 540 |     const { left: wrapperPageX } = wrapper.getBoundingClientRect();
 541 | 
 542 |     const resizeLineLeft = event.pageX - wrapperPageX;
 543 |     const columnLeft = getCellLeft({
 544 |       i: __columnIndexBeingResized,
 545 |       columnWidths,
 546 |       __affixedColumnIndices,
 547 |       __scrollLeft
 548 |     });
 549 |     const resizeLineMinLeft = columnLeft - __scrollLeft + MIN_COLUMN_SIZE;
 550 |     const newColumnWidth = Math.max(
 551 |       resizeLineLeft + __scrollLeft - columnLeft,
 552 |       MIN_COLUMN_SIZE
 553 |     );
 554 |     // thanks to the virtual list, we're able to get away with setting the column's size while the mouse moves
 555 |     columns[__columnIndexBeingResized].width = newColumnWidth;
 556 | 
 557 |     __columnActionLineLeft = Math.max(resizeLineLeft, resizeLineMinLeft);
 558 | 
 559 |     // If mouseup was not fired for some reason, abort the resize
 560 |     if (event.which !== 1) {
 561 |       __resizing = false;
 562 |       __columnIndexBeingResized = null;
 563 | 
 564 |       // delay firing the event until the next frame to guarantee that new values will be available in component.get()
 565 |       setTimeout(
 566 |         () =>
 567 |           dispatch("columnWidthUpdated", {
 568 |             idx: __columnIndexBeingResized,
 569 |             width: newColumnWidth
 570 |           }),
 571 |         0
 572 |       );
 573 |     }
 574 | 
 575 |     // if still resizing and the user does not have the left mouse button depressed,
 576 |     // the mouseup event didn't fire for some reason, so turn off the resize mode
 577 |   }
 578 | 
 579 |   /**
 580 |    * Mouseup handler for column resizing
 581 |    */
 582 |   function onColumnResizeEnd(event) {
 583 |     if (!__resizing) {
 584 |       return;
 585 |     }
 586 | 
 587 |     dispatch("columnWidthUpdated");
 588 |     __resizing = false;
 589 |     __columnIndexBeingResized = null;
 590 |   }
 591 | 
 592 |   /**
 593 |    * Sets updated scroll values when the scrollable area is scrolled
 594 |    */
 595 |   function onScroll() {
 596 |     // get new scroll values from the scroll area
 597 |     const { scrollTop: newScrollTop, scrollLeft: newScrollLeft } = tableSpace;
 598 | 
 599 |     /*
 600 |      * To avoid doing unnecessary re-calculation of computed variables, don't set the scroll
 601 |      * properties that haven't changed
 602 |      */
 603 |     if (__scrollTop !== newScrollTop) {
 604 |       __scrollTop = newScrollTop;
 605 |     }
 606 | 
 607 |     if (__scrollLeft !== newScrollLeft) {
 608 |       __scrollLeft = newScrollLeft;
 609 |     }
 610 | 
 611 |     __scrolledAllTheWayToTheRight =
 612 |       Math.ceil(tableSpace.scrollWidth - tableSpace.scrollLeft) ===
 613 |       tableSpace.clientWidth;
 614 |   }
 615 | 
 616 |   /**
 617 |    * Computed Properties
 618 |    */
 619 | 
 620 |   /**
 621 |    * The 'left' value of the column affix line
 622 |    */
 623 | 
 624 |   let columnAffixLineLeft = 0; //TODO setter probably not needed due to reactive statement
 625 | 
 626 |   $: {
 627 |     // if no columns are affixed, set the line all the way to the left
 628 |     if (__affixedColumnIndices.length === 0) {
 629 |       columnAffixLineLeft = 0;
 630 |     }
 631 | 
 632 |     let left = __scrollLeft;
 633 |     for (let i = 0; i < __affixedColumnIndices.length; i++) {
 634 |       left += columnWidths[__affixedColumnIndices[i]];
 635 |     }
 636 | 
 637 |     columnAffixLineLeft = left;
 638 |   }
 639 | 
 640 |   /**
 641 |    * Array of column widths
 642 |    */
 643 |   let columnWidths = columns.map(x => x.width || MIN_COLUMN_SIZE); //TODO setter probably not needed due to reactive statement
 644 | 
 645 |   $: {
 646 |     // if width was not provided for this column, give it a default value
 647 |     columnWidths = columns.map(x => x.width || MIN_COLUMN_SIZE);
 648 |   }
 649 | 
 650 |   /**
 651 |    * The number of rows we have
 652 |    */
 653 |   let numRows = rows.length; //TODO setter probably not needed due to reactive statement
 654 | 
 655 |   $: {
 656 |     numRows = rows.length;
 657 |   }
 658 | 
 659 |   /**
 660 |    * Width of the overall grid space
 661 |    */
 662 |   let gridSpaceWidth = 0; //TODO setter probably not needed due to reactive statement
 663 | 
 664 |   $: {
 665 |     let sum = 0;
 666 |     for (let i = 0; i < columnWidths.length; i++) {
 667 |       sum += columnWidths[i];
 668 |     }
 669 | 
 670 |     /**
 671 |      * If the table is scrolled all the way to the right, resizing columns could
 672 |      * accelerate until the column is the minimum width. Add some extra space on the right
 673 |      * to ensure this undesired behavior does not happen. This doesn't seem like a perfect solution
 674 |      * but it works for now until I can think of something better.
 675 |      */
 676 | 
 677 |     if (__resizing && __scrolledAllTheWayToTheRight) {
 678 |       sum *= 2;
 679 |     }
 680 | 
 681 |     gridSpaceWidth = sum;
 682 |   }
 683 | 
 684 |   /**
 685 |    * Height of the overall grid space
 686 |    */
 687 |   let gridSpaceHeight = rowHeight * numRows; //TODO setter probably not needed due to reactive statement
 688 |   $: {
 689 |     gridSpaceHeight = rowHeight * numRows;
 690 |   }
 691 | 
 692 |   /**
 693 |    * Number of rows to render in the viewport
 694 |    */
 695 |   let numRowsInViewport = Math.ceil(__innerOffsetHeight / rowHeight);
 696 | 
 697 |   $: {
 698 |     numRowsInViewport = Math.ceil(__innerOffsetHeight / rowHeight);
 699 |   }
 700 | 
 701 |   /**
 702 |    * Computes which rows should be visible
 703 |    */
 704 |   let visibleRows;
 705 | 
 706 |   $: {
 707 |     const start = Math.max(
 708 |       0,
 709 |       Math.floor(__scrollTop / rowHeight - __extraRows / 2)
 710 |     );
 711 |     const end = start + numRowsInViewport + __extraRows;
 712 | 
 713 |     visibleRows = rows.slice(start, end).map((x, i) => {
 714 |       return {
 715 |         i: i + start, // for aria-rowindex
 716 |         data: x // the row data
 717 |       };
 718 |     });
 719 |   }
 720 | 
 721 |   /**
 722 |    * Helpers
 723 |    */
 724 |   const getCellZIndex = function(__affixedColumnIndices, i) {
 725 |     return __affixedColumnIndices.indexOf(i) === -1 ? 1 : 2;
 726 |   };
 727 | 
 728 |   /**
 729 |    * Gets the 'top' value for a grid-row
 730 |    */
 731 |   const getRowTop = function(i, rowHeight) {
 732 |     return i * rowHeight;
 733 |   };
 734 | 
 735 |   // const getCellLeft =getCellLeft
 736 | </script>
 737 | 
 738 | <style>
 739 |   .row-action-line {
 740 |     position: absolute;
 741 |     left: 0;
 742 |     width: 100%;
 743 |     height: 4px;
 744 |     z-index: 6;
 745 |     background: #aaa;
 746 |   }
 747 | 
 748 |   .row-affix-marker {
 749 |     display: none;
 750 |     position: absolute;
 751 |     left: 0;
 752 |     height: 4px;
 753 |     z-index: 6;
 754 |     background: white;
 755 |     border-top: 1px solid #999;
 756 |     border-bottom: 1px solid #999;
 757 | 
 758 |     cursor: ns-resize;
 759 |   }
 760 | 
 761 |   .column-affix-marker {
 762 |     position: absolute;
 763 |     top: 0;
 764 |     width: 4px;
 765 |     z-index: 5;
 766 |     background: white;
 767 |     border-left: 1px solid #999;
 768 |     border-right: 1px solid #999;
 769 |     cursor: ew-resize;
 770 |     transform: translateX(-50%);
 771 |   }
 772 | 
 773 |   .resizing * {
 774 |     user-select: none;
 775 |   }
 776 | 
 777 |   .resizing .grid-inner {
 778 |     overflow-y: hidden;
 779 |   }
 780 | 
 781 |   .resizing .grid-space {
 782 |     pointer-events: all;
 783 |   }
 784 | 
 785 |   .grid-cell > * {
 786 |     height: 100%;
 787 |   }
 788 | 
 789 |   .cell-default {
 790 |     padding: 0 5px;
 791 |     background: white;
 792 |     overflow: hidden;
 793 |     text-overflow: ellipsis;
 794 |   }
 795 | 
 796 |   .data-grid-wrapper {
 797 |     position: relative;
 798 |     width: 100%;
 799 |     height: 100%;
 800 |   }
 801 | 
 802 |   .column-action-line {
 803 |     position: absolute;
 804 |     top: 0;
 805 |     bottom: 17px;
 806 |     z-index: 3;
 807 |     width: 4px;
 808 |     background: #aaa;
 809 |     cursor: ew-resize;
 810 |   }
 811 | 
 812 |   .grid-cell-size-capture {
 813 |     position: absolute;
 814 |     top: 0;
 815 |     bottom: 0;
 816 |     z-index: 5;
 817 |     background: transparent;
 818 |     cursor: ew-resize;
 819 |     pointer-events: all;
 820 |   }
 821 | 
 822 |   .grid-inner {
 823 |     overflow: auto;
 824 |   }
 825 | 
 826 |   .grid-space {
 827 |     position: absolute;
 828 |     top: 0;
 829 |     left: 0;
 830 |     background: transparent;
 831 |     pointer-events: none;
 832 | 
 833 |     z-index: 3;
 834 |   }
 835 | 
 836 |   .grid-headers {
 837 |     position: absolute;
 838 |     overflow: hidden;
 839 |     max-width: 100%;
 840 |     width: 100%;
 841 |     top: 0;
 842 |     left: 0;
 843 |     border-bottom: 2px solid black;
 844 |   }
 845 | 
 846 |   .grid-headers .grid-cell {
 847 |     text-align: center;
 848 |     font-weight: bold;
 849 |     cursor: pointer;
 850 |   }
 851 | 
 852 |   .grid-headers .cell-default:hover {
 853 |     background: #eee;
 854 |   }
 855 | 
 856 |   .grid-header-row {
 857 |     position: absolute;
 858 |     overflow: hidden;
 859 |     top: 0;
 860 |   }
 861 | 
 862 |   .grid-row {
 863 |     position: absolute;
 864 |     overflow: hidden;
 865 |     white-space: nowrap;
 866 |     text-overflow: ellipsis;
 867 |   }
 868 | 
 869 |   .grid-row:not(:last-child) {
 870 |     border-bottom: 1px solid #666;
 871 |   }
 872 | 
 873 |   .grid-cell {
 874 |     position: absolute;
 875 |     top: 0;
 876 |     text-overflow: ellipsis;
 877 |     overflow: hidden;
 878 |   }
 879 | 
 880 |   .grid-cell > * {
 881 |     width: 100%;
 882 |   }
 883 | 
 884 |   .grid-cell:not(:last-child) {
 885 |     border-right: 1px solid #666;
 886 |   }
 887 | </style>
 888 | 
 889 | <svelte:window
 890 |   on:mouseup={onMouseUp}
 891 |   on:mousemove={onMouseMove}
 892 |   on:keydown={onWindowKeyDown} />
 893 | <div
 894 |   class="data-grid-wrapper {__resizing || __columnDragging ? 'resizing' : ''}"
 895 |   style="padding-top: {rowHeight}px;"
 896 |   bind:this={wrapper}
 897 |   role="table">
 898 |   {#if __resizing || __columnDragging || __affixingColumn}
 899 |     <div
 900 |       class="column-action-line"
 901 |       style="left: {__columnActionLineLeft - 2}px;" />
 902 |   {/if}
 903 |   {#if __affixingRow}
 904 |     <div class="row-action-line" style="top: {__rowActionLineTop - 2}px;" />
 905 |   {/if}
 906 | 
 907 |   <div class="grid-headers" style="height: {rowHeight}px;" rolw="rowgroup">
 908 |     <!-- We link up the horizontal scrolling of the inner grid view with the sticky header row by making the
 909 |       -- header row width 100% of the container, and using position:absolute along with 'left' to
 910 |       -- control the 'scroll' of the header row -->
 911 |     <div
 912 |       class="grid-header-row"
 913 |       style="left: -{__scrollLeft}px; height: {rowHeight}px; width: {gridSpaceWidth}px;"
 914 |       role="row">
 915 |       {#each columns as column, i (i)}
 916 |         <div
 917 |           class="grid-cell"
 918 |           on:mousedown={event => onColumnDragStart(event, i)}
 919 |           style="z-index: {getCellZIndex(__affixedColumnIndices, i)}; left: {getCellLeft(
 920 |             { i, columnWidths, __affixedColumnIndices, __scrollLeft }
 921 |           )}px; width: {columnWidths[i]}px; height: {rowHeight}px; line-height: {rowHeight}px;"
 922 |           title={column.display || ''}
 923 |           use:dragCopy={allowColumnReordering}
 924 |           role="columnheader">
 925 |           {#if column.headerComponent}
 926 |             <svelte:component this={column.headerComponent} {column} />
 927 |           {:else}
 928 |             <div class="cell-default">{column.display || ''}</div>
 929 |           {/if}
 930 |         </div>
 931 |         {#if allowResizeFromTableHeaders && !column.disallowResize}
 932 |           <div
 933 |             class="grid-cell-size-capture"
 934 |             style="left: {getCellLeft({
 935 |               i: i,
 936 |               columnWidths,
 937 |               __affixedColumnIndices,
 938 |               __scrollLeft
 939 |             }) + columnWidths[i] - Math.floor(__columnHeaderResizeCaptureWidth / 2)}px;
 940 |             width: {__columnHeaderResizeCaptureWidth}px;"
 941 |             on:mousedown={event => onColumnResizeStart(event, i)} />
 942 |         {/if}
 943 |       {/each}
 944 |     </div>
 945 |   </div>
 946 | 
 947 |   <div
 948 |     class="grid-inner"
 949 |     bind:this={tableSpace}
 950 |     bind:offsetHeight={__innerOffsetHeight}
 951 |     on:scroll={onScroll}
 952 |     style="height: 100%;"
 953 |     role="rowgroup">
 954 | 
 955 |     {#if allowColumnAffix}
 956 |       <div
 957 |         class="column-affix-marker"
 958 |         style="left: {columnAffixLineLeft}px; height: {gridSpaceHeight}px;"
 959 |         on:mousedown={onColumnAffixStart} />
 960 |     {/if}
 961 |     <div
 962 |       class="row-affix-marker"
 963 |       style="top: {__rowAffixLineTop}px; width: {gridSpaceWidth}px;"
 964 |       on:mousedown={onRowAffixStart} />
 965 | 
 966 |     <!-- We need an element to take up space so our scrollbars appear-->
 967 |     <div
 968 |       class="grid-space"
 969 |       style="width: {gridSpaceWidth}px; height: {gridSpaceHeight}px;">
 970 |       {#if allowResizeFromTableCells}
 971 |         {#each columns as column, i}
 972 |           {#if !column.disallowResize}
 973 |             <div
 974 |               class="grid-cell-size-capture"
 975 |               style="left: {getCellLeft({
 976 |                 i: i + 1,
 977 |                 columnWidths,
 978 |                 __affixedColumnIndices,
 979 |                 __scrollLeft
 980 |               }) - Math.floor(__columnHeaderResizeCaptureWidth / 2)}px; width: {__columnHeaderResizeCaptureWidth}px;"
 981 |               on:mousedown={event => onColumnResizeStart(event, i)} />
 982 |           {/if}
 983 |         {/each}
 984 |       {/if}
 985 |     </div>
 986 | 
 987 |     <!-- Loop through the visible rows and display the data-->
 988 |     <!-- Scrolling seems to perform better when not using a keyed each block -->
 989 |     {#each visibleRows as row, i}
 990 |       <div
 991 |         class="grid-row"
 992 |         style="top: {getRowTop(row.i, rowHeight)}px; height: {rowHeight}px;
 993 |         width: {gridSpaceWidth}px;"
 994 |         role="row"
 995 |         aria-rowindex={row.i}>
 996 |         {#each columns as column, j}
 997 |           <div
 998 |             class="grid-cell"
 999 |             style="z-index: {getCellZIndex(__affixedColumnIndices, j)}; left: {getCellLeft(
1000 |               { i: j, columnWidths, __affixedColumnIndices, __scrollLeft }
1001 |             )}px; height: {rowHeight}px; line-height: {rowHeight}px; width: {columnWidths[j]}px;"
1002 |             role="cell">
1003 |             {#if column.cellComponent}
1004 |               <svelte:component
1005 |                 this={column.cellComponent}
1006 |                 rowNumber={row.i}
1007 |                 {column}
1008 |                 {row}
1009 |                 on:valueupdate={onCellUpdated} />
1010 |             {:else}
1011 |               <div class="cell-default">{row.data[column.dataName] || ''}</div>
1012 |             {/if}
1013 |           </div>
1014 |         {/each}
1015 |       </div>
1016 |     {/each}
1017 |   </div>
1018 | </div>
1019 | 


--------------------------------------------------------------------------------