Socket
Socket
Sign inDemoInstall

fin-hypergrid

Package Overview
Dependencies
Maintainers
2
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fin-hypergrid

Canvas-based high-performance spreadsheet


Version published
Weekly downloads
138
increased by64.29%
Maintainers
2
Weekly downloads
 
Created
Source

Build Status

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.

Current Release (1.0.9 - 29 August 2016)

The current version 1.0 replaces last year's prototype version, which was built around Polymer. It is now completely "de-polymerized" and is being made available as:

  • An npm module for use with browserify.
  • A single JavaScript file fin-hypergrid.js you can reference in a <script> tag.

For a complete list of changes, see the version history.

Demos

Developer Tutorial

This tutorial is a tool that shows developers how to use Hypergrid and implement its features.

Hyperblotter

Hyperblotter is a demo app that shows the capabilities of both OpenFin and Hypergrid.

Check out the Table view on Hyperblotter on a Windows machine via this installer.

Features

Future development
  • We are currently working on expanding the API to enable application developers to easily provide their own functionality.
  • Hypergrid will have no opinion on how the underlying data should be pivoted, but will remain capable of presenting pivoted data.
  • For local data transformations, the current sorting, filtering, etc., modules will be unbundled from the Hypergrid build and published as external modules, along with full API docs so you can roll your own.
  • Remote data transformations will be supported with all the eventing necessary for triggering such transformations on a remote server.
  • Drill-downs, currently implemented for local tree view, group view, and aggregated data view, will be supported for remote data as well.

Integrating

This is a basic example that embeds fin-hypergrid:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

    <div id="fin-grid"></div>

    <script src="https://openfin.github.io/fin-hypergrid/build/fin-hypergrid.js"></script>
    
    <script>
        var data = [
           { symbol: 'APPL', name: 'Apple Inc.', prevclose: 93.13 },
           { symbol: 'MSFT', name: 'Microsoft Corporation', prevclose: 51.91 },
           { symbol: 'TSLA', name: 'Tesla Motors Inc.', prevclose: 196.40 },
           { symbol: 'IBM', name: 'International Business Machines Corp', prevclose: 155.35 }
        ];
        
        var grid = new fin.Hypergrid('#fin-grid', { data: data });
        
        grid.addProperties({
            showRowNumbers: false,
            showFilterRow: false
        });
    </script>
</body>
</html>

Will look like:

Documentation

Essential documentation and examples will be added to this page in the near future.

We are also maintaining online API documentation for all public objects and modules. This documentation is necessarily a 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. Use it for modifying various hypergrid features and property defaults.

Contributors

Developers interested in contributing to this project should submit pull requests against the develop branch. We have several beginner help wanted tickets open for community involvement.

Keywords

FAQs

Package last updated on 29 Aug 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc