feat(Table): support custom components in expandable rows

packages/patternfly-4/react-table/src/components/Table/Body.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Body } from 'reactabular-table';
 import PropTypes from 'prop-types';
 import { TableContext } from './Table';
+import { isRowExpanded } from './utils';
 
 const propTypes = {
   /** Additional classes for table body. */
@@ -32,36 +33,33 @@ class ContextBody extends React.Component {
     };
   };
 
-  parentsExpanded(parentId) {
-    const { rows } = this.props;
-    return rows[parentId].hasOwnProperty('parent')
-      ? this.parentsExpanded(rows[parentId].parent)
-      : rows[parentId].isOpen;
-  }
+  mapCells = (headerData, row, rowKey) => {
+    // column indexes start after generated optional columns
+    let additionalColsIndexShift = headerData[0].extraParams.firstUserColumnIndex;
 
-  mapCells = (row, rowKey) => {
-    const { headerData } = this.props;
-    let shiftKey = Boolean(headerData[0] && headerData[0].extraParams.onSelect);
-    shiftKey += Boolean(headerData[0] && headerData[0].extraParams.onCollapse);
     return {
       ...(row &&
         (row.cells || row).reduce(
-          (acc, curr, key) => {
-            const currShift = shiftKey;
-            if (curr.props && curr.props.colSpan) {
-              shiftKey += shiftKey + curr.props && curr.props.colSpan - 1;
+          (acc, cell, cellIndex) => {
+            const isCellObject = cell === Object(cell);
+
+            const mappedCell = {
+              [headerData[cellIndex + additionalColsIndexShift].property]: {
+                title: isCellObject ? cell.title : cell,
+                props: {
+                  isVisible: true,
+                  ...(isCellObject ? cell.props : null)
+                }
+              }
+            };
+
+            // increment the shift index when a cell spans multiple columns
+            if (isCellObject && cell.props && cell.props.colSpan) {
+              additionalColsIndexShift += cell.props.colSpan - 1;
             }
             return {
               ...acc,
-              ...{
-                [headerData[currShift + key].property]: {
-                  title: curr.title || curr,
-                  props: {
-                    isVisible: true,
-                    ...curr.props
-                  }
-                }
-              }
+              ...mappedCell
             };
           },
           { id: row.id !== undefined ? row.id : rowKey }
@@ -72,16 +70,13 @@ class ContextBody extends React.Component {
   render() {
     const { className, headerData, rows, rowKey, children, onRowClick, ...props } = this.props;
     const mappedRows =
-      headerData.length !== 0 &&
+      headerData.length > 0 &&
       rows.map((oneRow, oneRowKey) => ({
         ...oneRow,
-        ...this.mapCells(oneRow, oneRowKey),
-        ...(oneRow.parent !== undefined
-          ? {
-              isExpanded: this.parentsExpanded(oneRow.parent) && rows[oneRow.parent].isOpen
-            }
-          : {})
+        ...this.mapCells(headerData, oneRow, oneRowKey),
+        isExpanded: isRowExpanded(oneRow, rows)
       }));
+
     return (
       <React.Fragment>
         {mappedRows && (

packages/patternfly-4/react-table/src/components/Table/Table.d.ts

@@ -2,6 +2,10 @@ import { FunctionComponent, HTMLProps, ReactNode, MouseEvent } from 'react';
 import { SortByDirection } from './SortColumn';
 import { DropdownPosition, DropdownDirection, OneOf, Omit } from '@patternfly/react-core';
 
+interface OnSort {
+  (event: MouseEvent, columnIndex: number, extraData: IExtraColumnData): void
+}
+
 export const TableGridBreakpoint: {
   grid: 'grid',
   gridMd: 'grid-md',
@@ -15,16 +19,27 @@ export const TableVariant: {
 export interface IRowData {
 }
 
+export interface IColumn {
+  extraParams: {
+    sortBy?: ISortBy;
+    onSort?: OnSort;
+  }
+}
+
 export interface IExtraColumnData {
   columnIndex: number,
-  column: Object,
+  column: IColumn,
   property: string,
 }
 
 export interface IExtraData extends IExtraColumnData {
   rowIndex: number
 }
 
+export interface IExtra extends IExtraData {
+  rowData: IRowData,
+}
+
 export interface ISortBy {
   index?: Number;
   direction?: OneOf<typeof SortByDirection, keyof typeof SortByDirection>;
@@ -68,7 +83,7 @@ export interface TableProps extends Omit<Omit<HTMLProps<HTMLTableElement>, 'onSe
   sortBy?: ISortBy;
   onCollapse?: (event: MouseEvent, rowIndex: number,isOpen: boolean, rowData: IRowData, extraData: IExtraData) => void;
   onSelect?: (event: MouseEvent, isSelected: boolean, rowIndex: number, rowData: IRowData, extraData: IExtraData) => void;
-  onSort?: (event: MouseEvent, columnIndex: number, extraData: IExtraColumnData) => void;
+  onSort?: OnSort;
   actions?: Array<IAction | ISeparator>;
   actionResolver?: (rowData: IRowData,  extraData: IExtraData) => Array<IAction | ISeparator>;
   areActionsDisabled?: (rowData: IRowData, extraData: IExtraData) => boolean;

packages/patternfly-4/react-table/src/components/Table/Table.js

@@ -204,7 +204,8 @@ class Table extends React.Component {
       expandId,
       contentId,
       dropdownPosition,
-      dropdownDirection
+      dropdownDirection,
+      firstUserColumnIndex: [onCollapse, onSelect].filter(callback => callback).length
     });
 
     return (

packages/patternfly-4/react-table/src/components/Table/Table.test.js

@@ -8,7 +8,8 @@ import {
   TableVariant,
   cellWidth,
   headerCol,
-  sortable
+  sortable,
+  expandable
 } from './index';
 import { rows, columns, actions } from '../../test-helpers/data-sets';
 
@@ -130,6 +131,7 @@ test('Collapsible table', () => {
   rows[1] = { ...rows[1], parent: 0 };
   rows[3] = { ...rows[3], isOpen: false };
   rows[4] = { ...rows[4], parent: 3 };
+  columns[0] = { ...columns[0], cellFormatters: [expandable] };
   const onCollapse = () => undefined;
   const view = mount(
     <Table aria-label="Aria labeled" onCollapse={onCollapse} cells={columns} rows={rows}>