Add a part of a UI element as a step for introjs() tutorial

Question

Is it possible to add a part of a UI (e.g., the filter section of a renderDataTable) to intro steps when using introjs()?

Example: I want the user to know that they can use the filter section of the table to filter results. So as an additional step, I want to highlight the filter part of the datatable as one of the steps of the tutorial.

library(shiny)
library(DT)
library(rintrojs)

ui <- fluidPage(
    introjsUI(),  # include introjs
    div(id = "intro", h3("Intro")),
    dataTableOutput("my_table")
)


server <- function(input, output, session) {
    output$my_table <- renderDataTable({
        datatable(iris, filter = 'top')
    })
    
    # Trigger introjs on app start
        introjs(session, options = list(steps = list(
            list(element = "#intro", intro = "Intro"),
            list(element = "#my_table", intro = "This is the table. Now zooming in on filters...")
        )))
}

shinyApp(ui, server)

Answer 1

You can add any valid CSS selector, thus all you need is to find a proper way to address the row containing the filter elements. Additionally, as the data table is rendered dynamically, you should not call your introjs too early, otherwise the element you are trying to target are not yet existing. A good option is to call the introjs the first time the system is flushed, where the data table is already populated.

Putting everything together, the following snippet implements the feature:

# Trigger introjs on app start but not before the system is flushed
session$onFlushed(function() {
  introjs(session, options = list(steps = list(
    list(element = "#intro", intro = "Intro"),
    list(element = "#my_table", intro = "This is the table. Now zooming in on filters..."),
    ### :nth-of-type will select the second row (<tr>), that is where the filters are
    list(element = "tr:nth-of-type(2)", intro = "Here you can apply filters")
  )))
})