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
Please note this requires the Data Stories module or a Displayr license.
- 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 General > 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 General > Show advanced options > 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).
-
- [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 General > Show advanced options > R code box.
- Find the col.widths argument or add in a line for col.widths to your custom code.
-
Set your column widths to the following substituting
mytable
with your specific table name (orpd$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)),
- [OPTIONAL] If using an autofit table you can use the Format > Column header > Column widths box to manually type in the numbers similar to:
Next, specify that you are using custom CSS and add in the appropriate CSS code.
- Bo to the General > Show advanced options > 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.
-
position.absolute
is to ensure the scrolling works in FireFox -
overflow-y
controls the vertical scroll bar -
overflow-x
controls the horizontal scroll bar
Both of the overflow settings can take any of the following depending on which type of scrolling you'd like:
-
auto
will only show the scroll bar if needed -
visible
will always show the scroll bar -
hidden
will always hide the scroll bar
Next
How to Create an Autofit Table
How to Align Values to a Visualization Using a CreateCustomTable R Table
How to Customize Colors on a CreateCustomTable R Table