Skip to content
Dwayne Jones edited this page Sep 23, 2016 · 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 In addition, while not necessary, we have introduced our first api call addProperties (a member of the Hypergrid singleton), which directly affect the grid properties, the majority of which are related to its rendering.

 <!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!