diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx
index 2162b24d5d8ac1..163617a655610f 100644
--- a/docs/src/app/app-routes.jsx
+++ b/docs/src/app/app-routes.jsx
@@ -46,7 +46,7 @@ import SliderPage from './components/pages/components/Slider/Page';
 import SnackbarPage from './components/pages/components/Snackbar/Page';
 import SvgIconPage from './components/pages/components/SvgIcon/Page';
 import Switches from './components/pages/components/switches';
-import Table from './components/pages/components/table';
+import TablePage from './components/pages/components/Table/Page';
 import TabsPage from './components/pages/components/Tabs/Page';
 import TextFieldPage from './components/pages/components/TextField/Page';
 import TimePicker from './components/pages/components/time-picker';
@@ -109,7 +109,7 @@ const AppRoutes = (
       <Route path="slider" component={SliderPage} />
       <Route path="switches" component={Switches} />
       <Route path="snackbar" component={SnackbarPage} />
-      <Route path="table" component={Table} />
+      <Route path="table" component={TablePage} />
       <Route path="tabs" component={TabsPage} />
       <Route path="text-field" component={TextFieldPage} />
       <Route path="time-picker" component={TimePicker} />
diff --git a/docs/src/app/components/CodeExample/CodeBlock.jsx b/docs/src/app/components/CodeExample/CodeBlock.jsx
index 769d3844e272d2..aba628c4afd7af 100644
--- a/docs/src/app/components/CodeExample/CodeBlock.jsx
+++ b/docs/src/app/components/CodeExample/CodeBlock.jsx
@@ -5,7 +5,7 @@ import StylePropable from 'material-ui/lib/mixins/style-propable';
 import FlatButton from 'material-ui/lib/flat-button';
 import Transitions from 'material-ui/lib/styles/transitions';
 
-const LINE_MAX = 17;
+const LINE_MAX = 7;
 
 const styles = {
   root: {
diff --git a/docs/src/app/components/pages/components/Table/ExampleSimple.jsx b/docs/src/app/components/pages/components/Table/ExampleSimple.jsx
new file mode 100644
index 00000000000000..dba81aaa85d44a
--- /dev/null
+++ b/docs/src/app/components/pages/components/Table/ExampleSimple.jsx
@@ -0,0 +1,172 @@
+import React from 'react';
+import Table from 'material-ui/lib/table/table';
+import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
+import TableRow from 'material-ui/lib/table/table-row';
+import TableHeader from 'material-ui/lib/table/table-header';
+import TableRowColumn from 'material-ui/lib/table/table-row-column';
+import TableBody from 'material-ui/lib/table/table-body';
+import TableFooter from 'material-ui/lib/table/table-footer';
+import TextField from 'material-ui/lib/text-field';
+import Toggle from 'material-ui/lib/toggle';
+
+const propContainerStyle = {
+  width: 200,
+  overflow: 'hidden',
+  margin: '20px auto 0 auto',
+};
+
+export default class TableExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      fixedHeader: true,
+      fixedFooter: true,
+      stripedRows: false,
+      showRowHover: false,
+      selectable: true,
+      multiSelectable: false,
+      enableSelectAll: false,
+      deselectOnClickaway: true,
+      height: '300px',
+    };
+  }
+
+  handleToggle = (event, toggled) => {
+    this.setState({
+      [event.target.name]: toggled,
+    });
+  };
+
+  handleChange = (event) => {
+    this.setState({height: event.target.value});
+  };
+
+  render() {
+    return (
+      <div>
+        <Table
+          height={this.state.height}
+          fixedHeader={this.state.fixedHeader}
+          fixedFooter={this.state.fixedFooter}
+          selectable={this.state.selectable}
+          multiSelectable={this.state.multiSelectable}
+          onRowSelection={this._onRowSelection}>
+          <TableHeader enableSelectAll={this.state.enableSelectAll}>
+            <TableRow>
+              <TableHeaderColumn colSpan="3" tooltip="Super Header" style={{textAlign: 'center'}}>
+                Super Header
+              </TableHeaderColumn>
+            </TableRow>
+            <TableRow>
+              <TableHeaderColumn tooltip="The ID">ID</TableHeaderColumn>
+              <TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
+              <TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
+            </TableRow>
+          </TableHeader>
+          <TableBody
+            deselectOnClickaway={this.state.deselectOnClickaway}
+            showRowHover={this.state.showRowHover}
+            stripedRows={this.state.stripedRows}>
+            <TableRow selected={true}>
+              <TableRowColumn>1</TableRowColumn>
+              <TableRowColumn>John Smith</TableRowColumn>
+              <TableRowColumn>Employed</TableRowColumn>
+            </TableRow>
+            <TableRow>
+              <TableRowColumn>2</TableRowColumn>
+              <TableRowColumn>Randal White</TableRowColumn>
+              <TableRowColumn>Unemployed</TableRowColumn>
+            </TableRow>
+            <TableRow selected={true}>
+              <TableRowColumn>3</TableRowColumn>
+              <TableRowColumn>Stephanie Sanders</TableRowColumn>
+              <TableRowColumn>Employed</TableRowColumn>
+            </TableRow>
+            <TableRow>
+              <TableRowColumn>4</TableRowColumn>
+              <TableRowColumn>Steve Brown</TableRowColumn>
+              <TableRowColumn>Employed</TableRowColumn>
+            </TableRow>
+            <TableRow>
+              <TableRowColumn>5</TableRowColumn>
+              <TableRowColumn>Joyce Whitten</TableRowColumn>
+              <TableRowColumn>Employed</TableRowColumn>
+            </TableRow>
+            <TableRow>
+              <TableRowColumn>6</TableRowColumn>
+              <TableRowColumn>Samuel Roberts</TableRowColumn>
+              <TableRowColumn>Unemployed</TableRowColumn>
+            </TableRow>
+            <TableRow>
+              <TableRowColumn>7</TableRowColumn>
+              <TableRowColumn>Adam Moore</TableRowColumn>
+              <TableRowColumn>Employed</TableRowColumn>
+            </TableRow>
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableRowColumn>ID</TableRowColumn>
+              <TableRowColumn>Name</TableRowColumn>
+              <TableRowColumn>Status</TableRowColumn>
+            </TableRow>
+            <TableRow>
+              <TableRowColumn colSpan="3" style={{textAlign: 'center'}}>
+                Super Footer
+              </TableRowColumn>
+            </TableRow>
+          </TableFooter>
+        </Table>
+
+        <div style={propContainerStyle}>
+          <h3>Table Properties</h3>
+          <TextField
+            floatingLabelText="Table Body Height"
+            defaultValue={this.state.height}
+            onChange={this.handleChange} />
+          <Toggle
+            name="fixedHeader"
+            label="Fixed Header"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.fixedHeader} />
+          <Toggle
+            name="fixedFooter"
+            label="Fixed Footer"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.fixedFooter} />
+          <Toggle
+            name="stripedRows"
+            label="Stripe Rows"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.stripedRows} />
+          <Toggle
+            name="showRowHover"
+            label="Show Row Hover"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.showRowHover} />
+          <Toggle
+            name="selectable"
+            label="Selectable"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.selectable} />
+          <Toggle
+            name="multiSelectable"
+            label="Multi-Selectable"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.multiSelectable} />
+          <Toggle
+            name="enableSelectAll"
+            label="Enable Select All"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.enableSelectAll} />
+          <Toggle
+            name="deselectOnClickaway"
+            label="Deselect On Clickaway"
+            onToggle={this.handleToggle}
+            defaultToggled={this.state.deselectOnClickaway} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/docs/src/app/components/pages/components/Table/Page.jsx b/docs/src/app/components/pages/components/Table/Page.jsx
new file mode 100644
index 00000000000000..157255d5e976d8
--- /dev/null
+++ b/docs/src/app/components/pages/components/Table/Page.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import tableReadmeText from './README';
+import tableCode from '!raw!material-ui/lib/table/table';
+import tableRowCode from '!raw!material-ui/lib/table/table';
+import tableBodyCode from '!raw!material-ui/lib/table/table-body';
+import tableFooterCode from '!raw!material-ui/lib/table/table-footer';
+import tableHeaderColumnCode from '!raw!material-ui/lib/table/table-header-column';
+import tableHeaderCode from '!raw!material-ui/lib/table/table-header';
+import tableRowColumnCode from '!raw!material-ui/lib/table/table-row-column';
+import TableExampleSimple from './ExampleSimple';
+import tableExampleSimpleCode from '!raw!./ExampleSimple';
+
+const TablePage = () => (
+  <div>
+    <MarkdownElement text={tableReadmeText} />
+    <CodeExample code={tableExampleSimpleCode}>
+      <TableExampleSimple />
+    </CodeExample>
+    <PropTypeDescription code={tableCode} header="### Table Properties"/>
+    <PropTypeDescription code={tableBodyCode} header="### TableBody Properties"/>
+    <PropTypeDescription code={tableFooterCode} header="### TableFooter Properties"/>
+    <PropTypeDescription code={tableHeaderColumnCode} header="### TableHeaderColumn Properties"/>
+    <PropTypeDescription code={tableHeaderCode} header="### TableHeader Properties"/>
+    <PropTypeDescription code={tableRowColumnCode} header="### TableRowColumn Properties"/>
+    <PropTypeDescription code={tableRowCode} header="### TableRow Properties"/>
+  </div>
+);
+
+export default TablePage;
diff --git a/docs/src/app/components/pages/components/Table/README.md b/docs/src/app/components/pages/components/Table/README.md
new file mode 100644
index 00000000000000..9076a782c79d8b
--- /dev/null
+++ b/docs/src/app/components/pages/components/Table/README.md
@@ -0,0 +1,6 @@
+## Table
+
+[Tables](https://www.google.com/design/spec/components/data-tables.html)
+are used to display data and to organize it.
+
+### Examples
diff --git a/docs/src/app/components/pages/components/table.jsx b/docs/src/app/components/pages/components/table.jsx
deleted file mode 100644
index 870d27d5891cd7..00000000000000
--- a/docs/src/app/components/pages/components/table.jsx
+++ /dev/null
@@ -1,598 +0,0 @@
-import React from 'react';
-import ComponentDoc from '../../component-doc';
-import {
-  Table,
-  TableBody,
-  TableHeader,
-  TableFooter,
-  TableRow,
-  TableHeaderColumn,
-  TableRowColumn,
-  TextField,
-  Toggle,
-  Paper,
-} from 'material-ui';
-
-import Code from 'table-code';
-import CodeExample from '../../CodeExample';
-import CodeBlock from '../../CodeExample/CodeBlock';
-
-export default class TablePage extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this._onToggle = this._onToggle.bind(this);
-    this._onChange = this._onChange.bind(this);
-    this._onRowSelection = this._onRowSelection.bind(this);
-
-    this.state = {
-      fixedHeader: true,
-      fixedFooter: true,
-      stripedRows: false,
-      showRowHover: false,
-      selectable: true,
-      multiSelectable: false,
-      enableSelectAll: false,
-      deselectOnClickaway: true,
-      height: '300px',
-    };
-  }
-
-  _onChange(e) {
-    this.setState({height: e.target.value});
-  }
-
-  _onToggle(e, toggled) {
-    let state = {};
-    state[e.target.name] = toggled;
-    this.setState(state);
-  }
-
-  _onRowSelection(rows) {
-    console.log(rows);
-  }
-
-  render() {
-
-    let desc = 'Composible data table component. The table must be contain TableHeader and TableBody. TableFooter ' +
-      'is optional. Each table component can be provided the props className and style. All components will have a ' +
-      'default className of "mui-table-XXX" where XXX is the component.';
-
-    let componentInfo = [
-      {
-        name: 'Table Props',
-        infoArray: [
-          {
-            name: 'allRowsSelected',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Set to true to indicate that all rows should be selected.',
-          },
-          {
-            name: 'bodyStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the body\'s table element.',
-          },
-          {
-            name: 'fixedFooter',
-            type: 'bool',
-            header: 'optional',
-            desc: 'If true, the footer will appear fixed below the table. The default value is true.',
-          },
-          {
-            name: 'fixedHeader',
-            type: 'bool',
-            header: 'optional',
-            desc: 'If true, the header will appear fixed above the table. The default value is true.',
-          },
-          {
-            name: 'footerStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the footer\'s table element.',
-          },
-          {
-            name: 'headerStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the header\'s table element.',
-          },
-          {
-            name: 'height',
-            type: 'string',
-            header: 'optional',
-            desc: 'The height of the table.',
-          },
-          {
-            name: 'multiSelectable',
-            type: 'bool',
-            header: 'optional',
-            desc: 'If true, multiple table rows can be selected. CTRL/CMD+Click and SHIFT+Click ' +
-              'are valid actions. The ' +
-              'default value is false.',
-          },
-          {
-            name: 'selectable',
-            type: 'bool',
-            header: 'optional',
-            desc: 'If true, table rows can be selected. If multiple row selection is desired, ' +
-              ' enable multiSelectable. ' +
-              'The default value is true.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of header, footer and body wrapper elements.',
-          },
-          {
-            name: 'wrapperStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the table\'s wrapper element.',
-          },
-        ],
-      },
-      {
-        name: 'Table Header Props',
-        infoArray: [
-          {
-            name: 'adjustForCheckbox',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'Controls whether or not header rows should be adjusted for a checkbox ' +
-              'column. If the select all checkbox ' +
-              'is true, this property will not influence the number of columns. This ' +
-              'is mainly useful for "super header" ' +
-              'rows so that the checkbox column does not create an offset that needs ' +
-              'to be accounted for manually.',
-          },
-          {
-            name: 'displaySelectAll',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'Controls whether or not the select all checkbox is displayed.',
-          },
-          {
-            name: 'enableSelectAll',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'If set to true, the select all button will be interactable. ' +
-              'If set to false, the button will not ' +
-              'be interactable. To hide the checkbox, set displaySelectAll to false.',
-          },
-          {
-            name: 'selectAllSelected',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'If set to true the select all checkbox will be programmatically ' +
-              'checked and will not trigger the select ' +
-              'all event.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the table header\'s root element.',
-          },
-        ],
-      },
-      {
-        name: 'Table Body Props',
-        infoArray: [
-          {
-            name: 'allRowsSelected',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Set to true to indicate that all rows should be selected.',
-          },
-          {
-            name: 'deselectOnClickaway',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'Controls whether or not to deselect all selected rows after clicking outside the table.',
-          },
-          {
-            name: 'displayRowCheckbox',
-            type: 'bool',
-            header: 'optional',
-            desc: 'Controls the display of the row checkbox. The default value is true.',
-          },
-          {
-            name: 'multiSelectable',
-            type: 'bool',
-            header: 'optional',
-            desc: `If true, multiple table rows can be selected.
-              CTRL/CMD+Click and SHIFT+Click are valid actions. The default value is false.`,
-          },
-          {
-            name: 'preScanRows',
-            type: 'bool',
-            header: 'default: true',
-            desc: `Controls whether or not the rows are pre-scanned to determine initial state.
-              If your table has a large number of rows and you are experiencing a delay in rendering,
-              turn off this property.`,
-          },
-          {
-            name: 'selectable',
-            type: 'bool',
-            header: 'optional',
-            desc: `If true, table rows can be selected.
-              If multiple row selection is desired, enable multiSelectable.
-              The default value is true.`,
-          },
-          {
-            name: 'showRowHover',
-            type: 'bool',
-            header: 'optional',
-            desc: `If true, table rows will be highlighted when the cursor is hovering over the row.
-              The default value is false.`,
-          },
-          {
-            name: 'stripedRows',
-            type: 'bool',
-            header: 'optional',
-            desc: `If true, every other table row starting with the first row will be striped.
-              The default value is false.`,
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the table body\'s root element.',
-          },
-        ],
-      },
-      {
-        name: 'Table Footer Props',
-        infoArray: [
-          {
-            name: 'adjustForCheckbox',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'Controls whether or not header rows should be adjusted for ' +
-              'a checkbox column. If the select all checkbox ' +
-              'is true, this property will not influence the number of columns. ' +
-              'This is mainly useful for "super header" ' +
-              'rows so that the checkbox column does not create an offset that needs to be accounted for manually.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the table footer\'s root element.',
-          },
-        ],
-      },
-      {
-        name: 'Table Row Props',
-        infoArray: [
-          {
-            name: 'displayBorder',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'If true, row border will be displayed for the row. If false, no border will be drawn.',
-          },
-          {
-            name: 'hoverable',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Controls whether or not the row reponseds to hover events.',
-          },
-          {
-            name: 'rowNumber',
-            type: 'number',
-            header: 'optional',
-            desc: 'Number to identify the row. This property is automatically populated ' +
-              'when used with the TableBody component.',
-          },
-          {
-            name: 'selectable',
-            type: 'bool',
-            header: 'default: true',
-            desc: 'If true, table rows can be selected. If multiple row selection is desired, ' +
-              'enable multiSelectable. ' +
-              'The default value is true.',
-          },
-          {
-            name: 'selected',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Indicates that a particular row is selected. This property can be used to ' +
-              'programmatically select rows.',
-          },
-          {
-            name: 'striped',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'Indicates whether or not the row is striped.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the table row\'s root element.',
-          },
-        ],
-      },
-      {
-        name: 'Table Header Column Props',
-        infoArray: [
-          {
-            name: 'columnNumber',
-            type: 'number',
-            header: 'optional',
-            desc: 'Number to identify the header row. This property is automatically ' +
-              ' populated when used with TableHeader.',
-          },
-          {
-            name: 'tooltip',
-            type: 'string',
-            header: 'optional',
-            desc: 'The string to supply to the tooltip. If not string is supplied no tooltip will be shown.',
-          },
-          {
-            name: 'tooltipStyle',
-            type: 'object',
-            header: 'optional',
-            desc: 'Additional styling that can be applied to the tooltip.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the table header column\'s root element.',
-          },
-        ],
-      },
-      {
-        name: 'Table Row Column Props',
-        infoArray: [
-          {
-            name: 'columnNumber',
-            type: 'number',
-            header: 'optional',
-            desc: 'Number to identify the header row. This property is automatically ' +
-              'populated when used with TableHeader.',
-          },
-          {
-            name: 'hoverable',
-            type: 'bool',
-            header: 'default: false',
-            desc: 'If true, this column responds to hover events.',
-          },
-          {
-            name: 'style',
-            type: 'object',
-            header: 'optional',
-            desc: 'Override the inline-styles of the table row column\'s root element.',
-          },
-        ],
-      },
-      {
-        name: 'Table Events',
-        infoArray: [
-          {
-            name: 'onRowSelection',
-            type: 'function(selectedRows)',
-            header: 'optional',
-            desc: 'Called when a row is selected. selectedRows is an array of all row ' +
-              'selections. IF all rows have been ' +
-              'selected, the string "all" will be returned instead to indicate that all rows have been selected.',
-          },
-          {
-            name: 'onCellClick',
-            type: 'function(rowNumber, columnId)',
-            header: 'optional',
-            desc: 'Called when a row cell is clicked. rowNumber is the row number and columnId is the column number ' +
-              'or the column key.',
-          },
-          {
-            name: 'onRowHover',
-            type: 'function(rowNumber)',
-            header: 'optional',
-            desc: 'Called when a table row is hovered. rowNumber is the row number of the hovered row.',
-          },
-          {
-            name: 'onRowHoverExit',
-            type: 'function(rowNumber)',
-            header: 'optional',
-            desc: 'Called when a table row is no longer hovered. rowNumber is the row number of the row that is no ' +
-              'longer hovered.',
-          },
-          {
-            name: 'onCellHover',
-            type: 'function(rowNumber, columnId)',
-            header: 'optional',
-            desc: `Called when a table cell is hovered. rowNumber is the row number of
-              the hovered row and columnId is the column number or the column key of the cell.`,
-          },
-          {
-            name: 'onCellHoverExit',
-            type: 'function(rowNumber, columnId)',
-            header: 'optional',
-            desc: `Called when a table cell is no longer hovered.
-              rowNumber is the row number of the row and columnId is the column number or the column key of the cell.`,
-          },
-        ],
-      },
-      {
-        name: 'Table Header Events',
-        infoArray: [
-          {
-            name: 'onSelectAll',
-            type: 'function(checked)',
-            header: 'optional',
-            desc: 'Called when the select all checkbox has been toggled.',
-          },
-        ],
-      },
-    ];
-
-    let propContainerStyle = {
-      width: '200px',
-      overflow: 'hidden',
-      margin: '20px auto 0 auto',
-    };
-
-    return (
-      <ComponentDoc
-        name="Table"
-        desc={desc}
-        componentInfo={componentInfo}>
-
-        <Paper style = {{marginBottom: '22px'}}>
-          <CodeBlock>
-          {
-            '//Import statements:\nimport Table from \'material-ui/lib/table/table\';\n' +
-            'import TableBody from \'material-ui/lib/table/table-body\';\n' +
-            'import TableFooter from \'material-ui/lib/table/table-footer\';\n' +
-            'import TableHeader from \'material-ui/lib/table/table-header\';\n' +
-            'import TableHeaderColumn from \'material-ui/lib/table/table-header-column\';\n' +
-            'import TableRow from \'material-ui/lib/table/table-row\';\n' +
-            'import TableRowColumn from \'material-ui/lib/table/table-row-column\';\n\n' +
-            '//See material-ui/lib/index.js for more\n'
-          }
-          </CodeBlock>
-        </Paper>
-
-        <CodeExample code={Code}>
-          <div className="table-examples">
-            <Table
-              height={this.state.height}
-              fixedHeader={this.state.fixedHeader}
-              fixedFooter={this.state.fixedFooter}
-              selectable={this.state.selectable}
-              multiSelectable={this.state.multiSelectable}
-              onRowSelection={this._onRowSelection}>
-              <TableHeader enableSelectAll={this.state.enableSelectAll}>
-                <TableRow>
-                  <TableHeaderColumn colSpan="3" tooltip="Super Header" style={{textAlign: 'center'}}>
-                    Super Header
-                  </TableHeaderColumn>
-                </TableRow>
-                <TableRow>
-                  <TableHeaderColumn tooltip="The ID">ID</TableHeaderColumn>
-                  <TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
-                  <TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
-                </TableRow>
-              </TableHeader>
-              <TableBody
-                deselectOnClickaway={this.state.deselectOnClickaway}
-                showRowHover={this.state.showRowHover}
-                stripedRows={this.state.stripedRows}>
-                <TableRow selected={true}>
-                  <TableRowColumn>1</TableRowColumn>
-                  <TableRowColumn>John Smith</TableRowColumn>
-                  <TableRowColumn>Employed</TableRowColumn>
-                </TableRow>
-                <TableRow>
-                  <TableRowColumn>2</TableRowColumn>
-                  <TableRowColumn>Randal White</TableRowColumn>
-                  <TableRowColumn>Unemployed</TableRowColumn>
-                </TableRow>
-                <TableRow selected={true}>
-                  <TableRowColumn>3</TableRowColumn>
-                  <TableRowColumn>Stephanie Sanders</TableRowColumn>
-                  <TableRowColumn>Employed</TableRowColumn>
-                </TableRow>
-                <TableRow>
-                  <TableRowColumn>4</TableRowColumn>
-                  <TableRowColumn>Steve Brown</TableRowColumn>
-                  <TableRowColumn>Employed</TableRowColumn>
-                </TableRow>
-                <TableRow>
-                  <TableRowColumn>5</TableRowColumn>
-                  <TableRowColumn>Joyce Whitten</TableRowColumn>
-                  <TableRowColumn>Employed</TableRowColumn>
-                </TableRow>
-                <TableRow>
-                  <TableRowColumn>6</TableRowColumn>
-                  <TableRowColumn>Samuel Roberts</TableRowColumn>
-                  <TableRowColumn>Unemployed</TableRowColumn>
-                </TableRow>
-                <TableRow>
-                  <TableRowColumn>7</TableRowColumn>
-                  <TableRowColumn>Adam Moore</TableRowColumn>
-                  <TableRowColumn>Employed</TableRowColumn>
-                </TableRow>
-              </TableBody>
-              <TableFooter>
-                <TableRow>
-                  <TableRowColumn>ID</TableRowColumn>
-                  <TableRowColumn>Name</TableRowColumn>
-                  <TableRowColumn>Status</TableRowColumn>
-                </TableRow>
-                <TableRow>
-                  <TableRowColumn colSpan="3" style={{textAlign: 'center'}}>
-                    Super Footer
-                  </TableRowColumn>
-                </TableRow>
-              </TableFooter>
-            </Table>
-
-            <div style={propContainerStyle}>
-              <h3>Table Properties</h3>
-              <TextField
-                floatingLabelText="Table Body Height"
-                defaultValue={this.state.height}
-                onChange={this._onChange} />
-
-              <Toggle
-                name="fixedHeader"
-                label="Fixed Header"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.fixedHeader} />
-
-              <Toggle
-                name="fixedFooter"
-                label="Fixed Footer"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.fixedFooter} />
-
-              <Toggle
-                name="stripedRows"
-                label="Stripe Rows"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.stripedRows} />
-
-              <Toggle
-                name="showRowHover"
-                label="Show Row Hover"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.showRowHover} />
-
-              <Toggle
-                name="selectable"
-                label="Selectable"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.selectable} />
-
-              <Toggle
-                name="multiSelectable"
-                label="Multi-Selectable"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.multiSelectable} />
-
-              <Toggle
-                name="enableSelectAll"
-                label="Enable Select All"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.enableSelectAll} />
-
-              <Toggle
-                name="deselectOnClickaway"
-                label="Deselect On Clickaway"
-                onToggle={this._onToggle}
-                defaultToggled={this.state.deselectOnClickaway} />
-
-            </div>
-          </div>
-        </CodeExample>
-      </ComponentDoc>
-    );
-  }
-
-}
diff --git a/docs/src/app/components/raw-code/table-code.txt b/docs/src/app/components/raw-code/table-code.txt
deleted file mode 100644
index 0ee348f2ee5180..00000000000000
--- a/docs/src/app/components/raw-code/table-code.txt
+++ /dev/null
@@ -1,84 +0,0 @@
-// State
-this.state = {
-  fixedHeader: true,
-  fixedFooter: true,
-  stripedRows: false,
-  showRowHover: false,
-  selectable: true,
-  multiSelectable: false,
-  enableSelectAll: false,
-  deselectOnClickaway: true,
-  height: '300px',
-};
-<Table
-  height={this.state.height}
-  fixedHeader={this.state.fixedHeader}
-  fixedFooter={this.state.fixedFooter}
-  selectable={this.state.selectable}
-  multiSelectable={this.state.multiSelectable}
-  onRowSelection={this._onRowSelection}>
-  <TableHeader enableSelectAll={this.state.enableSelectAll}>
-    <TableRow>
-      <TableHeaderColumn colSpan="3" tooltip='Super Header' style={{textAlign: 'center'}}>
-        Super Header
-      </TableHeaderColumn>
-    </TableRow>
-    <TableRow>
-      <TableHeaderColumn tooltip='The ID'>ID</TableHeaderColumn>
-      <TableHeaderColumn tooltip='The Name'>Name</TableHeaderColumn>
-      <TableHeaderColumn tooltip='The Status'>Status</TableHeaderColumn>
-    </TableRow>
-  </TableHeader>
-  <TableBody
-    deselectOnClickaway={this.state.deselectOnClickaway}
-    showRowHover={this.state.showRowHover}
-    stripedRows={this.state.stripedRows}>
-  <TableRow selected={true}>
-      <TableRowColumn>1</TableRowColumn>
-      <TableRowColumn>John Smith</TableRowColumn>
-      <TableRowColumn>Employed</TableRowColumn>
-    </TableRow>
-    <TableRow>
-      <TableRowColumn>2</TableRowColumn>
-      <TableRowColumn>Randal White</TableRowColumn>
-      <TableRowColumn>Unemployed</TableRowColumn>
-    </TableRow>
-    <TableRow selected={true}>
-      <TableRowColumn>3</TableRowColumn>
-      <TableRowColumn>Stephanie Sanders</TableRowColumn>
-      <TableRowColumn>Employed</TableRowColumn>
-    </TableRow>
-    <TableRow>
-      <TableRowColumn>4</TableRowColumn>
-      <TableRowColumn>Steve Brown</TableRowColumn>
-      <TableRowColumn>Employed</TableRowColumn>
-    </TableRow>
-    <TableRow>
-      <TableRowColumn>5</TableRowColumn>
-      <TableRowColumn>Joyce Whitten</TableRowColumn>
-      <TableRowColumn>Employed</TableRowColumn>
-    </TableRow>
-    <TableRow>
-      <TableRowColumn>6</TableRowColumn>
-      <TableRowColumn>Samuel Roberts</TableRowColumn>
-      <TableRowColumn>Unemployed</TableRowColumn>
-    </TableRow>
-    <TableRow>
-      <TableRowColumn>7</TableRowColumn>
-      <TableRowColumn>Adam Moore</TableRowColumn>
-      <TableRowColumn>Employed</TableRowColumn>
-    </TableRow>
-  </TableBody>
-  <TableFooter>
-    <TableRow>
-      <TableRowColumn>ID</TableRowColumn>
-      <TableRowColumn>Name</TableRowColumn>
-      <TableRowColumn>Status</TableRowColumn>
-    </TableRow>
-    <TableRow>
-      <TableRowColumn colSpan="3" style={{textAlign: 'center'}}>
-        Super Footer
-      </TableRowColumn>
-    </TableRow>
-  </TableFooter>
-</Table>
diff --git a/src/table/table-body.jsx b/src/table/table-body.jsx
index e14b489917791a..a355a70f6180ac 100644
--- a/src/table/table-body.jsx
+++ b/src/table/table-body.jsx
@@ -10,25 +10,104 @@ import ThemeManager from '../styles/theme-manager';
 const TableBody = React.createClass({
 
   propTypes: {
+    /**
+     * Set to true to indicate that all rows should be selected.
+     */
     allRowsSelected: React.PropTypes.bool,
+
+    /**
+     * Children passed to table body.
+     */
     children: React.PropTypes.node,
 
     /**
      * The css class name of the root element.
      */
     className: React.PropTypes.string,
+
+    /**
+     * Controls whether or not to deselect all selected
+     * rows after clicking outside the table.
+     */
     deselectOnClickaway: React.PropTypes.bool,
+
+    /**
+     * Controls the display of the row checkbox. The default value is true.
+     */
     displayRowCheckbox: React.PropTypes.bool,
+
+    /**
+     * If true, multiple table rows can be selected.
+     * CTRL/CMD+Click and SHIFT+Click are valid actions.
+     * The default value is false.
+     */
     multiSelectable: React.PropTypes.bool,
+
+    /**
+     * Callback function for when a cell is clicked.
+     */
     onCellClick: React.PropTypes.func,
+
+    /**
+     * Called when a table cell is hovered. rowNumber
+     * is the row number of the hovered row and columnId
+     * is the column number or the column key of the cell.
+     */
     onCellHover: React.PropTypes.func,
+
+    /**
+     * Called when a table cell is no longer hovered.
+     * rowNumber is the row number of the row and columnId
+     * is the column number or the column key of the cell.
+     */
     onCellHoverExit: React.PropTypes.func,
+
+    /**
+     * Called when a table row is hovered.
+     * rowNumber is the row number of the hovered row.
+     */
     onRowHover: React.PropTypes.func,
+
+    /**
+     * Called when a table row is no longer
+     * hovered. rowNumber is the row number of the row
+     * that is no longer hovered.
+     */
     onRowHoverExit: React.PropTypes.func,
+
+    /**
+     * Called when a row is selected. selectedRows is an
+     * array of all row selections. IF all rows have been selected,
+     * the string "all" will be returned instead to indicate that
+     * all rows have been selected.
+     */
     onRowSelection: React.PropTypes.func,
+
+    /**
+     * Controls whether or not the rows are pre-scanned to determine
+     * initial state. If your table has a large number of rows and
+     * you are experiencing a delay in rendering, turn off this property.
+     */
     preScanRows: React.PropTypes.bool,
+
+    /**
+     * If true, table rows can be selected. If multiple
+     * row selection is desired, enable multiSelectable.
+     * The default value is true.
+     */
     selectable: React.PropTypes.bool,
+
+    /**
+     * If true, table rows will be highlighted when
+     * the cursor is hovering over the row. The default
+     * value is false.
+     */
     showRowHover: React.PropTypes.bool,
+
+    /**
+     * If true, every other table row starting
+     * with the first row will be striped. The default value is false.
+     */
     stripedRows: React.PropTypes.bool,
 
     /**
diff --git a/src/table/table-footer.jsx b/src/table/table-footer.jsx
index 86371f8cd84d21..39635d5f15527f 100644
--- a/src/table/table-footer.jsx
+++ b/src/table/table-footer.jsx
@@ -7,7 +7,18 @@ import ThemeManager from '../styles/theme-manager';
 const TableFooter = React.createClass({
 
   propTypes: {
+    /**
+     * Controls whether or not header rows should be adjusted
+     * for a checkbox column. If the select all checkbox is true,
+     * this property will not influence the number of columns.
+     * This is mainly useful for "super header" rows so that
+     * the checkbox column does not create an offset that needs
+     * to be accounted for manually.
+     */
     adjustForCheckbox: React.PropTypes.bool,
+    /**
+     * Children passed to table footer.
+     */
     children: React.PropTypes.node,
 
     /**
diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx
index 2494e111ee5b98..3022d3792a0812 100644
--- a/src/table/table-header-column.jsx
+++ b/src/table/table-header-column.jsx
@@ -13,15 +13,37 @@ const TableHeaderColumn = React.createClass({
      * The css class name of the root element.
      */
     className: React.PropTypes.string,
+
+    /**
+     * Number to identify the header row. This property
+     * is automatically populated when used with TableHeader.
+     */
     columnNumber: React.PropTypes.number,
+
+    /**
+     * Key prop for table header column.
+     */
     key: React.PropTypes.string,
+
+    /**
+     * Callback function for click event.
+     */
     onClick: React.PropTypes.func,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * The string to supply to the tooltip. If not
+     * string is supplied no tooltip will be shown.
+     */
     tooltip: React.PropTypes.string,
+
+    /**
+     * Additional styling that can be applied to the tooltip.
+     */
     tooltipStyle: React.PropTypes.object,
   },
 
diff --git a/src/table/table-header.jsx b/src/table/table-header.jsx
index 7902b8f02b9d02..88f7208631a075 100644
--- a/src/table/table-header.jsx
+++ b/src/table/table-header.jsx
@@ -8,16 +8,47 @@ import ThemeManager from '../styles/theme-manager';
 const TableHeader = React.createClass({
 
   propTypes: {
+    /**
+     * Controls whether or not header rows should be
+     * adjusted for a checkbox column. If the select all
+     * checkbox is true, this property will not influence
+     * the number of columns. This is mainly useful for
+     * "super header" rows so that the checkbox column
+     * does not create an offset that needs to be accounted
+     * for manually.
+     */
     adjustForCheckbox: React.PropTypes.bool,
+
+    /**
+     * Children passed to table header.
+     */
     children: React.PropTypes.node,
 
     /**
      * The css class name of the root element.
      */
     className: React.PropTypes.string,
+
+    /**
+     * Controls whether or not the select all checkbox is displayed.
+     */
     displaySelectAll: React.PropTypes.bool,
+
+    /**
+     * If set to true, the select all button will be interactable.
+     * If set to false, the button will not be interactable.
+     * To hide the checkbox, set displaySelectAll to false.
+     */
     enableSelectAll: React.PropTypes.bool,
+
+    /**
+     * Callback when select all has been checked.
+     */
     onSelectAll: React.PropTypes.func,
+
+    /**
+     * True when select all has been checked.
+     */
     selectAllSelected: React.PropTypes.bool,
 
     /**
@@ -92,7 +123,6 @@ const TableHeader = React.createClass({
       if (!React.isValidElement(child)) continue;
 
       let props = {
-        displayRowCheckbox: false,
         key: 'sh' + index,
         rowNumber: index,
       };
diff --git a/src/table/table-row-column.jsx b/src/table/table-row-column.jsx
index 32bcd4b76b7d95..73e3f923437532 100644
--- a/src/table/table-row-column.jsx
+++ b/src/table/table-row-column.jsx
@@ -12,11 +12,36 @@ const TableRowColumn = React.createClass({
      * The css class name of the root element.
      */
     className: React.PropTypes.string,
+
+    /**
+     * Number to identify the header row. This property
+     * is automatically populated when used with TableHeader.
+     */
     columnNumber: React.PropTypes.number,
+
+    /**
+     * If true, this column responds to hover events.
+     */
     hoverable: React.PropTypes.bool,
+
+    /**
+     * Key for this element.
+     */
     key: React.PropTypes.string,
+
+    /**
+     * Callback function for click event.
+     */
     onClick: React.PropTypes.func,
+
+    /**
+     * Callback function for hover event.
+     */
     onHover: React.PropTypes.func,
+
+    /**
+     * Callback function for hover exit event.
+     */
     onHoverExit: React.PropTypes.func,
 
     /**
diff --git a/src/table/table-row.jsx b/src/table/table-row.jsx
index 8eac0b8fcfcf89..a222ee9b2d8fc0 100644
--- a/src/table/table-row.jsx
+++ b/src/table/table-row.jsx
@@ -6,23 +6,87 @@ import ThemeManager from '../styles/theme-manager';
 const TableRow = React.createClass({
 
   propTypes: {
+    /**
+     * Children passed to table row.
+     */
     children: React.PropTypes.node,
 
     /**
      * The css class name of the root element.
      */
     className: React.PropTypes.string,
+
+    /**
+     * If true, row border will be displayed for the row.
+     * If false, no border will be drawn.
+     */
     displayBorder: React.PropTypes.bool,
+
+    /**
+     * Controls whether or not the row reponseds to hover events.
+     */
     hoverable: React.PropTypes.bool,
+
+    /**
+     * Called when a row cell is clicked.
+     * rowNumber is the row number and columnId is
+     * the column number or the column key.
+     */
     onCellClick: React.PropTypes.func,
+
+    /**
+     * Called when a table cell is hovered.
+     * rowNumber is the row number of the hovered row
+     * and columnId is the column number or the column key of the cell.
+     */
     onCellHover: React.PropTypes.func,
+
+    /**
+     * Called when a table cell is no longer hovered.
+     * rowNumber is the row number of the row and columnId
+     * is the column number or the column key of the cell.
+     */
     onCellHoverExit: React.PropTypes.func,
+
+    /**
+     * Called when row is clicked.
+     */
     onRowClick: React.PropTypes.func,
+
+    /**
+     * Called when a table row is hovered.
+     * rowNumber is the row number of the hovered row.
+     */
     onRowHover: React.PropTypes.func,
+
+    /**
+     * Called when a table row is no longer hovered.
+     * rowNumber is the row number of the row that is no longer hovered.
+     */
     onRowHoverExit: React.PropTypes.func,
+
+    /**
+     * Number to identify the row. This property is
+     * automatically populated when used with the TableBody component.
+     */
     rowNumber: React.PropTypes.number,
+
+    /**
+     * If true, table rows can be selected. If multiple row
+     * selection is desired, enable multiSelectable.
+     * The default value is true.
+     */
     selectable: React.PropTypes.bool,
+
+    /**
+     * Indicates that a particular row is selected.
+     * This property can be used to programmatically select rows.
+     */
     selected: React.PropTypes.bool,
+
+    /**
+     * Indicates whether or not the row is striped.
+     */
     striped: React.PropTypes.bool,
 
     /**
@@ -47,7 +111,6 @@ const TableRow = React.createClass({
   getDefaultProps() {
     return {
       displayBorder: true,
-      displayRowCheckbox: true,
       hoverable: false,
       selectable: true,
       selected: false,
diff --git a/src/table/table.jsx b/src/table/table.jsx
index 341dfbec260779..cd6cb22830cf20 100644
--- a/src/table/table.jsx
+++ b/src/table/table.jsx
@@ -7,32 +7,116 @@ import ThemeManager from '../styles/theme-manager';
 const Table = React.createClass({
 
   propTypes: {
+    /**
+     * Set to true to indicate that all rows should be selected.
+     */
     allRowsSelected: React.PropTypes.bool,
+
+    /**
+     * Override the inline-styles of the body's table element.
+     */
     bodyStyle: React.PropTypes.object,
+
+    /**
+     * Children passed to table.
+     */
     children: React.PropTypes.node,
 
     /**
      * The css class name of the root element.
      */
     className: React.PropTypes.string,
+
+    /**
+     * If true, the footer will appear fixed below the table.
+     * The default value is true.
+     */
     fixedFooter: React.PropTypes.bool,
+
+    /**
+     * If true, the header will appear fixed above the table.
+     * The default value is true.
+     */
     fixedHeader: React.PropTypes.bool,
+
+    /**
+     * Override the inline-styles of the footer's table element.
+     */
     footerStyle: React.PropTypes.object,
+
+    /**
+     * Override the inline-styles of the header's table element.
+     */
     headerStyle: React.PropTypes.object,
+
+    /**
+     * The height of the table.
+     */
     height: React.PropTypes.string,
+
+    /**
+     * If true, multiple table rows can be selected.
+     * CTRL/CMD+Click and SHIFT+Click are valid actions.
+     * The default value is false.
+     */
     multiSelectable: React.PropTypes.bool,
+
+    /**
+     * Called when a row cell is clicked.
+     * rowNumber is the row number and columnId is
+     * the column number or the column key.
+     */
     onCellClick: React.PropTypes.func,
+
+    /**
+     * Called when a table cell is hovered.
+     * rowNumber is the row number of the hovered row
+     * and columnId is the column number or the column key of the cell.
+     */
     onCellHover: React.PropTypes.func,
+
+    /**
+     * Called when a table cell is no longer hovered.
+     * rowNumber is the row number of the row and columnId
+     * is the column number or the column key of the cell.
+     */
     onCellHoverExit: React.PropTypes.func,
+
+    /**
+     * Called when a table row is hovered.
+     * rowNumber is the row number of the hovered row.
+     */
     onRowHover: React.PropTypes.func,
+
+    /**
+     * Called when a table row is no longer hovered.
+     * rowNumber is the row number of the row that is no longer hovered.
+     */
     onRowHoverExit: React.PropTypes.func,
+
+    /**
+     * Called when a row is selected.
+     * selectedRows is an array of all row selections.
+     * IF all rows have been selected, the string "all"
+     * will be returned instead to indicate that all rows have been selected.
+     */
     onRowSelection: React.PropTypes.func,
+
+    /**
+     * If true, table rows can be selected.
+     * If multiple row selection is desired, enable multiSelectable.
+     * The default value is true.
+     */
     selectable: React.PropTypes.bool,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * Override the inline-styles of the table's wrapper element.
+     */
     wrapperStyle: React.PropTypes.object,
   },