CODEWITHSUNDEEP
rshinydt
AndrewVBA
AndrewVBA

Reputation: 57

R Shiny DT Formatting Columns Based on Values

I'm trying to format the output of multiple columns based on another column.

In the example below I want to format Col1/2/3/4 based on their values in comparison to the value in the column 'Argu'.

i.e.
- if Col1, Row1 is less than 7 mark Red, if not Green.
- if Col1, Row2 is less than 6 mark Red, if not Green.
- if Col1, Row3 is less than 7 mark Red, if not Green.
- if Col2, Row1 is less than 7 mark Red, if not Green.
- if Col2, Row2 is less than 6 mark Red, if not Green.
- if Col2, Row3 is less than 7 mark Red, if not Green.

etc.

I know is straightforward to format one column based on another column by explicitly calling out that value but for changeable argument values between rows this does not work

# Load Packages
library(shiny)
library(DT)

# Create DT
Col1 = c(9,5,8)
Col2 = c(9,4,7)
Col3 = c(9,9,5)
Col4 = c(8,8,7)
Argu = c(7,6,7)
df = data.frame(Col1,Col2,Col3,Col4,Argu)

# Create Shiny Output
shinyApp(
  ui = 
      navbarPage("Testing",dataTableOutput('dt')),

  server = function(input, output, session) {

    output$dt = DT::renderDataTable(datatable(df)
    %>% formatStyle("Col1","Argu", backgroundColor = styleInterval(6.1,
c("Red","Green")))

  )}
 )

Any help would be appreciated!

Upvotes: 3

Views: 5937

Answers (2)

Jason Jisu Park
Jason Jisu Park

Reputation: 411

You can build hidden logical columns to compare each data column with Argu and format the columns on DT accordingly.

Please refer to the code below. Hope this helps.

# Load Packages
library(shiny)
library(DT)

# Create DT
Col1 = c(9,5,8)
Col2 = c(9,4,7)
Col3 = c(9,9,5)
Col4 = c(8,8,7)
Argu = c(7,6,7)
df = data.frame(Col1,Col2,Col3,Col4,Argu)

# Build hidden logical columns for conditional formatting
dataCol_df <- ncol(df) - 1
dataColRng <- 1:dataCol_df
argColRng <- (dataCol_df + 2):(dataCol_df * 2 + 1)
df[, argColRng] <- df[, dataColRng] < Argu

# Create Shiny Output
shinyApp(
  ui = 
    navbarPage("Testing",dataTableOutput('dt')),
  server = function(input, output, session) {
    output$dt = DT::renderDataTable(
      datatable(df,
                # Hide logical columns
                options=list(columnDefs = list(list(visible=FALSE, 
                                                    targets=argColRng)))) %>% 
        # Format data columns based on the values of hidden logical columns
        formatStyle(columns = dataColRng,
                    valueColumns = argColRng,
                    backgroundColor = styleEqual(c('0', '1'), 
                                                 c("green", "red")))
    )}
)

Upvotes: 9

kostr
kostr

Reputation: 856

Here's another solution:

library(shiny)
library(DT)

# Create DT
Col1 = c(9,5,8)
Col2 = c(9,4,7)
Col3 = c(9,9,5)
Col4 = c(8,8,7)
Argu = c(7,6,7)
df = data.frame(Col1,Col2,Col3,Col4,Argu)

# Create Shiny Output
shinyApp(
  ui = 
    navbarPage("Testing",dataTableOutput('dt')),

  server = function(input, output, session) {

   output$dt <- renderDataTable( DT::datatable(df,options = list(rowCallback = JS('
                                                          function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                                                     if (parseFloat(aData[1]) < aData[5])
                                                     $("td:eq(1)", nRow).css("background-color", "red");
                                                     if (parseFloat(aData[1]) >= aData[5])
                                                     $("td:eq(1)", nRow).css("background-color", "green");
                                                     if (parseFloat(aData[2]) < aData[5])
                                                     $("td:eq(2)", nRow).css("background-color", "red");
                                                     if (parseFloat(aData[2]) >= aData[5])
                                                     $("td:eq(2)", nRow).css("background-color", "green");
                                                     if (parseFloat(aData[3]) < aData[5])
                                                     $("td:eq(3)", nRow).css("background-color", "red");
                                                     if (parseFloat(aData[3]) >= aData[5])
                                                     $("td:eq(3)", nRow).css("background-color", "green");
                                                     if (parseFloat(aData[4]) < aData[5])
                                                     $("td:eq(4)", nRow).css("background-color", "red");
                                                     if (parseFloat(aData[4]) >= aData[5])
                                                     $("td:eq(4)", nRow).css("background-color", "green");
                                                                                  }'
                                                                                  ))))


    }
)

Upvotes: 1

Related Questions