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

Added function props `gridAttributesGetter` and `rowAttributesGetter`.

These functions can be used to return the grid/row HTML attributes. These will be directly passed to the DIV elements by FDT.

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

src/FixedDataTable.js

@@ -443,7 +443,12 @@ class FixedDataTable extends React.Component {
       footerHeight: PropTypes.number,
       groupHeaderHeight: PropTypes.number,
       headerHeight: PropTypes.number,
-    })
+    }),
+
+    /**
+     * Callback that returns an object of html attributes to add to the grid element
+     */
+    gridAttributesGetter: PropTypes.func,
   }
 
   static defaultProps = /*object*/ {
@@ -660,6 +665,7 @@ class FixedDataTable extends React.Component {
       elementHeights,
       isColumnReordering,
       isColumnResizing,
+      gridAttributesGetter,
       maxScrollX,
       maxScrollY,
       onColumnReorderEndCallback,
@@ -676,6 +682,7 @@ class FixedDataTable extends React.Component {
     const { cellGroupWrapperHeight, footerHeight, groupHeaderHeight, headerHeight } = elementHeights;
     const { scrollEnabledX, scrollEnabledY } = scrollbarsVisible(this.props);
     const onColumnReorder = onColumnReorderEndCallback ? this._onColumnReorder : null;
+    const attributes = gridAttributesGetter && gridAttributesGetter();
 
     let groupHeader;
     if (groupHeaderHeight > 0) {
@@ -849,6 +856,7 @@ class FixedDataTable extends React.Component {
         )}
         role="grid"
         aria-rowcount={ariaRowCount}
+        {...attributes}
         tabIndex={tabIndex}
         onKeyDown={this._onKeyDown}
         onTouchStart={touchScrollEnabled ? this._touchHandler.onTouchStart : null}

src/FixedDataTableBufferedRows.js

@@ -46,6 +46,7 @@ class FixedDataTableBufferedRows extends React.Component {
     rowOffsets: PropTypes.object.isRequired,
     rowKeyGetter: PropTypes.func,
     rowSettings: PropTypes.shape({
+      rowAttributesGetter: PropTypes.func,
       rowHeightGetter: PropTypes.func,
       rowsCount: PropTypes.number.isRequired,
       subRowHeightGetter: PropTypes.func,
@@ -126,6 +127,7 @@ class FixedDataTableBufferedRows extends React.Component {
       rowProps.subRowHeight = this.props.rowSettings.subRowHeightGetter(rowIndex);
       rowProps.offsetTop = Math.round(baseOffsetTop + props.rowOffsets[rowIndex]);
       rowProps.key = props.rowKeyGetter ? props.rowKeyGetter(rowIndex) : key;
+      rowProps.attributes = props.rowSettings.rowAttributesGetter && props.rowSettings.rowAttributesGetter(rowIndex);
 
       const hasBottomBorder = (rowIndex === props.rowSettings.rowsCount - 1) && props.showLastRowBorder;
       rowProps.className = joinClasses(

src/FixedDataTableRow.js

@@ -161,6 +161,11 @@ class FixedDataTableRowImpl extends React.Component {
      * The value of the aria-rowindex attribute.
      */
     ariaRowIndex: PropTypes.number,
+
+    /**
+     * DOM attributes to be applied to the row.
+     */
+    attributes: PropTypes.object,
   };
 
   render() /*object*/ {
@@ -281,6 +286,7 @@ class FixedDataTableRowImpl extends React.Component {
         className={joinClasses(className, this.props.className)}
         role={'row'}
         aria-rowindex={this.props.ariaRowIndex}
+        {...this.props.attributes}
         onClick={this.props.onClick ? this._onClick : null}
         onContextMenu={this.props.onContextMenu ? this._onContextMenu : null}
         onDoubleClick={this.props.onDoubleClick ? this._onDoubleClick : null}

src/reducers/index.js

@@ -48,6 +48,7 @@ function getInitialState() {
     },
     rowSettings: {
       bufferRowCount: undefined,
+      rowAttributesGetter: undefined,
       rowHeight: 0,
       rowHeightGetter: () => 0,
       rowsCount: 0,
@@ -248,6 +249,7 @@ function setStateFromProps(state, props) {
     props.rowHeightGetter || (() => rowHeight);
   newState.rowSettings.subRowHeightGetter =
     props.subRowHeightGetter || (() => subRowHeight || 0);
+  newState.rowSettings.rowAttributesGetter = props.rowAttributesGetter;
 
   newState.scrollFlags = Object.assign({}, newState.scrollFlags,
     pick(props, ['overflowX', 'overflowY', 'showScrollbarX', 'showScrollbarY']));