How to right align columns of DataTable in R Shiny?

Question

From this post I gather we should define an alignRight CSS class with the desired alignment:

# ui.R
sidebarLayout(...,
    mainPanel(
        tags$head(
            tags$style(".alignRight { align: right; }", media = "all", type = "text/css")
        ),
        ...     # content with call to dataTableOutput("myTable")
    )
)

and then when creating the DataTable, use the aoColumnDefs option to set class of the desired columns to alignRight:

# server.R
shinyServer(
    function(input, output) {...
        output$myTable <- renderDataTable(...,
            options = list(
                aoColumnDefs = '[{"aTargets": [7, 9, 10], "sClass": "alignRight"}]'
            )
        )
    }
)

However, this has had no effect on my DataTable, when remains left aligned for all columns. I thought a simple alignment issue would be easy to sort out, but after many hours, apparently not so. Any ideas would be much appreciated.

score 8 · Answer 1 · answered Feb 17 '16 at 12:10

8

The following works fine with no custom class definition:

option=list(columnDefs=list(list(targets=3:5, class="dt-right")))

answered Feb 17 '16 at 12:10

dk.

2,030
1
22
22

score 5 · Accepted Answer · answered Apr 05 '14 at 21:01

5

This:

library(shiny)

runApp(list(
  ui = basicPage(
    tags$head(tags$style(".table .alignRight {color: blue; text-align:right;}")),
    h2('The mtcars data'),
    dataTableOutput('mytable')
  ),
  server = function(input, output) {
    output$mytable = renderDataTable({
      mtcars
    }, options =list(aoColumnDefs = list(list(sClass="alignRight",aTargets=c(list(3),list(4),list(5))))  ))
  }
))

worked for me and might help you model the CSS right for your situation. I only used blue since it helps show if other parts of the td formatting are working even if one might not be.

answered Apr 05 '14 at 21:01

hrbrmstr

77,368
11
139
205

Great - thanks! However, the column headings also become right-aligned and clash with the little sort icon - is there any way to fix this? Cheers. – mchen Apr 05 '14 at 22:08
prbly have to twiddle the CSS a bit. I forget if `DataTables` use `thead` by default, but if they do, it's a matter of adding a CSS to handle that case. I'll see if I can give it a go a bit later. – hrbrmstr Apr 05 '14 at 22:10
How does the new format work? This doesn't seem to work. options =list(columnDefs = list(list(class="right",aTargets=c(list(3),list(4),list(5))))) – mindlessgreen May 30 '15 at 12:00

How to right align columns of DataTable in R Shiny?

2 Answers2