javascript - How to set column width in R Shiny data table? - Stack Overflow

admin管理员组

文章数量:1410730

I am building a Shiny dashboard displaying a DataTable.

My objective is to have the column width of data table automatically adjusted to fit the cell values in 1 line instead of multiple lines. However, I got the following result:

It seems like Name was adjusted as what I want, but Notes did not. Then, I followed those links: .html,

Setting column width in R Shiny DataTable does not work in case of lots of column,

R Shiny set DataTable column width

Basically, the solutions suggested online were to use autoWidth = TRUE argument with columnDefswhen rendering data table.

This did not work for me as well, below is the result:

It seems like the width of the table was narrowed paring with the initial result

Below is my final code:

header <- dashboardHeader(
  title = "Test"
)

sidebar <- dashboardSidebar(
)

body <- dashboardBody(
            box(title = "Test", width = 7, status = "warning", DT::dataTableOutput("df"))
)

# UI
ui <- dashboardPage(header, sidebar, body)

# Server
server <- function(input, output, session) {

  output$df = DT::renderDataTable(df, options = list(
    autoWidth = TRUE,
    columnDefs = list(list(width = '10px', targets = c(1,3)))))
    }

# Shiny dashboard
shiny::shinyApp(ui, server)

I am not sure why the width of Name column can be adjusted with the length of cell value, but that of Notes cannot. I also tried using data table in other projects, the width of the columns can only be adjusted with the length of column name.

Another option in my case would be setting the column width to be only a certain number of characters and having the full context of cell values showing up by hovering over the cell. The solution was suggested here: R Shiny Dashboard DataTable Column Width. However, this is for DT only, but it did not work out when I integrate it in Shiny.

Thanks in advance.

I am building a Shiny dashboard displaying a DataTable.

My objective is to have the column width of data table automatically adjusted to fit the cell values in 1 line instead of multiple lines. However, I got the following result:

It seems like Name was adjusted as what I want, but Notes did not. Then, I followed those links: https://rstudio.github.io/DT/options.html,

Setting column width in R Shiny DataTable does not work in case of lots of column,

R Shiny set DataTable column width

Basically, the solutions suggested online were to use autoWidth = TRUE argument with columnDefswhen rendering data table.

This did not work for me as well, below is the result:

It seems like the width of the table was narrowed paring with the initial result

Below is my final code:

header <- dashboardHeader(
  title = "Test"
)

sidebar <- dashboardSidebar(
)

body <- dashboardBody(
            box(title = "Test", width = 7, status = "warning", DT::dataTableOutput("df"))
)

# UI
ui <- dashboardPage(header, sidebar, body)

# Server
server <- function(input, output, session) {

  output$df = DT::renderDataTable(df, options = list(
    autoWidth = TRUE,
    columnDefs = list(list(width = '10px', targets = c(1,3)))))
    }

# Shiny dashboard
shiny::shinyApp(ui, server)

I am not sure why the width of Name column can be adjusted with the length of cell value, but that of Notes cannot. I also tried using data table in other projects, the width of the columns can only be adjusted with the length of column name.

Another option in my case would be setting the column width to be only a certain number of characters and having the full context of cell values showing up by hovering over the cell. The solution was suggested here: R Shiny Dashboard DataTable Column Width. However, this is for DT only, but it did not work out when I integrate it in Shiny.

Thanks in advance.

• javascript
• html
• r
• shiny
• rstudio

Share Improve this question Follow edited Mar 17, 2019 at 17:48 MMAASS asked Mar 17, 2019 at 15:45 MMAASSMMAASS 43311 gold badge66 silver badges2020 bronze badges 1

• 2 "However, this is for DT only, but it did not work out when I integrate it in Shiny." I don't think so.The answer I gave here should work in Shiny as well. – Stéphane Laurent Commented Mar 18, 2019 at 10:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you don't want multiple lines, you can add the CSS property white-space: nowrap to the cells in the columns you want.

Since you're in Shiny, it is easy to do so, by defining a CSS class and assigning it to the columns with className in the columnDefs option:

library(DT)
library(shiny)

dat <- data.frame(
  V1 = c("A", "B"),
  V2 = c(
    "A cool guy living in US and Canada", 
    "A cool guy living in California"
  ),
  V3 = c(
    "A cool guy living in US and Canada", 
    "A cool guy living in California"
  ),
  V4 = c(
    "A cool guy living in US and Canada", 
    "A cool guy living in California"
  ),
  V5 = c(
    "A cool guy living in US and Canada", 
    "A cool guy living in California"
  ),
  stringsAsFactors = FALSE
)

css <- "
.nowrap {
  white-space: nowrap;
}"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  DTOutput("table")
)

server <- function(input, output){

  output[["table"]] <- renderDT({
    datatable(dat, 
              options = list(
                columnDefs = list(
                  list(className = "nowrap", targets = "_all")
                )
              ))
  })
}

shinyApp(ui, server)

The problem is that the index for column widths is base 0, not 1. In the OP code, the target sets the width (to a relatively narrow 10px) for columns 2 and 4, not 1 and 3.

Try the following,

columnDefs = list(list(width = '200px', targets = c(0,2)))))

This should make the first and third columns a 200px, while all others are auto width.

本文标签： javascriptHow to set column width in R Shiny data tableStack Overflow