Static types for the Vaadin Components JavaScript API for Scala.js programs
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Static types of Vaadin Components JavaScript objects for Scala.js programs.


Add the following to your sbt build definition:

resolvers += "Vaadin Components wrapper" at ""

libraryDependencies += "org.vaadin.addons" %%% "scala-js-vaadin-components" % "0.1.0-SNAPSHOT"

then enjoy the types available in package org.vaadin.hezamu.components.

scala-js-vaadin-components is built and published for Scala.js 0.6.x.


The Scala.js version of the Grid example looks like this:

import scala.scalajs.js
import scala.scalajs.concurrent.JSExecutionContext.Implicits.runNow
import org.scalajs.dom
import org.vaadin.hezamu.components._
object GridDemo extends js.JSApp {
  def main {
    dom.document.addEventListener("WebComponentsReady", { e: Any =>
      val future = dom.ext.Ajax.get("")
      future.onSuccess { case xhr =>
        val grid = dom.document.querySelector("v-grid") = js.JSON.parse(xhr.responseText).results

        grid.columns(0).renderer = { cell: Cell =>
          cell.element.innerHTML = s"${cell.row.index}"

        grid.columns(1).renderer = { cell: Cell =>
          cell.element.innerHTML = s"<img src='${}' style='width: 24px;'>"

      future.onFailure { case _ => dom.alert(s"Failed to load grid data.") }

As normal you'll also need a HTML file to bootstrap the script, eg.

<!DOCTYPE html>
    <title>Vaadin Components Scala.js wrapper demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link href="bower_components/vaadin-components/vaadin-grid/vaadin-grid.html" rel="import">
    <v-grid selection-mode="multi">
        <col name="index" header-text="#" width="48">
        <col name="user.picture.thumbnail" width="54">
        <col name="" header-text="First Name">
        <col name="" header-text="Last Name">
        <col name="" header-text="Email" flex>

    <script type="text/javascript" src="target/scala-2.11/scalajs-grid-demo-fastopt.js"></script>
    <script type="text/javascript" src="target/scala-2.11/scalajs-grid-demo-launcher.js"></script>


Apache License 2.0