How to control text wrap/row height and fixed columns in a table (custom html/css styling)?

[Andrew Koehring]

I've been using Shiny at work for a couple months now. The combination of R and web interaction is helping me move multiple tasks out of spreadsheets. So, first, kudos to the dev team. 

The current app I'm developing presents results in the form of a table. Right now, it's a gvisTable, though it could be a standard Shiny Table or DataTable if the solution requires it. Everything renders fine, but readability is a little sub-optimal. I'm using the first column as row labels. The text in these cells is being wrapped. This increases the row height, which I see no option or parameter to control. Also, as the table is scrolled, this label column is hidden making the results less easy to interpret. 

server.R

    output$checkbook <- renderGvis({

        

        #...omitted code for manipulating the data frame...#

        tbl.options <- list(sort='disable', width='100%')

        tbl.formats <- as.list(rep("#,###", length(variety.names)))

        names(tbl.formats) <- variety.names

        gvisTable(t.checkbook, options=tbl.options, formats=tbl.formats)

    })

ui.R

    mainPanel(

        tabsetPanel(

            tabPanel("Checkbook", dateInput("inventory.date", "Inventory Date")

                     , htmlOutput("checkbook"))

        )

    )

After searching for different possibilities, I've got no clue if this type of custom styling is possible. I've seen some resources on manipulating the html/css of the webpage to alter output elements, but I have zero experience as a web developer and have yet to be able to affect any change to how the table is displayed. Can anyone recommend a solution or a good resource to follow in order to get these customizations...or is it not possible in Shiny?

Thanks

[Joe Cheng]

Try putting this right before htmlOutput("checkbook"):

tags$style(type="text/css",

  HTML("#checkbook td:first-child { min-width: 200px }")

)

That should format the first column. 200px means 200 pixels.

To do the same for the second column, change "td:first-child" to "td:first-child+td", and for third column, you'd use "td:first-child+td+td", etc.

Pretty hokey, but I didn't see a nicer way to control widths with gvisTable.

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Andrew Koehring]

Thanks, that worked great. Had no idea what syntax to use to apply custom rendering to a Shiny element. 

The white-space: nowrap property also works, for the case when a known pixel value may be too limiting. Easy enough to apply to the entire table as well. Ex:

tags$style(type="text/css", HTML("#checkbook td { white-space: nowrap }"))

Can anyone offer insight on how to do a frozen lefthand column similar to this example: http://jsfiddle.net/emn13/YMvk9/. I'll continue playing around a bit with different property settings, but so far all I've gotten is a very ugly result. 

[ying chen]

Hi Joe,

I have a similar problem. I have a gvisMerge plot which has a gvisScatterChart at left and a gvisTable at right. How can I center the cells in 1st and 5th columns of the gvisTable at right?

Thanks a lot for the help!

Sean

On Thursday, November 14, 2013 7:44:56 PM UTC-5, Joe Cheng [RStudio] wrote: