{"id":14990292,"url":"https://github.com/tonygermaneri/canvas-datagrid","last_synced_at":"2025-05-14T15:11:04.430Z","repository":{"id":37431310,"uuid":"74969884","full_name":"TonyGermaneri/canvas-datagrid","owner":"TonyGermaneri","description":"Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.","archived":false,"fork":false,"pushed_at":"2024-01-10T18:42:32.000Z","size":52893,"stargazers_count":1485,"open_issues_count":147,"forks_count":189,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-05-11T14:18:21.042Z","etag":null,"topics":["component","datagrid","datatable","web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TonyGermaneri.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-28T12:14:50.000Z","updated_at":"2025-04-24T12:28:00.000Z","dependencies_parsed_at":"2023-02-18T20:00:27.510Z","dependency_job_id":"dc202005-cedc-4093-a42e-e8fbee6eabe5","html_url":"https://github.com/TonyGermaneri/canvas-datagrid","commit_stats":{"total_commits":903,"total_committers":41,"mean_commits":"22.024390243902438","dds":0.4130675526024363,"last_synced_commit":"f36f904be004813123b6f38b786949d0c5c0eb51"},"previous_names":[],"tags_count":242,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyGermaneri%2Fcanvas-datagrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyGermaneri%2Fcanvas-datagrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyGermaneri%2Fcanvas-datagrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyGermaneri%2Fcanvas-datagrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TonyGermaneri","download_url":"https://codeload.github.com/TonyGermaneri/canvas-datagrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254170056,"owners_count":22026219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","datagrid","datatable","web-component"],"created_at":"2024-09-24T14:19:50.371Z","updated_at":"2025-05-14T15:11:04.382Z","avatar_url":"https://github.com/TonyGermaneri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# canvas-datagrid\n\n[Demo](https://canvas-datagrid.js.org/examples/create-new-grid)\n\n![canvas-datagrid](https://canvas-datagrid.js.org/assets/images/datagrid1-a4d23a352c39919c40450d272a1cd4bd.png)\n\n[![NPM](https://img.shields.io/npm/v/canvas-datagrid.svg)](https://www.npmjs.com/package/canvas-datagrid)\n[![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/TonyGermaneri/canvas-datagrid)\n\n- Works with Firefox, Edge, Safari and Chrome.\n- Native support for touch devices (phones and tablets).\n- Rich [documentation](https://canvas-datagrid.js.org/), [tutorials](https://canvas-datagrid.js.org/#tutorials), and [slack support](https://canvas-datagrid.slack.com/).\n- Single canvas element, drawn in immediate mode, data size does not impact performance.\n- Support for unlimited rows and columns without paging or loading.\n- Rich API of events, methods and properties using the familiar W3C DOM interface.\n- Extensible styling, filtering, formatting, resizing, selecting, and ordering.\n- Support for hierarchal drill in style row level inner grids as well grids in cells.\n- Customizable hierarchal context menu.\n- Built in and custom styles.\n- W3C Web Component. Works in all frameworks.\n- Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.\n- Small file size\n\n[Documentation](https://canvas-datagrid.js.org/)\n\n[Tutorials](https://canvas-datagrid.js.org/#tutorials)\n\n[Slack Support](https://canvas-datagrid.slack.com/) (message author for invite)\n\n[Style Builder](https://canvas-datagrid.js.org/styleBuilder.html)\n\n[Download latest version (minified)](https://canvas-datagrid.js.org/canvas-datagrid.js)\n\n[Tests](https://canvas-datagrid.js.org/test/tests.html)\n\n[Source Code](https://github.com/TonyGermaneri/canvas-datagrid)\n\n[Latest Test Coverage](https://canvas-datagrid.js.org/build/report/lcov-report/index.html)\n\n## Installation\n\nWith [npm](https://www.npmjs.com/package/canvas-datagrid)\n\n```console\nnpm install canvas-datagrid\n```\n\nPlace the single source file `./dist/canvas-datagrid.js` in your web page using a script tag that points to the source or use webpack.\n\n```html\n\u003cscript src=\"dist/canvas-datagrid.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, instead of downloading and installing, you can link directly to an NPM CDN like [unpkg.com](https://unpkg.com).\n\n```html\n\u003cscript src=\"https://unpkg.com/canvas-datagrid\"\u003e\u003c/script\u003e\n```\n\nA function will be added to the global scope of the web page called `canvasDatagrid` as well as module loader definitions.\n\n## Getting started\n\nWorks [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).\nNo matter how you load it, `canvasDatagrid` is declared in the global scope.\n\nCanvas-datagrid is a [Web Component](https://www.webcomponents.org/element/TonyGermaneri/canvas-datagrid) when\nin a compatible browser, otherwise it is a `\u003ccanvas\u003e` tag.\n\n## Using pure JavaScript\n\n```js\nvar grid = canvasDatagrid();\ndocument.body.appendChild(grid);\ngrid.data = [\n  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },\n  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' },\n];\n```\n\n## Using Web Component\n\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"https://canvas-datagrid.js.org/canvas-datagrid.debug.js\"\u003e\u003c/script\u003e\n    \u003cdiv style=\"height: 300px;\"\u003e\u003cnext-code-block\u003e\u003c/next-code-block\u003e\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n```html\n\u003ccanvas-datagrid class=\"myGridStyle\" data=\"data can go here too\"\n  \u003e[ {\"col1\": \"row 1 column 1\", \"col2\": \"row 1 column 2\", \"col3\": \"row 1 column\n  3\"}, {\"col1\": \"row 2 column 1\", \"col2\": \"row 2 column 2\", \"col3\": \"row 2\n  column 3\"} ]\u003c/canvas-datagrid\n\u003e\n```\n\nor\n\n```js\nvar grid = document.createElement('canvas-datagrid');\ngrid.data = [\n  { col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3' },\n  { col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3' },\n];\n```\n\n## Using Vue\n\n```vue\n\u003ccanvas-datagrid :data.prop=\"[{\"col1\": \"row 1 column 1\"}]\"\u003e\u003c/canvas-datagrid\u003e\n```\n\n## More Demos\n\n- [Using Vue](https://canvas-datagrid.js.org/vueExample.html)\n\n- [Using Webpack3: AMD](https://canvas-datagrid.js.org/amdDemo.html)\n\n- [Using React](https://canvas-datagrid.js.org/reactExample.html)\n\n- [Web component example](https://canvas-datagrid.js.org/webcomponentDemo.html)\n\n- [Loading data with XHR](https://canvas-datagrid.js.org/demo.html)\n\n- [Sparkline example](https://canvas-datagrid.js.org/sparklineDemo.html)\n\n- [XHR data paging demo Jeopardy Questions API](https://canvas-datagrid.js.org/xhrPagingDemo.html)\n\nNote 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.\n\n## Building \u0026 Testing\n\nTo install development dependencies. Required to build or test.\n\n    npm install\n\nTo build production and debug versions:\n\n    npm run build\n\nTo build documentation:\n\n    npm run build:docs\n\nTo build types:\n\n    npm run build:types\n\nTo run tests. Note: Headless tests will mostly fail due to lack of headless canvas pixel detection support. Use VM testing or your browser.\n\n    npm test\n\n### Windows 10 WSL Testing\n*This is info for wsl version 1. v2 seems to be [different](https://dev.to/davelsan/comment/nnf5).*\n\n- `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`)\n   *in WSL, `export CHROME_BIN='path/to/chrome'`*\n- Chrome needs access to [karma's temp folder](https://stackoverflow.com/a/56204265/292067).\n  - Create a `tmp` folder on the same Windows drive as your repo.\n  - set `TEMP` to a folder that exists on the same Windows drive as your repo. (matching capitalization probably matters)\n    *in WSL, `export TEMP='/Temp/karma'`, if your repo is on drive C, then create folder C:\\Temp\\karma*\n- karma.conf.js needs to be edited\n  - Change the browser from `ChromeHeadless` to `Chrome`\n  - 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))\n    - Add a custom launcher\n      ```\n      customLaunchers: {\n        ChromeHeadlessNoSandbox: {\n            base: 'ChromeHeadless',\n            flags: ['--no-sandbox']\n        }\n      }\n      ```\n    - Change the browser from `ChromeHeadless` to `ChromeHeadlessNoSandbox`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonygermaneri%2Fcanvas-datagrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonygermaneri%2Fcanvas-datagrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonygermaneri%2Fcanvas-datagrid/lists"}