This release upgrades to a new major version of React Table (#35), which introduces many new features, improvements, and bug fixes. Backward compatibility was kept where possible, but note that there are several breaking changes.
vAlign and headerVAlign arguments in
colDef(), and the new headerVAlign argument in
colGroup() (#142, #177).sticky
argument in colDef() and colGroup() (#19, #72, #141).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.colDef() gains a grouped argument to
customize rendering for grouped cells in groupBy columns
(#33, #94, #148).rowInfo.expanded and cellInfo.expanded
indicating whether the row is expandedcellInfo.selected indicating whether the cell’s row is
selectedstate.page, state.pageSize, and
state.pages for the current page index, page size, and
number of pages in the tablecellInfo.filterValue and
column.filterValue for the column filter value, and
column.setFilter to set the filter valuestate.filters for the column filter valuesstate.searchValue for the table search valuestate.selected for the selected row indicesstate argument to access the table
state (#88).
Custom cell click actions also now receive a state
argument.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).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]}.
columnGroups and groupBy
arguments are provided in reactable(), groupBy
columns are no longer added to a column group automatically (#87).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.detailsCollapseLabel,
deselectAllRowsLabel, deselectAllSubRowsLabel,
and deselectRowLabel arguments in
reactableLang() are now deprecated and no longer used (#167).groupBy and row details columns
(#71).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.pageSizeOptions in
reactable() now works.reactable(), defaultExpanded = TRUE now
expands all rows in the table, not just rows on the first page.reactable(), defaultExpanded = TRUE now
works when column groups are present.groupBy columns,
aggregate functions could take aggregated values which could produce
inaccurate calculations (e.g., when calculating the mean of
values)."max" and "min" aggregate functions
now work on dates, date-times, and strings (#130).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.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).rowHeader argument in
colDef(). Cells in the row names column are automatically
marked up as row headers (#167).reactableTheme(), filterInputStyle now
applies correctly when rerendering a table in Shiny (#186).reactableTheme(), cellPadding now
applies to column group headers correctly.[ or ]) in
their column name now render correctly (#187).reactable(pagination = FALSE) now works correctly on table
data updates (#214).onclick (#150).updateReactable() gains a data argument to
update the data of a reactable instance in Shiny (#49).defaultSelected now works correctly with Crosstalk
linked selection.SharedData
objects with zero or one rows.colFormat() now always formats numbers as a localized
string when locales is specified.reactableTheme(tableBodyStyle = list(flex = "auto")).reactable() now supports linked selection and filtering
with Crosstalk-compatible HTML widgets (#46).reactable() gains a theme argument to
customize the default styling of a table.reactable() gains a language argument to
customize the language strings in a table (#24).reactable() gains a defaultSelected
argument to set default selected rows.reactable() gains a defaultExpanded
argument to set default expanded rows (#23).updateReactable() function to update the selected
rows, expanded rows, or current page of a reactable instance in Shiny
(#20).getReactableState() function to get the state of a
reactable instance in Shiny (#20).colDef() gains a "median" aggregate
function to calculate the median of numbers (#30).".selection" as the column name (#19).reactable(), the rowClass,
rowStyle, and details JavaScript functions now
receive a rowInfo.selected property indicating whether the
row is selected (#20).selectionId argument in reactable()
will be deprecated in a future release. Use
getReactableState() to get the selected rows of a table in
Shiny instead.colFormat(date = TRUE) now formats
YYYY-MM-DD dates correctly (#38).colFormat(percent = TRUE) now works correctly when
viewing tables in IE11.colDef(), the class and
style R functions now handle list-columns correctly.