Skip to content
BranchesTags

Repository files navigation

fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview

Below is an example custom application built on top of the Hypergrid API tooling. It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.

Table of Contents

Current Release

v3.3.2 25 November 2019

Distribution

npm module (recommended)

Published as a CommonJS module to npm. Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file, issue the npm install command, and let your bundler (wepback, Browserify) create a single file containing both Hypergrid and your application.

Build files

For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.

Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.

As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).

Demos

The fin-hypergrid/build repo generates the build files. It also hosts the demo source files that test and show off various Hypergrid features. Some of these use the npm module while others use the bundled build file. Working versions of all demos are published to the CDN (list of links).

Testbench

The default demo is the Hypergrid dev testbench (source).

(This app bundles the npm module plus all of its own modules together into a single file (testbench.js). For illustrative purposes, this alternate version loads the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)

Simple example

See example.html for a very simple example (repo, demo):

Who else is using Hypergrid?

Perspective

The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.

AdaptableBlotter.JS

Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.

Features

Testing

Please use github issues to report problems

We invite everyone to test the alpha branch for changes going into the next release

Find more information on our testing page

Developer Documentation

Primarily our tutorials will be on the wiki.

We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.

(Cell editor information can be found here.)

(Cell Rendering information can be found here.)

Hypergrid global configurations can be found here.

Roadmap

For our current queue of upcoming work you can find it here

Contributors

Developers interested in contributing to this project should review our contributing guide before making pull requests.

About

A canvas-based super high performant grid renderer API

Topics

canvasfin-hypergridgraphicsgridhypergridjavascript

Resources

Readme
MIT license

Contributing

Contributing
Activity
Custom properties

Stars

907 stars

Watchers

62 watching

Forks

139 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - fin-hypergrid/core: A canvas-based super high performant grid renderer API · GitHub
Skip to content
BranchesTags
Repository files navigation
fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview
Below is an example custom application built on top of the Hypergrid API tooling.
It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.
Table of Contents
Current Release
v3.3.2
25 November 2019
Distribution
npm module (recommended)
Published as a CommonJS module to npm.
Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file,
issue the npm install command, and let your bundler (wepback,
Browserify) create a single file containing both Hypergrid and your application.
Build files
For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.
Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.
As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).
Demos
The fin-hypergrid/build repo generates the build files.
It also hosts the demo source files that test and show off various Hypergrid features.
Some of these use the npm module while others use the bundled build file.
Working versions of all demos are published to the CDN (list of links).
Testbench
The default demo is the Hypergrid dev testbench (source).
(This app bundles the npm module plus all of its own modules together into a single file (testbench.js).
For illustrative purposes, this alternate version loads
the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)
Simple example
See example.html for a very simple example (repo, demo):
Who else is using Hypergrid?
Perspective
The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.
AdaptableBlotter.JS
Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.
Features
Testing
Please use github issues to report problems
We invite everyone to test the alpha branch for changes going into the next release
Find more information on our testing page
Developer Documentation
Primarily our tutorials will be on the wiki.
We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here.
Roadmap
For our current queue of upcoming work you can find it here
Contributors
Developers interested in contributing to this project should review our contributing guide before making pull requests.
About
A canvas-based super high performant grid renderer API
Topics
canvasfin-hypergridgraphicsgridhypergridjavascript
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
907 stars
Watchers
62 watching
Forks
139 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - fin-hypergrid/core: A canvas-based super high performant grid renderer API · GitHub
Skip to content
BranchesTags
Repository files navigation
fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview
Below is an example custom application built on top of the Hypergrid API tooling.
It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.
Table of Contents
Current Release
v3.3.2
25 November 2019
Distribution
npm module (recommended)
Published as a CommonJS module to npm.
Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file,
issue the npm install command, and let your bundler (wepback,
Browserify) create a single file containing both Hypergrid and your application.
Build files
For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.
Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.
As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).
Demos
The fin-hypergrid/build repo generates the build files.
It also hosts the demo source files that test and show off various Hypergrid features.
Some of these use the npm module while others use the bundled build file.
Working versions of all demos are published to the CDN (list of links).
Testbench
The default demo is the Hypergrid dev testbench (source).
(This app bundles the npm module plus all of its own modules together into a single file (testbench.js).
For illustrative purposes, this alternate version loads
the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)
Simple example
See example.html for a very simple example (repo, demo):
Who else is using Hypergrid?
Perspective
The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.
AdaptableBlotter.JS
Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.
Features
Testing
Please use github issues to report problems
We invite everyone to test the alpha branch for changes going into the next release
Find more information on our testing page
Developer Documentation
Primarily our tutorials will be on the wiki.
We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here.
Roadmap
For our current queue of upcoming work you can find it here
Contributors
Developers interested in contributing to this project should review our contributing guide before making pull requests.
About
A canvas-based super high performant grid renderer API
Topics
canvasfin-hypergridgraphicsgridhypergridjavascript
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
907 stars
Watchers
62 watching
Forks
139 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - fin-hypergrid/core: A canvas-based super high performant grid renderer API · GitHub
Skip to content
BranchesTags
Repository files navigation
fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview
Below is an example custom application built on top of the Hypergrid API tooling.
It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.
Table of Contents
Current Release
v3.3.2
25 November 2019
Distribution
npm module (recommended)
Published as a CommonJS module to npm.
Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file,
issue the npm install command, and let your bundler (wepback,
Browserify) create a single file containing both Hypergrid and your application.
Build files
For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.
Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.
As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).
Demos
The fin-hypergrid/build repo generates the build files.
It also hosts the demo source files that test and show off various Hypergrid features.
Some of these use the npm module while others use the bundled build file.
Working versions of all demos are published to the CDN (list of links).
Testbench
The default demo is the Hypergrid dev testbench (source).
(This app bundles the npm module plus all of its own modules together into a single file (testbench.js).
For illustrative purposes, this alternate version loads
the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)
Simple example
See example.html for a very simple example (repo, demo):
Who else is using Hypergrid?
Perspective
The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.
AdaptableBlotter.JS
Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.
Features
Testing
Please use github issues to report problems
We invite everyone to test the alpha branch for changes going into the next release
Find more information on our testing page
Developer Documentation
Primarily our tutorials will be on the wiki.
We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here.
Roadmap
For our current queue of upcoming work you can find it here
Contributors
Developers interested in contributing to this project should review our contributing guide before making pull requests.
About
A canvas-based super high performant grid renderer API
Topics
canvasfin-hypergridgraphicsgridhypergridjavascript
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
907 stars
Watchers
62 watching
Forks
139 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - fin-hypergrid/core: A canvas-based super high performant grid renderer API · GitHub
Skip to content
BranchesTags
Repository files navigation
fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview
Below is an example custom application built on top of the Hypergrid API tooling.
It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.
Table of Contents
Current Release
v3.3.2
25 November 2019
Distribution
npm module (recommended)
Published as a CommonJS module to npm.
Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file,
issue the npm install command, and let your bundler (wepback,
Browserify) create a single file containing both Hypergrid and your application.
Build files
For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.
Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.
As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).
Demos
The fin-hypergrid/build repo generates the build files.
It also hosts the demo source files that test and show off various Hypergrid features.
Some of these use the npm module while others use the bundled build file.
Working versions of all demos are published to the CDN (list of links).
Testbench
The default demo is the Hypergrid dev testbench (source).
(This app bundles the npm module plus all of its own modules together into a single file (testbench.js).
For illustrative purposes, this alternate version loads
the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)
Simple example
See example.html for a very simple example (repo, demo):
Who else is using Hypergrid?
Perspective
The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.
AdaptableBlotter.JS
Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.
Features
Testing
Please use github issues to report problems
We invite everyone to test the alpha branch for changes going into the next release
Find more information on our testing page
Developer Documentation
Primarily our tutorials will be on the wiki.
We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here.
Roadmap
For our current queue of upcoming work you can find it here
Contributors
Developers interested in contributing to this project should review our contributing guide before making pull requests.
About
A canvas-based super high performant grid renderer API
Topics
canvasfin-hypergridgraphicsgridhypergridjavascript
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
907 stars
Watchers
62 watching
Forks
139 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - fin-hypergrid/core: A canvas-based super high performant grid renderer API · GitHub
Skip to content
BranchesTags
Repository files navigation
fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview
Below is an example custom application built on top of the Hypergrid API tooling.
It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.
Table of Contents
Current Release
v3.3.2
25 November 2019
Distribution
npm module (recommended)
Published as a CommonJS module to npm.
Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file,
issue the npm install command, and let your bundler (wepback,
Browserify) create a single file containing both Hypergrid and your application.
Build files
For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.
Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.
As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).
Demos
The fin-hypergrid/build repo generates the build files.
It also hosts the demo source files that test and show off various Hypergrid features.
Some of these use the npm module while others use the bundled build file.
Working versions of all demos are published to the CDN (list of links).
Testbench
The default demo is the Hypergrid dev testbench (source).
(This app bundles the npm module plus all of its own modules together into a single file (testbench.js).
For illustrative purposes, this alternate version loads
the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)
Simple example
See example.html for a very simple example (repo, demo):
Who else is using Hypergrid?
Perspective
The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.
AdaptableBlotter.JS
Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.
Features
Testing
Please use github issues to report problems
We invite everyone to test the alpha branch for changes going into the next release
Find more information on our testing page
Developer Documentation
Primarily our tutorials will be on the wiki.
We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here.
Roadmap
For our current queue of upcoming work you can find it here
Contributors
Developers interested in contributing to this project should review our contributing guide before making pull requests.
About
A canvas-based super high performant grid renderer API
Topics
canvasfin-hypergridgraphicsgridhypergridjavascript
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
907 stars
Watchers
62 watching
Forks
139 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - fin-hypergrid/core: A canvas-based super high performant grid renderer API · GitHub
Skip to content
BranchesTags
Repository files navigation
fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview
Below is an example custom application built on top of the Hypergrid API tooling.
It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.
Table of Contents
Current Release
v3.3.2
25 November 2019
Distribution
npm module (recommended)
Published as a CommonJS module to npm.
Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file,
issue the npm install command, and let your bundler (wepback,
Browserify) create a single file containing both Hypergrid and your application.
Build files
For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.
Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.
As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).
Demos
The fin-hypergrid/build repo generates the build files.
It also hosts the demo source files that test and show off various Hypergrid features.
Some of these use the npm module while others use the bundled build file.
Working versions of all demos are published to the CDN (list of links).
Testbench
The default demo is the Hypergrid dev testbench (source).
(This app bundles the npm module plus all of its own modules together into a single file (testbench.js).
For illustrative purposes, this alternate version loads
the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)
Simple example
See example.html for a very simple example (repo, demo):
Who else is using Hypergrid?
Perspective
The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.
AdaptableBlotter.JS
Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.
Features
Testing
Please use github issues to report problems
We invite everyone to test the alpha branch for changes going into the next release
Find more information on our testing page
Developer Documentation
Primarily our tutorials will be on the wiki.
We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here.
Roadmap
For our current queue of upcoming work you can find it here
Contributors
Developers interested in contributing to this project should review our contributing guide before making pull requests.
About
A canvas-based super high performant grid renderer API
Topics
canvasfin-hypergridgraphicsgridhypergridjavascript
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
907 stars
Watchers
62 watching
Forks
139 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - fin-hypergrid/core: A canvas-based super high performant grid renderer API · GitHub
Skip to content
BranchesTags
Repository files navigation
fin-hypergrid is an ultra-fast HTML5 grid presentation layer, achieving its speed by rendering (in a canvas tag) only the currently visible portion of your (virtual) grid, thus avoiding the latency and life-cycle issues of building, walking, and maintaining a complex DOM structure. Please be sure to checkout our design overview
Below is an example custom application built on top of the Hypergrid API tooling.
It also highlights a DOM-based custom external editor triggered via hypergrid events as well as interaction with Hypergrid’s column ordering API.
Table of Contents
Current Release
v3.3.2
25 November 2019
Distribution
npm module (recommended)
Published as a CommonJS module to npm.
Specify a SEMVER of "fin-hypergrid": "3.3.2" (or "^3.3.2") in your package.json file,
issue the npm install command, and let your bundler (wepback,
Browserify) create a single file containing both Hypergrid and your application.
Build files
For small and informal examples and proofs-of-concept, load a pre-bundled build file (fin-hypergrid.js or fin-hypergrid.min.js) from the GitHub CDN. See the CDN index for links.
Your application can load one of these pre-bundled build files (in a <script> tag), which creates the global namespace window.fin (as needed) and populates it with window.fin.Hypergrid.
As of v3.2.1, the same build files are also available in a umd folder on npm for distribution via the unpkg CDN which processes SEMVER semantics when provided. For example, <script src="https://unpkg.com/fin-hypergrid@^3.2/umd/fin-hypergrid.min.js"></script> loads v3.3.2 which is the greatest (most recent) version number matching the SEMVER pattern ^3.2 (aka 3..).
Demos
The fin-hypergrid/build repo generates the build files.
It also hosts the demo source files that test and show off various Hypergrid features.
Some of these use the npm module while others use the bundled build file.
Working versions of all demos are published to the CDN (list of links).
Testbench
The default demo is the Hypergrid dev testbench (source).
(This app bundles the npm module plus all of its own modules together into a single file (testbench.js).
For illustrative purposes, this alternate version loads
the pre-bundled build file fin-hypergrid.js plus specially IIFE-wrapped versions of each its own modules discretely.)
Simple example
See example.html for a very simple example (repo, demo):
Who else is using Hypergrid?
Perspective
The Perspective open source project uses Hypergrid v3 (demo links in the README) and does a lot more than Hypergrid alone, such as table pivots and charting.
AdaptableBlotter.JS
Openfin’s AdaptableBlotter.JS (installer) is a demo app that shows the capabilities of both Openfin and Hypergrid.
Features
Testing
Please use github issues to report problems
We invite everyone to test the alpha branch for changes going into the next release
Find more information on our testing page
Developer Documentation
Primarily our tutorials will be on the wiki.
We also maintain versioned online API documentation for all public objects and modules. This documentation is necessarily an on-going work-in-progress.
(Cell editor information can be found here.)
(Cell Rendering information can be found here.)
Hypergrid global configurations can be found here.
Roadmap
For our current queue of upcoming work you can find it here
Contributors
Developers interested in contributing to this project should review our contributing guide before making pull requests.
About
A canvas-based super high performant grid renderer API
Topics
canvasfin-hypergridgraphicsgridhypergridjavascript
Resources
Readme
MIT license
Contributing
Contributing
Activity
Custom properties
Stars
907 stars
Watchers
62 watching
Forks
139 forks
Report repository
Releases
Packages
Used by
Contributors
Languages