├── .gitignore
├── .markdownlint.json
├── LICENSE
├── README.md
├── index.html
├── lib
    └── main.ts
├── package.json
├── src
    ├── App.vue
    ├── VueScrollingTable.vue
    └── main.ts
├── tsconfig.json
├── vite.config.js
└── vue-shim.d.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log*
5 | package-lock.json
6 | debug.log
7 | .editorconfig
8 | *.tgz


--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"no-hard-tabs": {
 3 | 		"code_blocks": false
 4 | 	},
 5 | 	"line-length": {
 6 | 		"line_length": 100,
 7 | 		"tables": false
 8 | 	},
 9 | 	"no-bare-urls": false
10 | }
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Richard Tallent
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-scrolling-table
  2 | 
  3 | > A Vue component to create tables with vertical and horizontal scrolling. Flexbox-based.
  4 | 
  5 | ## Demo
  6 | 
  7 | There is a live demo here:
  8 | https://tallent.us/vue-scrolling-table
  9 | 
 10 | The demo will allow you to play with various options.
 11 | 
 12 | The repo for the demo application is here:
 13 | https://github.com/richardtallent/vue-scrolling-table-sample
 14 | 
 15 | ## Intro
 16 | 
 17 | I recently needed a Vue component for a data grid in a desktop application I'm building. No need for
 18 | responsiveness--in this case, I just need one huge table that scrolls vertically and horizontally,
 19 | like a spreadsheet. I also needed the table to fit itself neatly into a flexbox layout, taking up
 20 | any available space.
 21 | 
 22 | "No problem, this is late 2017, we have modern browsers with CSS2 `sticky`!" Nope. Browser support
 23 | for sticky is still buggy and incomplete, and I also needed the solution to work on IE11 to support
 24 | outdated corporate environments.
 25 | 
 26 | I found some very nice datagrid components, but none that suported everything on my wish list:
 27 | 
 28 | - Flexbox sizing
 29 | - Horizontal and vertical scrolling body
 30 | - Flexibility to render my `<th>` and `<td>` cells however I want (which, for me, probably means
 31 |   lots of custom renderers, many of which will probably be Vue components of their own).
 32 | - No built-in data model (I'd rather implement sorting, paging, etc. myself)
 33 | - English documentation (Vue has global popularity, which is awesome, but occasionally that means
 34 |   some great components are out of reach.)
 35 | 
 36 | So, I wrote this component. It is purposefully bare-bones, only drawing the table elements and
 37 | synchronizing the horizontal scrolling of the header and body. It doesn't render any `<tr>`, `<th>`,
 38 | or `<td>` elements itself. Instead, your parent component/application should render those using
 39 | named slots. This gives you complete control over how those are handled, and allows this component
 40 | to just focus on its sole task of making the table fit its parent and allowing the body to scroll.
 41 | 
 42 | If you're curious, before creating the Vue component, the proof of concept was done on CodePen:
 43 | https://codepen.io/richardtallent/pen/rpWBQK
 44 | 
 45 | ## Example Usage
 46 | 
 47 | In your `main.js`, if you want to globally register the component and its CSS:
 48 | 
 49 | ```JavaScript
 50 | import VueScrollingTable from "vue-scrolling-table"
 51 | import "/node_modules/vue-scrolling-table/dist/style.css"
 52 | //...
 53 | createApp(App)
 54 | 	.component(VueScrollingTable.name, VueScrollingTable)
 55 | 	.mount("#app")
 56 | ```
 57 | 
 58 | In your template:
 59 | 
 60 | ```HTML
 61 | <vue-scrolling-table>
 62 |   <template #thead>
 63 |     <tr>
 64 | 	  <th v-for="col in columns"
 65 | 		:class="col.cssClasses"
 66 | 		:key="col.id">{{ col.title }}</th>
 67 |     </tr>
 68 |   </template>
 69 |   <template #tbody>
 70 |     <tr v-for="item in items" :key="item.id">
 71 | 	  <td v-for="col in columns"
 72 | 		:class="col.cssClasses"
 73 | 		:key="col.id">{{ item[col.id] }}</td>
 74 |     </tr>
 75 |   </template>
 76 | </vue-scrolling-table>
 77 | ```
 78 | 
 79 | ## Properties
 80 | 
 81 | ### deadAreaColor
 82 | 
 83 | This is a **string** value. The default is `#CCC`. This is the color used for the "dead area" within
 84 | any scrolling table that isn't used for the table contents. This dead area is possible because
 85 | the table fits its parent container, but the rows or columns may not fill the entire space. This
 86 | property accepts any legal CSS color expression (triplets, `rgb()`, etc.).
 87 | 
 88 | ### includeFooter
 89 | 
 90 | Boolean, defaults to `false`. Set this to `true` if you are providing content for a `tfoot` slot,
 91 | otherwise the element will not be rendered.
 92 | 
 93 | ### syncHeaderScroll
 94 | 
 95 | Boolean, defaults to `true`. Set to `false` if you _do not_ want your header to scroll automatically
 96 | when the user scrolls the body horizontally.
 97 | 
 98 | ### syncFooterScroll
 99 | 
100 | Boolean, defaults to `true`. Set to `false` if you _do not_ want your footer to scroll automatically
101 | when the user scrolls the body horizontally.
102 | 
103 | ### scrollHorizontal
104 | 
105 | Boolean, defaults to `true`. Set to `false` if you _do not_ want the user to be able to scroll the
106 | body content horizontally (any overflow will be hidden).
107 | 
108 | ### scrollVertical
109 | 
110 | Boolean, defaults to `true`. Set to `false` if you _do not_ want the user to be able to scroll the
111 | body content vertically (any overflow will be hidden).
112 | 
113 | ## Slots
114 | 
115 | To render your actual rows and cells, you'll be using _named slots_. This gives you full control
116 | of how the table contents are rendered.
117 | 
118 | ### thead
119 | 
120 | Required. Use this slot to inject the `<thead>` element's contents. The component will freeze it at
121 | the top, and will synchronize its horizontal scrolling with `<tbody>` scroll (there may be a short
122 | delay).
123 | 
124 | ### tbody
125 | 
126 | Required. Use this slot to inject the `<tbody>` element's contents. The component will make it
127 | scrollable.
128 | 
129 | ### tfoot
130 | 
131 | Optional. Use this slot if you want to inject contents for a `<tfoot>` element. The component will
132 | freeze it at the bottom, below the scrolled `<tbody>`. For now, this element is not scrolled
133 | automatically with the body. If you include this, you'll also need to set the `includeFooter` prop
134 | to `true` so the component knows to render the `<tfoot>` element.
135 | 
136 | ## Events
137 | 
138 | A `scroll` event is emitted by this component when the user scrolls the body. This event passes
139 | four arguments: the `<tbody>` `scrollTop`, `scrollLeft`, `scrollHeight`, and `scrollWidth`. You
140 | can use this to, for example, show icons indicating that the user can scroll (useful when the
141 | browser doesn't display a scrollbar). Since this is fired based on the DOM `scroll` event, the
142 | same usual caveat applies: this is a high-frequency event, so try not to do anything complicated
143 | in response (if you need to do so, debounce the events and/or use `requestAnimationFrame`).
144 | 
145 | A `header-dragover` event is emitted as the user drags a draggable element around over the `THEAD`
146 | element. This may be needed to, for example, implement resizable columns. The `preventDefault`
147 | call is made automatically by this component.
148 | 
149 | A `header-dragenter` event is emitted when the user drags a draggable element into the `THEAD`
150 | element. This may be needed to, for example, implement resizable columns.
151 | 
152 | A `header-drop` event is emitted when the user drops a draggable element on the `THEAD` element.
153 | This may be needed to, for example, implement resizable columns.
154 | 
155 | ## Browser Compatibility
156 | 
157 | This component is compatible with modern browsers. It may be compatible with older browsers, but
158 | I don't test on them.
159 | 
160 | ## Slot Markup and Styling Requirements
161 | 
162 | An important requirement of this component is that **all `<td>` and `<th>` cells** must have a
163 | **specific width** set for them, either via CSS classes or style attributes. Cells can't auto-size
164 | based on contents because that would leave the header and body cells with different widths.
165 | 
166 | While it's theoretically possible to update the header column widths to match the body and vice
167 | versa, it's tricky, because unlike with scrolling, there are _many events_ that can result in a
168 | table cell resize (content change, CSS change, window resize, layout resize, etc.). Most
169 | implementations, including one I've done in the past, just end up polling on a timer and checking
170 | for columns to resize.
171 | 
172 | You can implement this sort of column-width-tracking in your parent component if you want, but
173 | otherwise, you'll need to set the `width`, `min-width`, and `max-width` for all `<th>` and `<td>`
174 | cells to guarantee the width of all rows for a given column are the same. By default, they are
175 | all set to `10em`. While you can't use percentage units, depending on your layout, you can use
176 | `vw` units to achieve a similar scaled effect.
177 | 
178 | ## Customizing the Style
179 | 
180 | What little default styling is provided on the table is purposefully _very_ basic, and is not
181 | scoped, so it's easy to override in your calling application. Use `table.scrolling` as the base
182 | selector.
183 | 
184 | ## How do I "freeze" a column?
185 | 
186 | Here's some sample CSS for freezing the first column in a table. Unfortunately, it only works
187 | in Chrome and Safari as of December 2017:
188 | 
189 | ```CSS
190 | table.scrolling td:first-child,
191 | table.scrolling th:first-child {
192 | 	position: -webkit-sticky;
193 | 	position: sticky;
194 | 	left: 0;
195 | }
196 | ```
197 | 
198 | Supporting this in every browser by simulating `sticky` is theoretically possible, but much
199 | more difficult than the scrolling implemented by this component due to differences in row
200 | height, etc. that would happen if the first column is removed from the normal flow to, say,
201 | use absolute positioning and update the scroll position with Javascript.
202 | 
203 | ## Future plans
204 | 
205 | I plan to actually use this on an upcoming project at work. It will be a good torture-test
206 | for the component. Some features I'm considering:
207 | 
208 | - [x] Emitting events when the tbody is scrolled, so the caller can do other things.
209 | - [x] Optional footer scrolling.
210 | - [ ] Get rid of the need for the includeFooter prop.
211 | - [x] Option to disable/enable scrolling in either direction.
212 | - [ ] Avoid creating extra block on right of header if browser doesn't show scroll bars.
213 | - [x] Add TypeScript declarations (anyone know how to make Vite do this on build?)
214 | 
215 | I'm open to other ideas, as long as they don't limit the flexibility of using slots for
216 | the header, body, and footer. But if someone wants to _build_ a data grid component that
217 | has this as a dependency, I'm all for it.
218 | 
219 | ## Build Setup
220 | 
221 | ```bash
222 | # install dependencies
223 | npm install
224 | 
225 | # build for production with minification
226 | npm run build
227 | ```
228 | 
229 | ## Release History
230 | 
231 | | Date       | Version | Notes                                                                                |
232 | | ---------- | ------- | ------------------------------------------------------------------------------------ |
233 | | 2017.12.24 | 0.1.0   | First published version                                                              |
234 | | 2017.12.24 | 0.1.1   | Patch based on sample app deveopment                                                 |
235 | | 2017.12.24 | 0.1.2   | Fix: old version went to npm                                                         |
236 | | 2017.12.25 | 0.2.0   | Added lots of options, updated README, fixed some display bugs when less data shown. |
237 | | 2018.08-06 | 0.2.1   | Added `header-dragenter`, `header-dragover`, and `header-drop` events.               |
238 | | 2018.08-06 | 0.2.2   | $emit. _sigh_                                                                        |
239 | | 2020.02.02 | 1.0.0   | Upgraded to Vue 3, Vite, TypeScript. BREAKING, DO NOT UPGRADE FOR VUE 2.x.           |
240 | | 2020.02.02 | 1.0.1   | Fix CSS export?                                                                      |
241 | | 2020.02.05 | 1.0.3   | Gave up on TS. Fix CSS export?                                                       |
242 | | 2020.02.10 | 1.0.4   | TS Fixed. CSS injection is not automatic for Vite, documented this.                  |
243 | | 2020.02.10 | 2.0.0   | Simplify implementation (requires Vue 3.2). Border/BG styles easier to override.     |
244 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 6 | 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" />
 7 | 		<title>vue-scrolling-table</title>
 8 | 		<style>
 9 | 			.content pre {
10 | 				white-space: pre-wrap;
11 | 			}
12 | 		</style>
13 | 	</head>
14 | 
15 | 	<body>
16 | 		<a href="https://github.com/richardtallent/vue-scrolling-table" class="github-corner" aria-label="View source on Github">
17 | 			<svg width="80" height="80" viewBox="0 0 250 250" style="fill: #70b7fd; color: #fff; position: absolute; top: 0; border: 0; right: 0" aria-hidden="true">
18 | 				<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
19 | 				<path
20 | 					d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
21 | 					fill="currentColor"
22 | 					style="transform-origin: 130px 106px"
23 | 					class="octo-arm"
24 | 				></path>
25 | 				<path
26 | 					d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
27 | 					fill="currentColor"
28 | 					class="octo-body"
29 | 				></path>
30 | 			</svg>
31 | 		</a>
32 | 		<style>
33 | 			.github-corner:hover .octo-arm {
34 | 				animation: octocat-wave 560ms ease-in-out;
35 | 			}
36 | 
37 | 			@keyframes octocat-wave {
38 | 				0%,
39 | 				100% {
40 | 					transform: rotate(0);
41 | 				}
42 | 				20%,
43 | 				60% {
44 | 					transform: rotate(-25deg);
45 | 				}
46 | 				40%,
47 | 				80% {
48 | 					transform: rotate(10deg);
49 | 				}
50 | 			}
51 | 
52 | 			@media (max-width: 500px) {
53 | 				.github-corner:hover .octo-arm {
54 | 					animation: none;
55 | 				}
56 | 				.github-corner .octo-arm {
57 | 					animation: octocat-wave 560ms ease-in-out;
58 | 				}
59 | 			}
60 | 		</style>
61 | 		<div id="app"></div>
62 | 		<script type="module" src="/src/main.ts"></script>
63 | 	</body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/lib/main.ts:
--------------------------------------------------------------------------------
1 | import VueScrollingTable from "../src/VueScrollingTable.vue"
2 | 
3 | export default VueScrollingTable
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vue-scrolling-table",
 3 | 	"version": "2.0.0",
 4 | 	"description": "A Vue 3 component to create tables with vertical and horizontal scrolling. Flexbox-based.",
 5 | 	"author": "richardtallent <richard@tallent.us>",
 6 | 	"license": "MIT",
 7 | 	"repository": {
 8 | 		"type": "git",
 9 | 		"url": "https://github.com/richardtallent/vue-scrolling-table"
10 | 	},
11 | 	"homepage": "https://tallent.us/vue-scrolling-table/",
12 | 	"private": false,
13 | 	"main": "./dist/vue-scrolling-table.umd.js",
14 | 	"module": "./dist/vue-scrolling-table.es.js",
15 | 	"types": "./dist/vue-scrolling-table.d.ts",
16 | 	"style": "./dist/style.css",
17 | 	"files": [
18 | 		"dist"
19 | 	],
20 | 	"exports": {
21 | 		".": {
22 | 			"import": "./dist/vue-scrolling-table.es.js",
23 | 			"require": "./dist/vue-scrolling-table.umd.js"
24 | 		}
25 | 	},
26 | 	"scripts": {
27 | 		"dev": "vite",
28 | 		"devs": "vite --https",
29 | 		"build": "vite build"
30 | 	},
31 | 	"dependencies": {
32 | 		"vue": "^3.2.31"
33 | 	},
34 | 	"devDependencies": {
35 | 		"@typescript-eslint/parser": "^5.14.0",
36 | 		"@vitejs/plugin-vue": "^2.2.4",
37 | 		"@vue/compiler-sfc": "^3.2.31",
38 | 		"autoprefixer": "^10.4.2",
39 | 		"eslint": "^8.11.0",
40 | 		"eslint-config-tabsanity": "^2.0.0",
41 | 		"eslint-plugin-prettier": "^4.0.0",
42 | 		"eslint-plugin-vue": "^8.5.0",
43 | 		"postcss": "^8.4.8",
44 | 		"prettier": "^2.5.1",
45 | 		"rollup-plugin-typescript2": "^0.31.2",
46 | 		"stylelint": "^14.5.3",
47 | 		"stylelint-config-standard": "^25.0.0",
48 | 		"typescript": "^4.6.2",
49 | 		"vite": "^2.8.6"
50 | 	},
51 | 	"eslintConfig": {
52 | 		"extends": [
53 | 			"plugin:vue/vue3-essential",
54 | 			"eslint:recommended",
55 | 			"@vue/prettier",
56 | 			"tabsanity"
57 | 		],
58 | 		"parserOptions": {
59 | 			"parser": "@typescript-eslint/parser"
60 | 		}
61 | 	},
62 | 	"prettier": {
63 | 		"useTabs": true,
64 | 		"semi": false,
65 | 		"singleQuote": false,
66 | 		"bracketSpacing": true,
67 | 		"trailingComma": "es5",
68 | 		"printWidth": 180
69 | 	},
70 | 	"postcss": {
71 | 		"plugins": {
72 | 			"autoprefixer": {}
73 | 		}
74 | 	},
75 | 	"stylelint": {
76 | 		"extends": "stylelint-config-standard",
77 | 		"exclude": [
78 | 			"dist"
79 | 		],
80 | 		"rules": {
81 | 			"indentation": "tab",
82 | 			"declaration-block-trailing-semicolon": null,
83 | 			"no-descending-specificity": null
84 | 		}
85 | 	},
86 | 	"browserslist": [
87 | 		"> 1%",
88 | 		"last 2 versions",
89 | 		"not ie < 11",
90 | 		"maintained node versions"
91 | 	]
92 | }
93 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 | 	<div id="app">
   3 | 		<section class="hero is-medium is-info is-bold">
   4 | 			<div class="hero-body">
   5 | 				<div class="container">
   6 | 					<h1 class="title">vue-scrolling-table</h1>
   7 | 					<h2 class="subtitle">Sample app for the VueScrollingTableComponent</h2>
   8 | 				</div>
   9 | 			</div>
  10 | 		</section>
  11 | 
  12 | 		<section class="section">
  13 | 			<div class="container">
  14 | 				<div class="content">
  15 | 					<p>
  16 | 						<b>vue-scrolling-table</b> is a Vue that provides a flexbox-based table control, where the header, body, and footer of the control are rendered via named slots for
  17 | 						maximum flexibility, and the component allows the body to be scrolled horizontally and vertically as needed.
  18 | 					</p>
  19 | 
  20 | 					<p>
  21 | 						For detailed documentation, please see <a href="https://github.com/richardtallent/vue-scrolling-table">the Github repository</a>. (The repo for this page is also
  22 | 						<a href="https://github.com/richardtallent/vue-scrolling-table-sample">available on Github</a>.)
  23 | 					</p>
  24 | 
  25 | 					<p>
  26 | 						Note: this demo page uses the Bulma library for basic styling, and that styling overides a few details of the default vue-scrolling-table, notably removing the border
  27 | 						from the header cells and adding rounded corners.
  28 | 					</p>
  29 | 
  30 | 					<h2 class="title is-2 is-spaced">Demo!</h2>
  31 | 
  32 | 					<div class="box">
  33 | 						<vue-scrolling-table
  34 | 							:scroll-horizontal="state.scrollHorizontal"
  35 | 							:scroll-vertical="state.scrollVertical"
  36 | 							:sync-header-scroll="state.syncHeaderScroll"
  37 | 							:sync-footer-scroll="state.syncFooterScroll"
  38 | 							:include-footer="state.includeFooter"
  39 | 							:dead-area-color="state.deadAreaColor"
  40 | 							:class="{ freezeFirstColumn: state.freezeFirstColumn }"
  41 | 						>
  42 | 							<template #thead>
  43 | 								<tr>
  44 | 									<th v-for="col in useColumns" :class="col.cssClasses" :key="col.id">{{ col.title }}</th>
  45 | 								</tr>
  46 | 							</template>
  47 | 							<template #tbody>
  48 | 								<tr v-for="item in items" :key="item.id">
  49 | 									<td v-for="col in useColumns" :class="col.cssClasses" :key="col.id">{{ item[col.id] }}</td>
  50 | 								</tr>
  51 | 							</template>
  52 | 							<template #tfoot>
  53 | 								<tr>
  54 | 									<th :colspan="useColumns.length">My footer text</th>
  55 | 								</tr>
  56 | 							</template>
  57 | 						</vue-scrolling-table>
  58 | 					</div>
  59 | 					<p>Fake sample data courtesy <a href="https://www.generatedata.com/">generatedata.com</a>.</p>
  60 | 
  61 | 					<h3>Play with the options!</h3>
  62 | 					<div class="field">
  63 | 						<div class="control">
  64 | 							<label class="checkbox"><input v-model="state.scrollVertical" type="checkbox" /> Vertical scrolling</label>
  65 | 						</div>
  66 | 					</div>
  67 | 					<div class="field">
  68 | 						<div class="control">
  69 | 							<label class="checkbox"><input v-model="state.scrollHorizontal" type="checkbox" /> Horizontal scrolling</label>
  70 | 						</div>
  71 | 					</div>
  72 | 					<div class="field">
  73 | 						<div class="control">
  74 | 							<label class="checkbox"><input v-model="state.includeFooter" type="checkbox" /> Show footer</label>
  75 | 						</div>
  76 | 					</div>
  77 | 					<div class="field">
  78 | 						<div class="control">
  79 | 							<label class="checkbox"><input v-model="state.syncHeaderScroll" type="checkbox" /> Sync horizontal header scrolling with body</label>
  80 | 						</div>
  81 | 					</div>
  82 | 					<div class="field">
  83 | 						<div class="control">
  84 | 							<label class="checkbox"><input v-model="state.syncFooterScroll" type="checkbox" /> Sync horizontal footer scrolling with body</label>
  85 | 						</div>
  86 | 					</div>
  87 | 					<div class="field">
  88 | 						<div class="control">
  89 | 							<label class="text"><input type="color" v-model="state.deadAreaColor" /> Dead area color</label>
  90 | 						</div>
  91 | 					</div>
  92 | 					<div class="field">
  93 | 						<div class="control">
  94 | 							<label class="text"><input type="number" v-model="state.maxRows" min="0" max="100" /> Rows to show (0-100)</label>
  95 | 						</div>
  96 | 					</div>
  97 | 					<div class="field">
  98 | 						<div class="control">
  99 | 							<label class="text"><input type="number" v-model="state.maxColumns" min="0" max="11" /> Columns to show (0-11)</label>
 100 | 						</div>
 101 | 					</div>
 102 | 					<div class="field">
 103 | 						<div class="control">
 104 | 							<label class="checkbox"><input v-model="state.freezeFirstColumn" type="checkbox" /> Freeze first column (webkit only)</label>
 105 | 						</div>
 106 | 					</div>
 107 | 
 108 | 					<h2 class="title is-2 is-spaced">Contact</h2>
 109 | 
 110 | 					<p>For more information, please feel free to reach out to me using Github issues.</p>
 111 | 				</div>
 112 | 			</div>
 113 | 		</section>
 114 | 	</div>
 115 | </template>
 116 | <script setup lang="ts">
 117 | import { computed, reactive } from "vue"
 118 | import VueScrollingTable from "./VueScrollingTable.vue"
 119 | 
 120 | const state = reactive({
 121 | 	scrollVertical: true,
 122 | 	scrollHorizontal: true,
 123 | 	syncHeaderScroll: true,
 124 | 	syncFooterScroll: true,
 125 | 	includeFooter: true,
 126 | 	deadAreaColor: "#DDDDDD",
 127 | 	maxRows: 100,
 128 | 	maxColumns: 11,
 129 | 	freezeFirstColumn: false,
 130 | 	columns: [
 131 | 		{ id: "id", title: "ID", cssClasses: "" },
 132 | 		{ id: "firstName", title: "First Name", cssClasses: "" },
 133 | 		{ id: "lastName", title: "Last Name", cssClasses: "" },
 134 | 		{ id: "companyName", title: "Company Name", cssClasses: "w2" },
 135 | 		{ id: "address", title: "Address", cssClasses: "w2" },
 136 | 		{ id: "city", title: "City", cssClasses: "" },
 137 | 		{ id: "region", title: "Region", cssClasses: "" },
 138 | 		{ id: "postal", title: "Postal Code", cssClasses: "" },
 139 | 		{ id: "country", title: "Country", cssClasses: "" },
 140 | 		{ id: "phone", title: "Phone", cssClasses: "" },
 141 | 		{ id: "email", title: "Email", cssClasses: "" },
 142 | 	],
 143 | 	allItems: [
 144 | 		{
 145 | 			id: 1,
 146 | 			firstName: "Howard",
 147 | 			lastName: "Ramirez",
 148 | 			companyName: "Cubilia Curae; Phasellus Industries",
 149 | 			phone: "1-607-782-6985",
 150 | 			email: "Ut.nec@eget.com",
 151 | 			address: "P.O. Box 690, 4766 Massa St.",
 152 | 			city: "New Plymouth",
 153 | 			region: "North Island",
 154 | 			postal: "538527",
 155 | 			country: "South Sudan",
 156 | 			latlong: "-65.0162, -52.0815",
 157 | 		},
 158 | 		{
 159 | 			id: 2,
 160 | 			firstName: "Donna",
 161 | 			lastName: "Rhodes",
 162 | 			companyName: "Nunc Mauris Industries",
 163 | 			phone: "1-184-778-4950",
 164 | 			email: "porttitor.tellus.non@eratvel.org",
 165 | 			address: "P.O. Box 359, 1862 Laoreet, Av.",
 166 | 			city: "Saint-Remy-Geest",
 167 | 			region: "Waals-Brabant",
 168 | 			postal: "DL3N 3CV",
 169 | 			country: "Botswana",
 170 | 			latlong: "1.57577, -169.19843",
 171 | 		},
 172 | 		{
 173 | 			id: 3,
 174 | 			firstName: "Wade",
 175 | 			lastName: "Reynolds",
 176 | 			companyName: "Duis Risus LLC",
 177 | 			phone: "454-3889",
 178 | 			email: "nunc@mauris.com",
 179 | 			address: "Ap #132-6084 Vitae St.",
 180 | 			city: "Colombo",
 181 | 			region: "Paraná",
 182 | 			postal: "563593",
 183 | 			country: "Mali",
 184 | 			latlong: "-2.21279, 172.48945",
 185 | 		},
 186 | 		{
 187 | 			id: 4,
 188 | 			firstName: "Rae",
 189 | 			lastName: "Leach",
 190 | 			companyName: "Aliquet Molestie LLC",
 191 | 			phone: "370-8602",
 192 | 			email: "luctus@ligula.co.uk",
 193 | 			address: "2271 Dolor. Rd.",
 194 | 			city: "Hamburg",
 195 | 			region: "HH",
 196 | 			postal: "07338",
 197 | 			country: "United States Minor Outlying Islands",
 198 | 			latlong: "22.18339, -119.56959",
 199 | 		},
 200 | 		{
 201 | 			id: 5,
 202 | 			firstName: "Oleg",
 203 | 			lastName: "Miles",
 204 | 			companyName: "Maecenas Mi PC",
 205 | 			phone: "491-4122",
 206 | 			email: "nulla.In@magnaDuis.com",
 207 | 			address: "2655 Nibh. St.",
 208 | 			city: "San Rafael",
 209 | 			region: "Alajuela",
 210 | 			postal: "22850",
 211 | 			country: "Finland",
 212 | 			latlong: "89.32097, 132.01573",
 213 | 		},
 214 | 		{
 215 | 			id: 6,
 216 | 			firstName: "Thane",
 217 | 			lastName: "Bright",
 218 | 			companyName: "Sem Egestas Blandit LLP",
 219 | 			phone: "1-230-283-4753",
 220 | 			email: "ante.blandit@pharetra.org",
 221 | 			address: "8064 Ante St.",
 222 | 			city: "Purulia",
 223 | 			region: "Jharkhand",
 224 | 			postal: "40118",
 225 | 			country: "Serbia",
 226 | 			latlong: "-40.57058, -7.18883",
 227 | 		},
 228 | 		{
 229 | 			id: 7,
 230 | 			firstName: "Hashim",
 231 | 			lastName: "Salazar",
 232 | 			companyName: "Mi Tempor Lorem Institute",
 233 | 			phone: "551-1721",
 234 | 			email: "quis@Cumsociisnatoque.com",
 235 | 			address: "5177 Auctor. Avenue",
 236 | 			city: "Soye",
 237 | 			region: "Namen",
 238 | 			postal: "4532",
 239 | 			country: "Belarus",
 240 | 			latlong: "17.0762, 80.93834",
 241 | 		},
 242 | 		{
 243 | 			id: 8,
 244 | 			firstName: "Aspen",
 245 | 			lastName: "Tanner",
 246 | 			companyName: "Pharetra Nibh Aliquam Ltd",
 247 | 			phone: "192-2717",
 248 | 			email: "Donec.est@etarcuimperdiet.edu",
 249 | 			address: "Ap #260-6014 Donec Rd.",
 250 | 			city: "Vienna",
 251 | 			region: "Wie",
 252 | 			postal: "2972 ZB",
 253 | 			country: "South Sudan",
 254 | 			latlong: "-15.28813, 32.10255",
 255 | 		},
 256 | 		{
 257 | 			id: 9,
 258 | 			firstName: "Eaton",
 259 | 			lastName: "Harris",
 260 | 			companyName: "Suspendisse Commodo Inc.",
 261 | 			phone: "1-862-415-8875",
 262 | 			email: "et@natoque.net",
 263 | 			address: "754-1058 In Ave",
 264 | 			city: "Belfast",
 265 | 			region: "U",
 266 | 			postal: "47351",
 267 | 			country: "Saint Barthélemy",
 268 | 			latlong: "-1.12993, 77.69448",
 269 | 		},
 270 | 		{
 271 | 			id: 10,
 272 | 			firstName: "Scott",
 273 | 			lastName: "Savage",
 274 | 			companyName: "Molestie LLP",
 275 | 			phone: "1-261-128-3939",
 276 | 			email: "venenatis@erat.co.uk",
 277 | 			address: "P.O. Box 397, 4261 Iaculis Road",
 278 | 			city: "Sagamu",
 279 | 			region: "Ogun",
 280 | 			postal: "0576",
 281 | 			country: "Portugal",
 282 | 			latlong: "10.5385, -71.53813",
 283 | 		},
 284 | 		{
 285 | 			id: 11,
 286 | 			firstName: "Amethyst",
 287 | 			lastName: "Moore",
 288 | 			companyName: "Leo Elementum Incorporated",
 289 | 			phone: "111-2420",
 290 | 			email: "egestas.Fusce.aliquet@quamdignissimpharetra.org",
 291 | 			address: "Ap #615-2475 Sagittis Rd.",
 292 | 			city: "Tallahassee",
 293 | 			region: "FL",
 294 | 			postal: "17070",
 295 | 			country: "Turks and Caicos Islands",
 296 | 			latlong: "-64.01867, -170.5388",
 297 | 		},
 298 | 		{
 299 | 			id: 12,
 300 | 			firstName: "Russell",
 301 | 			lastName: "Roy",
 302 | 			companyName: "Class Incorporated",
 303 | 			phone: "555-5784",
 304 | 			email: "ac@semper.org",
 305 | 			address: "4023 Donec Rd.",
 306 | 			city: "Galway",
 307 | 			region: "Connacht",
 308 | 			postal: "91975-667",
 309 | 			country: "Bahrain",
 310 | 			latlong: "64.10092, -55.87219",
 311 | 		},
 312 | 		{
 313 | 			id: 13,
 314 | 			firstName: "Chloe",
 315 | 			lastName: "Shepard",
 316 | 			companyName: "Ornare Libero At PC",
 317 | 			phone: "1-851-813-9116",
 318 | 			email: "ut.odio.vel@dui.com",
 319 | 			address: "Ap #655-4944 Velit. Rd.",
 320 | 			city: "Alacant",
 321 | 			region: "Comunitat Valenciana",
 322 | 			postal: "5316",
 323 | 			country: "Guyana",
 324 | 			latlong: "-35.97468, 163.65834",
 325 | 		},
 326 | 		{
 327 | 			id: 14,
 328 | 			firstName: "Zenaida",
 329 | 			lastName: "Butler",
 330 | 			companyName: "Quisque Tincidunt Company",
 331 | 			phone: "202-4795",
 332 | 			email: "orci.lacus@duisemper.com",
 333 | 			address: "Ap #857-3500 Fermentum Rd.",
 334 | 			city: "Cheltenham",
 335 | 			region: "Gloucestershire",
 336 | 			postal: "85-623",
 337 | 			country: "Mali",
 338 | 			latlong: "-40.12836, -141.78587",
 339 | 		},
 340 | 		{
 341 | 			id: 15,
 342 | 			firstName: "Akeem",
 343 | 			lastName: "Houston",
 344 | 			companyName: "Turpis Vitae Purus LLP",
 345 | 			phone: "1-719-939-6901",
 346 | 			email: "euismod.ac@velfaucibus.co.uk",
 347 | 			address: "Ap #901-4402 Sed Road",
 348 | 			city: "Sapele",
 349 | 			region: "Delta",
 350 | 			postal: "50417",
 351 | 			country: "France",
 352 | 			latlong: "-38.76102, -154.03756",
 353 | 		},
 354 | 		{
 355 | 			id: 16,
 356 | 			firstName: "Alma",
 357 | 			lastName: "Whitehead",
 358 | 			companyName: "Maecenas Iaculis Aliquet Inc.",
 359 | 			phone: "1-457-545-6623",
 360 | 			email: "arcu.vel.quam@accumsanconvallis.ca",
 361 | 			address: "5449 Malesuada St.",
 362 | 			city: "Sokoto",
 363 | 			region: "Sokoto",
 364 | 			postal: "44922",
 365 | 			country: "Hong Kong",
 366 | 			latlong: "36.81221, -29.96226",
 367 | 		},
 368 | 		{
 369 | 			id: 17,
 370 | 			firstName: "Prescott",
 371 | 			lastName: "Willis",
 372 | 			companyName: "Proin Dolor LLP",
 373 | 			phone: "1-758-337-8375",
 374 | 			email: "blandit.enim.consequat@Nunc.org",
 375 | 			address: "P.O. Box 242, 2810 Ut Ave",
 376 | 			city: "Toruń",
 377 | 			region: "Kujawsko-pomorskie",
 378 | 			postal: "4584",
 379 | 			country: "Guyana",
 380 | 			latlong: "29.29962, -31.61446",
 381 | 		},
 382 | 		{
 383 | 			id: 18,
 384 | 			firstName: "Rooney",
 385 | 			lastName: "Harrell",
 386 | 			companyName: "Dui Associates",
 387 | 			phone: "1-371-619-4460",
 388 | 			email: "facilisis.vitae.orci@ligula.co.uk",
 389 | 			address: "4523 Sapien, Rd.",
 390 | 			city: "Guna",
 391 | 			region: "Madhya Pradesh",
 392 | 			postal: "2978",
 393 | 			country: "Sweden",
 394 | 			latlong: "23.9795, -59.82102",
 395 | 		},
 396 | 		{
 397 | 			id: 19,
 398 | 			firstName: "Hu",
 399 | 			lastName: "Wood",
 400 | 			companyName: "Mus Proin Institute",
 401 | 			phone: "376-0930",
 402 | 			email: "ornare.lectus.ante@atpretiumaliquet.edu",
 403 | 			address: "1805 Nibh. St.",
 404 | 			city: "Campagna",
 405 | 			region: "Campania",
 406 | 			postal: "14530",
 407 | 			country: "Mongolia",
 408 | 			latlong: "-4.75482, 91.77837",
 409 | 		},
 410 | 		{
 411 | 			id: 20,
 412 | 			firstName: "Beck",
 413 | 			lastName: "Brennan",
 414 | 			companyName: "Pede Et Risus LLP",
 415 | 			phone: "418-9774",
 416 | 			email: "Morbi.quis.urna@In.ca",
 417 | 			address: "P.O. Box 324, 5727 Vulputate St.",
 418 | 			city: "Missoula",
 419 | 			region: "Montana",
 420 | 			postal: "24803",
 421 | 			country: "Nauru",
 422 | 			latlong: "2.15658, -68.28417",
 423 | 		},
 424 | 		{
 425 | 			id: 21,
 426 | 			firstName: "Quincy",
 427 | 			lastName: "Knight",
 428 | 			companyName: "Eu Corporation",
 429 | 			phone: "1-222-411-1840",
 430 | 			email: "ut.nisi@sapien.org",
 431 | 			address: "P.O. Box 873, 4719 Dictum Rd.",
 432 | 			city: "Aurora",
 433 | 			region: "Colorado",
 434 | 			postal: "7039 BN",
 435 | 			country: "Latvia",
 436 | 			latlong: "-40.31897, -91.89931",
 437 | 		},
 438 | 		{
 439 | 			id: 22,
 440 | 			firstName: "Tad",
 441 | 			lastName: "Ellis",
 442 | 			companyName: "Lacinia Sed Congue Incorporated",
 443 | 			phone: "1-107-122-1058",
 444 | 			email: "Sed.et.libero@diamluctus.co.uk",
 445 | 			address: "9509 Vitae Av.",
 446 | 			city: "Minucciano",
 447 | 			region: "Toscana",
 448 | 			postal: "5199",
 449 | 			country: "Guatemala",
 450 | 			latlong: "73.49902, -173.37591",
 451 | 		},
 452 | 		{
 453 | 			id: 23,
 454 | 			firstName: "Athena",
 455 | 			lastName: "Mendez",
 456 | 			companyName: "Eros Proin Ultrices LLP",
 457 | 			phone: "1-651-557-1187",
 458 | 			email: "montes.nascetur@nec.org",
 459 | 			address: "351-5755 Molestie Rd.",
 460 | 			city: "Lithgow",
 461 | 			region: "New South Wales",
 462 | 			postal: "31144",
 463 | 			country: "Haiti",
 464 | 			latlong: "37.22916, 80.99339",
 465 | 		},
 466 | 		{
 467 | 			id: 24,
 468 | 			firstName: "Zelenia",
 469 | 			lastName: "Carson",
 470 | 			companyName: "Egestas Foundation",
 471 | 			phone: "432-2981",
 472 | 			email: "tortor.at.risus@Nullam.com",
 473 | 			address: "Ap #212-4007 Amet Rd.",
 474 | 			city: "San Rafael",
 475 | 			region: "A",
 476 | 			postal: "52452",
 477 | 			country: "Nicaragua",
 478 | 			latlong: "-7.51949, 159.71235",
 479 | 		},
 480 | 		{
 481 | 			id: 25,
 482 | 			firstName: "Cain",
 483 | 			lastName: "Powell",
 484 | 			companyName: "Praesent Interdum Ligula Industries",
 485 | 			phone: "168-8333",
 486 | 			email: "et@Curae.co.uk",
 487 | 			address: "P.O. Box 227, 5277 Magnis Av.",
 488 | 			city: "Goiânia",
 489 | 			region: "Goiás",
 490 | 			postal: "L05 7NL",
 491 | 			country: "South Africa",
 492 | 			latlong: "-60.17634, -117.12668",
 493 | 		},
 494 | 		{
 495 | 			id: 26,
 496 | 			firstName: "Malik",
 497 | 			lastName: "Lucas",
 498 | 			companyName: "Ac PC",
 499 | 			phone: "1-538-536-0329",
 500 | 			email: "libero.est.congue@id.ca",
 501 | 			address: "Ap #744-6562 Et, Road",
 502 | 			city: "Istanbul",
 503 | 			region: "Istanbul",
 504 | 			postal: "8559",
 505 | 			country: "Liechtenstein",
 506 | 			latlong: "-48.66892, 165.42832",
 507 | 		},
 508 | 		{
 509 | 			id: 27,
 510 | 			firstName: "Nevada",
 511 | 			lastName: "Erickson",
 512 | 			companyName: "Lobortis Mauris Suspendisse Company",
 513 | 			phone: "857-7978",
 514 | 			email: "eget@porttitorvulputateposuere.com",
 515 | 			address: "P.O. Box 465, 310 Justo Av.",
 516 | 			city: "Kawerau",
 517 | 			region: "NI",
 518 | 			postal: "952085",
 519 | 			country: "Jamaica",
 520 | 			latlong: "11.52757, -78.58355",
 521 | 		},
 522 | 		{
 523 | 			id: 28,
 524 | 			firstName: "Drake",
 525 | 			lastName: "Williams",
 526 | 			companyName: "Nec Quam Foundation",
 527 | 			phone: "703-6516",
 528 | 			email: "elementum.purus.accumsan@neccursusa.org",
 529 | 			address: "508-4765 Dapibus Avenue",
 530 | 			city: "San Joaquín",
 531 | 			region: "Metropolitana de Santiago",
 532 | 			postal: "55125",
 533 | 			country: "Bangladesh",
 534 | 			latlong: "28.21206, -65.573",
 535 | 		},
 536 | 		{
 537 | 			id: 29,
 538 | 			firstName: "Dolan",
 539 | 			lastName: "Lyons",
 540 | 			companyName: "Et Foundation",
 541 | 			phone: "660-3254",
 542 | 			email: "Quisque.ac.libero@non.edu",
 543 | 			address: "7533 Urna Rd.",
 544 | 			city: "Springdale",
 545 | 			region: "Arkansas",
 546 | 			postal: "257939",
 547 | 			country: "French Polynesia",
 548 | 			latlong: "-47.63558, -63.07712",
 549 | 		},
 550 | 		{
 551 | 			id: 30,
 552 | 			firstName: "Madison",
 553 | 			lastName: "Rush",
 554 | 			companyName: "Eu Neque Corp.",
 555 | 			phone: "878-4482",
 556 | 			email: "facilisis.vitae@tempusmauriserat.edu",
 557 | 			address: "P.O. Box 941, 5546 A, Av.",
 558 | 			city: "La Matap�dia",
 559 | 			region: "QC",
 560 | 			postal: "21800",
 561 | 			country: "Isle of Man",
 562 | 			latlong: "5.64687, -171.49148",
 563 | 		},
 564 | 		{
 565 | 			id: 31,
 566 | 			firstName: "Paul",
 567 | 			lastName: "Mccullough",
 568 | 			companyName: "Vel Sapien Incorporated",
 569 | 			phone: "1-979-507-3992",
 570 | 			email: "Curabitur.egestas.nunc@semsemper.net",
 571 | 			address: "Ap #178-4382 Vitae Avenue",
 572 | 			city: "Okpoko",
 573 | 			region: "Anambra",
 574 | 			postal: "2911",
 575 | 			country: "Sudan",
 576 | 			latlong: "-9.06427, 40.69171",
 577 | 		},
 578 | 		{
 579 | 			id: 32,
 580 | 			firstName: "Declan",
 581 | 			lastName: "Spencer",
 582 | 			companyName: "Luctus Aliquet Odio Ltd",
 583 | 			phone: "730-0218",
 584 | 			email: "ornare.lectus.ante@interdumSed.org",
 585 | 			address: "5123 Nam Av.",
 586 | 			city: "Bairnsdale",
 587 | 			region: "VIC",
 588 | 			postal: "10315",
 589 | 			country: "Mongolia",
 590 | 			latlong: "79.03585, 62.3812",
 591 | 		},
 592 | 		{
 593 | 			id: 33,
 594 | 			firstName: "Gemma",
 595 | 			lastName: "Nash",
 596 | 			companyName: "Mus Limited",
 597 | 			phone: "1-917-882-0764",
 598 | 			email: "Sed@aliquetodioEtiam.net",
 599 | 			address: "9989 Dapibus Rd.",
 600 | 			city: "Woodlands County",
 601 | 			region: "Alberta",
 602 | 			postal: "8505",
 603 | 			country: "Netherlands",
 604 | 			latlong: "-65.07627, 120.51849",
 605 | 		},
 606 | 		{
 607 | 			id: 34,
 608 | 			firstName: "Shelley",
 609 | 			lastName: "Wolf",
 610 | 			companyName: "Cursus Company",
 611 | 			phone: "791-0382",
 612 | 			email: "ante@pedeSuspendissedui.com",
 613 | 			address: "885-4467 Ac Rd.",
 614 | 			city: "Abbeville",
 615 | 			region: "Picardie",
 616 | 			postal: "374426",
 617 | 			country: "Åland Islands",
 618 | 			latlong: "-30.26897, -172.43207",
 619 | 		},
 620 | 		{
 621 | 			id: 35,
 622 | 			firstName: "Kaitlin",
 623 | 			lastName: "Moreno",
 624 | 			companyName: "Vehicula Et Rutrum Associates",
 625 | 			phone: "1-102-192-3426",
 626 | 			email: "ullamcorper.viverra@et.com",
 627 | 			address: "9224 Erat Av.",
 628 | 			city: "Hertsberge",
 629 | 			region: "WV",
 630 | 			postal: "700220",
 631 | 			country: "Morocco",
 632 | 			latlong: "14.8958, 56.26835",
 633 | 		},
 634 | 		{
 635 | 			id: 36,
 636 | 			firstName: "Piper",
 637 | 			lastName: "Gibbs",
 638 | 			companyName: "Maecenas Ornare Egestas LLP",
 639 | 			phone: "366-2536",
 640 | 			email: "aliquet.Proin.velit@velitCraslorem.ca",
 641 | 			address: "P.O. Box 602, 9878 Quisque Rd.",
 642 | 			city: "Kanchrapara",
 643 | 			region: "West Bengal",
 644 | 			postal: "68935",
 645 | 			country: "Saint Helena, Ascension and Tristan da Cunha",
 646 | 			latlong: "-69.47768, -137.60118",
 647 | 		},
 648 | 		{
 649 | 			id: 37,
 650 | 			firstName: "Madeline",
 651 | 			lastName: "Miles",
 652 | 			companyName: "Sed Dictum Proin Consulting",
 653 | 			phone: "415-2855",
 654 | 			email: "tempor.diam.dictum@ipsum.edu",
 655 | 			address: "5126 Magna Street",
 656 | 			city: "Vienna",
 657 | 			region: "Wie",
 658 | 			postal: "47549",
 659 | 			country: "Iran",
 660 | 			latlong: "-29.32235, 57.7887",
 661 | 		},
 662 | 		{
 663 | 			id: 38,
 664 | 			firstName: "Ursula",
 665 | 			lastName: "Collins",
 666 | 			companyName: "Etiam LLC",
 667 | 			phone: "373-5705",
 668 | 			email: "nulla.magna@neque.ca",
 669 | 			address: "739-3307 Dolor, St.",
 670 | 			city: "Perquenco",
 671 | 			region: "IX",
 672 | 			postal: "77862",
 673 | 			country: "Canada",
 674 | 			latlong: "17.53695, -155.3334",
 675 | 		},
 676 | 		{
 677 | 			id: 39,
 678 | 			firstName: "Lydia",
 679 | 			lastName: "Mooney",
 680 | 			companyName: "Nibh Associates",
 681 | 			phone: "916-9232",
 682 | 			email: "scelerisque.dui.Suspendisse@et.com",
 683 | 			address: "P.O. Box 466, 8034 Eget, Rd.",
 684 | 			city: "Cuenca",
 685 | 			region: "CM",
 686 | 			postal: "38834",
 687 | 			country: "France",
 688 | 			latlong: "17.22048, -28.31764",
 689 | 		},
 690 | 		{
 691 | 			id: 40,
 692 | 			firstName: "Erica",
 693 | 			lastName: "Gilbert",
 694 | 			companyName: "Et Netus Foundation",
 695 | 			phone: "389-1716",
 696 | 			email: "lectus.Cum.sociis@tellusNunclectus.com",
 697 | 			address: "161-7800 Donec Street",
 698 | 			city: "Recanati",
 699 | 			region: "Marche",
 700 | 			postal: "02-639",
 701 | 			country: "Hong Kong",
 702 | 			latlong: "82.41502, 0.72436",
 703 | 		},
 704 | 		{
 705 | 			id: 41,
 706 | 			firstName: "Colin",
 707 | 			lastName: "Sosa",
 708 | 			companyName: "Est Mollis Industries",
 709 | 			phone: "1-984-137-9736",
 710 | 			email: "at@luctus.net",
 711 | 			address: "722-5764 Orci St.",
 712 | 			city: "Lidköping",
 713 | 			region: "Västra Götalands län",
 714 | 			postal: "89583",
 715 | 			country: "Dominican Republic",
 716 | 			latlong: "7.21644, 23.61365",
 717 | 		},
 718 | 		{
 719 | 			id: 42,
 720 | 			firstName: "Ronan",
 721 | 			lastName: "Ortega",
 722 | 			companyName: "A Magna Lorem Associates",
 723 | 			phone: "1-716-666-7634",
 724 | 			email: "aptent.taciti@eteros.net",
 725 | 			address: "Ap #611-9674 Facilisis Rd.",
 726 | 			city: "Tranås",
 727 | 			region: "F",
 728 | 			postal: "861883",
 729 | 			country: "Zimbabwe",
 730 | 			latlong: "-16.23089, -125.91167",
 731 | 		},
 732 | 		{
 733 | 			id: 43,
 734 | 			firstName: "Chaim",
 735 | 			lastName: "Lowery",
 736 | 			companyName: "Libero Consulting",
 737 | 			phone: "1-552-651-9739",
 738 | 			email: "posuere@cursusetmagna.com",
 739 | 			address: "Ap #940-5067 Placerat Road",
 740 | 			city: "San José de Alajuela",
 741 | 			region: "A",
 742 | 			postal: "9477 HT",
 743 | 			country: "Cambodia",
 744 | 			latlong: "-32.87537, -24.30377",
 745 | 		},
 746 | 		{
 747 | 			id: 44,
 748 | 			firstName: "Hu",
 749 | 			lastName: "Sandoval",
 750 | 			companyName: "Montes Incorporated",
 751 | 			phone: "1-922-987-8117",
 752 | 			email: "libero.lacus@hendrerit.ca",
 753 | 			address: "9707 Consectetuer St.",
 754 | 			city: "Niterói",
 755 | 			region: "RJ",
 756 | 			postal: "28300-192",
 757 | 			country: "Korea, North",
 758 | 			latlong: "-86.38357, 154.53231",
 759 | 		},
 760 | 		{
 761 | 			id: 45,
 762 | 			firstName: "Garrett",
 763 | 			lastName: "Ashley",
 764 | 			companyName: "Est Mauris Ltd",
 765 | 			phone: "1-241-560-2048",
 766 | 			email: "elit.sed@Integereu.edu",
 767 | 			address: "P.O. Box 233, 3054 Nullam Ave",
 768 | 			city: "Częstochowa",
 769 | 			region: "SL",
 770 | 			postal: "7808",
 771 | 			country: "Saint Helena, Ascension and Tristan da Cunha",
 772 | 			latlong: "-39.94487, 179.35835",
 773 | 		},
 774 | 		{
 775 | 			id: 46,
 776 | 			firstName: "Charles",
 777 | 			lastName: "Guy",
 778 | 			companyName: "Egestas Blandit Associates",
 779 | 			phone: "416-3731",
 780 | 			email: "eget@aliquet.net",
 781 | 			address: "9240 Ac Road",
 782 | 			city: "Lidingo",
 783 | 			region: "AB",
 784 | 			postal: "04-502",
 785 | 			country: "Northern Mariana Islands",
 786 | 			latlong: "-51.01321, 120.6586",
 787 | 		},
 788 | 		{
 789 | 			id: 47,
 790 | 			firstName: "Haviva",
 791 | 			lastName: "Coleman",
 792 | 			companyName: "Odio Corporation",
 793 | 			phone: "161-9695",
 794 | 			email: "nonummy.ac.feugiat@nasceturridiculus.co.uk",
 795 | 			address: "3924 Posuere, Rd.",
 796 | 			city: "Płock",
 797 | 			region: "Mazowieckie",
 798 | 			postal: "2882",
 799 | 			country: "United States Minor Outlying Islands",
 800 | 			latlong: "-2.21793, -129.94668",
 801 | 		},
 802 | 		{
 803 | 			id: 48,
 804 | 			firstName: "Evelyn",
 805 | 			lastName: "Henry",
 806 | 			companyName: "A Tortor Nunc Corporation",
 807 | 			phone: "1-335-282-9511",
 808 | 			email: "a.arcu.Sed@elementumlorem.edu",
 809 | 			address: "Ap #600-7984 Tincidunt Ave",
 810 | 			city: "Gorzów Wielkopolski",
 811 | 			region: "Lubuskie",
 812 | 			postal: "73-574",
 813 | 			country: "Liberia",
 814 | 			latlong: "-44.42548, 175.57871",
 815 | 		},
 816 | 		{
 817 | 			id: 49,
 818 | 			firstName: "Joan",
 819 | 			lastName: "Lopez",
 820 | 			companyName: "Commodo Ltd",
 821 | 			phone: "201-7077",
 822 | 			email: "faucibus.leo.in@sedtortor.co.uk",
 823 | 			address: "932-877 Ornare. Avenue",
 824 | 			city: "Grumo Appula",
 825 | 			region: "PUG",
 826 | 			postal: "5423",
 827 | 			country: "Montenegro",
 828 | 			latlong: "-61.97694, 80.41918",
 829 | 		},
 830 | 		{
 831 | 			id: 50,
 832 | 			firstName: "Ignatius",
 833 | 			lastName: "Sexton",
 834 | 			companyName: "Varius Corp.",
 835 | 			phone: "633-1411",
 836 | 			email: "Nulla@urnaetarcu.com",
 837 | 			address: "4474 Etiam St.",
 838 | 			city: "Wokingham",
 839 | 			region: "BR",
 840 | 			postal: "24747",
 841 | 			country: "Armenia",
 842 | 			latlong: "66.55528, -132.22207",
 843 | 		},
 844 | 		{
 845 | 			id: 51,
 846 | 			firstName: "Cathleen",
 847 | 			lastName: "Mays",
 848 | 			companyName: "Vitae Sodales Ltd",
 849 | 			phone: "428-7008",
 850 | 			email: "sit@rutrumFuscedolor.edu",
 851 | 			address: "703-2698 Cras St.",
 852 | 			city: "Boo",
 853 | 			region: "AB",
 854 | 			postal: "1612",
 855 | 			country: "Belize",
 856 | 			latlong: "45.1131, 133.01119",
 857 | 		},
 858 | 		{
 859 | 			id: 52,
 860 | 			firstName: "Troy",
 861 | 			lastName: "Robertson",
 862 | 			companyName: "Et Inc.",
 863 | 			phone: "451-1455",
 864 | 			email: "in.faucibus.orci@at.com",
 865 | 			address: "P.O. Box 607, 5711 Fusce Street",
 866 | 			city: "Kisi",
 867 | 			region: "OY",
 868 | 			postal: "9801",
 869 | 			country: "Kuwait",
 870 | 			latlong: "86.56396, 145.02232",
 871 | 		},
 872 | 		{
 873 | 			id: 53,
 874 | 			firstName: "Julian",
 875 | 			lastName: "Greer",
 876 | 			companyName: "Risus At PC",
 877 | 			phone: "732-2513",
 878 | 			email: "ullamcorper.Duis@atauctor.com",
 879 | 			address: "673-7124 Id St.",
 880 | 			city: "Kano",
 881 | 			region: "KN",
 882 | 			postal: "37420",
 883 | 			country: "Congo, the Democratic Republic of the",
 884 | 			latlong: "62.13967, -47.40381",
 885 | 		},
 886 | 		{
 887 | 			id: 54,
 888 | 			firstName: "Veda",
 889 | 			lastName: "Shaffer",
 890 | 			companyName: "Dignissim Foundation",
 891 | 			phone: "1-858-903-3424",
 892 | 			email: "ipsum.dolor.sit@lorem.ca",
 893 | 			address: "Ap #557-287 Morbi St.",
 894 | 			city: "Eschwege",
 895 | 			region: "Hesse",
 896 | 			postal: "88-803",
 897 | 			country: "Liberia",
 898 | 			latlong: "22.62467, 85.94015",
 899 | 		},
 900 | 		{
 901 | 			id: 55,
 902 | 			firstName: "Yvette",
 903 | 			lastName: "Gilliam",
 904 | 			companyName: "Auctor Inc.",
 905 | 			phone: "1-443-340-3673",
 906 | 			email: "est@cursuspurus.edu",
 907 | 			address: "P.O. Box 126, 619 Risus. Street",
 908 | 			city: "Vitacura",
 909 | 			region: "RM",
 910 | 			postal: "8623",
 911 | 			country: "Sint Maarten",
 912 | 			latlong: "32.54459, -6.62481",
 913 | 		},
 914 | 		{
 915 | 			id: 56,
 916 | 			firstName: "Isabella",
 917 | 			lastName: "Chen",
 918 | 			companyName: "Nec Enim Ltd",
 919 | 			phone: "1-185-393-5047",
 920 | 			email: "Mauris@Nuncpulvinararcu.net",
 921 | 			address: "5205 Id Road",
 922 | 			city: "Boo",
 923 | 			region: "Stockholms län",
 924 | 			postal: "25207",
 925 | 			country: "Cyprus",
 926 | 			latlong: "-34.91847, -62.53616",
 927 | 		},
 928 | 		{
 929 | 			id: 57,
 930 | 			firstName: "Jael",
 931 | 			lastName: "Acosta",
 932 | 			companyName: "Odio Auctor Corporation",
 933 | 			phone: "1-903-311-1676",
 934 | 			email: "in.dolor.Fusce@sapien.edu",
 935 | 			address: "5411 Dui, Ave",
 936 | 			city: "Guelph",
 937 | 			region: "Ontario",
 938 | 			postal: "6527",
 939 | 			country: "Cayman Islands",
 940 | 			latlong: "-80.2011, 95.33",
 941 | 		},
 942 | 		{
 943 | 			id: 58,
 944 | 			firstName: "Chelsea",
 945 | 			lastName: "Leon",
 946 | 			companyName: "Et Inc.",
 947 | 			phone: "656-9030",
 948 | 			email: "eu.elit@temporest.net",
 949 | 			address: "P.O. Box 991, 134 Amet, Road",
 950 | 			city: "Bremerhaven",
 951 | 			region: "HB",
 952 | 			postal: "16242",
 953 | 			country: "American Samoa",
 954 | 			latlong: "19.99075, 40.87843",
 955 | 		},
 956 | 		{
 957 | 			id: 59,
 958 | 			firstName: "Uta",
 959 | 			lastName: "Crosby",
 960 | 			companyName: "Fringilla Porttitor Corp.",
 961 | 			phone: "1-368-281-7044",
 962 | 			email: "Fusce.mi.lorem@Curabiturdictum.edu",
 963 | 			address: "P.O. Box 525, 8505 Eleifend, Avenue",
 964 | 			city: "Bydgoszcz",
 965 | 			region: "KP",
 966 | 			postal: "21230",
 967 | 			country: "Pitcairn Islands",
 968 | 			latlong: "4.15055, 8.03743",
 969 | 		},
 970 | 		{
 971 | 			id: 60,
 972 | 			firstName: "Velma",
 973 | 			lastName: "Campbell",
 974 | 			companyName: "Nunc Ac Institute",
 975 | 			phone: "1-761-910-9065",
 976 | 			email: "Donec.at.arcu@lobortis.co.uk",
 977 | 			address: "Ap #482-5223 Mollis Avenue",
 978 | 			city: "Los Álamos",
 979 | 			region: "Biobío",
 980 | 			postal: "2188 HY",
 981 | 			country: "Saint Lucia",
 982 | 			latlong: "-34.65639, -27.26901",
 983 | 		},
 984 | 		{
 985 | 			id: 61,
 986 | 			firstName: "Asher",
 987 | 			lastName: "Estrada",
 988 | 			companyName: "Erat Volutpat Limited",
 989 | 			phone: "1-246-348-6492",
 990 | 			email: "auctor@Craseget.ca",
 991 | 			address: "P.O. Box 519, 4167 Lacus. Rd.",
 992 | 			city: "Coihueco",
 993 | 			region: "VII",
 994 | 			postal: "94-259",
 995 | 			country: "Pitcairn Islands",
 996 | 			latlong: "-84.06202, -138.64229",
 997 | 		},
 998 | 		{
 999 | 			id: 62,
1000 | 			firstName: "Samson",
1001 | 			lastName: "Hawkins",
1002 | 			companyName: "Felis Consulting",
1003 | 			phone: "991-5421",
1004 | 			email: "tincidunt.orci@placeratvelitQuisque.edu",
1005 | 			address: "P.O. Box 594, 4266 Purus Rd.",
1006 | 			city: "Thisnes",
1007 | 			region: "Luik",
1008 | 			postal: "1093",
1009 | 			country: "Tanzania",
1010 | 			latlong: "-15.01883, -21.52673",
1011 | 		},
1012 | 		{
1013 | 			id: 63,
1014 | 			firstName: "Oren",
1015 | 			lastName: "Marquez",
1016 | 			companyName: "At Velit LLC",
1017 | 			phone: "660-1141",
1018 | 			email: "eu.odio.tristique@non.org",
1019 | 			address: "P.O. Box 908, 4922 Eu Street",
1020 | 			city: "Brest",
1021 | 			region: "BR",
1022 | 			postal: "8362",
1023 | 			country: "Tuvalu",
1024 | 			latlong: "78.38888, 62.37906",
1025 | 		},
1026 | 		{
1027 | 			id: 64,
1028 | 			firstName: "Flynn",
1029 | 			lastName: "Cox",
1030 | 			companyName: "Cursus Limited",
1031 | 			phone: "367-1498",
1032 | 			email: "scelerisque.dui@Etiam.co.uk",
1033 | 			address: "210-5349 Volutpat. Ave",
1034 | 			city: "Etawah",
1035 | 			region: "Uttar Pradesh",
1036 | 			postal: "RU09 0WF",
1037 | 			country: "Myanmar",
1038 | 			latlong: "42.89719, -71.25152",
1039 | 		},
1040 | 		{
1041 | 			id: 65,
1042 | 			firstName: "Farrah",
1043 | 			lastName: "Padilla",
1044 | 			companyName: "Eros Nam Consulting",
1045 | 			phone: "1-813-565-8958",
1046 | 			email: "In.ornare@NullafacilisiSed.net",
1047 | 			address: "343-3594 Cras Avenue",
1048 | 			city: "Périgueux",
1049 | 			region: "Aquitaine",
1050 | 			postal: "41501",
1051 | 			country: "Niue",
1052 | 			latlong: "-17.81897, -178.90247",
1053 | 		},
1054 | 		{
1055 | 			id: 66,
1056 | 			firstName: "Amal",
1057 | 			lastName: "Ortega",
1058 | 			companyName: "Mauris Vel Inc.",
1059 | 			phone: "1-206-819-1318",
1060 | 			email: "per@maurissagittisplacerat.com",
1061 | 			address: "Ap #254-7681 Ornare, Street",
1062 | 			city: "Delta",
1063 | 			region: "British Columbia",
1064 | 			postal: "JG44 6KK",
1065 | 			country: "Rwanda",
1066 | 			latlong: "-51.98458, 66.4097",
1067 | 		},
1068 | 		{
1069 | 			id: 67,
1070 | 			firstName: "Ina",
1071 | 			lastName: "Britt",
1072 | 			companyName: "Aliquam Nec Industries",
1073 | 			phone: "1-769-465-1256",
1074 | 			email: "amet@luctuslobortisClass.ca",
1075 | 			address: "1756 Imperdiet Rd.",
1076 | 			city: "Bellary",
1077 | 			region: "Karnataka",
1078 | 			postal: "7433 NC",
1079 | 			country: "Bouvet Island",
1080 | 			latlong: "22.2901, -138.06172",
1081 | 		},
1082 | 		{
1083 | 			id: 68,
1084 | 			firstName: "Ebony",
1085 | 			lastName: "Payne",
1086 | 			companyName: "Ridiculus Mus Proin Incorporated",
1087 | 			phone: "1-299-369-6636",
1088 | 			email: "Nunc@orci.net",
1089 | 			address: "P.O. Box 737, 2427 Nulla Rd.",
1090 | 			city: "Jaén",
1091 | 			region: "AN",
1092 | 			postal: "1027 NM",
1093 | 			country: "Turkey",
1094 | 			latlong: "-19.19957, 35.34038",
1095 | 		},
1096 | 		{
1097 | 			id: 69,
1098 | 			firstName: "Phillip",
1099 | 			lastName: "Walton",
1100 | 			companyName: "Eu LLC",
1101 | 			phone: "1-362-664-2345",
1102 | 			email: "leo.in@duinecurna.ca",
1103 | 			address: "4729 Rhoncus. Road",
1104 | 			city: "Oberhausen",
1105 | 			region: "North Rhine-Westphalia",
1106 | 			postal: "41603",
1107 | 			country: "Algeria",
1108 | 			latlong: "64.05008, -9.30022",
1109 | 		},
1110 | 		{
1111 | 			id: 70,
1112 | 			firstName: "Idola",
1113 | 			lastName: "Cummings",
1114 | 			companyName: "Nonummy Ac Feugiat LLC",
1115 | 			phone: "909-2751",
1116 | 			email: "mollis@atauctorullamcorper.co.uk",
1117 | 			address: "Ap #260-3761 Nisl Av.",
1118 | 			city: "Pamplona",
1119 | 			region: "Navarra",
1120 | 			postal: "2181",
1121 | 			country: "Anguilla",
1122 | 			latlong: "-13.66888, 170.63044",
1123 | 		},
1124 | 		{
1125 | 			id: 71,
1126 | 			firstName: "Iona",
1127 | 			lastName: "Cummings",
1128 | 			companyName: "Adipiscing Mauris Corporation",
1129 | 			phone: "383-6797",
1130 | 			email: "eu@maurisid.com",
1131 | 			address: "Ap #911-2955 Ut St.",
1132 | 			city: "Gölcük",
1133 | 			region: "Koc",
1134 | 			postal: "6236",
1135 | 			country: "Myanmar",
1136 | 			latlong: "-24.33335, 22.42451",
1137 | 		},
1138 | 		{
1139 | 			id: 72,
1140 | 			firstName: "Kaitlin",
1141 | 			lastName: "Johnson",
1142 | 			companyName: "Mauris Blandit Mattis Incorporated",
1143 | 			phone: "553-5198",
1144 | 			email: "eu.tellus.Phasellus@ut.com",
1145 | 			address: "243-5814 Vel, Rd.",
1146 | 			city: "Valéncia",
1147 | 			region: "Comunitat Valenciana",
1148 | 			postal: "316840",
1149 | 			country: "Uzbekistan",
1150 | 			latlong: "38.93955, 146.46779",
1151 | 		},
1152 | 		{
1153 | 			id: 73,
1154 | 			firstName: "Rudyard",
1155 | 			lastName: "Franks",
1156 | 			companyName: "Mauris Inc.",
1157 | 			phone: "1-538-204-7089",
1158 | 			email: "vel.pede.blandit@sem.org",
1159 | 			address: "P.O. Box 409, 3933 Luctus Avenue",
1160 | 			city: "Berlin",
1161 | 			region: "Berlin",
1162 | 			postal: "P2G 4J3",
1163 | 			country: "Macao",
1164 | 			latlong: "10.0186, -111.08044",
1165 | 		},
1166 | 		{
1167 | 			id: 74,
1168 | 			firstName: "Devin",
1169 | 			lastName: "Snow",
1170 | 			companyName: "Vel Est PC",
1171 | 			phone: "268-9068",
1172 | 			email: "Donec.luctus@estacfacilisis.co.uk",
1173 | 			address: "P.O. Box 576, 6915 Ipsum Road",
1174 | 			city: "Jacksonville",
1175 | 			region: "Florida",
1176 | 			postal: "26931-660",
1177 | 			country: "Chile",
1178 | 			latlong: "-68.60298, 90.55506",
1179 | 		},
1180 | 		{
1181 | 			id: 75,
1182 | 			firstName: "Karly",
1183 | 			lastName: "May",
1184 | 			companyName: "Placerat Augue Sed Consulting",
1185 | 			phone: "278-0091",
1186 | 			email: "ac@disparturient.co.uk",
1187 | 			address: "3438 Lacus. Av.",
1188 | 			city: "Watson Lake",
1189 | 			region: "YK",
1190 | 			postal: "66531",
1191 | 			country: "Comoros",
1192 | 			latlong: "53.73788, -97.37417",
1193 | 		},
1194 | 		{
1195 | 			id: 76,
1196 | 			firstName: "Lydia",
1197 | 			lastName: "Tucker",
1198 | 			companyName: "Enim Sit Amet Foundation",
1199 | 			phone: "456-8672",
1200 | 			email: "tincidunt.Donec@commodoipsum.ca",
1201 | 			address: "P.O. Box 305, 1568 Curabitur Road",
1202 | 			city: "Girona",
1203 | 			region: "CA",
1204 | 			postal: "646871",
1205 | 			country: "Guatemala",
1206 | 			latlong: "30.1492, -137.63979",
1207 | 		},
1208 | 		{
1209 | 			id: 77,
1210 | 			firstName: "Adrienne",
1211 | 			lastName: "Brennan",
1212 | 			companyName: "Vivamus Industries",
1213 | 			phone: "963-6589",
1214 | 			email: "dui@NullamenimSed.ca",
1215 | 			address: "P.O. Box 497, 8544 Nunc Rd.",
1216 | 			city: "Galway",
1217 | 			region: "C",
1218 | 			postal: "05492",
1219 | 			country: "Russian Federation",
1220 | 			latlong: "-62.61059, -169.91162",
1221 | 		},
1222 | 		{
1223 | 			id: 78,
1224 | 			firstName: "Moses",
1225 | 			lastName: "Meyer",
1226 | 			companyName: "Tellus Suspendisse Consulting",
1227 | 			phone: "241-4577",
1228 | 			email: "nunc@mattis.co.uk",
1229 | 			address: "P.O. Box 210, 7543 Nulla St.",
1230 | 			city: "Santa Luzia",
1231 | 			region: "Minas Gerais",
1232 | 			postal: "70092",
1233 | 			country: "Cuba",
1234 | 			latlong: "86.69886, -80.07049",
1235 | 		},
1236 | 		{
1237 | 			id: 79,
1238 | 			firstName: "Malachi",
1239 | 			lastName: "Whitney",
1240 | 			companyName: "Semper Foundation",
1241 | 			phone: "1-220-633-0209",
1242 | 			email: "consequat.nec.mollis@risusDuis.edu",
1243 | 			address: "P.O. Box 525, 9613 Fusce Avenue",
1244 | 			city: "Ipswich",
1245 | 			region: "Queensland",
1246 | 			postal: "SA8 6AG",
1247 | 			country: "Sudan",
1248 | 			latlong: "-76.34709, -43.59039",
1249 | 		},
1250 | 		{
1251 | 			id: 80,
1252 | 			firstName: "Georgia",
1253 | 			lastName: "Dotson",
1254 | 			companyName: "Hendrerit Neque In Foundation",
1255 | 			phone: "534-3389",
1256 | 			email: "arcu.Sed@consequat.com",
1257 | 			address: "Ap #580-2908 Dolor Ave",
1258 | 			city: "Montese",
1259 | 			region: "Emilia-Romagna",
1260 | 			postal: "G9R 2J6",
1261 | 			country: "Belarus",
1262 | 			latlong: "14.12896, 81.22962",
1263 | 		},
1264 | 		{
1265 | 			id: 81,
1266 | 			firstName: "Jamalia",
1267 | 			lastName: "Livingston",
1268 | 			companyName: "Justo Proin Non Incorporated",
1269 | 			phone: "1-590-578-5721",
1270 | 			email: "nec.imperdiet.nec@risusquis.net",
1271 | 			address: "629-2928 Feugiat. Rd.",
1272 | 			city: "Sirsa",
1273 | 			region: "HR",
1274 | 			postal: "69633",
1275 | 			country: "Romania",
1276 | 			latlong: "22.45729, -51.38539",
1277 | 		},
1278 | 		{
1279 | 			id: 82,
1280 | 			firstName: "Kendall",
1281 | 			lastName: "Odom",
1282 | 			companyName: "Nec Malesuada Ut Company",
1283 | 			phone: "659-6462",
1284 | 			email: "laoreet.ipsum@Aeneangravida.org",
1285 | 			address: "1152 Urna St.",
1286 | 			city: "Berlin",
1287 | 			region: "BE",
1288 | 			postal: "5352 BO",
1289 | 			country: "India",
1290 | 			latlong: "53.10565, -42.44083",
1291 | 		},
1292 | 		{
1293 | 			id: 83,
1294 | 			firstName: "Melinda",
1295 | 			lastName: "Ray",
1296 | 			companyName: "Ligula Consulting",
1297 | 			phone: "1-676-711-3984",
1298 | 			email: "rhoncus@blanditenimconsequat.ca",
1299 | 			address: "Ap #749-6032 Nec Rd.",
1300 | 			city: "Buguma",
1301 | 			region: "RI",
1302 | 			postal: "7211",
1303 | 			country: "Andorra",
1304 | 			latlong: "-66.47937, -19.32697",
1305 | 		},
1306 | 		{
1307 | 			id: 84,
1308 | 			firstName: "Candice",
1309 | 			lastName: "Mcgowan",
1310 | 			companyName: "Magnis Foundation",
1311 | 			phone: "1-539-344-5841",
1312 | 			email: "lectus.justo.eu@Morbi.com",
1313 | 			address: "411-4228 Purus, Rd.",
1314 | 			city: "Kerikeri",
1315 | 			region: "North Island",
1316 | 			postal: "RE2 5GC",
1317 | 			country: "Niger",
1318 | 			latlong: "18.17267, 4.38161",
1319 | 		},
1320 | 		{
1321 | 			id: 85,
1322 | 			firstName: "Cynthia",
1323 | 			lastName: "Goff",
1324 | 			companyName: "Dolor Quam LLP",
1325 | 			phone: "801-1268",
1326 | 			email: "tempor@vulputaterisus.org",
1327 | 			address: "630-8410 Nec Road",
1328 | 			city: "Baton Rouge",
1329 | 			region: "LA",
1330 | 			postal: "26440-786",
1331 | 			country: "Benin",
1332 | 			latlong: "-72.48588, -50.57804",
1333 | 		},
1334 | 		{
1335 | 			id: 86,
1336 | 			firstName: "Lacy",
1337 | 			lastName: "Cook",
1338 | 			companyName: "Donec Egestas Incorporated",
1339 | 			phone: "1-200-497-0955",
1340 | 			email: "fermentum.risus@eros.org",
1341 | 			address: "Ap #104-8815 Id Av.",
1342 | 			city: "Delta",
1343 | 			region: "BC",
1344 | 			postal: "04-518",
1345 | 			country: "Greenland",
1346 | 			latlong: "-56.47198, -81.31912",
1347 | 		},
1348 | 		{
1349 | 			id: 87,
1350 | 			firstName: "Hashim",
1351 | 			lastName: "Becker",
1352 | 			companyName: "Sed Congue Limited",
1353 | 			phone: "1-738-393-2086",
1354 | 			email: "non@adipiscinglobortis.org",
1355 | 			address: "Ap #904-865 Mollis St.",
1356 | 			city: "Curitiba",
1357 | 			region: "Paraná",
1358 | 			postal: "9692",
1359 | 			country: "Colombia",
1360 | 			latlong: "-18.30192, -58.28911",
1361 | 		},
1362 | 		{
1363 | 			id: 88,
1364 | 			firstName: "Mallory",
1365 | 			lastName: "Mcdonald",
1366 | 			companyName: "Rhoncus Donec Est PC",
1367 | 			phone: "357-5959",
1368 | 			email: "erat@nonmagna.org",
1369 | 			address: "4977 Arcu Road",
1370 | 			city: "Istanbul",
1371 | 			region: "Ist",
1372 | 			postal: "PP9 5DG",
1373 | 			country: "Faroe Islands",
1374 | 			latlong: "70.61728, -101.91301",
1375 | 		},
1376 | 		{
1377 | 			id: 89,
1378 | 			firstName: "Avye",
1379 | 			lastName: "Mccarthy",
1380 | 			companyName: "Augue Consulting",
1381 | 			phone: "739-5366",
1382 | 			email: "malesuada@lacus.com",
1383 | 			address: "446-3245 Tincidunt Avenue",
1384 | 			city: "Stalowa Wola",
1385 | 			region: "PK",
1386 | 			postal: "94818",
1387 | 			country: "Jersey",
1388 | 			latlong: "72.53092, 148.30005",
1389 | 		},
1390 | 		{
1391 | 			id: 90,
1392 | 			firstName: "Imelda",
1393 | 			lastName: "Salas",
1394 | 			companyName: "Felis Adipiscing Corp.",
1395 | 			phone: "231-3217",
1396 | 			email: "lectus.Nullam@Maecenasiaculis.net",
1397 | 			address: "P.O. Box 376, 9461 Felis. Av.",
1398 | 			city: "Istanbul",
1399 | 			region: "Istanbul",
1400 | 			postal: "4804",
1401 | 			country: "Italy",
1402 | 			latlong: "-8.13604, 65.57862",
1403 | 		},
1404 | 		{
1405 | 			id: 91,
1406 | 			firstName: "George",
1407 | 			lastName: "Logan",
1408 | 			companyName: "Aliquet Industries",
1409 | 			phone: "224-2123",
1410 | 			email: "eu.tellus.Phasellus@tellus.ca",
1411 | 			address: "665-7226 Mi St.",
1412 | 			city: "Rzeszów",
1413 | 			region: "PK",
1414 | 			postal: "85-392",
1415 | 			country: "Bermuda",
1416 | 			latlong: "38.3492, 94.32292",
1417 | 		},
1418 | 		{
1419 | 			id: 92,
1420 | 			firstName: "Grady",
1421 | 			lastName: "Hurst",
1422 | 			companyName: "Non Foundation",
1423 | 			phone: "800-4640",
1424 | 			email: "congue.turpis.In@Fusce.net",
1425 | 			address: "3796 Egestas. St.",
1426 | 			city: "De Haan",
1427 | 			region: "West-Vlaanderen",
1428 | 			postal: "70073",
1429 | 			country: "Poland",
1430 | 			latlong: "77.38737, -137.07566",
1431 | 		},
1432 | 		{
1433 | 			id: 93,
1434 | 			firstName: "Yael",
1435 | 			lastName: "Decker",
1436 | 			companyName: "Egestas Urna Institute",
1437 | 			phone: "411-4794",
1438 | 			email: "quis@nec.edu",
1439 | 			address: "Ap #905-2509 Facilisis, Road",
1440 | 			city: "Cambridge",
1441 | 			region: "North Island",
1442 | 			postal: "34078",
1443 | 			country: "Greece",
1444 | 			latlong: "28.17608, 27.46397",
1445 | 		},
1446 | 		{
1447 | 			id: 94,
1448 | 			firstName: "Vincent",
1449 | 			lastName: "Decker",
1450 | 			companyName: "Dis Parturient PC",
1451 | 			phone: "1-554-414-2305",
1452 | 			email: "Phasellus.vitae@pedeSuspendissedui.net",
1453 | 			address: "Ap #390-3545 Euismod St.",
1454 | 			city: "Makurdi",
1455 | 			region: "BE",
1456 | 			postal: "102442",
1457 | 			country: "Liechtenstein",
1458 | 			latlong: "-66.08526, 151.03772",
1459 | 		},
1460 | 		{
1461 | 			id: 95,
1462 | 			firstName: "Winter",
1463 | 			lastName: "Russo",
1464 | 			companyName: "Parturient Montes Corporation",
1465 | 			phone: "1-165-112-7031",
1466 | 			email: "Mauris@malesuadautsem.net",
1467 | 			address: "4105 Sapien Rd.",
1468 | 			city: "Lagos",
1469 | 			region: "Lagos",
1470 | 			postal: "98-831",
1471 | 			country: "Afghanistan",
1472 | 			latlong: "78.91735, -38.20191",
1473 | 		},
1474 | 		{
1475 | 			id: 96,
1476 | 			firstName: "Amethyst",
1477 | 			lastName: "Hurst",
1478 | 			companyName: "Aliquam Gravida Company",
1479 | 			phone: "1-726-984-3750",
1480 | 			email: "ullamcorper@scelerisquescelerisquedui.ca",
1481 | 			address: "875-6604 Vel, Street",
1482 | 			city: "Ipswich",
1483 | 			region: "SF",
1484 | 			postal: "88170",
1485 | 			country: "French Polynesia",
1486 | 			latlong: "-7.98555, 138.06646",
1487 | 		},
1488 | 		{
1489 | 			id: 97,
1490 | 			firstName: "Libby",
1491 | 			lastName: "Sherman",
1492 | 			companyName: "Euismod Urna Incorporated",
1493 | 			phone: "988-2118",
1494 | 			email: "pede.Nunc.sed@vitae.net",
1495 | 			address: "P.O. Box 101, 7274 Nibh Street",
1496 | 			city: "Wolkrange",
1497 | 			region: "Luxemburg",
1498 | 			postal: "18737",
1499 | 			country: "France",
1500 | 			latlong: "-32.02191, 102.3188",
1501 | 		},
1502 | 		{
1503 | 			id: 98,
1504 | 			firstName: "Akeem",
1505 | 			lastName: "Rivers",
1506 | 			companyName: "Purus Institute",
1507 | 			phone: "330-9191",
1508 | 			email: "mollis@cursusNuncmauris.ca",
1509 | 			address: "6432 Non, St.",
1510 | 			city: "Nicoya",
1511 | 			region: "G",
1512 | 			postal: "97222-934",
1513 | 			country: "Bosnia and Herzegovina",
1514 | 			latlong: "-77.75986, 179.39302",
1515 | 		},
1516 | 		{
1517 | 			id: 99,
1518 | 			firstName: "Joseph",
1519 | 			lastName: "Powers",
1520 | 			companyName: "Egestas Aliquam Nec Institute",
1521 | 			phone: "1-547-248-7927",
1522 | 			email: "Proin.nisl@ametlorem.co.uk",
1523 | 			address: "747-629 Vulputate Avenue",
1524 | 			city: "Gouda",
1525 | 			region: "Zuid Holland",
1526 | 			postal: "11798",
1527 | 			country: "Syria",
1528 | 			latlong: "-58.87714, -123.24194",
1529 | 		},
1530 | 		{
1531 | 			id: 100,
1532 | 			firstName: "Sade",
1533 | 			lastName: "Foley",
1534 | 			companyName: "Phasellus Company",
1535 | 			phone: "1-638-747-8408",
1536 | 			email: "pellentesque.tellus.sem@penatibuset.edu",
1537 | 			address: "Ap #663-2135 Mollis. Av.",
1538 | 			city: "Kuşadası",
1539 | 			region: "Aydın",
1540 | 			postal: "7039",
1541 | 			country: "Zambia",
1542 | 			latlong: "-6.31082, 3.55689",
1543 | 		},
1544 | 	],
1545 | })
1546 | 
1547 | const items = computed(() => state.allItems.slice(0, state.maxRows))
1548 | const useColumns = computed(() => state.columns.slice(0, state.maxColumns))
1549 | </script>
1550 | <style>
1551 | table.scrolling .w2 {
1552 | 	width: 20em;
1553 | 	min-width: 20em;
1554 | 	max-width: 20em;
1555 | }
1556 | 
1557 | table.scrolling tfoot tr th {
1558 | 	width: 130em;
1559 | 	min-width: 130em;
1560 | 	max-width: 130em;
1561 | }
1562 | 
1563 | table.freezeFirstColumn thead tr,
1564 | table.freezeFirstColumn tbody tr {
1565 | 	display: block;
1566 | 	width: min-content;
1567 | }
1568 | 
1569 | table.freezeFirstColumn thead td:first-child,
1570 | table.freezeFirstColumn tbody td:first-child,
1571 | table.freezeFirstColumn thead th:first-child,
1572 | table.freezeFirstColumn tbody th:first-child {
1573 | 	position: sticky;
1574 | 	position: -webkit-sticky;
1575 | 	left: 0;
1576 | }
1577 | 
1578 | * {
1579 | 	font-family: sans-serif;
1580 | }
1581 | 
1582 | .box {
1583 | 	clear: both;
1584 | 	padding: 0;
1585 | 	min-height: 300px;
1586 | 	height: 40vh;
1587 | 	margin-left: auto;
1588 | 	margin-right: auto;
1589 | 	overflow: hidden;
1590 | }
1591 | </style>
1592 | 


--------------------------------------------------------------------------------
/src/VueScrollingTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<table ref="table" class="scrolling" :class="{ scrolly: scrollVertical, scrollx: scrollHorizontal }">
  3 | 		<thead
  4 | 			name="thead"
  5 | 			ref="thead"
  6 | 			:class="{ scrollsync: syncHeaderScroll, 'scroll-vertical': scrollVertical }"
  7 | 			@dragenter="onDragEnterHeader"
  8 | 			@dragover.prevent="onDragOverHeader"
  9 | 			@drop="onDropHeader"
 10 | 		>
 11 | 			<slot name="thead" />
 12 | 		</thead>
 13 | 		<tbody name="tbody" ref="tbody" @scroll.passive="updateSyncedScroll">
 14 | 			<slot name="tbody" />
 15 | 		</tbody>
 16 | 		<tfoot name="tfoot" ref="tfoot" v-if="includeFooter" :class="{ scrollsync: syncFooterScroll, 'scroll-vertical': scrollVertical }">
 17 | 			<slot name="tfoot" />
 18 | 		</tfoot>
 19 | 	</table>
 20 | </template>
 21 | <script setup lang="ts">
 22 | import { onMounted, ref } from "vue"
 23 | 
 24 | const props = defineProps({
 25 | 	deadAreaColor: { type: String, required: false, default: "#CCC" },
 26 | 	includeFooter: { type: Boolean, required: false, default: false },
 27 | 	syncHeaderScroll: { type: Boolean, required: false, default: true },
 28 | 	syncFooterScroll: { type: Boolean, required: false, default: true },
 29 | 	scrollHorizontal: { type: Boolean, required: false, default: true },
 30 | 	scrollVertical: { type: Boolean, required: false, default: true },
 31 | })
 32 | 
 33 | const emit = defineEmits(["header-dragenter", "header-dragover", "header-drop", "scroll"])
 34 | 
 35 | const onDragEnterHeader = (e: DragEvent): void => emit("header-dragenter", e)
 36 | const onDragOverHeader = (e: DragEvent): void => emit("header-dragover", e)
 37 | const onDropHeader = (e: DragEvent): void => emit("header-drop", e)
 38 | 
 39 | const table = ref(null)
 40 | const tbody = ref(null)
 41 | const thead = ref(null)
 42 | const tfoot = ref(null)
 43 | 
 44 | const updateSyncedScroll = (): void => {
 45 | 	const l = tbody.value.scrollLeft
 46 | 	if (props.scrollHorizontal) {
 47 | 		if (props.syncHeaderScroll && thead.value.scrollLeft !== l) {
 48 | 			thead.value.scrollLeft = l
 49 | 		}
 50 | 		if (props.includeFooter && props.syncFooterScroll && tfoot.value.scrollLeft !== l) {
 51 | 			tfoot.value.scrollLeft = l
 52 | 		}
 53 | 	}
 54 | 	emit("scroll", tbody.value.scrollTop, l, tbody.value.scrollHeight, tbody.value.scrollWidth)
 55 | }
 56 | 
 57 | onMounted(() => {
 58 | 	updateSyncedScroll()
 59 | })
 60 | </script>
 61 | <style>
 62 | table.scrolling {
 63 | 	display: flex;
 64 | 	flex-direction: column;
 65 | 	flex: 1 1 auto;
 66 | 	width: 100%;
 67 | 	height: 100%;
 68 | 	border-collapse: collapse;
 69 | 	overflow: hidden;
 70 | 	/* Use this to create a "dead" area color if table is too wide for cells */
 71 | 	--dead-area-color: v-bind(deadAreaColor);
 72 | 	background-color: var(--dead-area-color);
 73 | }
 74 | 
 75 | table.scrolling thead,
 76 | table.scrolling tfoot {
 77 | 	/* Fit content, don't shrink it proportionately to the body. */
 78 | 	flex: 0 0 auto;
 79 | 	display: block;
 80 | 
 81 | 	/* Horizontal scrolling, when allowed, is controlled by JS, not a scroll bar. */
 82 | 	overflow: hidden;
 83 | }
 84 | 
 85 | table.scrolling tbody {
 86 | 	display: block;
 87 | 	flex: 1 1 auto;
 88 | 
 89 | 	/* Disable all scrolling by default */
 90 | 	overflow: hidden;
 91 | }
 92 | 
 93 | /* Turn on horizontal scrolling for the body only */
 94 | table.scrolling.scrollx tbody {
 95 | 	overflow-x: scroll;
 96 | }
 97 | 
 98 | /* Turn on vertical scrolling for all elements so scroll bars take up the same space */
 99 | table.scrolling.scrolly tbody,
100 | table.scrolling.scrolly thead.scrollsync,
101 | table.scrolling.scrolly tfoot.scrollsync {
102 | 	overflow-y: scroll;
103 | }
104 | 
105 | .scroll-vertical.scrollsync {
106 | 	background-color: var(--dead-area-color);
107 | 	scrollbar-base-color: var(--dead-area-color);
108 | 	scrollbar-face-color: var(--dead-area-color);
109 | 	scrollbar-highlight-color: var(--dead-area-color);
110 | 	scrollbar-track-color: var(--dead-area-color);
111 | 	scrollbar-arrow-color: var(--dead-area-color);
112 | 	scrollbar-shadow-color: var(--dead-area-color);
113 | 	scrollbar-darkshadow-color: var(--dead-area-color);
114 | }
115 | 
116 | /*
117 | For Webkit, use "dead area" color to hide vertical scrollbar functions in the header and footer.
118 | Since WebKit supports CSS variables and style attributes don't support pseudo-classes, use variables.
119 | Display is set because otherwise Chrome ignores the other styling.
120 | TODO: on Chrome/Safari for Mac, scrollbars are not shown anyway and this creates an extra block. No impact on iOS Safari.
121 | */
122 | table.scrolling.scrolly thead.scrollsync::-webkit-scrollbar {
123 | 	display: block;
124 | 	background-color: var(--dead-area-color);
125 | }
126 | 
127 | table.scrolling.scrolly thead.scrollsync::-webkit-scrollbar-track {
128 | 	background-color: var(--dead-area-color);
129 | }
130 | 
131 | /* The one caveat to scrolling this way: a hard-set width is required. Can override in thead/tbody slot. */
132 | table.scrolling td,
133 | table.scrolling th {
134 | 	/* These must all be set the same in your overriding CSS */
135 | 	width: 10em;
136 | 	min-width: 10em;
137 | 	max-width: 10em;
138 | 
139 | 	/* Important in case your data is too long for your cell */
140 | 	overflow: hidden;
141 | 	word-wrap: break-word;
142 | }
143 | 
144 | /* Default formatting, easy to override. */
145 | 
146 | :where(table.scrolling td) {
147 | 	background-color: #fff;
148 | 	border: 1px solid #ddd;
149 | }
150 | 
151 | :where(table.scrolling th) {
152 | 	background-color: #f7f7f7;
153 | 	border: 1px solid #ddd;
154 | }
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue"
2 | import App from "./App.vue"
3 | createApp(App).mount("#app")
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "esnext",
 4 | 		"module": "esnext",
 5 | 		"moduleResolution": "node",
 6 | 		"strict": false,
 7 | 		"lib": ["esnext", "dom"],
 8 | 		"types": ["vite/client"],
 9 | 		"importHelpers": true,
10 | 		"esModuleInterop": true,
11 | 		"declaration": true,
12 | 		"baseUrl": ".",
13 | 		"noUnusedLocals": true,
14 | 		"noUnusedParameters": true
15 | 	},
16 | 	"include": ["src/**/*.vue", "src/**/*.ts", "vue-shim.d.ts"],
17 | 	"exclude": ["node_modules", "dist"]
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import vue from "@vitejs/plugin-vue"
 2 | import typescript from "rollup-plugin-typescript2"
 3 | const path = require("path")
 4 | 
 5 | module.exports = {
 6 | 	// ESBuild doesn't emit typescript declarations, so use typescript2 instead
 7 | 	plugins: [vue(), typescript()],
 8 | 	esbuild: false,
 9 | 	build: {
10 | 		sourcemap: false,
11 | 		lib: {
12 | 			entry: path.resolve(__dirname, "lib/main.ts"),
13 | 			name: "VueScrollingTable",
14 | 			manifest: true,
15 | 		},
16 | 		rollupOptions: {
17 | 			// make sure to externalize deps that shouldn't be bundled into your library
18 | 			external: ["vue"],
19 | 			output: {
20 | 				// Provide global variables to use in the UMD build for externalized deps
21 | 				globals: {
22 | 					vue: "Vue",
23 | 				},
24 | 			},
25 | 		},
26 | 	},
27 | }
28 | 


--------------------------------------------------------------------------------
/vue-shim.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 | 	import { ComponentOptions } from "vue"
3 | 	const component: ComponentOptions
4 | 	export default component
5 | }
6 | 


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