- built in R with
htmltoolsandreactR - using amazing blueprint components from Palantir
- assembled with blockbuilder.org
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.
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()
