canvas-datagrid 0.25.4 → 0.26.0

package/CHANGELOG.md

@@ -7,6 +7,326 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 0.26.0 - 2026-09-19
+
+Version note: the project restarted its numbering at 0.3.0 in 2021 while the
+registry still held 0.22 to 0.25.4, so every release since then sorted below
+0.25.4 and `latest` had to be forced by hand. This release continues from
+0.25.4 instead, which makes npm's version ordering correct again. There is
+no 0.5.0 release; the changes below were briefly tagged as such.
+
+
+### Added
+
+- `activecellchanged` event (Tomasz Pędraszewski, #582)
+- `fillLastColumn` attribute: the last visible column fills the remaining grid width and its outer edge cannot be resized (Cauho, #589, fixes #474)
+- `allowGridExpandOnPaste` attribute: pasted data larger than the grid adds rows and columns (Roman Stetsyk, #553, fixes #552); the expansion happens in one pass
+- `allowColumnSelection` attribute: when false, header clicks sort without selecting the column (#473)
+- `maxCanvasSize` attribute: auto-sized grids stop growing at the browser canvas limit and scroll for the rest (#254)
+- `datachanged` fires for every data mutation with `e.source` (`edit`, `paste`, `cut`, `delete`, `fill`, `addrow`, ...); `afterpaste` cell tuples carry the pasted value (#250, #512, #549)
+- A `ResizeObserver` on the host and its parent keeps auto/percentage-sized grids in sync with layout changes without calling `resize()` (#289, #239)
+- `getColumnWidth` and `getRowHeight` are public (#448)
+- `dist/types.d.ts` is a real module with a default-exported factory, `canvasDatagrid` class/namespace and `CanvasDatagridArgs`; `npm test` type-checks it (#567)
+- CSS font shorthand support: weights/styles are kept, pt/em/rem/% sizes are converted (#157)
+- Docs: "Using with React/Vue/Angular", "Using with TypeScript", "Use a custom editor for a cell", "Load data on demand with fetch", "Sparkline charts", "Large arrays"; demo scripts moved into the docs (evanbenjamin, #570)
+
+### Changed
+
+- `resizerow` always carries `rowIndex`, `height`, `width`, `x`, `y`, `draggingItem`; `cellHeight` and `row` remain as aliases (#503)
+- `grid.changes` is keyed by the bound row index instead of the view row index (#418)
+- `singleSelectionMode` now also limits drag, shift and ctrl selection to one row/cell (#472)
+- Column reordering no longer requires `allowRowReordering`; the right part of each header is a reorder grab zone (`columnGrabZoneSize`) and a plain header click still sorts (#514)
+- A mouseup anywhere ends a selection drag, not only a mouseup over the canvas
+- `touchstart` is a passive listener (#328)
+- `treeHorizontalScroll` is documented as reserved/not implemented (#314)
+- CI runs on Node 20/22 with current GitHub Actions; the docs build works on Node 23+ (#574 build)
+
+### Fixed
+
+- Delete/Backspace, cut and the fill handle respect `editable: false` (#587, #458)
+- Deleting the edited row in `beforeendedit` no longer re-adds it (#583)
+- `treeGridAttributes` are applied to child grids (#444)
+- `fitColumnToValues()` without a name fits every column and unknown names no longer throw (#193)
+- Setting `columnOrder` redraws (#160)
+- `verticalAlignment: 'bottom'` is no longer one line too high (#530)
+- The number filter matches numeric cell values (#431)
+- `rendertext` handlers may supply lines without a width; right/center alignment no longer blanks the column (#460)
+- Assigning a new array to `e.items` in the `contextmenu` event replaces the menu (#263)
+- `scrollIndexRect` is initialised before the first draw (#226)
+- Touch handlers tolerate a missing starting cell (#554)
+- Copy with an active cell but no selection no longer throws (#566)
+- The string sorter coerces values so numbers and blanks sort consistently (#256)
+- The enum editor opens its picker immediately where supported (#230)
+- The web component's MutationObserver is disconnected on dispose/disconnect and never stacked; dispose is idempotent and removes every listener (#237, #338, #455)
+- No `eval` in the bundles; the grid works under a CSP without `unsafe-eval` (#311)
+- The context menu survives the click macOS Safari sends after a ctrl-click (#521)
+- Docs: `{@link}` tags render as links (#574); broken demo links (#540, #562, #563, #568); the format-data example no longer throws on invalid dates (#576); the rendertext example uses `formattext` (#262)
+
+## 0.4.7 - 2023-05-22
+
+- Ensure only cells from selection get copied onto clipboard (mdebrauw, #556)
+- Fix clearing of data when filter applied (mdebrauw, #560)
+- Fixes 'paste into wrong cell when columns are reordered' (romanstetsyk, #518)
+
+## 0.4.6 - 2023-04-03
+
+## Added
+
+- Add class name to allow targeting context menu by CSS (ilyaem, #526)
+
+## Changed
+
+- Add more tests for properties `selections` and `selectionList` (hangxingliu, #505)
+- Improve row/column resizing (velitasali, #502)
+- Re-implement(Optimize) select function (hangxingliu, #498)
+
+## Fixed
+
+- Fix sorting on header click (romanstetsyk, #550)
+- Fix activeColumnHeaderCell docs (HitomiTenshi, #513)
+- Fix some small bugs (hangxingliu, #504)
+
+## 0.4.5 - 2022-03-16
+
+## Added
+
+- Added support for filling cells using a user-passed fill function (velitasali, #500)
+
+## 0.4.4 - 2022-02-23
+
+## Added
+
+- Introduce frozen style markers (like Google Sheets) (xianzhi3, hangxingliu, #483)
+- Dispatch column hide/unhide events (mdebrauw, #491)
+- Allow cell editor overflow with long content (xianzhi3, #492)
+
+## Fixed
+
+- Fix bug that cleared the canvas under a certain unusual refresh flow (hangxingliu, #494)
+
+## 0.4.3 - 2022-02-16
+
+## Added
+
+- Ability to hide rows/cols with UI toggle (hangxingliu, #480)
+- Add Vue setup instructions (Bouke Versteegh, #482)
+
+## Fixed
+
+- Update column resizing including header (xianzhi3, #486)
+
+## 0.4.2 - 2022-01-22
+
+## Fixed
+
+- Cancel moving when cursor exits grid (xianzhi3 #476)
+- Fix clearing cells when grid is filtered (mdebrauw, #478)
+
+## 0.4.1 - 2022-01-19
+
+## Fixed
+
+- Update row/column selection (xianzhi3, #467)
+- Fix the behavior of the conext menu item used to hide column (hangxingliu, #470)
+
+## 0.4.0 - 2022-01-10
+
+## Added
+
+- Feature: Add column/row grouping for tables (xianzhi3, #453)
+- Feature: Add support for grouped columns (hangxingliu, #443)
+
+## Fixed
+
+- Update ESLint config for incorrect errors. (hangxingliu, #465)
+- Fix: Columns are hidden when there are frozen columns and hidden columns simultaneously (hangxingliu, #462)
+- Fix: null values are cast to strings ('null') on copy (mdebrauw, #461)
+
+## 0.3.25 - 2021-12-22
+
+### Fixed
+
+- Fix null value bug when copying value (ndrsn)
+- Fix setting property `dragOffset` of undefined (Lie Yue, #457)
+- Fix cell editing in the inner grid (Liu Yue, #456)
+
+## 0.3.24 - 2021-12-22
+
+### Changed
+
+- Prevent default when handling cut event and cleanup utility functions (mdebrauw, #454)
+
+## 0.3.23 - 2021-12-16
+
+### Fixed
+
+- Slight refactor and set minimum width when resizing (mdebrauw, #452)
+
+## 0.3.22 - 2021-12-15
+
+### Changed
+
+- Resize selected columns simultaneously (mdebrauw, #451)
+- Refactor `cut` and `copy` event handlers (mdebrauw, #450)
+
+## 0.3.21 - 2021-12-08
+
+### Added
+
+- Add `afterdelete` event and `deleteSelectedData()` public method (mdebrauw, #446)
+
+### Fixed
+
+- Remove mousemove at body when dispose (faimaklg, #449)
+- Fire event when resizing column by double clicking column border (mdebrauw, #447)
+- Fix filter button active/hover states, remove inline grid button after menu item click (xianzhi3, #445)
+
+## 0.3.20 - 2021-12-04
+
+### Added
+
+- Add option for dropdown button when filtering (xianzhi3, #442)
+
+## 0.3.19 - 2021-11-24
+
+### Fixed
+
+- Fix copy when column name or cell value is number (faimaklg, #402)
+- Fix moving multiple columns or rows (xianzhi3, #390)
+- Fix position of scroll bar with frozen pane xianzhi3, (#393)
+
+## 0.3.18 - 2021-11-18
+
+No changes; had to bump version number because race condition caused 0.3.16 to be published instead of 0.3.17.
+
+## 0.3.17 - 2021-11-18
+
+### Fixed
+
+- Do not render row gaps when sorting (ndrsn, #391)
+
+## 0.3.16 - 2021-11-18
+
+### Fixed
+
+- Fix string sort when value is null/undefined (faimaklg, #388)
+
+## 0.3.15 - 2021-11-18
+
+### Fixed
+
+- Fix highlighting incorrect column after repositioning column (xianzhi3, #399)
+- Reverse sort order icon (faimaklg, #387)
+- Fix link in tutorials (slominskir, #386)
+
+## 0.3.14 - 2021-10-20
+
+### Added
+
+- Emit affected cells in `cut` event (mdebrauw, #383)
+
+## 0.3.13 - 2021-10-18
+
+### Changed
+
+- `afterpaste` event now includes bound row/column index (mdebrauw, #381)
+- Adds selectedCells to selectionchanged event (mdebrauw, #380)
+- Add keepFocusOnMouseOut attribute (mdebrauw, #379)
+- Better pasting of clipboard data (mdebrauw, #378)
+
+## 0.3.12 - 2021-10-11
+
+### Changed
+
+- New options to exclude frozen rows when filtering and sorting (mdebrauw, #377)
+
+## 0.3.11 - 2021-10-04
+
+### Fixed
+
+- Fix inconsistent selection behavior between touch and mouse (tmaroschik, #376)
+
+## 0.3.10 - 2021-10-04
+
+### Changed
+
+- Allow shrinking selections with keyboard (mdebrauw, #375)
+
+## 0.3.9 - 2021-09-22
+
+### Fixed
+
+- Fix buggy paste behavior introduced in #371 (mdebrauw, #373)
+
+## 0.3.8 - 2021-09-09
+
+### Fixed
+
+- Fix autoscroll issue when selecting a cell on top or bottom row (mdebrauw, #369)
+- Make copy and pasting more like Excel (faimaklg, #371)
+
+## 0.3.7 - 2021-08-30
+
+### Fixed
+
+- Fix paste in filter mode (mdebrauw, #370)
+
+## 0.3.6 - 2021-08-16
+
+Same as previous release but bumped version to get package to publish to NPM.
+
+## 0.3.5 - 2021-08-13
+
+### Fixed
+
+- Fix missing text where value has multiple '-' (faimaklg, #363)
+
+## 0.3.4 - 2021-03-11
+
+### Added
+
+- Adds option 'hoverMode' (twojtylak, #350)
+
+## 0.3.3 - 2021-02-08
+
+### Fixed
+
+- Fixes situation where undefined `data` breaks drawing (ndrsn, #344)
+
+## 0.3.2 - 2021-02-05
+
+### Added
+
+- Now shows row gaps when filtering data
+
+### Removed
+
+- Remove unused currentFilter
+- Drop support for IE11
+
+### Fixed
+
+- Ctrl+click to select also emits selectionchanged event (ndrsn, #342)
+- Pass row index to defaultValue function (ndrsn, #265)
+- Rename getColummnWidth -> getColumnWidth (ndrsn, #281)
+
+## 0.3.1 - 2021-02-01
+
+Nothing changed here, it was a failed attempt to get the type definitions
+file automatically included in the NPM release.
+
+## 0.3.0 - 2021-02-01
+
+### Added
+
+- Adds TypeScript type definitions (josh-hemphill, #333)
+
+### Changed
+
+- Make distinction between original data and view data (ndrsn, #334)
+- Fixes typo and possible bug (voderl, #339)
+- Split up tests into separate files (ndrsn)
+
 ## 0.25.4 - 2020-11-26
 
 ### Changed

package/README.md

@@ -1,47 +1,40 @@
-canvas-datagrid
----------------
+# canvas-datagrid
 
-[Demo](https://canvas-datagrid.js.org/demo.html) - City of Chicago government employee list.  Thanks to [data.gov](https://www.data.gov/).
+[Demo](https://canvas-datagrid.js.org/examples/create-new-grid)
 
-![canvas-datagrid](https://canvas-datagrid.js.org/images/datagrid1.png)
+![canvas-datagrid](https://canvas-datagrid.js.org/assets/images/datagrid1-a4d23a352c39919c40450d272a1cd4bd.png)
 
 [![NPM](https://img.shields.io/npm/v/canvas-datagrid.svg)](https://www.npmjs.com/package/canvas-datagrid)
 [![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/TonyGermaneri/canvas-datagrid)
 
-
-* Works with Firefox, IE11, Edge, Safari and Chrome.
-* Native support for touch devices (phones and tablets).
-* Rich [documentation](https://canvas-datagrid.js.org/), [tutorials](https://canvas-datagrid.js.org/#tutorials), and [slack support](https://canvas-datagrid.slack.com/).
-* Single canvas element, drawn in immediate mode, data size does not impact performance.
-* Support for unlimited rows and columns without paging or loading.
-* Rich API of events, methods and properties using the familiar W3C DOM interface.
-* Extensible styling, filtering, formatting, resizing, selecting, and ordering.
-* Support for hierarchal drill in style row level inner grids as well grids in cells.
-* Customizable hierarchal context menu.
-* Built in and custom styles.
-* W3C Web Component.  Works in all frameworks.
-* Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.
-* Small file size
+- Works with Firefox, Edge, Safari and Chrome.
+- Native support for touch devices (phones and tablets).
+- Rich [documentation](https://canvas-datagrid.js.org/), [examples](https://canvas-datagrid.js.org/examples), and [slack support](https://canvas-datagrid.slack.com/).
+- Single canvas element, drawn in immediate mode, data size does not impact performance.
+- Support for unlimited rows and columns without paging or loading.
+- Rich API of events, methods and properties using the familiar W3C DOM interface.
+- Extensible styling, filtering, formatting, resizing, selecting, and ordering.
+- Support for hierarchal drill in style row level inner grids as well grids in cells.
+- Customizable hierarchal context menu.
+- Built in and custom styles.
+- W3C Web Component. Works in all frameworks.
+- Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.
+- Small file size
 
 [Documentation](https://canvas-datagrid.js.org/)
 
-[Tutorials](https://canvas-datagrid.js.org/#tutorials)
+[Examples](https://canvas-datagrid.js.org/examples)
 
 [Slack Support](https://canvas-datagrid.slack.com/) (message author for invite)
 
-[Style Builder](https://canvas-datagrid.js.org/styleBuilder.html)
+[Style reference](https://canvas-datagrid.js.org/reference/styling)
 
 [Download latest version (minified)](https://canvas-datagrid.js.org/canvas-datagrid.js)
 
-[Tests](https://canvas-datagrid.js.org/test/tests.html)
-
 [Source Code](https://github.com/TonyGermaneri/canvas-datagrid)
 
-[Latest Test Coverage](https://canvas-datagrid.js.org/build/report/lcov-report/index.html)
-
-Installation
-------------
+## Installation
 
 With [npm](https://www.npmjs.com/package/canvas-datagrid)
 
@@ -49,7 +42,6 @@ With [npm](https://www.npmjs.com/package/canvas-datagrid)
 npm install canvas-datagrid
 ```
 
-
 Place the single source file `./dist/canvas-datagrid.js` in your web page using a script tag that points to the source or use webpack.
 
 ```html
@@ -64,30 +56,26 @@ Alternatively, instead of downloading and installing, you can link directly to a
 
 A function will be added to the global scope of the web page called `canvasDatagrid` as well as module loader definitions.
 
-Getting started
----------------
+## Getting started
 
-Works [with webpack](https://canvas-datagrid.js.org/amdDemo.html), [without webpack](https://canvas-datagrid.js.org/demo.html) or as a [web component](https://canvas-datagrid.js.org/webcomponentDemo.html).
+Works [with a bundler](https://canvas-datagrid.js.org/examples/Webpack3-AMD), [without one](https://canvas-datagrid.js.org/getting-started#using-pure-javascript) or as a [web component](https://canvas-datagrid.js.org/getting-started#using-as-a-web-component).
 No matter how you load it, `canvasDatagrid` is declared in the global scope.
 
 Canvas-datagrid is a [Web Component](https://www.webcomponents.org/element/TonyGermaneri/canvas-datagrid) when
 in a compatible browser, otherwise it is a `<canvas>` tag.
 
-Using pure JavaScript
----------------------
+## Using pure JavaScript
 
 ```js
 var grid = canvasDatagrid();
 document.body.appendChild(grid);
 grid.data = [
-    {col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3'},
-    {col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3'}
+  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
+  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' },
 ];
 ```
 
-
-Using Web Component
--------------------
+## Using Web Component
 
 <!--
 ```
@@ -101,10 +89,11 @@ Using Web Component
 -->
 
 ```html
-<canvas-datagrid class="myGridStyle" data="data can go here too">[
-    {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"},
-    {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"}
-]</canvas-datagrid>
+<canvas-datagrid class="myGridStyle" data="data can go here too"
+  >[ {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column
+  3"}, {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2
+  column 3"} ]</canvas-datagrid
+>
 ```
 
 or
@@ -112,56 +101,85 @@ or
 ```js
 var grid = document.createElement('canvas-datagrid');
 grid.data = [
-    {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"},
-    {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"}
+  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },
+  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' },
 ];
 ```
 
-
-Using Vue
----------
+## Using Vue
 
 ```vue
 <canvas-datagrid :data.prop="[{"col1": "row 1 column 1"}]"></canvas-datagrid>
 ```
 
+See [Using with Vue](https://canvas-datagrid.js.org/examples/vue-demo) for a full component, and [Using with React](https://canvas-datagrid.js.org/examples/react-demo) for React.
 
-More Demos
-----------
-
-* [Using Vue](https://canvas-datagrid.js.org/vueExample.html)
+## Using TypeScript
 
-* [Using Webpack3: AMD](https://canvas-datagrid.js.org/amdDemo.html)
+Type declarations are included. Import the factory and, when you need them, the instance and argument types:
 
-* [Using React](https://canvas-datagrid.js.org/reactExample.html)
-
-* [Web component example](https://canvas-datagrid.js.org/webcomponentDemo.html)
-
-* [Loading data with XHR](https://canvas-datagrid.js.org/demo.html)
+```ts
+import canvasDatagrid, {
+  type canvasDatagrid as CanvasDatagrid,
+  type CanvasDatagridArgs,
+} from 'canvas-datagrid';
+```
 
-* [Sparkline example](https://canvas-datagrid.js.org/sparklineDemo.html)
+The declarations are generated from JSDoc and are not strict-clean yet, so keep `skipLibCheck: true` in your `tsconfig.json`.
 
-* [XHR data paging demo Jeopardy Questions API](https://canvas-datagrid.js.org/xhrPagingDemo.html)
+## More Demos
 
-Note about XHR paging demo: Thanks to [jservice](http://jservice.io/) for the use of the free paging API.  You must "load unsafe scripts" or relevant command to allow HTTPS (github) to make XHR requests to HTTP (Jeopardy Questions API).  There is nothing unsafe about this.
+- [Using with React](https://canvas-datagrid.js.org/examples/react-demo)
+- [Using with Vue](https://canvas-datagrid.js.org/examples/vue-demo)
+- [Using with a bundler or module loader](https://canvas-datagrid.js.org/examples/Webpack3-AMD)
+- [Create a web component grid](https://canvas-datagrid.js.org/examples/create-a-web-component-grid)
+- [Load data on demand with fetch](https://canvas-datagrid.js.org/examples/xhr-demo)
+- [Sparkline charts in cells](https://canvas-datagrid.js.org/examples/sparkline)
+- [Large arrays](https://canvas-datagrid.js.org/examples/largeArrays)
+- [Use a custom editor for a cell](https://canvas-datagrid.js.org/examples/custom-cell-editor)
+- [All examples](https://canvas-datagrid.js.org/examples)
 
-Building & Testing
-------------------
+## Building & Testing
 
-To install development dependencies.  Required to build or test.
+To install development dependencies. Required to build or test.
 
     npm install
 
-To build production and debug versions.
+To build production and debug versions:
 
     npm run build
 
-To build documentation.
+To build documentation:
 
-    npm run build-docs
+    npm run build:docs
 
-To run tests. Note: Headless tests will mostly fail due to lack of headless canvas pixel detection support.  Use VM testing or your browser.
+To build types:
 
-    npm test
+    npm run build:types
+
+To run tests. Note: Headless tests will mostly fail due to lack of headless canvas pixel detection support. Use VM testing or your browser.
 
+    npm test
 
+### Windows 10 WSL Testing
+*This is info for wsl version 1. v2 seems to be [different](https://dev.to/davelsan/comment/nnf5).*
+
+- `CHROME_BIN` needs to be set to the location of your Google Chrome exe in Windows. (e.g. `/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe`)
+   *in WSL, `export CHROME_BIN='path/to/chrome'`*
+- Chrome needs access to [karma's temp folder](https://stackoverflow.com/a/56204265/292067).
+  - Create a `tmp` folder on the same Windows drive as your repo.
+  - set `TEMP` to a folder that exists on the same Windows drive as your repo. (matching capitalization probably matters)
+    *in WSL, `export TEMP='/Temp/karma'`, if your repo is on drive C, then create folder C:\Temp\karma*
+- karma.conf.js needs to be edited
+  - Change the browser from `ChromeHeadless` to `Chrome`
+  - Modify to run ChromeHeadless without sandboxing. This is not ideal, but it seems to be necessary in [WSL](https://github.com/microsoft/WSL/issues/3282) and [Linux containers](https://docs.travis-ci.com/user/chrome#sandboxing) ([see also](https://github.com/karma-runner/karma-chrome-launcher/issues/158#issuecomment-339265457))
+    - Add a custom launcher
+      ```
+      customLaunchers: {
+        ChromeHeadlessNoSandbox: {
+            base: 'ChromeHeadless',
+            flags: ['--no-sandbox']
+        }
+      }
+      ```
+    - Change the browser from `ChromeHeadless` to `ChromeHeadlessNoSandbox`