I am an absolute beginner with html so I am not 100% sure this is a bug, but I think it is.

I have a wide data frame that I would like to display in an html report with the R function `DT::datatable`. The table is too wide for the quarto html default page so `datatable` gives it a horizontal scrollbar. The table is longer than the default number of rows to display so `datatable` gives it clickable page controls below the table (1, 2, 3, ...), so that depending on what you click, you can see 10 records, then the next 10, and so on.

With the default settings, with my particular table, the container (I think that's the right word) for the table is too narrow to be visually attractive (I have some very wide text columns that need more space to be readable). Thus, I want to widen the container for this table, but not for the whole html document. (I also reduce the font size, but that does not affect the behavior and so I do not do that in my example.) This is where I run into trouble. 

When displaying a wide DT::datatable in Rstudio with quarto, and the table is **too wide** for the page:

-   IF an html div widens the container,
-   THEN the clickable page controls below the table, i.e.,

> Previous, 1, 2, 3, 4, 5, ..., 10 Next

-   do NOT work properly. For example, 1 and 10 may respond to clicks, but 2-5 may not. Or, if you click 10, making 6-9 visible, 9 will respond to a click, but 6-8 will not.
-   This behavior occurs if the html is rendered and viewed in a web browser (Chrome).
-   However, if the html is rendered and viewed in the viewer pane, the page controls work properly.
-   If this qmd file is converted to an rmd markdown file and knit as rmd (without quarto), this behavior does not occur - page controls work properly. In addition, the page automatically is much wider than the page rendered in quarto.

[This qmd file](https://github.com/donboyd5/mres/blob/main/quarto_DT/quarto_DT.qmd) has a minimal reproducible example  that shows the problem.

[This rmd file](https://github.com/donboyd5/mres/blob/main/rmd_DT/rmd_DT.Rmd) has a minimal reproducible example that shows that the problem does NOT occur with Rmarkdown.

If I am using the wrong approach to widen the container, and there is a way to do so without causing page controls to break I would much appreciate it if someone could let me know a better way to accomplish my goal.




2022-04-24T10:58:51Z
donboyd5
closed
Quarto with wide DT datatable objects in widened container: DT page controls do not work properly
https://github.com/quarto-dev/quarto-cli/issues/720