Position DT search box to center of table - html

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%);
}
"