-
Notifications
You must be signed in to change notification settings - Fork 143
Home
#Welcome to the fin-hypergrid wiki!
Awesome! So your ready to make your first Hypergrid.
The following examples demonstrate setting up a Hypergrid that you can embed. Keep in mind that you can have multiple grids on a page.
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!