How to get a notification icon on a tab in shiny

Question

I have a tabpanelSet in a shiny application. One of the tabs contains a datatable. Id like the number of rows in the datatable to show in a nice circular icon next to the the tab header text so the user can see see the number in the datatable within the tab before clicking on the tab.

Here is the basic app. Its the 'Details' tab that I would like the circular notification icon library

library(shiny)
library(DT)
library(data.table)

ui <- fluidPage(

    # Application title
    titlePanel("Circular notification icon app"),

        mainPanel(
            tabsetPanel(type = "tabs",
                        tabPanel("Empty"),
                        tabPanel("Details",
                                 DT::dataTableOutput("iris"))
            )
        )
)

server <- function(input, output) {

    output$iris = DT::renderDT({
        datatable(iris,class = "display wrap",selection = "single",
                  options = list(
                      scrollX = TRUE,
                      scrollY = TRUE,
                      pageLength = 15,
                      select = "api",
                      dom = 'Bfrtip')
        )
    })
}

# Run the application
shinyApp(ui = ui, server = server)

user_1100107 · Answer

Like this?

library(shiny)
library(DT)
library(shinyjs)

CSS <- "
#tabHeader {
  display: inline-block;
}
.circle {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  line-height: 25px;
  text-align: center;
  background: #000
}"

js <- function(nrows){
  sprintf("$('#tabHeader .circle').html('%s');", nrows)
}


ui <- fluidPage(
  
  useShinyjs(),
  
  tags$head(
    tags$style(HTML(CSS))
  ),
  
  # Application title
  titlePanel("Circular notification icon app"),
  
  mainPanel(
    tabsetPanel(type = "tabs",
                tabPanel("Empty"),
                tabPanel(div(id = "tabHeader", span("Details"), 
                             div(class = "circle")),
                         DTOutput("iris"))
    )
  )
  
)


server <- function(input, output) {
  
  runjs(js(nrow(iris)))
  
  output$iris = renderDT({
    datatable(iris, class = "display wrap", selection = "single",
              options = list(
                scrollX = TRUE,
                scrollY = TRUE,
                pageLength = 15,
                select = "api",
                dom = 'Bfrtip')
    )
  })
  
}

# Run the application
shinyApp(ui = ui, server = server)

How to get a notification icon on a tab in shiny

1 Answers