Although done in R, this can easily be adapted to other languages.
library(reactR)
library(htmltools)
library(pipeR)
library(tibble)
library(dplyr)
react_virt <- htmlDependency(
name = "react-virtualized",
version = "9.7.3",
src = c(href = "https://unpkg.com/react-virtualized@9.7.3/"),
script = "dist/umd/react-virtualized.js",
stylesheet = "styles.css"
)
rand_tbl <- tibble(
id = 1:10000,
data = lapply(1:10000, function(d){runif(10)})
) %>>%
mutate(lastval = sapply(data, function(x){tail(x,1)}))
js_data <- tags$script(HTML(
sprintf(
'
var data = %s;
',
jsonlite::toJSON(rand_tbl, dataframe="rows")
)
))
js <- tags$script(HTML(babel_transform(
sprintf(
"
function rowGetter(params) {
return data[params.index];
}
function rowRenderCallback(x) {
$('.sparkline').sparkline('html',{width:200, chartRangeMin:0, chartRangeMax:1});
}
class App extends React.Component {
render() {
return (
<ReactVirtualized.Table
rowGetter={rowGetter}
rowCount={data.length}
height={300}
width={400}
rowHeight={40}
headerHeight={30}
onRowsRendered={rowRenderCallback}
>
<ReactVirtualized.Column
label='Index'
cellDataGetter={
({ columnData, dataKey, rowData }) => rowData.id
}
dataKey='index'
width={50}
/>
<ReactVirtualized.Column
disableSort
label='Data'
dataKey='data'
cellRenderer={
({ cellData, columnData, dataKey, rowData, rowIndex }) => <span className='sparkline' values={cellData.join(',')}></span>
}
width={200}
/>
<ReactVirtualized.Column
disableSort
label='LastVal'
dataKey='lastval'
cellRenderer={
({ cellData, columnData, dataKey, rowData, rowIndex }) =>
{ const divStyle = {
width: 70 * cellData + 'px',
height: '10px',
backgroundColor: 'gray'
}
return <div style={{border:'2px solid black',height:'10px'}}>
<div style={divStyle}></div>
</div>
}
}
width={70}
/>
</ReactVirtualized.Table>
)
}
}
const app = document.getElementById('rvtable');
ReactDOM.render(<App />, app);
"
)
)))
tagList(
tags$div(id="rvtable"),
js_data,
js,
html_dependency_react(),
react_virt,
htmlwidgets::getDependency('sparkline')[2:3]
) %>>%
browsable()
