Get selected DetailsList rows

[lukebandy]

I imagine this is possible using JavaScript, but is there a clean way of getting this directly through R as with DT through input$tableId_rows_selected?

[kamilzyla]

Currently the only way is via JS. Thanks for asking though - sounds like a useful feature! I created #81 to track it.

[zilch42]

Hi @kamilzyla, could you by any chance provide an example of how to do this with JS? there isn't any onClick callback so I'm not sure how to go about it.

[kamilzyla]

After taking a look at the official docs, it seems to be quite a complex task - I'll try to come back with an example next week.

[zilch42]

Thanks I really appreciate it!

[kamilzyla]

@lukebandy @zilch42 Try this:

library(shiny)
library(shiny.fluent)

CustomComponents <- tags$script(HTML("(function() {
  const React = jsmodule['react'];
  const Fluent = jsmodule['@fluentui/react'];
  const Shiny = jsmodule['@/shiny'];
  const CustomComponents = jsmodule['CustomComponents'] = {};

  function useSelection(inputId) {
    const selection = React.useRef(new Fluent.Selection({
      onSelectionChanged() {
        const value = this.getSelectedIndices().map(i => i + 1); // R uses 1-based indexing.
        Shiny.setInputValue(inputId, value);
      }
    }));
    return selection.current;
  }

  CustomComponents.DetailsList = function DetailsList({ inputId, ...rest }) {
    const selection = useSelection(inputId);
    return React.createElement(Fluent.DetailsList, { selection, ...rest });
  }
})()"))

DetailsList.shinyInput <- function(inputId, ...) {
  shiny.react::reactElement(
    module = "CustomComponents",
    name = "DetailsList",
    props = shiny.react::asProps(inputId = inputId, ...),
    deps = shinyFluentDependency()
  )
}

items <- list(
  list(name = "Apple"),
  list(name = "Banana"),
  list(name = "Cherry")
)

shinyApp(
  ui = tagList(
    CustomComponents,
    DetailsList.shinyInput("selection", items = items),
    textOutput("selection")
  ),
  server = function(input, output) {
    output$selection <- renderText(paste(input$selection, collapse = ", "))
  }
)

This solution is not ideal (for example, you cannot set the selection from Shiny), but it should get you started 🙂

[zilch42]

Thanks! Enough for what I need at the moment. Appreciate your help

[kyle-power]

Thank you, @kamilzyla !! This custom component is incredible useful - maybe you could add it to the package as a regular component in the future?

[kamilzyla]

@kyle-power Glad to hear that 😄 Yes, we already have an issue to add DetailsList.shinyInput.