Guten Tag!

Many greetings from Ulm, Germany.

Last week, we learned how to split {gt} tables. Our strategy was to dive into {gt}’s source code and modify it and spice it up with a little bit of HTML and CSS. One key ingredient to arrange our tables was to use CSS to add a flexbox display style.

Today I want to talk more about display styles. This will help us to split our tables into more than two parts while still making sure that everything looks nice.

But before we dive into our newsletter, let me remind you that all code can be found on GitHub. If you enjoy this newsletter, think about supporting my work with a coffee.

And if you’re a video person, check out my newest 150 seconds video on creating powerful function to avoid duplicate code (Feedback on the new video format is much appreciated).

Split table into three parts

Alright, using the same code from last week, we can split our table into three parts and display it in a Quarto doc.

Split tables onto multiple lines

We can see that the page is full and the website adds a horizontal scroll bar so that we can scroll through all of the tables. This is a typical case where the available width does not suffice to contain all of our tables. We can avoid this by combining the flexbox display with the additional flex-wrap keyword. This will automatically create a line break if the available width doesn't suffice.

Put tables on a grid

Cool, we've learned another keyword to bend HTML containers to our will. But maybe, you don't like the way this looks because the third table is aligned to the middle of the second row. This happend because this table is the only one in that row and we’ve used auto-margins.

To make sure that the third table is alignment with the first table we can use a different display style, namely display: grid. This will put all the tables on, well, a grid.

To do so, we have to specify how many columns we desire in our grid. This is done with the grid-template-columns keyword. We combine this with repeat() and the fraction unit fr from CSS.

Whoops, what happened?

Oh my. This didn’t go quite as expected. The problem with that is that our gt.print() function adds a HTML line break with br after each table. But the grid display seems to treat this an empty container and uses it as every other grid element.

So to fix that, jump into your gt.print() code and delete the if (i != max(seq_tbls)) htmltools::HTML("<br>") line. Also, you should fix the widths of the columns with cols_width() in order to ensure that all tables have the same width.

Alright, that’s a wrap. Hope you’ve enjoyed this week’s newsletter. If you want to reach out to me, just reply to this mail or find me on Twitter.

See you next week!
Albert 👋