patternfly · priley86 · Dec 15, 2017 · Dec 19, 2017
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "classnames": "^2.2.5",
     "patternfly": "^3.31.0",
     "react-bootstrap": "^0.31.5",
+    "react-bootstrap-table": "^4.1.5",
     "react-c3js": "^0.1.20",
     "react-fontawesome": "^1.6.1",
     "recompose": "^0.26.0"

diff --git a/sass/patternfly-react/_patternfly-react.scss b/sass/patternfly-react/_patternfly-react.scss
@@ -1,4 +1,12 @@
-
 /**
   Patternfly React Partials
 */
+.react-bs-container-header table {
+  margin-bottom: 0;
+}
+.react-bs-container-body > table {
+  border-top: 0;
+  & tbody > tr > td {
+    border-top: 0;
+  }
+}
diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+import { TABLE_CONFIG } from './constants';
+
+class Table extends React.Component {
+  isEmpty() {
+    return this.props.data.length === 0;
+  }
+
+  columnClassNameFormat(fieldValue, row, rowIdx, colIdx) {
+    return '';
+  }
+
+  customHeaderClass(fieldValue, row, rowIdx, colIdx) {
+    return 'sorting_asc';
+  }
+  onSortChange = (sortName, sortOrder) => {};
+  renderCaret = (direction, fieldName) => {
+    return null;
+  };
+
+  render() {
+    const { columns, data, striped, bordered, hover, dataSort } = this.props;
+    const tableHeaderClass = cx({ dataTable: dataSort });
+    const tableBodyClass = cx({ dataTable: dataSort });
+    const isEmpty = this.isEmpty();
+
+    let options = {};
+    if (dataSort && !isEmpty) {
+      options = {
+        onSortChange: this.onSortChange,
+        defaultSortName: columns[0].accessor,
+      };
+    }
+
+    return isEmpty ? null : (
+      <BootstrapTable
+        striped={striped}
+        bordered={bordered}
+        data={data}
+        hover={hover}
+        tableHeaderClass={tableHeaderClass}
+        tableBodyClass={tableBodyClass}
+        options={options}
+      >
+        {columns.map(col => (
+          <TableHeaderColumn
+            key={col.header}
+            width={col.width}
+            isKey={col.isKey}
+            columnTitle={col.tooltip}
+            headerAlign={col.headerAlign}
+            dataAlign={col.dataAlign}
+            dataField={col.accessor}
+            dataFormat={col.formatter ? col.formatter : undefined}
+            hidden={col.hidden}
+            dataSort={dataSort}
+            className={this.customHeaderClass}
+            columnClassName={this.columnClassNameFormat}
+            caretRender={this.renderCaret}
+          >
+            <span>{col.header}</span>
+          </TableHeaderColumn>
+        ))}
+      </BootstrapTable>
+    );
+  }
+}
+
+Table.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      headerAlign: PropTypes.oneOf(TABLE_CONFIG.ALIGNMENTS),
+      dataAlign: PropTypes.oneOf(TABLE_CONFIG.ALIGNMENTS),
+    }),
+  ),
+};
+export default Table;
diff --git a/src/components/Table/Table.stories.js b/src/components/Table/Table.stories.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select, boolean } from '@storybook/addon-knobs';
+
+import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { Table } from './index';
+
+import { mockTableItems } from './__mocks__/mockTableItems';
+
+const stories = storiesOf('Table', module);
+
+stories.addDecorator(withKnobs);
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Table',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/widgets/#tables',
+  }),
+);
+
+const columns = [
+  {
+    header: 'Name',
+    accessor: 'name',
+    isKey: true,
+    width: '20%',
+    formatter: (cell, row) => {
+      return <span>{row.name}</span>;
+    },
+    hidden: false,
+  },
+  {
+    header: 'Height',
+    accessor: 'height',
+    dataAlign: 'right',
+    width: '10%',
+    hidden: false,
+  },
+  {
+    header: 'Hair Color',
+    accessor: 'hair_color',
+    width: '15%',
+    hidden: false,
+  },
+  {
+    header: 'Gender',
+    accessor: 'gender',
+    width: '15%',
+    hidden: false,
+  },
+  {
+    header: 'Eye Color',
+    accessor: 'eye_color',
+    width: '15%',
+    hidden: false,
+  },
+  {
+    header: 'Birth Year',
+    accessor: 'birth_year',
+    width: '15%',
+    hidden: false,
+  },
+  {
+    header: 'Mass',
+    accessor: 'mass',
+    dataAlign: 'right',
+    width: '10%',
+    hidden: false,
+  },
+];
+
+stories.addWithInfo('Basic Table', () => {
+  const striped = boolean('Striped', true);
+  const bordered = boolean('Bordered', true);
+  const hover = boolean('Hover', true);
+  return (
+    <Table
+      data={mockTableItems.slice(0, 5)}
+      columns={columns}
+      striped={striped}
+      bordered={bordered}
+      hover={hover}
+    />
+  );
+});
+
+stories.addWithInfo('Data Table', () => {
+  const striped = boolean('Striped', true);
+  const bordered = boolean('Bordered', true);
+  const hover = boolean('Hover', true);
+  const dataSort = boolean('Data Sorting', true);
+  return (
+    <Table
+      data={mockTableItems.slice(0, 5)}
+      columns={columns}
+      striped={striped}
+      bordered={bordered}
+      hover={hover}
+      dataSort={dataSort}
+    />
+  );
+});