CODEWITHSUNDEEP
cssrshinydt
string
string

Reputation: 827

on row selection change the bg color of data table in R Shiny

I am trying to change the bg color of the data table on selection in R Shiny App. Have written the CSS Code for the same but that is unable to override the existing CSS. Any workaround to achieve it.

Here is my piece of code:

ui

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

shinyUI(
dashboardPage (
dashboardHeader(title="Report"),
dashboardSidebar(sidebarMenu(menuItem("Table",tabName="Table"))),
dashboardBody(
tags$head(tags$style(HTML("

#DataTable tr.selected {background-color:cyan !important;}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover    {
                          background-color: rgb(143,209,63) !important;
}



.odd {
background-color : rgb(173,219,241) !important;
}

.even {
background-color : rgb(232,245,251) !important;
}

"))),
useShinyjs() ,
            tabItems(
            tabItem(tabName = "Table",
                    DT::dataTableOutput("DataTable")    
                    )
))
))

server

shinyServer(function(input, output) {

output$DataTable <- DT::renderDataTable({
   datatable(iris,rownames=FALSE,selection = 'single',options = list(
   searching = FALSE,ordering=FALSE,
   dom = 'Bfrtip',
   buttons = c('copy','excel', 'pdf', 'print', 'colvis'),
   columnDefs = list(list(visible=FALSE, targets=c(2))),
   rowCallback = JS(
     "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
     "var full_text = aData[2]",
     # Tooltip for the rows
     "$('td:eq(1)', nRow).attr('title', full_text);",
     # Showing a hand as a cursor
     "$('td:eq(1)', nRow).css('cursor','pointer');",
     "$('td:eq(1)', nRow).css('font-weight','bold');",
     "}")
     )
     )
     })

Upvotes: 1

Views: 1652

Answers (1)

string
string

Reputation: 827

Here is the updated Code:

ui

shinyUI(
dashboardPage (
dashboardHeader(title="Report"),
dashboardSidebar(sidebarMenu(menuItem("Table",tabName="Table"))),
dashboardBody(

tags$style(HTML("
table.dataTable tr.selected td,
                table.dataTable td.selected {
                background-color: rgb(143,209,63) !important;
                }
                ")),


tags$head(tags$style(HTML("

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
                          background-color: rgb(143,209,63) !important;
}    

.odd {
background-color : rgb(173,219,241) !important;
}

.even {
background-color : rgb(232,245,251) !important;
}

"))),
useShinyjs() ,
            tabItems(
            tabItem(tabName = "Table",
                    DT::dataTableOutput("DataTable")    
                    )
))
))

server

shinyServer(function(input, output) {

output$DataTable <- DT::renderDataTable({
datatable(iris,rownames=FALSE,selection = 'single',options = list(
searching = FALSE,ordering=FALSE,
dom = 'Bfrtip',
buttons = c('copy','excel', 'pdf', 'print', 'colvis'),
columnDefs = list(list(visible=FALSE, targets=c(2))),
rowCallback = JS(
 "function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {",
 "var full_text = aData[2]",
 # Tooltip for the rows
 "$('td:eq(1)', nRow).attr('title', full_text);",
 # Showing a hand as a cursor
 "$('td:eq(1)', nRow).css('cursor','pointer');",
 "$('td:eq(1)', nRow).css('font-weight','bold');",
 "}")
 )
 )
 })

Upvotes: 1

Related Questions