Skip to content

v1.0.0
Compare
Choose a tag to compare
@pradeepnschrodinger pradeepnschrodinger released this 03 Dec 09:56
· 217 commits to master since this release
v1.0.0
dd871d8

v1 Release

Architecture Change

The original FDT's architecture from Facebook had issues on state management in context of dynamic row heights and scroll handling. It also calculated most of the state within the main FixedDataTable component which made future development hard.

With the V1 release, we have rewritten the library’s state management using Redux. This resolves the known issues and provides solid support for dynamic row heights.

State management is now handled via Redux, which neatly divides the state management across multiple files. An overview of the codebase can be found here.

Quick Guide on Scroll state:

For computing scroll position, we start with an anchor. This acts like a marker that describes the first/last row in the viewport along with its offset. The scrollAnchor reducer computes the anchor.

Once we have the anchor, we use it to compute the list of rows in the visible viewport (known as virtualization). The computeRenderedRows reducer handles this step. It also caches the width and positions of the visible rows, and recycles new rows with the existing ones to increase performance.

The main reducer index.js simply handles scroll actions directly by using the new scroll value to recompute the scroll anchor. Then the process is repeated. Similarly, for prop changes that determine scroll state (scrollToRow or scrollTop), we dispatch a prop change event, which again recomputes the scroll anchor.

API Changes

There’s no breaking changes intended for the v1 release. But we did fix several issues related to dynamic row heights and touch scrolling. We also added improvements for performance and to control the scroll behavior.

New Table props:

  • gridAttributesGetter: (function)
    Callback that returns an object of html attributes to add to the grid element.

  • stopScrollDefaultHandling: (boolean)
    If enabled scroll events will never be bubbled to the browser default handler. If disabled (default when unspecified), scroll events will be bubbled up if the scroll doesn't lead to a change in scroll offsets, which is preferable if you like the page/container to scroll up when the table is already scrolled up max.

  • stopReactWheelPropagation: (boolean)
    If enabled scroll events will not be propagated outside of the table.

Modified Table props:

We modified the scroll handlers (onScrollStart and onScrollEnd) so that they also report the last visible row index.

  • onScrollStart: (function)
    Callback that is called when scrolling starts. The current horizontal and vertical scroll values, and the current first and last row indexes will be provided to the callback.

  • onScrollEnd: (function)
    Callback that is called when scrolling ends. The new horizontal and vertical scroll values, and the new first and last row indexes will be provided to the callback.

Assets 2