Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active December 2, 2016 22:19
Show Gist options
  • Save timelyportfolio/f4a791ee9e1ba02fbb2cfa4aa8aa26b9 to your computer and use it in GitHub Desktop.
Save timelyportfolio/f4a791ee9e1ba02fbb2cfa4aa8aa26b9 to your computer and use it in GitHub Desktop.
react blueprint from R with mtcars
license: mit

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()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<link href="https://timelyportfolio.github.io/blueprint/blueprint.css" rel="stylesheet" />
<link href="https://timelyportfolio.github.io/blueprint/blueprint-table.css" rel="stylesheet" />
<script src="https://timelyportfolio.github.io/blueprint/blueprint.js"></script>
<script src="https://timelyportfolio.github.io/blueprint/blueprint-table.js"></script>
</head>
<body style="background-color:white;">
<div id="app-table" style="width:700px; height:500px;"></div>
<script>"use strict";
var mtcars = { "car": ["Mazda RX4", "Mazda RX4 Wag", "Datsun 710", "Hornet 4 Drive", "Hornet Sportabout", "Valiant", "Duster 360", "Merc 240D", "Merc 230", "Merc 280", "Merc 280C", "Merc 450SE", "Merc 450SL", "Merc 450SLC", "Cadillac Fleetwood", "Lincoln Continental", "Chrysler Imperial", "Fiat 128", "Honda Civic", "Toyota Corolla", "Toyota Corona", "Dodge Challenger", "AMC Javelin", "Camaro Z28", "Pontiac Firebird", "Fiat X1-9", "Porsche 914-2", "Lotus Europa", "Ford Pantera L", "Ferrari Dino", "Maserati Bora", "Volvo 142E"], "mpg": [21, 21, 22.8, 21.4, 18.7, 18.1, 14.3, 24.4, 22.8, 19.2, 17.8, 16.4, 17.3, 15.2, 10.4, 10.4, 14.7, 32.4, 30.4, 33.9, 21.5, 15.5, 15.2, 13.3, 19.2, 27.3, 26, 30.4, 15.8, 19.7, 15, 21.4], "cyl": [6, 6, 4, 6, 8, 6, 8, 4, 4, 6, 6, 8, 8, 8, 8, 8, 8, 4, 4, 4, 4, 8, 8, 8, 8, 4, 4, 4, 8, 6, 8, 4], "disp": [160, 160, 108, 258, 360, 225, 360, 146.7, 140.8, 167.6, 167.6, 275.8, 275.8, 275.8, 472, 460, 440, 78.7, 75.7, 71.1, 120.1, 318, 304, 350, 400, 79, 120.3, 95.1, 351, 145, 301, 121], "hp": [110, 110, 93, 110, 175, 105, 245, 62, 95, 123, 123, 180, 180, 180, 205, 215, 230, 66, 52, 65, 97, 150, 150, 245, 175, 66, 91, 113, 264, 175, 335, 109], "drat": [3.9, 3.9, 3.85, 3.08, 3.15, 2.76, 3.21, 3.69, 3.92, 3.92, 3.92, 3.07, 3.07, 3.07, 2.93, 3, 3.23, 4.08, 4.93, 4.22, 3.7, 2.76, 3.15, 3.73, 3.08, 4.08, 4.43, 3.77, 4.22, 3.62, 3.54, 4.11], "wt": [2.62, 2.875, 2.32, 3.215, 3.44, 3.46, 3.57, 3.19, 3.15, 3.44, 3.44, 4.07, 3.73, 3.78, 5.25, 5.424, 5.345, 2.2, 1.615, 1.835, 2.465, 3.52, 3.435, 3.84, 3.845, 1.935, 2.14, 1.513, 3.17, 2.77, 3.57, 2.78], "qsec": [16.46, 17.02, 18.61, 19.44, 17.02, 20.22, 15.84, 20, 22.9, 18.3, 18.9, 17.4, 17.6, 18, 17.98, 17.82, 17.42, 19.47, 18.52, 19.9, 20.01, 16.87, 17.3, 15.41, 17.05, 18.9, 16.7, 16.9, 14.5, 15.5, 14.6, 18.6], "vs": [0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1], "am": [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1], "gear": [4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 4, 5, 5, 5, 5, 5, 4], "carb": [4, 4, 1, 1, 2, 1, 4, 2, 2, 4, 4, 3, 3, 3, 4, 4, 4, 1, 2, 1, 1, 2, 2, 4, 2, 1, 2, 2, 4, 6, 8, 2] };
var renderCell = function renderCell(rowIndex, colIndex) {
var colname = Object.keys(mtcars)[colIndex];
return React.createElement(
blueprintTable.Cell,
null,
"" + mtcars[colname][rowIndex]
);
};
var columns = Object.keys(mtcars).map(function (colname) {
return React.createElement(blueprintTable.Column, { name: colname, renderCell: renderCell });
});
var tbl = React.createElement(
blueprintTable.Table,
{ numRows: mtcars["car"].length },
columns
);
ReactDOM.render(tbl, document.querySelector("#app-table"));</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment