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
    
  )

Answer 1

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;
    }
    "
)