Is it possible to have footnotes after source in gt table?

Question

I have the following table:

datasets::mtcars %>%
  head(5) %>% 
  gt()  %>%
  tab_footnote("Footnote: Go Below",
               locations =  cells_body(columns = mpg,
                                       rows = c(2))) %>%
  tab_source_note("Source:PUT THIS ON TOP")

Which gives me this output:

The problem I am having is that I need the footnotes below the source: changing the position of the code doesn't work either.

datasets::mtcars %>%
  head(5) %>% 
  gt()  %>% tab_source_note("Source: PUT THIS ON TOP") %>% 

  tab_footnote("Footnote: Go Below",
               locations =  cells_body(columns = mpg,
                                       rows = c(2)))

Desired Output:

Update: This code works but not as intended

custom_css1 <- paste0("
    #two .gt_sourcenote {
      color: red;
      position: absolute;
      top: ",240,"px;
                     }")
      

custom_css2 <- paste0("
    #two .gt_footnote {
      color: blue;
      position: absolute;
      top: ",270,"px;
                     }")                  
                    

datasets::mtcars %>%
  head(5) %>%
  gt(id="two")  %>%
  tab_footnote("Footnote: Go Below",
               locations =  cells_body(columns = mpg,
                                       rows = c(2))) %>%
  tab_footnote("Footnote2: Go Below2",
               locations =  cells_body(columns = mpg,
                                       rows = c(5))) %>%
  tab_source_note("Source:PUT THIS ON TOP") %>%
  opt_css(
    css = custom_css1 
  ) %>% 
  opt_css(
    css = custom_css2
    
  )

Is your output going to be in html? Or do you need a strictly gt solution? — OTA, May 20 '22 at 01:49
What would the html output be? I was using GT as it had the functions built in. But im open — RL_Pug, May 20 '22 at 02:36

score 3 · Accepted Answer · answered May 31 '22 at 16:13

A couple of days after I asked this question - gt updated to version 0.6.0 and now the tab_footnote() function does not need a location. https://gt.rstudio.com/news/index.html#gt-development-version

#install.packages("gt", repos='http://cran.us.r-project.org')
library(gt)
library(dplyr)

datasets::mtcars %>%
  head(5) %>%
  gt(id="two")  %>%
  tab_footnote("Source Note: Go on Top"
               ) %>%
  tab_footnote("Footnote: Go Below",
               locations =  cells_body(columns = mpg,
                                       rows = c(5)))

OTA · Answer 2 · 2022-05-20T16:56:57.797

My solution uses RMarkdown to create an HTML output, and I use CSS to style it. I use gt(id="two") and gt::opt_css() to add CSS. I used the inspect tool in my browser to see that sourcenote was labeled as .gt_sourcenote and footnote was labeled as .gt_footnote. Adjust the css positions to your liking.

Typically, you would use 3 backticks to start and end a chunk in Rmd, but stackoverflow uses 3 backticks for code blocks. I will represent 3 backticks (e.g. ```) for my chunks as 3 asterisks (e.g. ***). Edit this to your liking.

Screenshot of output: https://prnt.sc/7Xuf2Q0XIyuA

---
title: "Untitled"
output: html_document
---

***{r lib, warning=F, echo=F, message=F}
library(tidyverse)
library(gt)
knitr::opts_chunk$set(echo = TRUE)
***

***{r demo, echo=F}
datasets::mtcars %>%
  head(5) %>%
  gt(id="two")  %>%
  tab_footnote("Footnote: Go Below",
               locations =  cells_body(columns = mpg,
                                       rows = c(2))) %>%
  tab_source_note("Source:PUT THIS ON TOP") %>%
  opt_css(
  css = "
    #two .gt_sourcenote {
      color: red;
      position: absolute;
      top: 310px;
    }

    #two .gt_footnote {
      color: blue;
      position: absolute;
      top: 340px;
    }
    "
)
***

Helpful links: How to rotate the column headers with R package gt? https://www.rdocumentation.org/packages/gt/versions/0.5.0/topics/opt_css https://www.w3schools.com/cssref/pr_class_position.asp

EDIT for overlapping footernotes:

This looks good in my browser.

opt_css(
  css = "
    #two .gt_sourcenote {
      color: red;
      position: relative;
      top: -40px;
    }

    #two .gt_footnote {
      color: blue;
      position: relative;
      top: 28px;
    }
    "
)

So this works, but I noticed that when I start to have more footnotes it doesn't behave as intended. I added another section to the question. — RL_Pug, May 20 '22 at 14:00
@RL_Pug I added another chunk of code that alters the position: relative. It looks good in my browser (there is no more overlap). Until you get a more "official" response, this works for me - even if you add more footnotes. You can add all your footnotes and then finalize it by changing the top: px values until it looks acceptable. — OTA, May 20 '22 at 16:59
I want to thank you for taking the time to go through all the trouble of helping me with the question. Looks like `gt` updated and now the `tab_footnote()` function does not need a location which allows me to have a sudo source note above the footnote. — RL_Pug, May 31 '22 at 16:15

Is it possible to have footnotes after source in gt table?

2 Answers2