How to (auto)-set the column widths?

[ShixiangWang]

Dear @glin ,

I am currently facing challenges in setting appropriate widths for my multi-column tables. Despite numerous adjustments, I am not yet satisfied with the outcomes. My goal is to ensure that all column headers are clearly visible and that the widths are optimally suited for the content in each column. I have attempted to set a fixed table width and have sought advice from discussions on Stack Overflow, but the solutions have not been effective for my specific dataset.

columns = list(
          id = colDef(name = "Cohort ID", sticky = "left"),
          name = colDef(
            name = "Cohort Name",
            sticky = "left",
            # Add a right border style to visually distinguish the sticky column
            style = list(borderRight = "1px solid #eee"),
            headerStyle = list(borderRight = "1px solid #eee")
          ),
          cancer_type = colDef(name = "Cancer Type", minWidth = 50),
          treatment = colDef(name = "Treatment"),
          drug = colDef(name = "Drug"),
          time = colDef(name = "Sampling Time", minWidth = 60),
          N = colDef(name = "N", minWidth = 30),
          year = colDef(name = "Year", minWidth = 40),
          Label = colDef(name = "Label", minWidth = 30),
          Surv = colDef(name = "Surv Info", minWidth = 60),
          doi = colDef(name = "DOI", html = TRUE, cell = htmlwidgets::JS('
            function(cellInfo) {
              // Render as paper link
              const url = `https://doi.org/${cellInfo.value}`
              return `<a href="${url}" target="_blank">${cellInfo.value}</a>`
            }
          '))
        )

Best,

Shixiang

[glin]

So.. unfortunately this is an inherent limitation of how reactable works, and it's not possible to automatically set column widths based on content. The best you can do for now is play with the minWidth column settings, make the table resizable for users, and/or condense columns.

Another option would be to make the columns wider than the page can fit, and have them scroll horizontally. Like in the sticky columns example: https://glin.github.io/reactable/articles/examples.html#sticky-columns. It's also not ideal, but that is an option.

In the future, it could be possible for reactable to eventually support automatic column widths based on content, like you'd expect from a standard HTML table. That would require significant changes to the library though.

And just generally, fitting lots of column information in a single-page readable table is just a tricky task. You might also consider design-level changes like merging multiple columns. An example of this would be in the Popular Movies demo, https://glin.github.io/reactable/articles/popular-movies/popular-movies.html

[ShixiangWang]

Thank you!