reactabular v8.0.0 Release Notes
Release Date: 2016-11-27 // over 7 years ago-
๐ This is a major release with plenty of improvements, but also some breakage so go through the following changes carefully. The biggest changes have to do with the column definition (
formatters [<fn>]
overformat: <fn>
, no support for nested columns out of the box), resolving (composes better), andreactabular-easy
partitioning (better API for the future).Reorganization
๐
reactabular
wrapper package has been dropped. As a result no standalone builds are available anymore. This has to do with the fact that the project has been split up into smaller parts that maintaining one didn't make any sense.This means that in order to use the basic table without any bells and whistles you will have to
import * as Table from 'reactabular-table';
overimport { Table } from 'reactabular';
๐ฆ The following packages have been moved to standalone projects:
reactabular-search
is searchtabular now.reactabular-tree
is treetabular now.reactabular-resolve
is table-resolver now.reactabular-highlight
has been integrated tosearchtabular
. You getsearch.highlighter
,search.highlightCell
, andsearch.highlightValue
now.reactabular-search-columns
has been integrated tosearchtabular
. You can access it throughsearch.Columns
.reactabular-search-field
has been integrated tosearchtabular
. You can access it throughsearch.Field
.reactabular-sort
is sortabular now.reactabular-select
was integrated into selectabular. You can access it throughimport { byArrowKeys } from 'selectabular';
.react-edit
is functionally the same as before except it is in a repository of its own. This makes it possible to keep its versioning out of sync with the rest as it moves slower.reactabular-visibility-toggles
has been pushed to react-visibility-toggles with several improvements and full test coverage.
reactabular-utils
doesn't exist anymore as the functionality has been split up intoreactabular-table
andtable-resolver
.๐ No More Nested Support Out of the Box
๐ Reactabular doesn't support nested column definitions out of the box anymore. Earlier they did, but the logic didn't. To fix this, the related resolving pass was moved outside of the core. Even though it's more code, now all the logic (search/sorting/...) works with nested definitions and you have control over naming and the conventions you prefer.
- Breaking -
resizableColumn
isn't included in the core distribution anymore. You should usereactabular-resizable
instead. - Breaking - Official support for lodash 3 has been dropped.
reactabular-dnd
- Feature - Expose
dnd.draggableRow
. This allows you to use row dragging with virtualization. Example:body.row = dnd.draggableRow(Virtualized.BodyRow)
. - Feature -
dnd.draggableRow
hooks into row level (onRow({ rowId })
) propsonCanMove({ rowId })
,onMoveStart({ rowId })
,onMove({ sourceRowId, targetRowId })
, andonMoveEnd({ rowId })
instead of justonMove
. - Feature - Fail fas if
moveLabels
is missing data. - Feature - Expose
move
core algorithm. This can be useful standalone.
reactabular-easy
- Feature - Support row dragging. This has been exposed through
onMoveRow({ sourceRowId, targetRowId })
. You are expected to call an algorithm that actually moves the row there.reactabular-dnd
implements these. Note that this works only while there is no sorting or search query in place! - Bug fix - Inject
className
per row only if it has been defined atonRow
. - Bug fix - If a column has width set, set
maxWidth
to it as well. #238 - Breaking - The API has been partitioned so that the column definition related functionality is bound separately. This makes it possible to implement nested column functionality on top of it. Consider the example below and see the README for more:
... render() { ... const newColumns = easy.bindColumns({ toggleChildrenProps: { className: 'toggle-children' }, sortingColumns, rows, idField, parentField, props: this.props, // Handlers onMoveColumns: this.onMoveColumns, onSort: this.onSort, onDragColumn: this.onDragColumn, onToggleShowingChildren: this.onToggleShowingChildren })(columns); ... } ...
reactabular-table
- Feature - Pass whole column through header/body for extra parameters.
- Feature - Support
onRow
atTable.Header
. - Feature - Allow
Table.Header
to acceptheaderRows
(an array of column definitions) to override default columns. See below. - Feature - Move
utils.resolveRowKey
,utils.evaluateFormatters
,utils.evaluateTransforms
,utils.mergeProps
,utils.columnsAreEqual
toreactabular-table
. - Bug fix - Skip functions at
BodyRow
shouldComponentUpdate
. - Breaking - Generalize
format: <fn>
asformatters: [<fn>]
. The formatters are applied recursively from left to right:[f1, f2, f3] => f1(f2(f3(value, extra)))
. This allows composition. - Breaking - Extract nested column logic. Now you will have to resolve nested columns before passing them to the table. The advantage of doing this is that now all logic (search/sorting/etc.) works with nested tables. Basic idea:
import { resolve } from 'reactabular'; // or // import * as resolve from 'table-resolver'; ... const NestedColumnsTable = () => { const resolvedColumns = resolve.columnChildren({ columns }); const resolvedRows = resolve.resolve({ columns: resolvedColumns, method: resolve.nested })(rows); return ( <Table.Provider columns={resolvedColumns}> <Table.Header headerRows={resolve.headerRows({ columns })} /> <Table.Body rows={resolvedRows} rowKey="id" /> </Table.Provider> ); }; ...
reactabular-resizable
- Feature - Allow
minWidth
to be set percolumn
explicitly. - Breaking - Push performance optimized resizing to a function. As a result
reactabular-resizable
exposescolumn
andhelper
functions now.column
is the same as before.helper
implements optional performance optimizations. See the README for usage instructions.
reactabular-virtualized
- Bug fix - Improve horizontal scrolling performance when used with reactabular-sticky. If it detects Y didn't change while scrolling, it skips rendering now.
- Bug fix - Skip functions at
BodyRow
shouldComponentUpdate
. - Breaking - Speed up vertical scrolling by implementing
shouldComponentUpdate
for rows. Now it detects whether or not a row has been measured and also does check based on column and row changes like default SCU at reactabular-table.
reactabular-column-extensions
- New package to wrap common configuration.