block by timelyportfolio f4a791ee9e1ba02fbb2cfa4aa8aa26b9

react blueprint from R with mtcars

Full Screen
Oh, just me on a Friday afternoon building a [blueprint](http://blueprintjs.com/) table from `mtcars` in R after hearing [Ken Wheeler](http://kenwheeler.github.io/) talk about the awesomeness of Palantir's `blueprintjs` on [React Native Radio](https://devchat.tv/react-native-radio/46-ken-wheeler-of-formidable-labs).

I did not have time to explore all the functionality of @blueprint/table, but feel free to check it out and add to the code below.

code

library(htmltools)
library(reactR)
library(pipeR)

# run browserify standalone on blueprint core dist
#   and add to my forked github blueprint in docs as gh-pages
blueprint <- htmlDependency(
  name = "blueprint",
  version = "1.1.0",
  src = c(href="https://timelyportfolio.github.io/blueprint/"),
  script = c("blueprint.js","blueprint-table.js"),
  stylesheet = c("blueprint.css", "blueprint-table.css")
)

# make sure we have dependencies as expected
#  by adding react and blueprint to empty tagList
tagList() %>>%
  attachDependencies(
    list(html_dependency_react(offline=FALSE), blueprint)
  ) %>>%
  browsable()


# now let's try to do a React blueprint table
#  http://blueprintjs.com/docs/#components.table-js
tagList(
  tags$div(id="app-table", style = "width:700px; height:500px;"),
  tags$script(
    HTML(
      babel_transform(
        sprintf(
'
const mtcars = %s;
const renderCell = (rowIndex, colIndex) => {
    var colname = Object.keys(mtcars)[colIndex]
    return <blueprintTable.Cell>{`${mtcars[colname][rowIndex]}`}</blueprintTable.Cell>
};

const columns = Object.keys(mtcars).map(function(colname) {
    return <blueprintTable.Column name={colname} renderCell={renderCell}/>
});

var tbl = <blueprintTable.Table numRows={mtcars["car"].length}>
  {columns}
</blueprintTable.Table>

ReactDOM.render(tbl, document.querySelector("#app-table"));
'       
          ,
          jsonlite::toJSON(
            tibble::rownames_to_column(mtcars,var="car"),
            dataframe="columns",
            auto_unbox=TRUE
          )
        )
      )
    )
  )
)%>>%
  attachDependencies(
    list(html_dependency_react(offline=FALSE), blueprint)
  ) %>>%
  browsable()

index.html