From 627769124de9cb8de8545746b9b93f851af54998 Mon Sep 17 00:00:00 2001
From: haoxin <coderhaoxin@outlook.com>
Date: Sat, 19 Sep 2015 11:56:33 +0800
Subject: [PATCH 1/2] Add Table

---
 src/index.js |  3 +-
 src/table.js | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/table.js

diff --git a/src/index.js b/src/index.js
index ce37ffc..ddee786 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,7 +13,8 @@ const components = {
   Checkbox: require('./checkbox'),
   Radio: require('./radio'),
   Switch: require('./switch'),
-  IconToggle: require('./icon-toggle')
+  IconToggle: require('./icon-toggle'),
+  Table: require('./table')
 };
 
 module.exports = components;
diff --git a/src/table.js b/src/table.js
new file mode 100644
index 0000000..8881ad1
--- /dev/null
+++ b/src/table.js
@@ -0,0 +1,80 @@
+'use strict';
+
+const React = require('react');
+const mdl = require('material-design-lite/material.min');
+const classnames = require('classnames');
+
+const baseClasses = {
+  'mdl-data-table': true,
+  'mdl-js-data-table': true
+};
+
+class TableRow extends React.Component {
+  render() {
+    const { cols, cellClasses } = this.props;
+
+    return (
+      <tr {...this.props}>
+        { cols.map(col => (<td className={cellClasses}>{col}</td>)) }
+      </tr>
+    );
+  }
+}
+
+class Table extends React.Component {
+
+  componentDidMount(){
+    const node = React.findDOMNode(this);
+    mdl.upgradeElement(node, 'MaterialDataTable');
+  }
+
+  componentWillUnmount(){
+    const node = React.findDOMNode(this);
+    mdl.downgradeElements(node);
+  }
+
+  render(){
+    const {
+      className,
+      columns,
+      rows,
+      selectable,
+      numeric
+    } = this.props;
+
+    const classes = classnames(baseClasses, {
+      'mdl-data-table--selectable': selectable
+    }, className);
+
+    const cellClasses = classnames({
+      'mdl-data-table__cell--non-numeric': numeric
+    });
+
+    return (
+      <table {...this.props} className={classes}>
+        <thead>
+          <tr>
+            {
+              columns.map(column => (<th className={cellClasses}>{column}</th>))
+            }
+          </tr>
+        </thead>
+        <tbody>
+          {
+            rows.map(row => (<TableRow cellClasses={cellClasses} cols={row}></TableRow>))
+          }
+        </tbody>
+      </table>
+    );
+  }
+}
+
+Table.propTypes = {
+  className: React.PropTypes.string,
+  selectable: React.PropTypes.bool,
+  numeric: React.PropTypes.bool,
+  columns: React.PropTypes.array.isRequired,
+  rows: React.PropTypes.array.isRequired
+};
+
+module.exports = Table;

From 0ccaf04509c2c8268a66519171bf1299bc55929b Mon Sep 17 00:00:00 2001
From: haoxin <coderhaoxin@outlook.com>
Date: Wed, 23 Sep 2015 09:23:37 +0800
Subject: [PATCH 2/2] Table - split TableRow, TableColumn

---
 src/index.js |  6 +++-
 src/table.js | 94 +++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/src/index.js b/src/index.js
index ddee786..007b308 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,8 @@
 
 require('material-design-lite/material.min.css');
 
+const table = require('./table');
+
 const components = {
   Button: require('./button'),
   Badge: require('./badge'),
@@ -14,7 +16,9 @@ const components = {
   Radio: require('./radio'),
   Switch: require('./switch'),
   IconToggle: require('./icon-toggle'),
-  Table: require('./table')
+  TableColumn: table.TableColumn,
+  TableRow: table.TableRow,
+  Table: table.Table
 };
 
 module.exports = components;
diff --git a/src/table.js b/src/table.js
index 8881ad1..a424391 100644
--- a/src/table.js
+++ b/src/table.js
@@ -9,18 +9,68 @@ const baseClasses = {
   'mdl-js-data-table': true
 };
 
+class TableColumn extends React.Component {
+  render(){
+    const {
+      className,
+      columns,
+      numeric
+    } = this.props;
+
+    const classes = classnames({
+      'mdl-data-table__cell--non-numeric': numeric
+    });
+
+    return (
+      <thead>
+        <tr>
+          {
+            columns.map(column => (<th className={classes}>{column}</th>))
+          }
+        </tr>
+      </thead>
+    );
+  }
+}
+
+TableColumn.propTypes = {
+  className: React.PropTypes.string,
+  columns: React.PropTypes.array.isRequired,
+  numeric: React.PropTypes.bool
+};
+
 class TableRow extends React.Component {
-  render() {
-    const { cols, cellClasses } = this.props;
+  render(){
+    const {
+      className,
+      numeric,
+      rows
+    } = this.props;
+
+    const classes = classnames({
+      'mdl-data-table__cell--non-numeric': numeric
+    });
+
+    const getRow = (row) => {
+      return (
+        <tr {...this.props}>
+          { row.map(col => (<td className={classes}>{col}</td>)) }
+        </tr>
+      );
+    };
 
     return (
-      <tr {...this.props}>
-        { cols.map(col => (<td className={cellClasses}>{col}</td>)) }
-      </tr>
+      <tbody>{ rows.map(getRow) }</tbody>
     );
   }
 }
 
+TableRow.propTypes = {
+  className: React.PropTypes.string,
+  rows: React.PropTypes.array.isRequired,
+  numeric: React.PropTypes.bool
+};
+
 class Table extends React.Component {
 
   componentDidMount(){
@@ -35,35 +85,18 @@ class Table extends React.Component {
 
   render(){
     const {
+      children,
       className,
-      columns,
-      rows,
-      selectable,
-      numeric
+      selectable
     } = this.props;
 
     const classes = classnames(baseClasses, {
       'mdl-data-table--selectable': selectable
     }, className);
 
-    const cellClasses = classnames({
-      'mdl-data-table__cell--non-numeric': numeric
-    });
-
     return (
       <table {...this.props} className={classes}>
-        <thead>
-          <tr>
-            {
-              columns.map(column => (<th className={cellClasses}>{column}</th>))
-            }
-          </tr>
-        </thead>
-        <tbody>
-          {
-            rows.map(row => (<TableRow cellClasses={cellClasses} cols={row}></TableRow>))
-          }
-        </tbody>
+        {children}
       </table>
     );
   }
@@ -71,10 +104,11 @@ class Table extends React.Component {
 
 Table.propTypes = {
   className: React.PropTypes.string,
-  selectable: React.PropTypes.bool,
-  numeric: React.PropTypes.bool,
-  columns: React.PropTypes.array.isRequired,
-  rows: React.PropTypes.array.isRequired
+  selectable: React.PropTypes.bool
 };
 
-module.exports = Table;
+module.exports = {
+  TableColumn,
+  TableRow,
+  Table
+};