Create an interactive data table

reactable() creates a data table from tabular data with sorting and pagination by default. The data table is an HTML widget that can be used in R Markdown documents and Shiny applications, or viewed from an R console.

Usage

reactable(
  data,
  columns = NULL,
  columnGroups = NULL,
  rownames = NULL,
  groupBy = NULL,
  sortable = TRUE,
  resizable = FALSE,
  filterable = FALSE,
  searchable = FALSE,
  searchMethod = NULL,
  defaultColDef = NULL,
  defaultColGroup = NULL,
  defaultSortOrder = "asc",
  defaultSorted = NULL,
  pagination = TRUE,
  defaultPageSize = 10,
  showPageSizeOptions = FALSE,
  pageSizeOptions = c(10, 25, 50, 100),
  paginationType = "numbers",
  showPagination = NULL,
  showPageInfo = TRUE,
  minRows = 1,
  paginateSubRows = FALSE,
  details = NULL,
  defaultExpanded = FALSE,
  selection = NULL,
  defaultSelected = NULL,
  onClick = NULL,
  highlight = FALSE,
  outlined = FALSE,
  bordered = FALSE,
  borderless = FALSE,
  striped = FALSE,
  compact = FALSE,
  wrap = TRUE,
  showSortIcon = TRUE,
  showSortable = FALSE,
  class = NULL,
  style = NULL,
  rowClass = NULL,
  rowStyle = NULL,
  fullWidth = TRUE,
  width = NULL,
  height = NULL,
  theme = getOption("reactable.theme"),
  language = getOption("reactable.language"),
  meta = NULL,
  elementId = NULL,
  static = getOption("reactable.static", FALSE),
  selectionId = NULL
)

Arguments

data

A data frame or matrix.

Can also be a crosstalk::SharedData object that wraps a data frame.

columns

Named list of column definitions. See colDef().

columnGroups

List of column group definitions. See colGroup().

rownames

Show row names? Defaults to TRUE if the data has row names.

To customize the row names column, use ".rownames" as the column name.

Cells in the row names column are automatically marked up as row headers for assistive technologies.

groupBy

Character vector of column names to group by.

To aggregate data when rows are grouped, use the aggregate argument in colDef().

sortable

Enable sorting? Defaults to TRUE.

resizable

Enable column resizing?

filterable

Enable column filtering?

searchable

Enable global table searching?

searchMethod

Custom search method to use for global table searching. A JS() function that takes an array of row objects, an array of column IDs, and the search value as arguments, and returns the filtered array of row objects.

defaultColDef

Default column definition used by every column. See colDef().

defaultColGroup

Default column group definition used by every column group. See colGroup().

defaultSortOrder

Default sort order. Either "asc" for ascending order or "desc" for descending order. Defaults to "asc".

defaultSorted

Character vector of column names to sort by default. Or to customize sort order, a named list with values of "asc" or "desc".

pagination

Enable pagination? Defaults to TRUE.

defaultPageSize

Default page size for the table. Defaults to 10.

showPageSizeOptions

Show page size options?

pageSizeOptions

Page size options for the table. Defaults to 10, 25, 50, 100.

paginationType

Pagination control to use. Either "numbers" for page number buttons (the default), "jump" for a page jump, or "simple" to show 'Previous' and 'Next' buttons only.

showPagination

Show pagination? Defaults to TRUE if the table has more than one page.

showPageInfo

Show page info? Defaults to TRUE.

minRows

Minimum number of rows to show per page. Defaults to 1.

paginateSubRows

When rows are grouped, paginate sub rows? Defaults to FALSE.

details

Additional content to display when expanding a row. An R function that takes the row index and column name as arguments, or a JS() function that takes a row info object as an argument. Can also be a colDef() to customize the details expander column.

defaultExpanded

Expand all rows by default?

selection

Enable row selection? Either "multiple" or "single" for multiple or single row selection.

To get the selected rows in Shiny, use getReactableState().

To customize the selection column, use ".selection" as the column name.

defaultSelected

A numeric vector of default selected row indices.

onClick

Action to take when clicking a cell. Either "expand" to expand the row, "select" to select the row, or a JS() function that takes a row info object, column object, and table state object as arguments.

highlight

Highlight table rows on hover?

outlined

Add borders around the table?

bordered

Add borders around the table and every cell?

borderless

Remove inner borders from table?

striped

Add zebra-striping to table rows?

compact

Make tables more compact?

wrap

Enable text wrapping? If TRUE (the default), long text will be wrapped to multiple lines. If FALSE, text will be truncated to fit on one line.

showSortIcon

Show a sort icon when sorting columns?

showSortable

Show an indicator on sortable columns?

class

Additional CSS classes to apply to the table.

style

Inline styles to apply to the table. A named list or character string.

Note that if style is a named list, property names should be camelCased.

rowClass

Additional CSS classes to apply to table rows. A character string, a JS() function that takes a row info object and table state object as arguments, or an R function that takes a row index argument.

rowStyle

Inline styles to apply to table rows. A named list, character string, JS() function that takes a row info object and table state object as arguments, or an R function that takes a row index argument.

Note that if rowStyle is a named list, property names should be camelCased. If rowStyle is a JS() function, it should return a JavaScript object with camelCased property names.

fullWidth

Stretch the table to fill the full width of its container? Defaults to TRUE.

width

Width of the table in pixels. Defaults to "auto" for automatic sizing.

To set the width of a column, see colDef().

height

Height of the table in pixels. Defaults to "auto" for automatic sizing.

theme

Theme options for the table, specified by reactableTheme(). Defaults to the global reactable.theme option. Can also be a function that returns a reactableTheme() or NULL.

language

Language options for the table, specified by reactableLang(). Defaults to the global reactable.language option.

meta

Custom metadata to pass to JavaScript render functions or style functions. A named list of values that can also be JS() expressions or functions. Custom metadata can be accessed using the state.meta property, and updated using updateReactable() in Shiny or Reactable.setMeta() in the JavaScript API.

elementId

Element ID for the widget.

static

Render the table to static HTML? Defaults to the global reactable.static option. Requires the V8 package, which is not installed with reactable by default.

With static rendering, tables are pre-rendered to their initial HTML so they appear immediately without any flash of content. Tables are then made interactive and subsequently rendered by JavaScript as needed.

Static rendering is experimental, and is not supported for tables rendered via reactableOutput() in Shiny.

selectionId

Deprecated. Use getReactableState() to get the selected rows in Shiny.

Value

A reactable HTML widget that can be used in R Markdown documents and Shiny applications, or viewed from an R console.

Note

See the online documentation for additional details and examples.

Examples

# Basic usage
reactable(iris)


# Grouping and aggregation
reactable(
  iris,
  groupBy = "Species",
  columns = list(
    Sepal.Length = colDef(aggregate = "count"),
    Sepal.Width = colDef(aggregate = "mean"),
    Petal.Length = colDef(aggregate = "sum"),
    Petal.Width = colDef(aggregate = "max")
  )
)


# Row details
reactable(iris, details = function(index) {
  htmltools::div(
    "Details for row: ", index,
    htmltools::tags$pre(paste(capture.output(iris[index, ]), collapse = "\n"))
  )
})


# Conditional styling
reactable(sleep, columns = list(
  extra = colDef(style = function(value) {
    if (value > 0) {
      color <- "green"
    } else if (value < 0) {
      color <- "red"
    } else {
      color <- "#777"
    }
    list(color = color, fontWeight = "bold")
  })
))

Usage

Arguments

Value

Note

See also

Examples