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>] over format: <fn>, no support for nested columns out of the box), resolving (composes better), and reactabular-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'; over import { 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 to searchtabular. You get search.highlighter, search.highlightCell, and search.highlightValue now.
    • reactabular-search-columns has been integrated to searchtabular. You can access it through search.Columns.
    • reactabular-search-field has been integrated to searchtabular. You can access it through search.Field.
    • reactabular-sort is sortabular now.
    • reactabular-select was integrated into selectabular. You can access it through import { 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 into reactabular-table and table-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 use reactabular-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 })) props onCanMove({ rowId }), onMoveStart({ rowId }), onMove({ sourceRowId, targetRowId }), and onMoveEnd({ rowId }) instead of just onMove.
    • 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 at onRow.
    • 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 at Table.Header.
    • Feature - Allow Table.Header to accept headerRows (an array of column definitions) to override default columns. See below.
    • Feature - Move utils.resolveRowKey, utils.evaluateFormatters, utils.evaluateTransforms, utils.mergeProps, utils.columnsAreEqual to reactabular-table.
    • Bug fix - Skip functions at BodyRow shouldComponentUpdate.
    • Breaking - Generalize format: <fn> as formatters: [<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 per column explicitly.
    • Breaking - Push performance optimized resizing to a function. As a result reactabular-resizable exposes column and helper 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.