How to change alignment of row header column of table rendered using R package rhandsontable?-CodePudding

In the below minimal code examples (first one without Shiny, second one with Shiny), I'm trying to figure out how to change the alignment of the contents of the row header column in this table rendered using R package rhandsontable. The row header column contents are currently centered, I'm trying to see how you can change the aligment to left and right. I tried adding %>% hot_col(0, halign='htLeft') but this only works for non-header columns (it doesn't accept the value I tried of 0 for accessing the row header column).

Any suggestions for how to do this? I assume this takes some CSS or js.

Code version without Shiny:

library(rhandsontable)

DF = data.frame(
        integer = 1:5,
        numeric = rnorm(5),
        factor_allow = factor(letters[1:5], 
                              levels = letters[5:1],
                              ordered = TRUE
                              ),
        stringsAsFactors = FALSE)

rownames(DF) <- c("One","Two","Three","Four","Five")

rhandsontable(DF,rowHeaderWidth = 96) %>%
hot_col("factor_allow", allowInvalid = TRUE)

Code version with Shiny:

library(rhandsontable)
library(shiny)


DF = data.frame(
        integer = 1:5,
        numeric = rnorm(5),
        factor_allow = factor(letters[1:5], 
          levels = letters[5:1],
          ordered = TRUE),
        stringsAsFactors = FALSE
      )

rownames(DF) <- c("One","Two","Three","Four","Five")


ui <- fluidPage(br(), rHandsontableOutput('my_table'))

server <- function(input, output, session) {

  output$my_table <- renderRHandsontable({
    rhandsontable(DF) %>%
    hot_col("factor_allow", allowInvalid = TRUE)
  })

}

shinyApp(ui,server)

I_O solution for code without Shiny (see Answers for solution for code with Shiny):

library(rhandsontable)
library(htmltools)

DF = data.frame(
        integer = 1:5,
        numeric = rnorm(5),
        factor_allow = factor(letters[1:5], 
                              levels = letters[5:1],
                              ordered = TRUE
                              ),
        stringsAsFactors = FALSE)

rownames(DF) <- c("One","Two","Three","Four","Five")

rhandsontable(DF,rowHeaderWidth = 96) %>%
hot_col("factor_allow", allowInvalid = TRUE)

browsable(
  tagList(list(
    tags$head(
      tags$style("th{text-align:right !important; ## [1]
                          color:red !important}" ## [2]
      ) 
    ),
    my_table ## don't forget to specify widget
  ))
)

CodePudding user response：

As you suggested, modifying the CSS is one approach. That should be possible via a renderer function, but you could also include custom CSS. In your case, you'd probably best target the th element (the dedicated class .colHeader is applied to a <span> within which text aligning doesn't make much sense).

If you're serving the table as part of a Shiny app, here's how. Example:

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      th{text-align:right !important;
         width: 96px; ## you can specify the width here, too
      "))
  ),
## ...
rHandsontableOutput('my_table')
## ...
)

In a larger project, you might prefer to maintain CSS styling in a separate file (see section File-based CSS of above ressource).

Otherwise, you could try this:

library(htmltools)

## ...
my_table <- rhandsontable(DF,rowHeaderWidth = 96) %>%
            hot_col("factor_allow", allowInvalid = TRUE)
## ...

browsable(
  tagList(list(
    tags$head(
           tags$style("th{text-align:right !important; ## [1]
                          color:red !important}" ## [2]
            ) 
         ),
    my_table ## don't forget to specify widget
  ))
)

[1] note the !important to override other definitions [2] just to verify function at first glance, remove later ...