Static text above horizontally scrollable table in shiny

huangapple go评论72阅读模式
英文:

Static text above horizontally scrollable table in shiny

问题

我有一个基本的shiny应用程序,使用了rhandsontable。表格很宽,因此在呈现输出时,表格中有一个水平滚动条。例如下面的示例:

Static text above horizontally scrollable table in shiny

现在,对于这个表格,我想在表格的最后4列上方显示一个静态内容,如下所示:

Static text above horizontally scrollable table in shiny

我面临的问题是,当我向左滚动时,文本会跟随滚动。问题如下:

Static text above horizontally scrollable table in shiny

请仔细注意滚动条的位置与表格和文本的关系。重现问题的代码如下:

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

我不确定是否有关于rhandsontable的任何扩展,或者是否可以仅使用CSS或JavaScript来解决这个问题。表格的宽度可能会根据数据和各列的长度而变化。

任何帮助将不胜感激!

英文:

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:

Static text above horizontally scrollable table in shiny

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

Static text above horizontally scrollable table in shiny

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

Static text above horizontally scrollable table in shiny

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 &lt;- fluidPage(br(),
                  br(),
                  
                  fluidRow(column(
                    12,
                    div(style = &quot;text-align:right; margin-right:50px&quot;, &quot;Show text here Only&quot;)
                  ),
                  column(12, rHandsontableOutput(&quot;mytable&quot;))))
  
  server &lt;- function(input, output, session) {
    output$mytable &lt;- renderRHandsontable({
      data &lt;-
        mtcars %&gt;% cbind(mtcars) %&gt;% cbind(mtcars) %&gt;% cbind(mtcars) %&gt;% head(10)
      rhandsontable(data, strecH = &quot;all&quot;)
    })
    
  }
  
  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!

答案1

得分: 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 &lt;- fluidPage(
  br(), br(),
  div(
    style = &quot;position: absolute;&quot;,
    div(
      style = &quot;position: relative; width: auto; float: right;&quot;,
      tags$p(
        style = 
          &quot;position: absolute; left: 80%; right: 0; top: 0; width: 150px; height: 50px; transform: translateX(-100%);&quot;, 
        &quot;Show text here Only&quot;
      ),
    ),
    div(
      style = &quot;clear: right; height: 5px;&quot;
    ),
    br(), br(),
    rHandsontableOutput(&quot;mytable&quot;)
  )      
)

server &lt;- function(input, output, session) {
  output$mytable &lt;- renderRHandsontable({
    data &lt;-
      mtcars %&gt;% cbind(mtcars) %&gt;% cbind(mtcars) %&gt;% cbind(mtcars) %&gt;% head(10)
    rhandsontable(data, stretchH = &quot;all&quot;)
  })
  
}

shinyApp(ui = ui, server = server)

EDIT: working solution!

library(shiny)
library(rhandsontable)

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

server &lt;- function(input, output, session) {
  output$mytable &lt;- renderRHandsontable({
    data &lt;-
      mtcars %&gt;% cbind(mtcars) %&gt;% cbind(mtcars) %&gt;% cbind(mtcars) %&gt;% head(10)
    rhandsontable(data) %&gt;% hot_table(stretchH = &quot;all&quot;, overflow = &quot;hidden&quot;)
  })
  
}

shinyApp(ui = ui, server = server)

Static text above horizontally scrollable table in shiny

huangapple
  • 本文由 发表于 2023年5月22日 23:49:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76307906.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定