RShiny: Creating a datatable that allows for both image display in cell and filtering function on top

Question

I would like a simple filter on top of my datatable. Which should be achievable as follows:

##### server:    
output$table <- DT::renderDT(data, filter="top")
##### ui:
DT::DTOutput('table')

or

##### server: 
output$table <- DT::renderDataTable(data, filter="top")
##### ui:
DT::dataTableOutput('table')

However, I also have a column with images embedded within 'data' table. These images turn out to be text in the above functions. The images appear in the following functions, however then the filter disappears:

##### server:
output$table <- DT::renderDataTable(
DT::datatable(data, escape=FALSE)
, filter="top")
##### ui:
DT::dataTableOutput('table')

How do I allow for both images and filters in my UI?

Bonus: I originally utilised formattable with many other functions to decorate my table text. I read somewhere that formattable and filters do not work together so far and hence ditched beauty (coloured text) for functionality (filter). Formattable allows for images to be shown too. Hence if anyone has a method to allow for formattable with filter that would solve the problem completely too!

Answer 1

Assume you have two images pic1.png and pic2.png in the www subfolder. Then you can do:

library(shiny)
library(DT)

dat <- data.frame(
  X = c(1, 2),
  Y = c("pic1", "pic2")
)

render <- c(
  "function(data, type, row){",
  "  if(type === 'display'){",
  "    var tag = '<img src=\"' + data + '.png\" width=\"100\"/>';",
  "    return tag;",
  "  } else {",
  "    return data;",
  "  }",
  "}"
)

ui <- fluidPage(
  br(),
  DTOutput("dtable")
)

server <- function(input, output, session){

  output[["dtable"]] <- renderDT({
    datatable(
      dat,
      rownames = FALSE,
      filter = "top",
      options = list(
        columnDefs = list(
          list(targets = "_all", className = "dt-center"),
          list(targets = 1, render = JS(render)) # 1 is the index of the column of images
        )
      )
    )
  })

}

shinyApp(ui, server)