How to Add Scrolling to a 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. Horizontal and vertical scrollbars are automatically built into Autofit tables, but sometimes R tables try to fit all of the data into the size of the output, which can create tables that are truncated or hard to read. This article describes how to go from a CreateCustomTable R table where some of the data is cut off or too scrunched (note the table below actually has over 1,000 rows):

To one that has scrolling enabled:

Requirements

A CreateCustomTable R Table (see How to Align Values to a Visualization Using a Table with Custom Formatting)

Method - Vertical scrolling

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 Properties , go to Data > R Code > Edit Code.

In the code panel, 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 method 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).

[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
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 > Edit Code from Properties .
In the code panel, find the col.widths argument or add a line for col.widths to your custom code.
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 the appropriate CSS code.

Go to Data > R Code > Edit Code in Properties .

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.