Static text above horizontally scrollable table in shiny

Question

I have a basic shiny app with rhandsontable. The table is wide so while rendering the output, there is a horizontal scroll available in the table. Example below:

Now, for this table, I want to display a static content above the last 4 columns of the table like below:

The problem I am facing is when I scroll towards left, the text follows the scroll. Issue below:

Please carefully notice the location of scroll with respect to the table and text. The code to reproduce the issues is below:

if(interactive()) {
  library(shiny)
  library(rhandsontable)
  library(dplyr)
  
  ui <- fluidPage(br(),
                  br(),
                  
                  fluidRow(column(
                    12,
                    div(style = "text-align:right; margin-right:50px", "Show text here Only")
                  ),
                  column(12, rHandsontableOutput("mytable"))))
  
  server <- function(input, output, session) {
    output$mytable <- renderRHandsontable({
      data <-
        mtcars %>% cbind(mtcars) %>% cbind(mtcars) %>% cbind(mtcars) %>% head(10)
      rhandsontable(data, strecH = "all")
    })
    
  }
  
  shinyApp(ui = ui, server = server)
}

I am not sure if there is any extension on rhandsontable for this or if this could be resolved just using css or javascript alone. The width of the table could vary based on the data and length of individual columns.

Any help will be much appreciated!

Answer 1

This solution partially works. The problem is that the horizontal scrollbar of the table disappears, but there is a scrollbar at the very bottom of the screen.

library(shiny)
library(rhandsontable)

ui <- fluidPage(
  br(), br(),
  div(
    style = "position: absolute;",
    div(
      style = "position: relative; width: auto; float: right;",
      tags$p(
        style = 
          "position: absolute; left: 80%; right: 0; top: 0; width: 150px; height: 50px; transform: translateX(-100%);", 
        "Show text here Only"
      ),
    ),
    div(
      style = "clear: right; height: 5px;"
    ),
    br(), br(),
    rHandsontableOutput("mytable")
  )      
)

server <- function(input, output, session) {
  output$mytable <- renderRHandsontable({
    data <-
      mtcars %>% cbind(mtcars) %>% cbind(mtcars) %>% cbind(mtcars) %>% head(10)
    rhandsontable(data, stretchH = "all")
  })
  
}

shinyApp(ui = ui, server = server)

---

EDIT: working solution!

library(shiny)
library(rhandsontable)

ui <- fluidPage(
  br(), br(),
  div(
    style = "border: solid 1px black; overflow-x: scroll;",
    div(
      style = "display: flex; flex-direction: column; width: fit-content;",
      div(
        style = "display: flex; flex-direction: row-reverse; overflow-x: hidden;",
        tags$p(
          "Show text here Only"
        )
      ),
      rHandsontableOutput("mytable")
    )
  )
)

server <- function(input, output, session) {
  output$mytable <- renderRHandsontable({
    data <-
      mtcars %>% cbind(mtcars) %>% cbind(mtcars) %>% cbind(mtcars) %>% head(10)
    rhandsontable(data) %>% hot_table(stretchH = "all", overflow = "hidden")
  })
  
}

shinyApp(ui = ui, server = server)