Add Table Header / Body.

README.markdown

@@ -42,7 +42,7 @@ ReactJS based Presentation Library
     - [Link (Base)](#link-base)
     - [List & ListItem (Base)](#list--listitem-base)
     - [S (Base)](#s-base)
-    - [Table, TableRow, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base)
+    - [Table, TableRow, TableBody, TableHeader, TableHeaderItem and TableItem (Base)](#table-tablerow-tableheaderitem-and-tableitem-base)
     - [Text (Base)](#text-base)
     - [Typeface](#typeface)
   - [Base Props](#base-props)
@@ -454,22 +454,26 @@ The `S` tag is used to add inline styling to a piece of text, such as underline
 <a name="table-tablerow-tableheaderitem-and-tableitem-base"></a>
 #### Table, TableRow, TableHeaderItem and TableItem (Base)
 
-The `Table` tag is used to add table to your slide. It is used with `TableRow`, `TableHeaderItem` and `TableItem`. Use them as follows:
+The `Table` tag is used to add table to your slide. It is used with `TableHeader`, `TableBody`, `TableRow`, `TableHeaderItem` and `TableItem`. Use them as follows:
 
 ```jsx
 <Table>
-  <TableRow>
-    <TableHeaderItem></TableHeaderItem>
-    <TableHeaderItem>2011</TableHeaderItem>
-  </TableRow>
-  <TableRow>
-    <TableItem>None</TableItem>
-    <TableItem>61.8%</TableItem>
-  </TableRow>
-  <TableRow>
-    <TableItem>jQuery</TableItem>
-    <TableItem>28.3%</TableItem>
-  </TableRow>
+  <TableHeader>
+    <TableRow>
+      <TableHeaderItem></TableHeaderItem>
+      <TableHeaderItem>2011</TableHeaderItem>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableItem>None</TableItem>
+      <TableItem>61.8%</TableItem>
+    </TableRow>
+    <TableRow>
+      <TableItem>jQuery</TableItem>
+      <TableItem>28.3%</TableItem>
+    </TableRow>
+  </TableBody>
 </Table>
 ```
 

example/src/index.js

@@ -1,9 +1,9 @@
 import React from "react";
 
 import {
-  Appear, BlockQuote, Cite, CodePane, Deck, Fill,
-  Heading, Image, Layout, Link, ListItem, List, Markdown, Quote, Slide,
-  TableHeaderItem, TableItem, TableRow, Table, Text, ComponentPlayground, MarkdownSlides
+  Appear, BlockQuote, Cite, CodePane, ComponentPlayground, Deck, Fill,
+  Heading, Image, Layout, Link, ListItem, List, Markdown, MarkdownSlides, Quote, Slide,
+  TableBody, TableHeader, TableHeaderItem, TableItem, TableRow, Table, Text
 } from "../../src";
 
 import preloader from "../../src/utils/preloader";
@@ -159,15 +159,15 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
           </Heading>
           <Layout>
             <Table>
-              <thead>
+              <TableHeader>
                 <TableRow>
                   <TableHeaderItem/>
                   <TableHeaderItem>2011</TableHeaderItem>
                   <TableHeaderItem>2013</TableHeaderItem>
                   <TableHeaderItem>2015</TableHeaderItem>
                 </TableRow>
-              </thead>
-              <tbody>
+              </TableHeader>
+              <TableBody>
                 <TableRow>
                   <TableItem>None</TableItem>
                   <TableItem>61.8%</TableItem>
@@ -192,7 +192,7 @@ Slides are separated with **three dashes** and can be used _anywhere_ in the dec
                   <TableItem>24.9%</TableItem>
                   <TableItem>55.9%</TableItem>
                 </TableRow>
-              </tbody>
+              </TableBody>
             </Table>
           </Layout>
         </Slide>

package.json

@@ -69,9 +69,9 @@
     "jest": "^17.0.2",
     "node-libs-browser": "^0.5.3",
     "raw-loader": "^0.5.1",
-    "react": "^15.4.0",
+    "react": "15.4.2",
     "react-addons-test-utils": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "react-dom": "15.4.2",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.2.0",
@@ -83,7 +83,7 @@
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.0"
   },
-  "jest" : {
+  "jest": {
     "moduleNameMapper": {
       "\\.(css)$": "<rootDir>/__mocks__/styleMock.js"
     }

src/components/__snapshots__/table-body.test.js.snap

@@ -0,0 +1,11 @@
+exports[`<TableBody /> should render correctly 1`] = `
+<TableHeader>
+  <thead>
+    <tr>
+      <td>
+        Table Content
+      </td>
+    </tr>
+  </thead>
+</TableHeader>
+`;

src/components/__snapshots__/table-header.test.js.snap

@@ -0,0 +1,11 @@
+exports[`<TableHeader /> should render correctly 1`] = `
+<TableHeader>
+  <thead>
+    <tr>
+      <th>
+        Table Content
+      </th>
+    </tr>
+  </thead>
+</TableHeader>
+`;

src/components/__snapshots__/table.test.js.snap

@@ -4,13 +4,11 @@ exports[`<Table /> should render correctly 1`] = `
     data-radium={true}
     style={Object {}}>
     <tbody>
-      <tbody>
-        <tr>
-          <td>
-            Table Content
-          </td>
-        </tr>
-      </tbody>
+      <tr>
+        <td>
+          Table Content
+        </td>
+      </tr>
     </tbody>
   </table>
 </Table>

src/components/table-body.js

@@ -0,0 +1,14 @@
+import React, { PropTypes } from "react";
+
+export default function TableBody({ children }) {
+  return <tbody>{ children }</tbody>;
+}
+
+TableBody.propTypes = {
+  children: PropTypes.node
+};
+
+TableBody.contextTypes = {
+  styles: PropTypes.object,
+  store: PropTypes.object
+};

src/components/table-body.test.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { mount } from "enzyme";
+import { mountToJson } from "enzyme-to-json";
+import TableBody from "./table-header";
+
+describe("<TableBody />", () => {
+  test("should render correctly", () => {
+    const wrapper = mount(
+      <TableBody>
+        <tr><td>Table Content</td></tr>
+      </TableBody>
+    );
+    expect(mountToJson(wrapper)).toMatchSnapshot();
+  });
+});

src/components/table-header.js

@@ -0,0 +1,14 @@
+import React, { PropTypes } from "react";
+
+export default function TableHeader({ children }) {
+  return <thead>{ children }</thead>;
+}
+
+TableHeader.propTypes = {
+  children: PropTypes.node
+};
+
+TableHeader.contextTypes = {
+  styles: PropTypes.object,
+  store: PropTypes.object
+};

src/components/table-header.test.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { mount } from "enzyme";
+import { mountToJson } from "enzyme-to-json";
+import TableHeader from "./table-header";
+
+describe("<TableHeader />", () => {
+  test("should render correctly", () => {
+    const wrapper = mount(
+      <TableHeader>
+        <tr><th>Table Content</th></tr>
+      </TableHeader>
+    );
+    expect(mountToJson(wrapper)).toMatchSnapshot();
+  });
+});

src/components/table.js

@@ -7,9 +7,7 @@ export default class Table extends Component {
   render() {
     return (
       <table className={this.props.className} style={[this.context.styles.components.table, getStyles.call(this), this.props.style]}>
-        <tbody>
-          {this.props.children}
-        </tbody>
+        {this.props.children}
       </table>
     );
   }

src/index.js

@@ -18,6 +18,8 @@ import MarkdownSlides from "./components/markdown-slides";
 import Quote from "./components/quote";
 import S from "./components/s";
 import Slide from "./components/slide";
+import TableBody from "./components/table-body";
+import TableHeader from "./components/table-header";
 import TableHeaderItem from "./components/table-header-item";
 import TableItem from "./components/table-item";
 import TableRow from "./components/table-row";
@@ -46,6 +48,8 @@ export {
   Quote,
   S,
   Slide,
+  TableBody,
+  TableHeader,
   TableHeaderItem,
   TableItem,
   TableRow,