Search code examples
rreactable

Add two links in the same cell of a reactable table?


I have a beautiful interactive table created with the R package {reactable}.

I would like to put two links in the same cell, where the URLs come from data frame. Is this possible with the reactable package?

For example, if the data frame below is my "source" data, can I create a reactable table with both of these URL linked in a single cell?

df <- data.frame(
  ID = "Link to the right of this text",
  url1_text = "Pharmaverse Repo",
  url1 = "https://github.com/pharmaverse/falcon",
  url2_text = "ddsjoberg forked Repo",
  url2 = "https://github.com/ddsjoberg/falcon"
)

Thank you!


Solution

  • Here is one possible approach to put both of your links in one cell making using of the index argument and by wrapping in div:

    library(reactable)
    library(dplyr, warn = FALSE)
    
    df |>
      select(ID, url1) |>
      reactable(
        columns = list(
          url1 = colDef(
            name = "URL",
            cell = function(value, index) {
              label1 <- df[index, "url1_text"]
              label2 <- df[index, "url2_text"]
              url1 <- df[index, "url1"]
              url2 <- df[index, "url2"]
              htmltools::div(
                htmltools::p(
                  htmltools::tags$a(href = url1, target = "_blank", label1)
                ),
                htmltools::p(
                  htmltools::tags$a(href = url2, target = "_blank", label2)
                )
              )
            }
          )
        )
      )
    

    enter image description here