not able to render in HTML multiple reactables

[ireneadm]

Hi,

I am trying to render two tables which have the same customing and are defined as table1and table2.

my code is:

library(RColorBrewer)
library(reactablefmtr) 
library(htmltools)
library(fontawesome)
tab1 <- tabledata1%>%
  reactable(.,
            theme = default(font_size = 8, header_font_size = 10), pagination = FALSE,
              columns = list(
                col1 = colDef(
                  cell = data_bars(., 
                               fill_color = c("#DE77AE",  "#7FBC41"),#brewer.pal("PiYG", n=8), # color scale
                               bar_height = 10,  
                               number_fmt = scales::percent, 
                               text_color_ref= "col1_ref",
                               text_position = "outside-end")
                ),
                cat= colDef(
                filterable = T, # enable filter properties of the column
                filterInput = function(values, name) {
                  tags$select(
          # Set to undefined to clear the filter (javascript)
          onchange = sprintf("Reactable.setFilter('table-select', '%s', event.target.value || undefined)", name),
          # "All" has an empty value to clear the filter, and is the default option
          tags$option(value = "", "All"),
          lapply(unique(values), tags$option),
          "aria-label" = sprintf("Filter %s", name),
          style = "width: 100%; height: 12px; fontSize = 8px"
        )
      },  
       col_cat=colDef(
         minWidth = 140,
              style = JS("function(rowInfo, colInfo, state) {
              var firstSorted = state.sorted[0]
        // Merge cells if unsorted or sorting by col_cat
        if (!firstSorted || firstSorted.id === 'col_cat') {
          var prevRow = state.pageRows[rowInfo.viewIndex - 1]
          if (prevRow && rowInfo.row['col_cat'] === prevRow['col_cat']) {
            return { visibility: 'hidden' }}}}"),
          #align = "right",
          cell = icon_sets(., icon_ref = "xxx", icon_size = 10, colors = "black")
        ),
  outlined = TRUE,
  elementId = "table-select" 
  ) %>% 
  add_title(title = 'Table 1,
            margin = reactablefmtr::margin(t=12,r=4,b=0,l=0),font_size = 12)

same code for tab2 with the dataframe tabledata2 but when I render I get the correct table titles however inside the table I get two time the table 1 results. How could render the two tables correctly?

[glin]

Hi, this sounds similar to issues I've seen before, but your code seems to be cut off early, and I also can't run it because tabledata1 is missing. Can you post the rest of the code, or if possible, create a minimal example that reproduces the same issue?

[sam-israel]

@ire1990 Could it be that you use the same elementId for both tables? As far as I know, it should be unique per table, as it is used to name the table in HTML.

[hfgit7]

I was also having the same issue with an markdown report. I was trying to generate three different reactable tables using one function but was getting just one table repeated 3 times when the document was rendered. Removing the element_id argument worked for me, thanks @sam-israel!