Server-Side Processing

Rendering a reactable with a lot of data can be inefficient. The initial loading will take some time, and a lot of memory will be thrown to the browser.

A more efficient approach is to render only the data that is needed to be displayed.

reactable_extras_ui() and reactalbe_extras_server() is a wrapper for reactable::reactableOutput() and reactable::renderReactable({reactable(...)}). It renders only a subset of a large data in the server memory. This almost instantly renders the desired page and keeps the amount of memory used in the browser minimal.

Consider this example data:

library(shiny)
library(reactable)
library(reactable.extras)

mtcars_ultra <- purrr::map(
  seq(1L, 20000L, by = 1L),
  ~ {
    temp_df <- mtcars
    temp_df$make <- rownames(temp_df)
    rownames(temp_df) <- NULL
    temp_df <-
      dplyr::mutate(temp_df, id_row = paste0("id_", dplyr::row_number(), "_", .x))

    temp_df
  },
  .progress = TRUE
) |>
  purrr::list_rbind()

And compare the difference in initial load time and amount of memory used in the browser when loading all the data at once vs loading only the data needed for the page.

# All of the data rendered all at once
shinyApp(
  reactableOutput("test"),
  function(input, output, server) {
    output$test <- renderReactable(
      reactable(
        data = mtcars_ultra,
        columns = list(
          mpg = colDef(name = "Miles per Gallon"),
          cyl = colDef(name = "Cylinders"),
          disp = colDef(name = "Displacement")
        ),
        defaultPageSize = 16
      )
    )
  }
)

# Only the subset of the data needed for the page is rendered
shinyApp(
  reactable_extras_ui("test"),
  function(input, output, server) {
    reactable_extras_server(
      "test",
      data = mtcars_ultra,
      columns = list(
        mpg = colDef(name = "Miles per Gallon"),
        cyl = colDef(name = "Cylinders"),
        disp = colDef(name = "Displacement")
      ),
      total_pages = 4e4
    )
  }
)

Server-Side Processing	Rendering All Data At Once

You can Also use server side processing with custom inputs

shinyApp(
  reactable_extras_ui("test"),
  function(input, output, server) {
    reactable_extras_server(
      "test",
      filterable = TRUE,
      searchable = TRUE,
      selection = "multiple",
      data = mtcars_ultra,
      columns = list(
        mpg = colDef(name = "Miles per Gallon"),
        cyl = colDef(name = "Cylinders"),
        disp = colDef(
          name = "Displacement",
          cell = button_extra("button")
        )
      ),
      total_pages = 4e4
    )
  }
)