How to change fixed columns color and display POSIXct data in DT::datatable Shiny?

Question

I am using the superhero theme in Shiny together with the line below that helps to make the filter's text color black,

ui <- fluidPage(
    theme = shinytheme("superhero"),
    tags$head(tags$style("div.dataTables_scrollHead span {color: black;}")),
    ...
)

1. However, the fixed columns (time column 1) color is not inconsistent with that of the theme. It is white and difficult to see text. How do I change that to match the color of the superhero theme or change it to a more user friendly color?

Update: So I managed to the change fixed column color but I want one row to be dark blue and another to be light blue. Plus the row index and column header are still in white, as shown in image below.

output$mytable     <- DT::renderDataTable(datatable(df,rownames = T,
                                                     filter="top", 
                                                      extensions = "FixedColumns",style = 'bootstrap',
                                                      options = list(scrollX = TRUE, scrollY = TRUE,
                                                                     autoWidth = F,
                                                                     columnDefs = list(list(width = '145px', targets = c(1))),
                                                                     fixedColumns=list(leftColumns=2))) 
                                                     %>%formatRound(c(2:l_agg), 2)%>% formatStyle('Timestamp',backgroundColor='#2B3E50'))

Updated Image

2. And right now the fixed column (time) is of character type (casted from POSIXct to character), I tried to put POSIXct time in the datatable but the time zone is different. How should I have the time column with type POSIXct and format it properly in datatable ?

For instance this is the time series data I have, and ideally I want Shiny the data shown as below without the CST part.

[1] "2020-04-06 09:31:20.000 CST" "2020-04-06 09:31:51.000 CST" "2020-04-06 09:32:21.000 CST" "2020-04-06 09:32:50.000 CST"
[5] "2020-04-06 09:33:21.000 CST" "2020-04-06 09:33:51.000 CST"

The structure is

structure(c(1586136680.0005, 1586136711.0005, 1586136741.0005, 
1586136770.0005, 1586136801.0005, 1586136831.0005), class = c("POSIXct", 
"POSIXt"), tzone = "")

However, in Shiny, it is displayed as below, which is not what I want.

Mr.Rlover Mr.Rlover · Accepted Answer · 2020-04-06T20:35:48

Does it really need to be of class Posixct to be displayed in a table? Why not just convert it to CST time zone then convert the dates to character?

On your second question about your row numbers being white, we can use custom css tags to define row colours and include the CSS in tags$head(tags$style(HTML()))). We can add the CSS you used in this same call as well. Note that the CSS defined here affects the row number colours. The column with data rows have their colour defined by backgroundColor = styleEqual(df$Timestamp, row_colours). We use CSS to match the colour of the row number to the colour of the rest of the row.

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

df <- structure(c(1586136680.0005, 1586136711.0005, 1586136741.0005,1586136861.0005, 1586136861.0005,
                  1586136801.0005, 1586136831.0005, 1586136861.0005), class = c("POSIXct", 
                                                                                "POSIXt"), tzone = "") 

df <- data.frame(Timestamp = df)

df$Timestamp <- as.character(.POSIXct(df$Timestamp-3600*7, tz="CST6CDT"))

l_agg <- 10

ui <- fluidPage(

  tags$head(tags$style(HTML('

  table th {
    background:#4e5d6c;
}

  table tr:nth-child(odd) td{
           background:#2B3E50;
}
table tr:nth-child(even) td{
            background:#4e5d6c;
}

div.dataTables_scrollHead span {color: black;}

'))),

  theme = shinytheme("superhero"),
  DT::dataTableOutput("mytable")

) 

if (!round(length(df$Timestamp)/2,0) %% 2) {
  row_colours <- rep(c('#2B3E50', '#4e5d6c'), length(df$Timestamp)/2)
  } else {
  row_colours <- rep(c('#2B3E50', '#4e5d6c'), round(length(df$Timestamp)/2,0))[-length(df$Timestamp)]
}

server <- function(input, output, session) {
  output$mytable     <- DT::renderDataTable(DT::datatable(df,rownames = T,
                                                          filter="top", 
                                                          extensions = "FixedColumns",style = 'bootstrap',
                                                          options = list(scrollX = TRUE, scrollY = TRUE,
                                                                         autoWidth = F,
                                                                         columnDefs = list(list(width = '1444px', targets = c(1))),
                                                                         fixedColumns=list(eftColumns=1))) 
                                            %>%formatRound(c(2:l_agg), 2)%>% formatStyle('Timestamp',backgroundColor = styleEqual(df$Timestamp, row_colours)))
}

shinyApp(ui, server)

How to change fixed columns color and display POSIXct data in DT::datatable Shiny?

1 Answers