Enhancements

.prettierignore

@@ -0,0 +1,4 @@
+.svelte-kit/
+.vscode/
+node_modules/
+example_data/

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-svelte"]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+// {
+//   "[svelte]": {
+//     "editor.defaultFormatter": "svelte.svelte-vscode",
+//     "editor.formatOnSave": true
+//   }
+// }

README.md

@@ -1,36 +1,41 @@
 [![npm](https://img.shields.io/npm/v/svelte-data-grid.svg?style=flat-square)](https://npmjs.org/package/svelte-data-grid)
+
 # Svelte Data Grid
 
 ## [Demo](https://bsssshhhhhhh.github.io/svelte-data-grid-demo/)
 
-
 Another Svelte Data Grid is a svelte v3 component for displaying and editing any amount of data. Please note that this is built on the fork of svelte-data-grid by bsssshhhhhhh.
 
 ## Features:
- - Excellent scrolling performance
- - ARIA attributes set on elements
- - Lightweight even when displaying a huge dataset due to implementation of a "virtual list" mechanism
- - Column headers remain fixed at the top of the grid
- - Custom components can be specified to control how individual table cells or column headers are displayed
- - Columns can be resized and reordered
+
+- Excellent scrolling performance
+- ARIA attributes set on elements
+- Lightweight even when displaying a huge dataset due to implementation of a "virtual list" mechanism
+- Column headers remain fixed at the top of the grid
+- Custom components can be specified to control how individual table cells or column headers are displayed
+- Columns can be resized and reordered
 
 ## Current Limitations:
- - Every row must have the same height and text cannot break onto the next line
+
+- Every row must have the same height and text cannot break onto the next line
 
 ## Usage:
 
 If using within Sapper:
+
 ```
 npm install another-svelte-data-grid --save-dev
 ```
 
 If using from inside a svelte component:
+
 ```
 import { DataGrid } from "another-svelte-data-grid";
 <DataGrid rows={myRows} allowColumnReordering={false} columns={myColumnDefinitions} on:columnOrderUpdated={saveNewColumnOrder}>
 ```
 
 If using from outside svelte:
+
 ```
 import DataGrid from "svelte-data-grid";
 const grid = new DataGrid({
@@ -47,6 +52,7 @@ grid.$on('columnOrderUpdated', () => {
   // save new column  order
 });
 ```
+
 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.
 
 DataGrid requires 2 properties to be passed in order to display data: `rows` and `columns`.
@@ -70,7 +76,6 @@ DataGrid requires 2 properties to be passed in order to display data: `rows` and
 ]
 ```
 
-
 `rows` is an array of objects containing the data for each table row.
 
 ```
@@ -96,14 +101,17 @@ DataGrid requires 2 properties to be passed in order to display data: `rows` and
 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.
 
 Import the components:
+
 ```
 import { TextboxCell } from 'another-svelte-data-grid';
 import { SelectCell } from 'another-svelte-data-grid';
 import { CheckboxCell } from 'another-svelte-data-grid';
 ```
 
 ### Textbox Cell
+
 Textbox cell will debounce the user input, only recording changes after 400ms has elapsed since the user stops typing.
+
 ```
 {
   display: 'Name',
@@ -116,6 +124,7 @@ Textbox cell will debounce the user input, only recording changes after 400ms ha
 ### Select Cell
 
 SelectCell requires that you provide an `options` array in your cell definition:
+
 ```
 {
   display: 'Eye Color',
@@ -140,7 +149,9 @@ SelectCell requires that you provide an `options` array in your cell definition:
 ```
 
 ### Checkbox Cell
+
 CheckboxCell will set the checked state of the checkbox depending on the boolean value of the row's data.
+
 ```
 {
   display: 'Active',
@@ -150,18 +161,18 @@ CheckboxCell will set the checked state of the checkbox depending on the boolean
 }
 ```
 
-
 ## Custom Cell Components
 
 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.
 
 Components will be passed the following properties:
+
 - `rowNumber` - The index of the row within `rows`
 - `row` - The entire row object from `rows`
 - `column` - The entire column object from `columns`
 
-
 MyCustomCell.svelte
+
 ```
 <script>
 export let data = {
@@ -178,11 +189,13 @@ export let data = {
 ```
 
 Import the component
+
 ```
 import MyCustomCell from './MyCustomCell.svelte';
 ```
 
 `columns` option:
+
 ```
 [
   {
@@ -195,30 +208,32 @@ import MyCustomCell from './MyCustomCell.svelte';
 ```
 
 ## Custom Header Components
+
 Header components can also be specified in `columns` entries as the `headerComponent` property. Header components are only passed `column`, the column object from `columns`.
 
 ## Options:
 
 Svelte Data Grid provides a few options for controlling the grid and its interactions:
 
-- `rowHeight` - The row height in pixels *(Default: 24)*
-- `allowResizeFromTableCells` - Allow user to click and drag the right border of a table cell to resize the column *(Default: false)*
-- `allowResizeFromTableHeaders` - Allow user to click and drag the right border of a column header to resize the column *(Default: true)*
-- `allowColumnReordering` - Allow user to drag a column header to move that column to a new position *(Default: true)*
-- `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)*
-- `__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)*
-- `__columnHeaderResizeCaptureWidth` The width of the element, in pixels, placed at the right border of a column that triggers that column's resize. *(Default: 20)*
-
+- `rowHeight` - The row height in pixels _(Default: 24)_
+- `allowResizeFromTableCells` - Allow user to click and drag the right border of a table cell to resize the column _(Default: false)_
+- `allowResizeFromTableHeaders` - Allow user to click and drag the right border of a column header to resize the column _(Default: true)_
+- `allowColumnReordering` - Allow user to drag a column header to move that column to a new position _(Default: true)_
+- `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)_
+- `__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)_
+- `__columnHeaderResizeCaptureWidth` The width of the element, in pixels, placed at the right border of a column that triggers that column's resize. _(Default: 20)_
 
 ## Events:
- - `columnOrderUpdated` - Fired when the user has dragged a column to a new position. The updated column order can be accessed from `component.get().columns`
- - `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`
+
+- `columnOrderUpdated` - Fired when the user has dragged a column to a new position. The updated column order can be accessed from `component.get().columns`
+- `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`
 
 ## Column Affixing
 
-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.
+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.
 
 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.
 
 ## Bugs? Suggestions?
+
 Feedback is always appreciated. Feel free to open a GitHub issue if DataGrid doesn't work the way you expect or want it to.

TODO.md

@@ -4,4 +4,4 @@
 - Update docs after forking original project
 - Add accessible ways of resizing and reordering columns using only a keyboard
 - Add mechanism for loading chunks of data asynchronously so the entire data set does not need to be loaded at once
-- Add ability to affix columns and rows so they remain visible when scrolling horizontally or vertically
+- Add ability to affix columns and rows so they remain visible when scrolling horizontally or vertically

jsconfig.json

@@ -1,11 +1,11 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"moduleResolution": "NodeNext"
-	}
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "moduleResolution": "NodeNext"
+  }
 }

package.json

@@ -1,57 +1,60 @@
 {
-	"name": "another-svelte-data-grid",
-	"version": "4.0.0",
-	"author": {
-		"name": "Landon Miller",
-		"email": "millerlm012@gmail.com",
-		"url": "https://github.com/Millerlm012"
-	  },
-	"homepage": "https://github.com/Millerlm012/another-svelte-data-grid",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^3.54.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
-		"@sveltejs/package": "^2.0.0",
-		"publint": "^0.1.9",
-		"svelte": "^3.54.0",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.3.0"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"keywords": [
-		"svelte",
-		"data-grid",
-		"data-table",
-		"table",
-		"virtual-list"
-	  ],
-	"repository": "millerlm012/another-svelte-data-grid",
-	"license": "MIT",
-	"dependencies": {
-		"debounce": "^1.2.0",
-		"deep-diff": "^1.0.2"
-	}
+  "name": "another-svelte-data-grid",
+  "version": "4.0.1",
+  "author": {
+    "name": "Landon Miller",
+    "email": "millerlm012@gmail.com",
+    "url": "https://github.com/Millerlm012"
+  },
+  "homepage": "https://github.com/Millerlm012/another-svelte-data-grid",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "format": "prettier --write  --plugin prettier-plugin-svelte ."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^3.54.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/package": "^2.0.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-svelte": "^3.0.3",
+    "publint": "^0.1.9",
+    "svelte": "^3.54.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "keywords": [
+    "svelte",
+    "data-grid",
+    "data-table",
+    "table",
+    "virtual-list"
+  ],
+  "repository": "millerlm012/another-svelte-data-grid",
+  "license": "MIT",
+  "dependencies": {
+    "debounce": "^1.2.0",
+    "deep-diff": "^1.0.2"
+  }
 }

src/app.html

@@ -1,13 +1,17 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="stylesheet" href="%sveltekit.assets%/reset.css" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div>%sveltekit.body%</div>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link rel="stylesheet" href="%sveltekit.assets%/reset.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover" style="font-family: Ubuntu">
+    <div>%sveltekit.body%</div>
+  </body>
 </html>