React-Virtualized PF4 tables

jest.config.js

@@ -1,53 +1,46 @@
 module.exports = {
   collectCoverage: true,
   clearMocks: true,
-  coverageReporters: [
-    "lcov"
-  ],
+  coverageReporters: ['lcov'],
   modulePathIgnorePatterns: [
-    "<rootDir>/packages/*.*/dist/*.*",
-    "<rootDir>/packages/*.*/public/*.*",
-    "<rootDir>/packages/*.*/.cache/*.*"
+    '<rootDir>/packages/*.*/dist/*.*',
+    '<rootDir>/packages/*.*/public/*.*',
+    '<rootDir>/packages/*.*/.cache/*.*'
   ],
   coveragePathIgnorePatterns: [
-    "<rootDir>/packages/*.*/dist/*.*",
-    "<rootDir>/packages/*.*/examples/*.*",
-    "<rootDir>/packages/*.docs.*",
-    "<rootDir>/packages/react-docs/*.*"
+    '<rootDir>/packages/*.*/dist/*.*',
+    '<rootDir>/packages/*.*/examples/*.*',
+    '<rootDir>/packages/*.docs.*',
+    '<rootDir>/packages/react-docs/*.*'
   ],
   modulePaths: [
-    "<rootDir>/**/node_modules/",
-    "<rootDir>/packages/",
-    "<rootDir>/packages/patternfly-3/",
-    "<rootDir>/packages/patternfly-4/"
-  ],
-  roots: [
-    "<rootDir>/packages"
-  ],
-  setupFiles: [
-    "./test.env.js"
+    '<rootDir>/**/node_modules/',
+    '<rootDir>/packages/',
+    '<rootDir>/packages/patternfly-3/',
+    '<rootDir>/packages/patternfly-4/'
   ],
+  roots: ['<rootDir>/packages'],
+  setupFiles: ['./test.env.js'],
   snapshotSerializers: [
     "enzyme-to-json/serializer",
     "<rootDir>/packages/patternfly-4/react-core/scripts/snapshot-serializer"
   ],
   transform: {
-    "^.+\\.(ts|tsx)?$": "ts-jest",
-    "^.+\\.jsx?$": "babel-jest",
-    "\\.(css)$": "<rootDir>/packages/patternfly-4/react-styles/jest-transform.js"
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    '^.+\\.jsx?$': 'babel-jest',
+    '\\.(css)$': '<rootDir>/packages/patternfly-4/react-styles/jest-transform.js'
   },
   testPathIgnorePatterns: [
-    "<rootDir>/scripts/generators/",
-    "<rootDir>/packages/patternfly-4/react-integration/"
-  ],
-  transformIgnorePatterns: [
-    "node_modules/(?!@patternfly|@novnc|tippy.js)"
+    '<rootDir>/scripts/generators/',
+    '<rootDir>/packages/patternfly-4/react-integration/',
+    '<rootDir>/node_modules/(?!lodash-es/.*)'
   ],
+  transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|tippy.js|lodash-es)'],
   // https://github.com/kulshekhar/ts-jest/blob/master/docs/user/config/index.md
-  preset: "ts-jest/presets/js-with-babel",
+  preset: 'ts-jest/presets/js-with-babel',
   globals: {
-    "ts-jest": {
-      tsConfig: "packages/patternfly-4/react-core/tsconfig.jest.json"
+    'ts-jest': {
+      tsConfig: 'packages/patternfly-4/react-core/tsconfig.jest.json'
     }
   }
 };

packages/patternfly-4/react-docs/gatsby-node.js

@@ -91,6 +91,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
         '@patternfly/react-core': path.resolve(__dirname, '../react-core'),
         '@patternfly/react-icons': path.resolve(__dirname, '../../react-icons'),
         '@patternfly/react-inline-edit-extension': path.resolve(__dirname, '../react-inline-edit-extension'),
+        '@patternfly/react-virtualized-extension': path.resolve(__dirname, '../react-virtualized-extension'),
         '@patternfly/react-styled-system': path.resolve(__dirname, '../react-styled-system'),
         '@patternfly/react-styles': path.resolve(__dirname, '../react-styles'),
         '@patternfly/react-table': path.resolve(__dirname, '../react-table'),

packages/patternfly-4/react-table/package.json

@@ -31,13 +31,14 @@
     "@patternfly/react-core": "^3.36.0",
     "@patternfly/react-icons": "^3.9.3",
     "@patternfly/react-styles": "^3.3.0",
-    "exenv": "^1.2.2",
-    "reactabular-table": "^8.14.0"
+    "classnames": "^2.2.5",
+    "exenv": "^1.2.2"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
     "react": "^16.4.0",
-    "react-dom": "^15.6.2 || ^16.4.0"
+    "react-dom": "^15.6.2 || ^16.4.0",
+    "lodash-es": "4.x"
   },
   "scripts": {
     "build": "yarn build:babel && node ./scripts/copyTS.js && node ./build/copyStyles.js",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Body } from 'reactabular-table';
+import { Body } from './base';
 import PropTypes from 'prop-types';
 import { TableContext } from './Table';
 import { isRowExpanded } from './utils';
@@ -29,10 +29,14 @@ const flagVisibility = rows => {
 
 class ContextBody extends React.Component {
   onRow = (row, rowProps) => {
-    const { onRowClick } = this.props;
+    const { onRowClick, onRow } = this.props;
+    const extendedRowProps = {
+      ...rowProps,
+      ...(onRow ? onRow(row, rowProps) : {})
+    };
     return {
       row,
-      rowProps,
+      rowProps: extendedRowProps,
       onMouseDown: event => {
         const computedData = {
           isInput: event.target.tagName !== 'INPUT',
@@ -117,15 +121,17 @@ ContextBody.propTypes = {
   headerData: PropTypes.array,
   rows: PropTypes.array,
   rowKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  onRowClick: PropTypes.func
+  onRowClick: PropTypes.func,
+  onRow: PropTypes.func
 };
 
 ContextBody.defaultProps = {
   className: '',
   children: null,
   headerData: [],
   rows: [],
-  onRowClick: () => undefined
+  onRowClick: () => undefined,
+  onRow: () => undefined
 };
 
 const TableBody = props => (

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

@@ -7,30 +7,42 @@ import { mapOpenedRows } from './utils/headerUtils';
 // eslint-disable-next-line react/prefer-stateless-function
 class BodyWrapper extends React.Component {
   render() {
-    const { children, mappedRows, ...props } = this.props;
-    if (mappedRows.some(row => row.hasOwnProperty('parent'))) {
+    const { mappedRows, tbodyRef, ...props } = this.props;
+    if (mappedRows && mappedRows.some(row => row.hasOwnProperty('parent'))) {
       return (
         <React.Fragment>
-          {mapOpenedRows(mappedRows, children).map((oneRow, key) => (
-            <tbody {...props} className={css(oneRow.isOpen && styles.modifiers.expanded)} key={`tbody-${key}`}>
+          {mapOpenedRows(mappedRows, this.props.children).map((oneRow, key) => (
+            <tbody
+              {...props}
+              className={css(oneRow.isOpen && styles.modifiers.expanded)}
+              key={`tbody-${key}`}
+              ref={tbodyRef}
+            >
               {oneRow.rows}
             </tbody>
           ))}
         </React.Fragment>
       );
     }
-    return <tbody {...props}>{children}</tbody>;
+
+    return <tbody {...props} ref={tbodyRef} />;
   }
 }
 
 BodyWrapper.propTypes = {
   children: PropTypes.node,
-  mappedRows: PropTypes.array
+  mappedRows: PropTypes.array,
+  rows: PropTypes.array,
+  onCollapse: PropTypes.func,
+  tbodyRef: PropTypes.func
 };
 
 BodyWrapper.defaultProps = {
   children: null,
-  mappedRows: undefined
+  mappedRows: undefined,
+  rows: [],
+  onCollapse: null,
+  tbodyRef: null
 };
 
 export default BodyWrapper;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Header } from 'reactabular-table';
+import { Header } from './base';
 import PropTypes from 'prop-types';
 import { TableContext } from './Table';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid';
-import { Provider } from 'reactabular-table';
+import { Provider } from './base';
 import { DropdownPosition, DropdownDirection } from '@patternfly/react-core';
 import { css, getModifier } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
@@ -125,25 +125,26 @@ const propTypes = {
   dropdownDirection: PropTypes.oneOf(Object.values(DropdownDirection)),
   /** Header to display above table for accessibility reasons. */
   header: props => {
-    if (!props['aria-label'] && !props.caption && !props.header) {
+    if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') {
       throw new Error('Specify at least one of: header, caption, aria-label');
     }
     return null;
   },
   /** Caption to display in table for accessibility reasons. */
   caption: props => {
-    if (!props['aria-label'] && !props.caption && !props.header) {
+    if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') {
       throw new Error('Specify at least one of: header, caption, aria-label');
     }
     return null;
   },
   /** aria-label in table for accessibility reasons. */
   'aria-label': props => {
-    if (!props['aria-label'] && !props.caption && !props.header) {
+    if (!props['aria-label'] && !props.caption && !props.header && !props.role === 'presentation') {
       throw new Error('Specify at least one of: header, caption, aria-label');
     }
     return null;
-  }
+  },
+  role: PropTypes.string
 };
 
 const defaultProps = {
@@ -169,7 +170,8 @@ const defaultProps = {
   header: undefined,
   caption: undefined,
   'aria-label': undefined,
-  gridBreakPoint: TableGridBreakpoint.gridMd
+  gridBreakPoint: TableGridBreakpoint.gridMd,
+  role: 'grid'
 };
 
 export const TableContext = React.createContext();
@@ -206,6 +208,7 @@ class Table extends React.Component {
       bodyWrapper,
       rowWrapper,
       borders,
+      role,
       ...props
     } = this.props;
 
@@ -248,7 +251,7 @@ class Table extends React.Component {
             }
           }}
           columns={headerData}
-          role="grid"
+          role={role}
           className={css(
             styles.table,
             gridBreakPoint && getModifier(stylesGrid, gridBreakPoint),