Height-Width and scrolling options in excelTable under shinyApp

[shastryvinay]

Hello!

@Swechhya

This excelTable and shiny integration functions are really awesome, thanks for the package!

I'm using excelTable under a shinyApp, but it is not fitting properly inside a box( or even without a box), also I'm unable to adjust the Height and Width of excelTable under shiny.

If I make fullscreen='TRUE', it is covering full screen from left but going out of the window on the right side. I want to fix the table with some specified height and width, or else any options like auto which fits perfectly in the table similar to datatable from the package DT.

Not sure if there any options already to achieve this, or else it will be really helpful if you can add this options.

Please suggest.

Thanks,

Sample Image:

[Swechhya]

@shastryvinay Thanks for reporting the issue. Could you please add a code to replicate the bug?

[wyu]

Hi, I think I'm hitting a related issue as @shastryvinay. What I would like to do is to increase the height of the table in a Shiny app.

The minimum code to illustrate the problem is as below. You need to unzip the attached zip file first to get the "inventory.rds" file.

dat = readRDS("inventory.rds") excelTable(data=dat$data, autoFill=TRUE);

The "autoFill" doesn't seem to work. In the RStudio, no matter what size of the Viewer is, I'll always get only a small table as shown in the pic.

Sorry for not being precise about the issue. The actual Shiny app is quite large, so it's hard to share it here. I believe the RStudio code is related to the same issue.

Thanks! Wen

example.zip

excelTable(data=dat$data, autoFill=TRUE)

[wyu]

Looks like I found a solution to my own question!

The key is the following codes in jexcel.js. In order for autoFill to work, I need to set autoWidth=FALSE.

excelTable(data=dat$data, autoFill=TRUE, autoWidth=FALSE);

Now, the table will occupy the full height of the container. I've also verified in the Shiny app with the excelOutput call like below.

excelOutput(ns("Inventory"), width = "100%", height = 800))

Thanks for your wonderful works!

Wen

if(!autoWidth && autoFill){ excel.table.setAttribute("style", "width: 100%; height: 100%; white-space: normal;") container.getElementsByClassName("jexcel_content")[0].setAttribute("style", "height:100%") }

[Mikea0228]

Hi @Swechhya , I'm loving this package so far, much more friendly than rhandsontable .

I also am having a similar problem to @wyu but their solution did not work for me. There seems to be some inconsistencies with combinations of autoFill and autoWidth . Here is a minimal example showing all four combinations of the two flags showing the varying behavior. You can see that for autoFill =TRUE and autoWidth=FALSE the table spills out of the 500 pixel output.

Thanks again for putting this package together, it's very much appreciated

library(shiny)
library(shinymaterial)
library(excelR)

ui <- material_page(
    title = "Autofill bug",
    material_row(
        material_column(
            width = 6,
            material_card(
                title = "autofill = FALSE, autoWidth = TRUE",
                excelOutput("fill_F_width_T", height = "500px", width = "100%"),
                h6("next element")
            )
        ),

        material_column(
            width = 6,
            material_card(
                title =  "autofill = TRUE, autoWidth = TRUE",
                excelOutput("fill_T_width_T", height = "500px", width = "100%"),
                h6("next element")
            )
        )
    ),
    material_row(
        material_column(
            width = 6,
            material_card(
                title = "autoFill = FALSE, autoWidth = FALSE",
                excelOutput("fill_F_width_F", height = "500px", width = "100%"),
                h6("next element")

            )
        ),
        material_column(
            width = 6,
            material_card(
                title = "autoFill = TRUE, autoWidth = FALSE",
                excelOutput("fill_T_width_F", height = "500px", width = "100%"),
                h6("next element")

            )
        ),
    )
)

server <- function(input, output) {
    output$fill_T_width_T <- renderExcel({
        excelTable(data = iris,
                   autoFill = TRUE,
                   autoWidth = TRUE)
    })
    output$fill_T_width_F <- renderExcel({
        excelTable(data = iris,
                   autoFill = TRUE,
                   autoWidth = FALSE)
    })
    output$fill_F_width_T <- renderExcel({
        excelTable(data = iris,
                   autoFill = FALSE,
                   autoWidth = TRUE)
    })
    output$fill_F_width_F <- renderExcel({
        excelTable(data = iris,
                   autoFill = FALSE,
                   autoWidth = FALSE)
    })
}

shinyApp(ui = ui, server = server)

[Mikea0228]

I didn't manage to work out what was happening with autoFill and autoWidth but I did find an alternative solution that works great. Thanks to @Swechhya 's inclusion of ... in the arguments for exceltable(), I was able to use the Jspreadsheet documentation to pass tableHeight ="100%" to the underlying JS. Here is a minimal example of how to do this plus an additional example where the excelR table resizes with changing viewport

library(shiny)
library(shinymaterial)
library(excelR)

ui <- material_page(title = "A longer table",

                    material_card(
                        title = "A table",
                        excelOutput("iris", height = "500px", width = "100%"),

                        h6("next element")
                    ))

server <- function(input, output) {
    output$iris <- renderExcel({
        excelTable(data = iris,
                   autoWidth = TRUE,
                   tableHeight = "100%")
    })

}

shinyApp(ui = ui, server = server)

and

library(shiny)
library(shinymaterial)
library(excelR)

ui <- material_page(title = "A longer table (responsive to window resizings)",
                    tags$style(HTML(
                        ".reactiveExcelR {
                    height: calc(100vh - 200px);
                    }
                    "
                    )),
                    material_card(
                        title = "A table",
                        div(class = "reactiveExcelR",
                            excelOutput(
                                "iris", height = "100%", width = "100%"
                            )),

                        h6("next element")
                    ))

server <- function(input, output) {
    output$iris <- renderExcel({
        excelTable(data = iris,
                   autoWidth = TRUE,
                   tableHeight = "100%")
    })

}

shinyApp(ui = ui, server = server)

[kristofkelemen]

Hi, using excelTable in Shiny. However I set it, table will not be wider than the container. I am adding lots of columns all the time and would love to have horizontal scrolling for wide tables. Is it already there, am I missing something, or is that not yet possible? Thanks.

[chrisoswald]

Really no possibiity for horzizontal scrolling?

[bariscr]

Horizontal scrolling is possible with the addition of some JS code in the ui:

tags$head( tags$script(HTML(" $(document).on('shiny:connected', function() { // Target the table's container by its CSS class or ID $('.shiny-output-error').closest('.shiny-html-output').css('overflow-x', 'auto'); }); ")) ),