Skip to content

v0.3.0
Compare
Choose a tag to compare
@glin glin released this 27 May 01:33
· 204 commits to main since this release
v0.3.0
7ab70c0

Documentation - reactable 0.3.0

This release upgrades to a new major version of React Table (#35), which brings many new features, improvements, and bug fixes. reactable has been largely rewritten to take advantage of React Table's new approach as a flexible table utility rather than a table component.

This means it'll be easier to add new custom features, customize styling and markup, and maintain reactable in the future. Most of the features and fixes in this release would not have been possible or easy to do without this upgrade.

Backward compatibility was kept where possible, but note that there are several breaking changes, particularly around the JavaScript API.

New features

  • Cell content can now be vertically aligned using the new vAlign and headerVAlign arguments in colDef(), and the new headerVAlign argument in colGroup() (#142, #177).
  • Sticky columns are now supported using a new sticky argument in colDef() and colGroup() (#19, #72, #141).
  • New JavaScript API to manipulate or access tables from JavaScript. Use this to create custom interactive controls, such as CSV download buttons, custom filter inputs, or toggle buttons for row grouping and row expansion (#11, #28, #182, #194). Learn more in the JavaScript API guide or the JavaScript API examples.
  • Column filtering and table searching can now be customized. Learn more in the Custom Filtering guide.
    • reactable() gains a searchMethod argument to use a custom JavaScript function for global table searching (#222).
    • colDef() gains a filterMethod argument to use a custom JavaScript function for column filtering (#9, #90, #145).
    • colDef() gains a filterInput argument to render a custom filter input for column filtering (#9).
  • reactable() gains a paginateSubRows argument to include grouped sub rows in pagination. This is recommended for grouped tables with a large number of rows where expanded rows may not all fit on one page.
  • Expanded rows now stay expanded on sorting, filtering, and pagination changes. Previously, expanded rows were always collapsed on sorting and pagination changes, and incorrectly persisted on filtering changes (#39).
  • Aggregated rows can now be selected when multiple selection is enabled.
  • colDef() gains a grouped argument to customize rendering for grouped cells in groupBy columns (#33, #94, #148).
  • Column group headers can now be resized.
  • Column group headers and filters are now sticky. Previously, only column headers were sticky (#107).
  • JavaScript render functions and style functions receive new properties:
    • rowInfo.expanded and cellInfo.expanded indicating whether the row is expanded
    • cellInfo.selected indicating whether the cell's row is selected
    • state.page, state.pageSize, and state.pages for the current page index, page size, and number of pages in the table
    • cellInfo.filterValue and column.filterValue for the column filter value, and column.setFilter to set the filter value
    • state.filters for the column filter values
    • state.searchValue for the table search value
    • state.selected for the selected row indices
  • JavaScript render functions for cells, headers, footers, and row details receive a new state argument to access the table state (#88). Custom cell click actions also now receive a state argument.
  • R render functions for row details now receive an additional argument for the column name (@ksnap28, #155).
  • colDef() gains a searchable argument to enable or disable global table searching. Columns can be excluded from searching using colDef(searchable = FALSE), and hidden columns can be included in searching using colDef(searchable = TRUE) (#217).

Breaking changes

JavaScript render and style functions

Several properties and arguments have been renamed or moved for consistency with the rest of the API. These properties were not removed unless they were very rarely used, so most code should continue to work upon upgrading.

  • The rowInfo.row property is now deprecated, and has been renamed to rowInfo.values. rowInfo.row remains supported, but replace usages with rowInfo.values when possible.

    // Old
function(rowInfo) {
  rowInfo.row
}

// New
function(rowInfo) {
  rowInfo.values
}

  • The colInfo.column and colInfo.data properties in header and cell render functions are now deprecated. The colInfo object now contains all of the same properties as colInfo.column, and is now referred to as column in the documentation. When possible, replace usages of colInfo with column, colInfo.column with column, and colInfo.data with state.data or state.sortedData.

    // Old
function(colInfo) {
  colInfo.column.id
  colInfo.data
}

// New
function(column, state) {
  column.id
  state.data
}

  • The state.expanded property has been removed. To check whether a row is expanded, use rowInfo.expanded instead.

    // Old
function(rowInfo, column, state) {
  if (state.expanded[rowInfo.index]) { // row is expanded ... }
}

// New
function(rowInfo, column, state) {
  if (rowInfo.expanded) { // row is expanded ... }
}

  • The rowInfo.page and cellInfo.page properties have been removed. To get the current page index of the table, use state.page instead.

    // Old
function(rowInfo, column, state) {
  rowInfo.page
}

// New
function(rowInfo, column, state) {
  state.page
}

  • When accessing row data in JavaScript render functions and style functions:

    • Date and time values are now represented in UTC time (ISO 8601 format), rather than local time without a timezone.

      function(cellInfo) {
  // Old
  cellInfo.value // 2022-05-22T19:30:00

  // New
  cellInfo.value // 2022-05-22T19:30:00Z

  // With a UTC time, it's much easier to format dates in the user's local time
  return new Date(cellInfo.value).toLocaleString()
}

    • Single values (length-1 vectors) in list-columns are no longer represented as arrays (i.e., data is now serialized using jsonlite::toJSON(auto_unbox = TRUE)). For example, list(x = 1) in R is now represented as {x: 1} in JavaScript instead of {x: [1]}.

Other changes

  • When both columnGroups and groupBy arguments are provided in reactable(), groupBy columns are no longer added to a column group automatically (#87).
  • The defaultGroupHeader argument in reactableLang() is now deprecated and no longer used. Use the columnGroups argument in reactable() to customize the column group header for groupBy columns.
  • The detailsCollapseLabel, deselectAllRowsLabel, deselectAllSubRowsLabel, and deselectRowLabel arguments in reactableLang() are now deprecated and no longer used (#167).
  • The row selection column is now always placed as the first column in the table, even before the groupBy and row details columns (#71).
  • Increased the default width of the row selection column to match the row details column (45px).

Minor improvements and bug fixes

  • Setting show = FALSE as a default value in defaultColDef() now works (@csgillespie, #105). Setting sortNALast, html, and na to their default values in defaultColDef() also now works.
  • Using a single value for pageSizeOptions in reactable() now works.
  • Column resizing is now limited by the min and max width of the column.
  • Column group headers and filter cells in fixed height tables now display properly in Safari, Chrome, and the RStudio Viewer (#76).
  • In reactable(), defaultExpanded = TRUE now expands all rows in the table, not just rows on the first page.
  • In reactable(), defaultExpanded = TRUE now works when column groups are present.
  • Aggregated cell values are now recalculated when filtering or searching the table.
  • Aggregate functions now always take the unaggregated values in the column. Previously, if there were multiple groupBy columns, aggregate functions could take aggregated values which could produce inaccurate calculations (e.g., when calculating the mean of values).
  • The "max" and "min" aggregate functions now work on dates, date-times, and strings (#130).
  • Column formatters no longer apply to empty aggregated cell values.
  • Searching now properly ignores the row details and selection columns.
  • Selected rows now reset when the table data changes in Shiny (#110).
  • When selecting rows, errors from other Crosstalk widgets no longer cause the table to disappear.
  • HTML widgets and HTML dependencies in nested tables now render correctly (#125).
  • Tables are now displayed with full width when rendered inside an R Markdown document or R Notebook (#163).
  • reactable() now works for data frames with difftime objects and objects with custom classes (#164).
  • colFormat() now formats dates and times in the user's time zone, rather than ignoring time zones.
  • Row expand buttons no longer change their accessible labels based on expanded state. They now use the aria-expanded attribute to indicate expanded or collapsed state, and use "Toggle details" as their default label (#167).
  • reactableLang() gains the groupExpandLabel argument to customize the accessible label for row group expand buttons (#167).
  • Row selection checkboxes and radio buttons no longer change their accessible labels based on selection state (#167).
  • Cells can now be marked up as row headers for assistive technologies, using the new rowHeader argument in colDef(). Cells in the row names column are automatically marked up as row headers (#167).
  • The page info and "no rows found" message are now marked as ARIA live regions so page changes can be announced by assistive technologies when searching, filtering, or paging through the table (#167).
  • Scrollable tables are now focusable and scrollable when using a keyboard (#167).
  • In reactableTheme(), filterInputStyle now applies correctly when rerendering a table in Shiny (#186).
  • In reactableTheme(), cellPadding now applies to column group headers correctly.
  • Columns with square brackets ([ or ]) in their column name now render correctly (#187).
  • Disabling pagination using reactable(pagination = FALSE) now works correctly on table data updates (#214).
  • More HTML attributes are supported when rendering HTML tags, such as onclick (#150).
  • Improved initial load time of tables with a large number of rows (up to 50% faster in some cases).

Contributors

csgillespie and ksnap28
Assets 2
Loading