posit-dev / posit-dev/shinyreact
Example: host a reactable (reactR htmlwidget) inside a shinyreact client via ShinyOutput
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 14
- Forks
- 3
- Avg merge
- 9h 12m
- Merged PRs (30d)
- 74
Description
Motivation
#316 added a comparison article whose "Can they be combined?" section documents hosting a reactable inside a ui.tsx client through ShinyOutput. That was verified in a throwaway chromote spike, not shipped. An example would keep the claim honest (the repo's example tests run in each package's suite) and give people a template for the most common "I already have an R widget" case. 07-plotly covers htmlwidgets from the plot side; reactable covers the table side and, unlike plotly, has a client→server state channel (getReactableState()) that needs one extra attribute to work.
What the spike showed
renderReactable()is a regularshiny.render.function, so shinyreact's R dep discovery loadshtmlwidgets.js,react-tools.js, andreactable.jsautomatically. No manual dependency wiring.- The
ShinyOutputelement needs the classesreactableOutput()emits and adata-reactable-output="<id>"attribute. Without the attribute the table renders butgetReactableState()/updateReactable()never see it, because reactable reads its Shiny id from that attribute on the container's parent. - Row selection round-trips: click a selection radio →
input$tbl__reactable__selected→getReactableState("tbl", "selected")→ areactive_output→useShinyOutputValue.
Working spike (R server, no-build client):
server <- function(input, output, session) {
output$tbl <- reactable::renderReactable({
reactable::reactable(head(mtcars, req(input$n)), selection = "single", onClick = "select")
})
output$sel <- reactive_output(reactable::getReactableState("tbl", "selected"))
}
shinyApp(page_react(), server)
h(ShinyOutput, {
id: "tbl",
className: "reactable html-widget html-widget-output",
"data-reactable-output": "tbl",
});
Proposed shape
examples/11-reactable/(or fold into an existing example if that reads better):app.R,www/ui.js,FEATURES.md,tests/.- A row-count input driving the table, a
reactive_outputechoing the selected row so the client→server channel is exercised, and auseShinyOutputStatusdim on recalculation. - Add to
R_EXAMPLESin theMakefileand runmake update-examplesso R CMD check can reach it. - Python side: there is no reactable for Python. Either R-only (note it in
examples/README.md) or pair it with a PythonShinyOutput-hosted equivalent (shinywidgets?great_tables?) over the sameui.js, mirroring how07-plotlyshares one client across both servers. - Testing:
ui.test.tsagainst the fake-Shiny harness can pin the classes and thedata-reactable-outputattribute; a testthat test can pin thatrenderReactable()'s deps are discovered. The selection round-trip is a browser claim and would wait on the R e2e suite (#194).
Open questions
- Should
ShinyOutputgrow a documented recipe (skill or article) for "copy the attributes your*Output()would have emitted", since both reactable and plotly needed exactly that and it is not discoverable without reading widget source? - Is a
shiny.react/shiny.fluentexample worth shipping too, or is the article section enough? It needs the manualreactDependency()+shinyReactDependency()step becauserenderReact()is not ashiny.render.function.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Compare examples/07-plotly, the examples/README.md, and the Makefile's R_EXAMPLES before choosing the example layout. Then review the proposed app.R, www/ui.js, FEATURES.md, tests/, and ui.test.ts paths, including the testthat dependency check. Done means the example is registered and runnable, pins the required ShinyOutput classes and data-reactable-output attribute, and exercises selection state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- r, react, typescript
- Domain
- developer-experience, full-stack, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100