| <html> | |
| <head> | |
| <title>HandsOnTable demo</title> | |
| </head> | |
| <body> | |
| <div id="elm"></div> | |
| <script src="main.js"></script> | |
| <script> | |
| var node = document.getElementById('elm'); | |
| var app = Elm.Main.embed(node); | |
| var Handsontable = function(container, options) { | |
| var html = "<table>"; | |
| options.data.forEach(function(row) { | |
| html = html + "<tr>"; | |
| row.forEach(function(cell) { | |
| html = html + "<td>" + cell + "</td>"; | |
| }); | |
| html = html + "</tr>" | |
| }) | |
| html = html + "</table>" | |
| container.innerHTML = html | |
| }; | |
| app.ports.initializeHandsOnTable.subscribe(function(data) { | |
| var container = document.getElementById('handsontable'); | |
| var hot = new Handsontable(container, { | |
| data: data, | |
| rowHeaders: true, | |
| colHeaders: true, | |
| dropdownMenu: true | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| port module Main exposing (..) | |
| import Html.App | |
| import Html exposing (..) | |
| import Html.Attributes exposing (id) | |
| type alias Row = | |
| List String | |
| type alias Model = | |
| List Row | |
| port initializeHandsOnTable : Model -> Cmd msg | |
| initialModel : Model | |
| initialModel = | |
| [ [ "", "Ford", "Volvo", "Toyota", "Honda" ] | |
| , [ "2016", "10", "11", "12", "13" ] | |
| , [ "2017", "20", "11", "14", "13" ] | |
| , [ "2018", "30", "15", "12", "13" ] | |
| ] | |
| init : ( Model, Cmd msg ) | |
| init = | |
| ( initialModel, initializeHandsOnTable initialModel ) | |
| view : Model -> Html msg | |
| view model = | |
| main' [] | |
| [ h1 [] [ text "Hello from Elm" ] | |
| , div [ id "handsontable" ] [] | |
| ] | |
| main : Program Never | |
| main = | |
| Html.App.program | |
| { init = init | |
| , update = (\_ _ -> ( [], Cmd.none )) | |
| , view = view | |
| , subscriptions = (\_ -> Sub.none) | |
| } |
