feat(Table): Add columnTransforms, classNames decorator, Visibility constants, and hidden/visible breakpoints example

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

@@ -61,8 +61,9 @@ export interface ISeparator {
 
 export interface ICell {
   title: String;
-  transforms: Array<Function>;
+  transforms?: Array<Function>;
   cellTransforms?: Array<Function>;
+  columnTransforms?: Array<Function>;
   formatters?: Array<Function>;
   cellFormatters?: Array<Function>;
   props: any;

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

@@ -102,8 +102,9 @@ const propTypes = {
       PropTypes.node,
       PropTypes.shape({
         title: PropTypes.node,
-        transforms: PropTypes.arrayOf(PropTypes.func),
-        cellTransforms: PropTypes.arrayOf(PropTypes.func),
+        transforms: PropTypes.arrayOf(PropTypes.func), // Applies only to header cell
+        cellTransforms: PropTypes.arrayOf(PropTypes.func), // Applies only to body cells
+        columnTransforms: PropTypes.arrayOf(PropTypes.func), // Applies to both header and body cells
         formatters: PropTypes.arrayOf(PropTypes.func),
         cellFormatters: PropTypes.arrayOf(PropTypes.func)
       })

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

@@ -16,6 +16,8 @@ import {
   expandable,
   cellWidth,
   textCenter,
+  classNames,
+  Visibility
 } from '@patternfly/react-table';
 
 ## Simple table
@@ -667,6 +669,66 @@ class WidthTable extends React.Component {
 }
 ```
 
+## Table with hidden/visible breakpoint modifiers
+
+```js
+import React from 'react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  sortable,
+  SortByDirection,
+  headerCol,
+  TableVariant,
+  expandable,
+  cellWidth,
+  classNames,
+  Visibility
+} from '@patternfly/react-table';
+
+class HiddenVisibleBreakpointTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      columns: [
+        {
+          title: 'Repositories',
+          columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnMd, Visibility.hiddenOnLg)]
+        },
+        'Branches',
+        {
+          title: 'Pull requests',
+          columnTransforms: [classNames(Visibility.hiddenOnMd, Visibility.visibleOnLg)]
+        },
+        'Workspaces',
+        {
+          title: 'Last Commit',
+          columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnSm)]
+        }
+      ],
+      rows: [
+        ['Visible only on md breakpoint', '10', 'Hidden only on md breakpoint', '5', 'Hidden on xs breakpoint'],
+        ['Repository 2', '10', '25', '5', '2 days ago'],
+        ['Repository 3', '10', '25', '5', '2 days ago'],
+        ['Repository 4', '10', '25', '5', '2 days ago']
+      ]
+    };
+  }
+
+  render() {
+    const { columns, rows } = this.state;
+
+    return (
+      <Table caption="Table with hidden/visible breakpoint modifiers" cells={columns} rows={rows}>
+        <TableHeader />
+        <TableBody />
+      </Table>
+    );
+  }
+}
+```
+
 ## Collapsible table
 
 ```js

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

@@ -4,5 +4,5 @@ export { default as TableBody } from './Body';
 export { default as BodyWrapper } from './BodyWrapper';
 export { default as RowWrapper } from './RowWrapper';
 export { default as ExpandableRowContent } from './ExpandableRowContent';
-export { sortable, headerCol, cellWidth, expandable, isRowExpanded, textCenter } from './utils';
+export { sortable, headerCol, cellWidth, expandable, isRowExpanded, textCenter, classNames, Visibility } from './utils';
 export { SortByDirection } from './SortColumn';

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

@@ -0,0 +1,21 @@
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly/components/Table/table.css';
+
+const pickProperties = (object, properties) =>
+  properties.reduce((picked, property) => ({ ...picked, [property]: object[property] }), {});
+
+export const Visibility = pickProperties(styles.modifiers, [
+  'hidden',
+  'hiddenOnSm',
+  'hiddenOnMd',
+  'hiddenOnLg',
+  'hiddenOnXl',
+  'visibleOnSm',
+  'visibleOnMd',
+  'visibleOnLg',
+  'visibleOnXl'
+]);
+
+export default (...classNames) => () => ({
+  className: css(...classNames)
+});

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

@@ -12,32 +12,37 @@ import {
 import { defaultTitle } from './formatters';
 
 /**
- * Generate header with transofmrs and formatters from custom header object.
- * @param {*} header with transforms formatters and rest of header object.
+ * Generate header with transforms and formatters from custom header object.
+ * @param {*} header with transforms, formatters, columnTransforms, and rest of header object.
  * @param {*} title to be used as label in header config.
  * @return {*} header, label, transforms: Array, formatters: Array.
  */
-const generateHeader = ({ transforms: origTransforms, formatters: origFormatters, header }, title) => ({
+const generateHeader = (
+  { transforms: origTransforms, formatters: origFormatters, columnTransforms, header },
+  title
+) => ({
   ...header,
   label: title,
   transforms: [
     scopeColTransformer,
     emptyCol,
     ...(origTransforms || []),
+    ...(columnTransforms || []),
     ...(header && header.hasOwnProperty('transforms') ? header.transforms : [])
   ],
   formatters: [...(origFormatters || []), ...(header && header.hasOwnProperty('formatters') ? header.formatters : [])]
 });
 
 /**
  * Function to generate cell for header config to change look of each cell.
- * @param {*} customCell config with cellFormatters, cellTransforms and rest of cell config.
+ * @param {*} customCell config with cellFormatters, cellTransforms, columnTransforms and rest of cell config.
  * @returns {*} cell, transforms: Array, formatters: Array.
  */
-const generateCell = ({ cellFormatters, cellTransforms, cell }) => ({
+const generateCell = ({ cellFormatters, cellTransforms, columnTransforms, cell }) => ({
   ...cell,
   transforms: [
     ...(cellTransforms || []),
+    ...(columnTransforms || []),
     ...(cell && cell.hasOwnProperty('transforms') ? cell.transforms : []),
     mapProps // This transform should be applied last so that props that are manually defined at the cell level will override all other transforms.
   ],

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

@@ -5,6 +5,7 @@ export { default as cellWidth } from './decorators/cellWidth';
 export { default as textCenter } from './decorators/textCenter';
 export { collapsible, expandedRow, expandable } from './decorators/collapsible';
 export { default as headerCol } from './decorators/headerCol';
+export { default as classNames, Visibility } from './decorators/classNames';
 
 export const emptyTD = () => ({
   scope: '',