How to Add Scrolling to an Autofit or CreateCustomTable R Table – Displayr Help

Sometimes you may need to add appendix tables or tables of raw data to your Displayr document. If you want to add very customized formatting to these tables you can create an Autofit or CreateCustomTable R Table, but these tables try to fit all of the data in the size of the output, which can create tables that are truncated or hard to read. This article describes how to go from an Autofit or CreateCustomTable R table where some of the data is cut off or too scrunched (note the below table actually has 600 rows):

To one that has scrolling enabled:

There are various ways to add the scrolling:

Method - Vertical scrolling on an Autofit table
Method - Vertical scrolling on a CreateCustomTable R Table
Method - Horizontal scrolling
Technical notes

Requirements

An Autofit table (see How to Create an Autofit Table) or CreateCustomTable R Table (see How to Align Values to a Visualization Using a CreateCustomTable R Table)

Method - Vertical scrolling on an Autofit table

We will edit the underlying R CODE of the autofit table to set the row height to a certain size instead of having row heights "fit" the space available. This will trigger the scroll bar to appear.

Select your Autofit table.
Go to Data > Show advanced options > R code and use the code magnifying glass or Ctrl+F (Cmd+F on a Mac) to find the line of code for row.header.labels
Hit the Enter key (Return on a Mac) to insert a line above it and paste in the code below. This sets a value for row.height (note you can change 12px to a different pixel size based on the font size in your table):
```
row.height = "12px",
```
Click Calculate.

[OPTIONAL] If wanting scrolling compatibility with Firefox, you will need to change the use.predefinted.css to TRUE and add in a new argument for custom.css like:

use.predefined.css = TRUE,
    custom.css=" div {
        position:absolute;
        overflow-y: auto;
        overflow-x: hidden;
      }"

[OPTIONAL] If the scrollbar is overlaying text in your last column, you can add padding to the right via more CSS code listed in the Technical notes below.

Method - Vertical scrolling on a CreateCustomTable R Table

We will use the row.height argument inside the CreateCustomTable() function to set the height to a certain size instead of having row heights "fit" the space available. This will trigger the scroll bar to show up.

Click on the Calculation that's using CreateCustomTable().

In the Data > R code box, inside the flipFormat::CreateCustomTable() function, add a line for the row.height argument (note you can change 12px to a different px size based on the font size in your table). For example:

#specify the table to be formatted
mytable = table.Q1a.Spontaneous.Awareness.Spontaneous.Awareness.mention

#format using CreateCustomTable - use row.height to make table scroll
flipFormat::CreateCustomTable(mytable,
                                row.height="12px")

Click Calculate.

[OPTIONAL] If wanting scrolling compatibility with Firefox, you will need to add a few more arguments within the CreateCustomTable() like:

use.predefined.css = TRUE,
    custom.css=" div {
        position:absolute;
        overflow-y: auto;
        overflow-x: hidden;
      }"

[OPTIONAL] If the scrollbar is overlaying text in your last column, you can add padding to the right via more CSS code listed in the Technical notes below.

Method - Horizontal scrolling

Adding horizontal scrolling is a process similar to vertical scrolling, and you can even add it in addition to vertical scrolling. You will need to set a fixed width for all columns (in pixels), and then use custom.css similar to the Methods above to specify the horizontal scrolling.

First, specify the column widths in pixels -- you must supply a column width for all columns shown in the table (including the first column of row headers).

1. [OPTIONAL] If using an autofit table you can use the Format > Column header > Column widths box to manually type in the numbers similar to:
  10px, 40px, 40px, 40px
2. If you don't want to type out all the widths in the Column widths field or you are using a custom R Calculation, go to the Data > R code box.
3. Find the col.widths argument or add in a line for col.widths to your custom code.
4. Set your column widths to the following substituting mytable with your specific table name (or pd$data if using an autofit table):
```
#set the first column to 80 pixels and the remaining columns to 20
col.widths = c("80px", rep("20px",NCOL(mytable)),
```

Next, specify that you are using custom CSS and add in the appropriate CSS code.

Bo to the Data > R code box.
If using an autofit table, find the use.predefined.css argument and remove FALSE and add a new line to make room for the custom code before ).

Set use.predefined.css = TRUE, and in the following code along with the custom.css code. Final snippet is below:

use.predefined.css = TRUE,
custom.css = "div {
   position: absolute;
   overflow-y: hidden; 
   overflow-x: auto;
   }"

Note the above overflow-y: hidden line hides the vertical scroll, but if you want vertical scrolling too, you can set that to auto (shows if needed) or visible (always shows) as in the example code from the methods above.

Technical notes

If you have a lot of text in the last column, you may need to add extra space to the right so the vertical scrollbar does not overlap the text. To do so, you can add the following code in bold to your custom.css:

use.predefined.css = TRUE,
custom.css = "div {
   position: absolute;
   overflow-y: hidden; 
   overflow-x: auto;
   }
 
 /* Adjust the px value to add desired space to the right of the last column for scroll */ 
 th:last-child, td:last-child { 
 padding-right: 15px;
    }"

A little more explanation behind the custom css above.