I am having an issue with rendering of the table using the DT package. The table is generated based on clicked events in a plotly plot. I need the table not to span the entire width if there are not enough columns. So as per the vignette, I added the following code to options in the function datatable from DT package:
autoWidth = TRUE,
columnDefs = list(list(className = 'dt-center'
, width = '200px'
, targets = '_all'))
This results in the correct display as desired, on the first click as shown in screenshot Auto-Click1.png (See 1st image). However, if I click on any point the second time, the resulting table spans the full width of the browser. (See Auto-Click2.png or the 2nd image). I would like to have the table displayed as in Auto-Click1 and the rendering to persists between clicks.
To keep the width persistent between clicks, I tried to add the option scrollX=TRUE. This helps and the width persists between clicks. But the column headers are now misaligned to the left of the rest of the table. See ScrollX-True.png (See 3rd image).
Here is a complete reproducible example:
---
title: "Dashboard with DT and plotly. Reproducible example"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
runtime: shiny
---
Dashboard
======================
```{r setup, include=FALSE}
library(tidyverse)
library(tidyselect)
library(tidyr)
library(magrittr)
library(dplyr)
library(ggplot2)
library(plotly)
library(shiny)
library(shinydashboard)
library(flexdashboard)
library(rlang)
library(DT)
library(readxl)
library(writexl)
```
Row
-----------------------------------------------------------------------
### Plot {.no-padding}
```{r}
data <- mtcars %>%
rownames_to_column("Model") %>%
mutate(Make = sub("\\s+.*","", Model))
## Plot in the top row
renderPlotly({
p <- data %>%
ggplot(aes(wt, mpg, color = factor(gear))) +
geom_point() + guides(color=guide_legend("Gear"))
ggplotly(p,source = "A") %>%
event_register("plotly_click")
})
```
Row
---------------------------------------
### Data Table
```{r tbl}
renderUI({
e <- event_data("plotly_click", priority = "event", source = "A")
chosen_gear <- data %>%
pull(gear) %>%
unique() %>%
sort() %>%
.[e[1,"curveNumber"] + 1]
if(is.null(e))
return("Click events will appear here")
DF <- data %>%
filter(gear == chosen_gear) %>%
dplyr::select(Model, wt, mpg, gear, Make)
tbl <- DF %>%
datatable(rownames = FALSE
, extensions = 'Buttons'
, options = list(
##scrollX = TRUE,
# Turning the scrollX option on causes Column headers to misalign with rest of the table
# Without the scrollX option table has correct width on first click but
# On the second click expands to the full width.
autoWidth = TRUE
, columnDefs = list(list(className = 'dt-center'
, width = '200px'
, targets = '_all'))
, dom = "Blrtip"
, buttons = list("copy", list(
extend = "collection"
, buttons = c("csv", "excel", "pdf")
, text = "Download"
))
, lengthMenu = list(c(5, -1)
, c(5, "All"))
, pageLength = 5))
output$table <- renderDT({tbl})
DTOutput("table")
})
Thanks for your help or pointers.
As answered in https://github.com/rstudio/DT/issues/752#issuecomment-575706297 , The easiest way I can think of is changing the last line from DTOutput('tbl') to
div(style = 'width:500px;margin:auto', DTOutput("table"))