Move the footer at the bottom of a DT in Shiny R

user_10040453 0
Viewed 479

I have a datatable where the footer has "Previous/Next" text. Currently it is overlapping the "Displaying 1 of 15" text. Is there a way to move this so I dont get an over lap?

Here is a picture as well as the code. I am not very familiar with html/java script so if you could provide an answer explaining why you are using the specific code that would be greatly appreciated

library(shiny)
library(bs4Dash)
library(DT)


x = data.frame(one = rep("Hey how is everyones day? I need some help on this shiny application and learn how to use some of the features on datatable.", 10),
               two = rep("this is the second column of text. ", 10),
               three = rep("this is the third column of text", 10))


    ui = bs4DashPage(
        old_school = FALSE,
        sidebar_min = TRUE,
        sidebar_collapsed = FALSE,
        controlbar_collapsed = FALSE,
        controlbar_overlay = TRUE,
        title = "Basic Dashboard",
        navbar = bs4DashNavbar(),
        sidebar = bs4DashSidebar(),
        controlbar = bs4DashControlbar(),
        footer = bs4DashFooter(),
        body = bs4DashBody(
            DTOutput("table")
        )
    )
    
    server = function(input, output) {
        
        output$table = renderDataTable({
            datatable(x, rownames = F, style = "bootstrap",  extensions = 'Responsive', options = list(
                #dom = 't'
            ))
        })
    }


shinyApp(ui, server)

enter image description here

When i run the same code on shiny dashboard, it comes out the way I would want it to look like. So i believe it is something to do with Bs4Dash styling sheet. Below is how it looks with shinydashboard

enter image description here

dt shiny datatables
3 Answers

You need to redraw your table after initialization.

$('#tableIdHere').DataTable().draw();
user_99424180

You can try this out , Hope it will sove your problem.

library(shiny)
library(bs4Dash)
library(DT)


x = data.frame(one = rep("Hey how is everyones day? I need some help on this shiny application and learn how to use some of the features on datatable.", 10),
               two = rep("this is the second column of text. ", 10),
               three = rep("this is the third column of text", 10))


ui = bs4DashPage(
  old_school = FALSE,
  sidebar_min = TRUE,
  sidebar_collapsed = FALSE,
  controlbar_collapsed = FALSE,
  controlbar_overlay = TRUE,
  title = "Basic Dashboard",
  navbar = bs4DashNavbar(),
  #sidebar = bs4DashSidebar(),
  controlbar = bs4DashControlbar(),
  footer = bs4DashFooter(),
  body = bs4DashBody(
    DTOutput("table")
  )
)

server = function(input, output) {
  
  output$table = renderDataTable({
    datatable(x, rownames = F,   extensions = 'Responsive', options = list(
      #dom = 't'
    ))
  })
}


shinyApp(ui, server)

I have only removed style = "bootstrap" from the renderDataTable and that serve the perpose

image_app

user_142384600

Your css is overwritten with some other default css. Please check if your classes are similarly named or clashing with each other.

user_94548970
Related