R DT Horizontal scroll bar at top of the table

◇◆丶佛笑我妖孽 提交于 2021-02-18 12:32:14

问题


I have a wide and lengthy DT in shiny. By default I would like to show the horizontal scroll bar on top of the table. Is there a way to do this? My current DT definition looks like below:

DT::datatable(dt, rownames = FALSE,
                    filter = fbox,
                    style = "bootstrap",
                    options = list(
                      dom = dom,
                      scrollX = TRUE,
                      columnDefs = list(list(orderSequence = c('desc', 'asc'), targets = "_all")),
                      processing = FALSE,
                      pageLength = 500,
                      lengthMenu = list(c(500, 1000, 5000), c("500","1000","5000"))
                    ),
                    callback = DT::JS("$(window).unload(function() { table.state.clear(); })")
 ) %>% DT::formatStyle(., cn_cat,  color = "black", backgroundColor = "#dee6ea",fontWeight = "bold")

Thanks in advance.


回答1:


Flip Scrollbar for All DataTables in App

You could add some css to flip the div containing the scrollbar/table and then flip back the table content, as per this answer:

.dataTables_scrollBody {
    transform:rotateX(180deg);
}
.dataTables_scrollBody table {
    transform:rotateX(180deg);
}

Flip Scrollbar for Specific DataTable

If you only want to flip the scroll bar on one table, you could select the specific table:

#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody {
    transform:rotateX(180deg);
}
#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody table{
    transform:rotateX(180deg);
}

Example

library(shiny)
library(DT)

css <- HTML(
    "#flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody {
        transform:rotateX(180deg);
    }
    #flipped > .dataTables_wrapper.no-footer > .dataTables_scroll > .dataTables_scrollBody table{
        transform:rotateX(180deg);
    }"
)

ui <- fluidPage(
    tags$head(tags$style(css)),
    fluidRow(column(width = 6,
                    h4("Flipped Scrollbar"),
                    br(),
                    DT::dataTableOutput("flipped")
                    ),
             column(width = 6,
                    h4("Regular Scrollbar"),
                    br(),
                    DT::dataTableOutput("regular")
                    )
             )
)

server <- function(input, output, session) {
    output$flipped <- DT::renderDataTable({
        DT::datatable(mtcars, rownames = FALSE,
                      options = list(
                          scrollX = TRUE
                      )
        )
    })
    output$regular <- DT::renderDataTable({
        DT::datatable(mtcars, rownames = FALSE,
                      options = list(
                          scrollX = TRUE
                      )
        )
    })
}

shinyApp(ui, server)



回答2:


I managed to get the Scrollbar on top using what @HallieSwam suggested, but looked into the source HTML code to understand what parts needed to be rotated.
What worked for me:

tags$head(tags$style(HTML( 
   "#Table1 .dataTables_scrollBody {transform:rotate(180deg);}
    #Table1 .dataTables_scrollHead {transform:rotate(180deg);}
    #Table1 .dataTables_scroll table {transform:rotate(180deg);}
   "
)))

scrollBody turns the whole table, including the scrolling bar, then scrollHead is required to align the scrolling bar with the header in the final table. Scroll table will turn just the content in the table, leaving the scrolling bar on top.



来源:https://stackoverflow.com/questions/44674870/r-dt-horizontal-scroll-bar-at-top-of-the-table

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!