Position DT search box to center of table

Question

I am having a hard time figuring out the code to position the search box from a DT table in a Shiny app to the middle. I'm using a DT extension package, called DTedit, to create my table. Here is some example code:

library(shiny)
library(DTedit)

##### Create the shiny UI
ui <- fluidPage(
  h3('DTedit Template'),
  uiOutput('mycontacts')
)

##### Create the Shiny server
server <- function(input, output) {
  mydata <- data.frame(name = character(),
                       email = character(),
                       useR = factor(levels = c('Yes', 'No')),
                       notes = character(),
                       stringsAsFactors = FALSE)
  
  ##### Callback functions.
  my.insert.callback <- function(data, row) {
    mydata <- rbind(data, mydata)
    return(mydata)
  }
  my.update.callback <- function(data, olddata, row) {
    mydata <- olddata
    mydata[row, ] <- data[row, ]
    return(mydata)
  }
  my.delete.callback <- function(data, row) {
    mydata <- mydata[-row,]
    return(mydata)
  }
  
  ##### Create the DTedit object
  DTedit::dtedit(input, output,
                 name = 'mycontacts',
                 thedata = mydata,
                 edit.cols = c('name', 'email', 'useR', 'notes'),
                 edit.label.cols = c('Name', 'Email Address', 'Are they an R user?', 'Additional notes'),
                 input.types = c(notes='textAreaInput'),
                 view.cols = c('name', 'email', 'useR'),
                 callback.update = my.update.callback,
                 callback.delete = my.delete.callback,
                 show.insert = FALSE,         
                 show.copy = FALSE)
}

##### Start the shiny app
shinyApp(ui = ui, server = server)

Based on googling, I found this CSS to align the search box to the center:

div.dataTables_wrapper  div.dataTables_filter {
  width: 100%;
  float: none;
  text-align: center;
}

However, I'm not sure how to insert this CSS into the table. dtedit() has datatable.options parameter, so I think I'd have to use this parameter somehow.

Any help would be greatly appreciated!

Answer 1

Yes, the CSS you found works. Here is how to include it:

css <- "
div.dataTables_wrapper  div.dataTables_filter {
  width: 100%;
  float: none;
  text-align: center;
}
"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  ......

The box is centered but only in the available space, so it is not "globally" centered because of the "Show" item:

If you want to remove the "Show" item, you can use the option dom = "frtip". Or if you want to keep it but globally center the search box, use this CSS instead:

css <- "
div.dataTables_wrapper  div.dataTables_filter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
"