From 9a722ae2612f8ea3462f3e55031d7900839db7a0 Mon Sep 17 00:00:00 2001
From: Jiri Tomasek <jtomasek@redhat.com>
Date: Tue, 14 Nov 2017 13:00:22 +0100
Subject: [PATCH] feat(dataTables): Add data table components

---
 src/DataTable/DataTable.stories.js | 31 ++++++++++++++++++++++
 src/DataTable/index.js             | 42 ++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/DataTable/DataTable.stories.js
 create mode 100644 src/DataTable/index.js

diff --git a/src/DataTable/DataTable.stories.js b/src/DataTable/DataTable.stories.js
new file mode 100644
index 00000000000..28ad7716eb7
--- /dev/null
+++ b/src/DataTable/DataTable.stories.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import { defaultTemplate } from '../../storybook/decorators/storyTemplates'
+// import { AutoSizer, Table, Column } from 'react-virtualized'
+import { DataTable, Column } from './index.js'
+
+const stories = storiesOf('DataTable', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Data Table',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/content-views/table-view/'
+  })
+)
+
+stories.addWithInfo('DataTable', `update this with better description`, () => {
+  const items = {
+    item1: { title: 'Item 1', description: 'This is item 1' },
+    item2: { title: 'Item 2', description: 'This is item 2' }
+  }
+
+  return (
+    <DataTable rowGetter={key => items[key]} rowKeys={Object.keys(items)}>
+      <Column label="Title" dataKey="title" />
+      <Column label="Description" dataKey="description" />
+    </DataTable>
+  )
+})
diff --git a/src/DataTable/index.js b/src/DataTable/index.js
new file mode 100644
index 00000000000..40293c7d114
--- /dev/null
+++ b/src/DataTable/index.js
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const DataTable = ({ children, className, rowGetter, rowKeys }) => (
+  <table className="table table-striped table-bordered table-hover">
+    <thead>
+      <tr>
+        {React.Children.map(children, child => {
+          return <th>{child.props.label}</th>
+        })}
+      </tr>
+    </thead>
+    <tbody>
+      {rowKeys.map(rowKey => (
+        <tr key={rowKey}>
+          {React.Children.map(children, child => {
+            const { columnData, cellDataGetter, dataKey } = child.props
+            return (
+              <td key={dataKey}>
+                {cellDataGetter({
+                  columnData,
+                  dataKey,
+                  rowData: rowGetter(rowKey)
+                })}
+              </td>
+            )
+          })}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)
+DataTable.propTypes = { rowGetter: PropTypes.func.isRequired }
+
+const defaultCellDataGetter = ({ columnData, dataKey, rowData }) =>
+  rowData[dataKey]
+
+export class Column extends React.Component {}
+Column.propTypes = { cellDataGetter: PropTypes.func.isRequired }
+Column.defaultProps = {
+  cellDataGetter: defaultCellDataGetter
+}