diff --git a/R/ro_dt_theme.R b/R/ro_dt_theme.R index 7f41116..173510f 100644 --- a/R/ro_dt_theme.R +++ b/R/ro_dt_theme.R @@ -11,7 +11,7 @@ #' @param base_family Character. Font family to use for table text. Default is #' "RijksoverheidSansWebText". If not installed, Verdana is used, then Arial, #' then the first font found on your device, whichever is installed first. -#' @param sorting Logical. If \code{TRUE}, column headers are left-aligned; +#' @param sorting Logical. If \code{TRUE}, column headers are moved, to make space for arrows. #' if \code{FALSE}, right-aligned. Default is \code{FALSE}. #' #' @return A \code{shiny.tags} object with a \code{} tag containing @@ -25,7 +25,7 @@ #' DTOutput("mytable") #' ) #' server <- function(input, output, session) { -#' output$mytable <- renderDT(datatable(iris, options(list(ordering=FALSE)))) +#' output$mytable <- renderDT(datatable(iris, rownames = FALSE, options(list(ordering=FALSE)))) #' } #' shinyApp(ui, server) #' } @@ -38,9 +38,9 @@ ro_dt_theme <- function( base_family <- ro_check_if_font_available(target_font_family = base_family) if (sorting) { - header_align <- "left" + header_align <- 25 } else { - header_align <- "right" + header_align <- 3 } tags$head( @@ -79,8 +79,8 @@ ro_dt_theme <- function( font-weight: normal !important; font-style: normal; font-size: 13px; - text-align: %s !important; - padding: 1px 3px !important; + text-align: right !important; + padding: 1px %dpx 1px 3px !important; border-bottom: 2px solid #222222 !important; border-left: none !important; border-right: none !important; @@ -137,6 +137,44 @@ ro_dt_theme <- function( opacity: 1 !important; } + /* Hide default arrows */ + table.dataTable thead .sorting:after, + table.dataTable thead .sorting_asc:after, + table.dataTable thead .sorting_desc:after { + content: \"\" !important; + } + + /* Base style for all custom arrows */ + table.dataTable thead th.sorting:before, + table.dataTable thead th.sorting_asc:before, + table.dataTable thead th.sorting_desc:before { + display: inline-block; + font-size: 16px !important; + line-height: 1px !important; + vertical-align: bottom; + margin-left: 4px; + } + + /* Unsorted: neutral arrow */ + table.dataTable thead .sorting:before { + content: '\\2195' !important; + color: #888888 !important; + } + + /* Ascending: up arrow */ + table.dataTable thead .sorting_asc:before { + content: '\\2191' !important; + color: #007bff !important; + font-weight: 700 !important; + } + + /* Descending: down arrow */ + table.dataTable thead .sorting_desc:before { + content: '\\2193' !important; + color: #007bff !important; + font-weight: 700 !important; + } + /* Pagination: button borders */ .dataTables_wrapper .dataTables_paginate .paginate_button.current { border: 2px solid #949494 !important; diff --git a/man/ro_dt_theme.Rd b/man/ro_dt_theme.Rd index 32f4d49..a667b20 100644 --- a/man/ro_dt_theme.Rd +++ b/man/ro_dt_theme.Rd @@ -11,7 +11,7 @@ ro_dt_theme(base_family = "RijksoverheidSansWebText", sorting = FALSE) "RijksoverheidSansWebText". If not installed, Verdana is used, then Arial, then the first font found on your device, whichever is installed first.} -\item{sorting}{Logical. If \code{TRUE}, column headers are left-aligned; +\item{sorting}{Logical. If \code{TRUE}, column headers are moved, to make space for arrows. if \code{FALSE}, right-aligned. Default is \code{FALSE}.} } \value{ @@ -30,7 +30,7 @@ if (interactive()) { DTOutput("mytable") ) server <- function(input, output, session) { - output$mytable <- renderDT(datatable(iris, options(list(ordering=FALSE)))) + output$mytable <- renderDT(datatable(iris, rownames = FALSE, options(list(ordering=FALSE)))) } shinyApp(ui, server) }