v1.0.1

Custom Attributes for Grid and Rows (#491) (Fixes #490)

Added function props gridAttributesGetter and rowAttributesGetter.

These functions can be used to return the grid/row HTML attributes. FDT will pass these to the DIV elements representing the grid and the rows.

rowAttributesGetter is invoked for each visible row (including buffer) with the rowIndex as the first param.

v1.0.0

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.

v1.0.0-beta.30

Update docs (#481, #485, #486).

• updated codebase.md (#481)
• updated roadmap.md (#486)
• removed generated api files for v0.5 (#485)
• removed migration guide for v0.6 (#485)
• added logic for api generation (#485)
• @ignore in the jsdoc will ignore the prop generation through react-docgen

v1.0.0-beta.29

Dependencies updated (#484), as part of merge up of #480.

v1.0.0-beta.28

Minor dist CSS update that got lost in v1.0.0-beta.27

v1.0.0-beta.27

Fix scrolling (#483) (Fixes #482)

• Fix the case where content rows were not being scrolled in latest versions of React.

v0.8.28

Update dependencies in Master (#480)

• postcss updated
• mini-css-extract-plugin replaces extract-text-webpack-plugin
• webpack updated to v4
• Babel upgraded to v7
• other packages updated
• Calypso codemods ran calypso-codemods commonjs-imports,commonjs-exports ./src ./examples.
  So now ES6 styled exports/imports are used throughout the code base (except for 1 or 2 edge cases)

v1.0.0-beta.26

• Account for borders in spacer positioning (#478)
  The scrollbar spacer in each row was 2px off. This is because the box-sizing is set to border-box and thus the borders are included in the width of the element. So we need to account for the borders when positioning the scroll bar spacer.

v0.8.27

• Fix table scrolling while touch scroll is disabled (#458) (Fixes #456)
• Account for borders in spacer positioning (#478)

v1.0.0-beta.25

• Fix invalid aria attribute name (#476)
  aria-rowIndex changed to aria-rowindex