Adjust place of downloading buttons of a DT table in Shiny

Question

please see this picture I have a DT table in the shiny. I added buttons for downloading the content of the table (Copy, CSV, Excel, PDF). But I would like to change the distance between the first button and "show number of entries" (please see the attached picture and below code). How can I set the distance between the first button and "show entries"?

output$fancyTable<- renderDataTable ({    
DT::datatable(data, extensions = "Buttons", options = list(paging = TRUE, scrollX=TRUE, searching = TRUE, ordering = TRUE,dom = 'l<"sep">Bfrtip',

                                 buttons = c('copy', 'csv', 'excel', 'pdf'),
                                 pageLength=5,
                                 lengthMenu=c(5,10,20,100) ))

here is my UI code for the table:

 mainPanel(
                 # actionButton("download1", "Download table"),
                  tags$head(
                   tags$style(HTML("
                .sep {
                   width: 20px;
                   }
                     "))
                       ),
                 DT::dataTableOutput("fancyTable"),
                 tags$hr(),
                 plotlyOutput("fancyPlot"
                              ,width = "auto"
                              , height = "auto"
                 ),
                 

enter image description here

Answer 1

You can do dom = 'l<"sep">Bfrtip' and this will add a div between l and B having class sep. Then in your shiny app define the CSS for the sep class:

.sep {
  width: 20px;
  height: 1px;
  float: left;
}

You can set this CSS in the Shiny UI as below:

tags$head(
  tags$style(HTML("
    .sep {
      width: 20px;
      height: 1px;
      float: left;
    }
  "))
)