Skip to content

Home

Jump to bottom
Dwayne Jones edited this page May 31, 2017 · 16 revisions

Welcome to the fin-hypergrid wiki!

Your First HyperGrid

Awesome! So your ready to make your first Hypergrid.

Simplest possible example

The following examples demonstrate setting up a Hypergrid that you can embed. Keep in mind that you can have multiple grids on a page.

Initialize the Grid and Binding data

Initializing the grid is as simple as providing the CSS selector for HTML element to contain the grid. Binding data is as simple as providing a congruent array of objects.

The full list of options that can be passed to the constructor can be found here

 <!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 grid = new fin.Hypergrid('#fin-grid', {
             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' }
             ]
         });
         
     </script>
 </body>
 </html>

It will look like this

Click here to see the live demo. and That's it!

Clone this wiki locally