How to get a notification icon on a tab in shiny - r

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)

Answer 1

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)