From 39f80232b64f99330830f532d5acb26ee01406c3 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <af@e42.guru>
Date: Mon, 7 Aug 2017 17:26:45 +0300
Subject: [PATCH] style(docs): update formatting of Menu and Table examples

---
 .../Menu/Content/MenuExampleButtons.js        |  22 +-
 .../Menu/Content/MenuExampleDropdownItem.js   |  24 +-
 .../Menu/Content/MenuExampleHeaderVertical.js |   2 +-
 .../Menu/Content/MenuExampleInputs.js         |  22 +-
 .../Menu/Content/MenuExampleMenus.js          |  12 +-
 .../collections/Menu/Content/index.js         | 112 +++----
 .../Menu/States/MenuExampleActive.js          |  14 +-
 .../Menu/States/MenuExampleDisabled.js        |  14 +-
 .../Menu/States/MenuExampleHover.js           |  14 +-
 .../Examples/collections/Menu/States/index.js |  40 ++-
 .../Menu/Types/MenuExampleAttached.js         |  72 ++--
 .../Examples/collections/Menu/Types/index.js  | 124 ++++---
 .../Menu/Variations/MenuExampleFixed.js       |  16 +-
 .../collections/Menu/Variations/index.js      | 198 ++++++-----
 docs/app/Examples/collections/Menu/index.js   |  18 +-
 .../Table/States/TableExampleActive.js        |  68 ++--
 .../Table/States/TableExampleDisabled.js      |  68 ++--
 .../Table/States/TableExampleError.js         |  72 ++--
 .../States/TableExamplePositiveNegative.js    |  76 +++--
 .../Table/States/TableExampleWarning.js       |  76 +++--
 .../collections/Table/States/index.js         |  70 ++--
 .../Table/Types/TableExampleApprove.js        | 110 +++---
 .../Table/Types/TableExampleCollapsing.js     | 122 ++++---
 .../Table/Types/TableExampleDefinition.js     |  48 ++-
 .../Table/Types/TableExamplePadded.js         |  88 +++--
 .../Table/Types/TableExamplePagination.js     |  66 ++--
 .../Table/Types/TableExampleStriped.js        |  94 +++---
 .../Table/Types/TableExampleStructured.js     | 116 ++++---
 .../Examples/collections/Table/Types/index.js |  48 ++-
 .../Table/Variations/TableExampleBasic.js     |  58 ++--
 .../Table/Variations/TableExampleCelled.js    |  72 ++--
 .../Variations/TableExampleCollapsing.js      |  72 ++--
 .../Variations/TableExampleCollapsingCell.js  |  56 ++--
 .../Variations/TableExampleColumnCount.js     |  92 +++--
 .../Variations/TableExampleColumnWidth.js     |  62 ++--
 .../Table/Variations/TableExampleCompact.js   | 108 +++---
 .../Table/Variations/TableExampleFixed.js     |  64 ++--
 .../Table/Variations/TableExampleFixedLine.js |  72 ++--
 .../Table/Variations/TableExampleFullWidth.js |  22 +-
 .../Table/Variations/TableExampleInverted.js  |  72 ++--
 .../Table/Variations/TableExampleLarge.js     |  72 ++--
 .../Table/Variations/TableExamplePadded.js    |  50 ++-
 .../Variations/TableExampleSelectableCell.js  | 112 +++----
 .../TableExampleSelectableInvertedRow.js      |  58 ++--
 .../Variations/TableExampleSelectableRow.js   |  88 +++--
 .../Variations/TableExampleSingleLine.js      |  66 ++--
 .../Table/Variations/TableExampleSmall.js     |  72 ++--
 .../Table/Variations/TableExampleStackable.js |  58 ++--
 .../Table/Variations/TableExampleStriped.js   | 126 ++++---
 .../Table/Variations/TableExampleTextAlign.js |  58 ++--
 .../Variations/TableExampleUnstackable.js     |  58 ++--
 .../Variations/TableExampleVerticalAlign.js   |  52 ++-
 .../Table/Variations/TableExampleVeryBasic.js |  58 ++--
 .../Variations/TableExampleVeryCompact.js     | 108 +++---
 .../Variations/TableExampleVeryPadded.js      |  50 ++-
 .../collections/Table/Variations/index.js     | 313 +++++++++---------
 56 files changed, 1933 insertions(+), 2042 deletions(-)

diff --git a/docs/app/Examples/collections/Menu/Content/MenuExampleButtons.js b/docs/app/Examples/collections/Menu/Content/MenuExampleButtons.js
index 33a68327e4..34f07eb5b9 100644
--- a/docs/app/Examples/collections/Menu/Content/MenuExampleButtons.js
+++ b/docs/app/Examples/collections/Menu/Content/MenuExampleButtons.js
@@ -1,18 +1,16 @@
 import React from 'react'
 import { Button, Menu } from 'semantic-ui-react'
 
-const MenuExampleButtons = () => {
-  return (
-    <Menu>
-      <Menu.Item>
-        <Button primary>Sign up</Button>
-      </Menu.Item>
+const MenuExampleButtons = () => (
+  <Menu>
+    <Menu.Item>
+      <Button primary>Sign up</Button>
+    </Menu.Item>
 
-      <Menu.Item>
-        <Button>Log-in</Button>
-      </Menu.Item>
-    </Menu>
-  )
-}
+    <Menu.Item>
+      <Button>Log-in</Button>
+    </Menu.Item>
+  </Menu>
+)
 
 export default MenuExampleButtons
diff --git a/docs/app/Examples/collections/Menu/Content/MenuExampleDropdownItem.js b/docs/app/Examples/collections/Menu/Content/MenuExampleDropdownItem.js
index d6b7a9c1d3..f29ddd13ff 100644
--- a/docs/app/Examples/collections/Menu/Content/MenuExampleDropdownItem.js
+++ b/docs/app/Examples/collections/Menu/Content/MenuExampleDropdownItem.js
@@ -1,18 +1,16 @@
 import React from 'react'
 import { Dropdown, Menu } from 'semantic-ui-react'
 
-const MenuExampleDropdownItem = () => {
-  return (
-    <Menu vertical>
-      <Dropdown item text='Categories'>
-        <Dropdown.Menu>
-          <Dropdown.Item>Electronics</Dropdown.Item>
-          <Dropdown.Item>Automotive</Dropdown.Item>
-          <Dropdown.Item>Home</Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
-    </Menu>
-  )
-}
+const MenuExampleDropdownItem = () => (
+  <Menu vertical>
+    <Dropdown item text='Categories'>
+      <Dropdown.Menu>
+        <Dropdown.Item>Electronics</Dropdown.Item>
+        <Dropdown.Item>Automotive</Dropdown.Item>
+        <Dropdown.Item>Home</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  </Menu>
+)
 
 export default MenuExampleDropdownItem
diff --git a/docs/app/Examples/collections/Menu/Content/MenuExampleHeaderVertical.js b/docs/app/Examples/collections/Menu/Content/MenuExampleHeaderVertical.js
index 1d2a4a1cc3..738391af98 100644
--- a/docs/app/Examples/collections/Menu/Content/MenuExampleHeaderVertical.js
+++ b/docs/app/Examples/collections/Menu/Content/MenuExampleHeaderVertical.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { Menu } from 'semantic-ui-react'
 
 export default class MenuExampleHeaderVertical extends Component {
-  handleItemClick = (name) => this.setState({ activeItem: name })
+  handleItemClick = name => this.setState({ activeItem: name })
 
   render() {
     const { activeItem } = this.state || {}
diff --git a/docs/app/Examples/collections/Menu/Content/MenuExampleInputs.js b/docs/app/Examples/collections/Menu/Content/MenuExampleInputs.js
index d86122c633..48dc526db2 100644
--- a/docs/app/Examples/collections/Menu/Content/MenuExampleInputs.js
+++ b/docs/app/Examples/collections/Menu/Content/MenuExampleInputs.js
@@ -1,18 +1,16 @@
 import React from 'react'
 import { Input, Menu } from 'semantic-ui-react'
 
-const MenuExampleInputs = () => {
-  return (
-    <Menu>
-      <Menu.Item>
-        <Input className='icon' icon='search' placeholder='Search...' />
-      </Menu.Item>
+const MenuExampleInputs = () => (
+  <Menu>
+    <Menu.Item>
+      <Input className='icon' icon='search' placeholder='Search...' />
+    </Menu.Item>
 
-      <Menu.Item position='right'>
-        <Input action={{ type: 'submit', content: 'Go' }} placeholder='Navigate to...' />
-      </Menu.Item>
-    </Menu>
-  )
-}
+    <Menu.Item position='right'>
+      <Input action={{ type: 'submit', content: 'Go' }} placeholder='Navigate to...' />
+    </Menu.Item>
+  </Menu>
+)
 
 export default MenuExampleInputs
diff --git a/docs/app/Examples/collections/Menu/Content/MenuExampleMenus.js b/docs/app/Examples/collections/Menu/Content/MenuExampleMenus.js
index 05c0459762..9e8521bb4c 100644
--- a/docs/app/Examples/collections/Menu/Content/MenuExampleMenus.js
+++ b/docs/app/Examples/collections/Menu/Content/MenuExampleMenus.js
@@ -19,15 +19,15 @@ export default class MenuExampleMenus extends Component {
           Submit
         </Menu.Item>
 
-       <Menu.Menu position='right'>
-         <Menu.Item name='signup' active={activeItem === 'signup'} onClick={this.handleItemClick}>
+        <Menu.Menu position='right'>
+          <Menu.Item name='signup' active={activeItem === 'signup'} onClick={this.handleItemClick}>
            Sign Up
-         </Menu.Item>
+          </Menu.Item>
 
-         <Menu.Item name='help' active={activeItem === 'help'} onClick={this.handleItemClick}>
+          <Menu.Item name='help' active={activeItem === 'help'} onClick={this.handleItemClick}>
            Help
-         </Menu.Item>
-       </Menu.Menu>
+          </Menu.Item>
+        </Menu.Menu>
       </Menu>
     )
   }
diff --git a/docs/app/Examples/collections/Menu/Content/index.js b/docs/app/Examples/collections/Menu/Content/index.js
index 35c847f372..2a282e9324 100644
--- a/docs/app/Examples/collections/Menu/Content/index.js
+++ b/docs/app/Examples/collections/Menu/Content/index.js
@@ -6,71 +6,69 @@ import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 // TODO: Add example with <Popup> after it will be added
 // TODO: Add example with <Search> after it will be added
 
-const Content = () => {
-  return (
-    <ExampleSection title='Content'>
-      <ComponentExample
-        title='Header'
-        description='A menu item may include a header or may itself be a header.'
-        examplePath='collections/Menu/Content/MenuExampleHeader'
-      />
-      <ComponentExample examplePath='collections/Menu/Content/MenuExampleHeaderVertical' />
+const Content = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Header'
+      description='A menu item may include a header or may itself be a header.'
+      examplePath='collections/Menu/Content/MenuExampleHeader'
+    />
+    <ComponentExample examplePath='collections/Menu/Content/MenuExampleHeaderVertical' />
 
-      <ComponentExample
-        title='Text'
-        description='A vertical menu item can include any type of text content.'
-        examplePath='collections/Menu/Content/MenuExampleText'
-      />
+    <ComponentExample
+      title='Text'
+      description='A vertical menu item can include any type of text content.'
+      examplePath='collections/Menu/Content/MenuExampleText'
+    />
 
-      <ComponentExample
-        title='Input'
-        description='A menu item can contain an input inside of it.'
-        examplePath='collections/Menu/Content/MenuExampleInputs'
-      />
+    <ComponentExample
+      title='Input'
+      description='A menu item can contain an input inside of it.'
+      examplePath='collections/Menu/Content/MenuExampleInputs'
+    />
 
-      <ComponentExample
-        title='Button'
-        description='A menu item can contain a button inside of it.'
-        examplePath='collections/Menu/Content/MenuExampleButtons'
-      />
+    <ComponentExample
+      title='Button'
+      description='A menu item can contain a button inside of it.'
+      examplePath='collections/Menu/Content/MenuExampleButtons'
+    />
 
-      <ComponentExample
-        title='Link Item'
-        description='A menu may contain a link item, or an item formatted as if it is a link.'
-        examplePath='collections/Menu/Content/MenuExampleLinkItem'
-      />
+    <ComponentExample
+      title='Link Item'
+      description='A menu may contain a link item, or an item formatted as if it is a link.'
+      examplePath='collections/Menu/Content/MenuExampleLinkItem'
+    />
 
-       <ComponentExample
-         title='Dropdown Item'
-         description='An item may contain a nested menu in a dropdown.'
-         examplePath='collections/Menu/Content/MenuExampleDropdownItem'
-       />
+    <ComponentExample
+      title='Dropdown Item'
+      description='An item may contain a nested menu in a dropdown.'
+      examplePath='collections/Menu/Content/MenuExampleDropdownItem'
+    />
 
-      {/* <ComponentExample*/}
-        {/* title='Popup Menu'*/}
-        {/* description='A menu item may show a large menu, or additional content using a popup'*/}
-        {/* examplePath='collections/Menu/Content/Popups'*/}
-      {/* />*/}
+    {/* <ComponentExample */}
+    {/* title='Popup Menu' */}
+    {/* description='A menu item may show a large menu, or additional content using a popup' */}
+    {/* examplePath='collections/Menu/Content/Popups' */}
+    {/* /> */}
 
-      {/* <ComponentExample*/}
-        {/* title='Search'*/}
-        {/* description='A menu can contain a search input'*/}
-        {/* examplePath='collections/Menu/Content/Search'*/}
-      {/* />*/}
+    {/* <ComponentExample */}
+    {/* title='Search' */}
+    {/* description='A menu can contain a search input' */}
+    {/* examplePath='collections/Menu/Content/Search' */}
+    {/* /> */}
 
-       <ComponentExample
-         title='Menu'
-         description='A menu may contain another menu group in the same level as menu items.'
-         examplePath='collections/Menu/Content/MenuExampleMenus'
-       />
+    <ComponentExample
+      title='Menu'
+      description='A menu may contain another menu group in the same level as menu items.'
+      examplePath='collections/Menu/Content/MenuExampleMenus'
+    />
 
-      <ComponentExample
-        title='Sub Menu'
-        description='A menu item may contain another menu nested inside that acts as a grouped sub-menu.'
-        examplePath='collections/Menu/Content/MenuExampleSubMenu'
-      />
-    </ExampleSection>
-  )
-}
+    <ComponentExample
+      title='Sub Menu'
+      description='A menu item may contain another menu nested inside that acts as a grouped sub-menu.'
+      examplePath='collections/Menu/Content/MenuExampleSubMenu'
+    />
+  </ExampleSection>
+)
 
 export default Content
diff --git a/docs/app/Examples/collections/Menu/States/MenuExampleActive.js b/docs/app/Examples/collections/Menu/States/MenuExampleActive.js
index 042358eee4..7022b1e740 100644
--- a/docs/app/Examples/collections/Menu/States/MenuExampleActive.js
+++ b/docs/app/Examples/collections/Menu/States/MenuExampleActive.js
@@ -1,14 +1,12 @@
 import React from 'react'
 import { Menu } from 'semantic-ui-react'
 
-const MenuExampleActive = () => {
-  return (
-    <Menu compact>
-      <Menu.Item active>
+const MenuExampleActive = () => (
+  <Menu compact>
+    <Menu.Item active>
         Link
-      </Menu.Item>
-    </Menu>
-  )
-}
+    </Menu.Item>
+  </Menu>
+)
 
 export default MenuExampleActive
diff --git a/docs/app/Examples/collections/Menu/States/MenuExampleDisabled.js b/docs/app/Examples/collections/Menu/States/MenuExampleDisabled.js
index be5c6a238b..d9963ab804 100644
--- a/docs/app/Examples/collections/Menu/States/MenuExampleDisabled.js
+++ b/docs/app/Examples/collections/Menu/States/MenuExampleDisabled.js
@@ -1,14 +1,12 @@
 import React from 'react'
 import { Menu } from 'semantic-ui-react'
 
-const MenuExampleDisabled = () => {
-  return (
-    <Menu compact>
-      <Menu.Item disabled>
+const MenuExampleDisabled = () => (
+  <Menu compact>
+    <Menu.Item disabled>
         Link
-      </Menu.Item>
-    </Menu>
-  )
-}
+    </Menu.Item>
+  </Menu>
+)
 
 export default MenuExampleDisabled
diff --git a/docs/app/Examples/collections/Menu/States/MenuExampleHover.js b/docs/app/Examples/collections/Menu/States/MenuExampleHover.js
index b2946d5697..7b4184dabf 100644
--- a/docs/app/Examples/collections/Menu/States/MenuExampleHover.js
+++ b/docs/app/Examples/collections/Menu/States/MenuExampleHover.js
@@ -1,13 +1,11 @@
 import React from 'react'
 import { Menu } from 'semantic-ui-react'
 
-const MenuExampleHover = () => {
-  return (
-    <Menu compact>
-      <Menu.Item as='a'>A link</Menu.Item>
-      <Menu.Item link>div Link</Menu.Item>
-    </Menu>
-  )
-}
+const MenuExampleHover = () => (
+  <Menu compact>
+    <Menu.Item as='a'>A link</Menu.Item>
+    <Menu.Item link>div Link</Menu.Item>
+  </Menu>
+)
 
 export default MenuExampleHover
diff --git a/docs/app/Examples/collections/Menu/States/index.js b/docs/app/Examples/collections/Menu/States/index.js
index 7c6837db34..7bf0298cf1 100644
--- a/docs/app/Examples/collections/Menu/States/index.js
+++ b/docs/app/Examples/collections/Menu/States/index.js
@@ -3,28 +3,26 @@ import React from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-const States = () => {
-  return (
-    <ExampleSection title='States'>
-      <ComponentExample
-        title='Hover'
-        description='A menu item can be hovered.'
-        examplePath='collections/Menu/States/MenuExampleHover'
-      />
+const States = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Hover'
+      description='A menu item can be hovered.'
+      examplePath='collections/Menu/States/MenuExampleHover'
+    />
 
-      <ComponentExample
-        title='Active'
-        description='A menu item can be active.'
-        examplePath='collections/Menu/States/MenuExampleActive'
-      />
+    <ComponentExample
+      title='Active'
+      description='A menu item can be active.'
+      examplePath='collections/Menu/States/MenuExampleActive'
+    />
 
-      <ComponentExample
-        title='Disabled'
-        description='A menu item can be disabled.'
-        examplePath='collections/Menu/States/MenuExampleDisabled'
-      />
-    </ExampleSection>
-  )
-}
+    <ComponentExample
+      title='Disabled'
+      description='A menu item can be disabled.'
+      examplePath='collections/Menu/States/MenuExampleDisabled'
+    />
+  </ExampleSection>
+)
 
 export default States
diff --git a/docs/app/Examples/collections/Menu/Types/MenuExampleAttached.js b/docs/app/Examples/collections/Menu/Types/MenuExampleAttached.js
index b73fed5dc1..378a85bac8 100644
--- a/docs/app/Examples/collections/Menu/Types/MenuExampleAttached.js
+++ b/docs/app/Examples/collections/Menu/Types/MenuExampleAttached.js
@@ -3,46 +3,44 @@ import { Dropdown, Icon, Menu, Segment } from 'semantic-ui-react'
 
 // TODO: Update <Search> usage after its will be implemented
 
-const MenuExampleAttached = () => {
-  return (
-    <div>
-      <Menu attached='top'>
-        <Dropdown item icon='wrench' simple>
-          <Dropdown.Menu>
-            <Dropdown.Item>
-              <Icon name='dropdown' />
-              <span className='text'>New</span>
+const MenuExampleAttached = () => (
+  <div>
+    <Menu attached='top'>
+      <Dropdown item icon='wrench' simple>
+        <Dropdown.Menu>
+          <Dropdown.Item>
+            <Icon name='dropdown' />
+            <span className='text'>New</span>
 
-              <Dropdown.Menu>
-                <Dropdown.Item>Document</Dropdown.Item>
-                <Dropdown.Item>Image</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown.Item>
-            <Dropdown.Item>Open</Dropdown.Item>
-            <Dropdown.Item>Save...</Dropdown.Item>
-            <Dropdown.Item>Edit Permissions</Dropdown.Item>
-            <Dropdown.Divider />
-            <Dropdown.Header>Export</Dropdown.Header>
-            <Dropdown.Item>Share</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
+            <Dropdown.Menu>
+              <Dropdown.Item>Document</Dropdown.Item>
+              <Dropdown.Item>Image</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown.Item>
+          <Dropdown.Item>Open</Dropdown.Item>
+          <Dropdown.Item>Save...</Dropdown.Item>
+          <Dropdown.Item>Edit Permissions</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Header>Export</Dropdown.Header>
+          <Dropdown.Item>Share</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
 
-        <Menu.Menu position='right'>
-          <div className='ui right aligned category search item'>
-            <div className='ui transparent icon input'>
-              <input className='prompt' type='text' placeholder='Search animals...' />
-              <i className='search link icon' />
-            </div>
-            <div className='results'></div>
+      <Menu.Menu position='right'>
+        <div className='ui right aligned category search item'>
+          <div className='ui transparent icon input'>
+            <input className='prompt' type='text' placeholder='Search animals...' />
+            <i className='search link icon' />
           </div>
-        </Menu.Menu>
-      </Menu>
+          <div className='results' />
+        </div>
+      </Menu.Menu>
+    </Menu>
 
-      <Segment attached='bottom'>
-        <img src='/assets/images/wireframe/paragraph.png' />
-      </Segment>
-    </div>
-  )
-}
+    <Segment attached='bottom'>
+      <img src='/assets/images/wireframe/paragraph.png' />
+    </Segment>
+  </div>
+)
 
 export default MenuExampleAttached
diff --git a/docs/app/Examples/collections/Menu/Types/index.js b/docs/app/Examples/collections/Menu/Types/index.js
index 339518ffd4..1ea5b94f87 100644
--- a/docs/app/Examples/collections/Menu/Types/index.js
+++ b/docs/app/Examples/collections/Menu/Types/index.js
@@ -5,74 +5,72 @@ import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
 // TODO: Add example with <Popup> after it will be added
 
-const Types = () => {
-  return (
-    <ExampleSection title='Types'>
-      <ComponentExample
-        title='Menu'
-        description='A menu.'
-        examplePath='collections/Menu/Types/MenuExampleBasic'
-      />
-      <ComponentExample
-        description='Menu can be rendered via shorthand prop.'
-        examplePath='collections/Menu/Types/MenuExampleProps'
-      />
-      <ComponentExample
-        description='Menu item text can be defined with the content prop.'
-        examplePath='collections/Menu/Types/MenuExampleContentProp'
-      />
-      <ComponentExample
-        description='The name prop will be used for content if neither children nor content props are defined.'
-        examplePath='collections/Menu/Types/MenuExampleNameProp'
-      />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleAttached' />
+const Types = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Menu'
+      description='A menu.'
+      examplePath='collections/Menu/Types/MenuExampleBasic'
+    />
+    <ComponentExample
+      description='Menu can be rendered via shorthand prop.'
+      examplePath='collections/Menu/Types/MenuExampleProps'
+    />
+    <ComponentExample
+      description='Menu item text can be defined with the content prop.'
+      examplePath='collections/Menu/Types/MenuExampleContentProp'
+    />
+    <ComponentExample
+      description='The name prop will be used for content if neither children nor content props are defined.'
+      examplePath='collections/Menu/Types/MenuExampleNameProp'
+    />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleAttached' />
 
-      <ComponentExample
-        title='Secondary Menu'
-        description='A menu can adjust its appearance to de-emphasize its contents.'
-        examplePath='collections/Menu/Types/MenuExampleSecondary'
-      />
+    <ComponentExample
+      title='Secondary Menu'
+      description='A menu can adjust its appearance to de-emphasize its contents.'
+      examplePath='collections/Menu/Types/MenuExampleSecondary'
+    />
 
-      <ComponentExample
-        title='Pointing'
-        description='A menu can point to show its relationship to nearby content.'
-        examplePath='collections/Menu/Types/MenuExamplePointing'
-      />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleSecondaryPointing' />
+    <ComponentExample
+      title='Pointing'
+      description='A menu can point to show its relationship to nearby content.'
+      examplePath='collections/Menu/Types/MenuExamplePointing'
+    />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleSecondaryPointing' />
 
-      <ComponentExample
-        title='Tabular'
-        description='A menu can be formatted to show tabs of information.'
-        examplePath='collections/Menu/Types/MenuExampleTabular'
-      />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnTop' />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnBottom' />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnLeft' />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnRight' />
+    <ComponentExample
+      title='Tabular'
+      description='A menu can be formatted to show tabs of information.'
+      examplePath='collections/Menu/Types/MenuExampleTabular'
+    />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnTop' />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnBottom' />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnLeft' />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleTabularOnRight' />
 
-      <ComponentExample
-        title='Text'
-        description='A menu can be formatted for text content.'
-        examplePath='collections/Menu/Types/MenuExampleText'
-      />
+    <ComponentExample
+      title='Text'
+      description='A menu can be formatted for text content.'
+      examplePath='collections/Menu/Types/MenuExampleText'
+    />
 
-      <ComponentExample
-        title='Vertical Menu'
-        description='A vertical menu displays elements vertically.'
-        examplePath='collections/Menu/Types/MenuExampleVertical'
-      />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalText' />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalDropdown' />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalPointing' />
-      <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalSecondary' />
+    <ComponentExample
+      title='Vertical Menu'
+      description='A vertical menu displays elements vertically.'
+      examplePath='collections/Menu/Types/MenuExampleVertical'
+    />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalText' />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalDropdown' />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalPointing' />
+    <ComponentExample examplePath='collections/Menu/Types/MenuExampleVerticalSecondary' />
 
-      <ComponentExample
-        title='Pagination'
-        description='A pagination menu is specially formatted to present links to pages of content.'
-        examplePath='collections/Menu/Types/MenuExamplePagination'
-      />
-    </ExampleSection>
-  )
-}
+    <ComponentExample
+      title='Pagination'
+      description='A pagination menu is specially formatted to present links to pages of content.'
+      examplePath='collections/Menu/Types/MenuExamplePagination'
+    />
+  </ExampleSection>
+)
 
 export default Types
diff --git a/docs/app/Examples/collections/Menu/Variations/MenuExampleFixed.js b/docs/app/Examples/collections/Menu/Variations/MenuExampleFixed.js
index 48462ef1c4..197850186a 100644
--- a/docs/app/Examples/collections/Menu/Variations/MenuExampleFixed.js
+++ b/docs/app/Examples/collections/Menu/Variations/MenuExampleFixed.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
 
-const MenuExampleFixed = () => {
-  return (
-    <Message info>
-      You can view examples of the <b>fixed</b> variation in the
-      <a href='https://semantic-ui.com/collections/menu.html#fixed' target='_blank'> official documentation</a>.
-    </Message>
-  )
-}
+const MenuExampleFixed = () => (
+  <Message info>
+    You can view examples of the <b>fixed</b> variation in the
+    <a href='https://semantic-ui.com/collections/menu.html#fixed' rel='noopener noreferrer' target='_blank'>
+      {' '}official documentation
+    </a>.
+  </Message>
+)
 
 export default MenuExampleFixed
diff --git a/docs/app/Examples/collections/Menu/Variations/index.js b/docs/app/Examples/collections/Menu/Variations/index.js
index dc27b3a81b..5e06de5969 100644
--- a/docs/app/Examples/collections/Menu/Variations/index.js
+++ b/docs/app/Examples/collections/Menu/Variations/index.js
@@ -3,117 +3,115 @@ import React from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-const Variations = () => {
-  return (
-    <ExampleSection title='Variations'>
-      <ComponentExample
-        title='Fixed'
-        description='A menu can be fixed to a side of its context.'
-        examplePath='collections/Menu/Variations/MenuExampleFixed'
-      />
+const Variations = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Fixed'
+      description='A menu can be fixed to a side of its context.'
+      examplePath='collections/Menu/Variations/MenuExampleFixed'
+    />
 
-      <ComponentExample
-        title='Stackable'
-        description='A menu can stack at mobile resolutions.'
-        examplePath='collections/Menu/Variations/MenuExampleStackable'
-      />
+    <ComponentExample
+      title='Stackable'
+      description='A menu can stack at mobile resolutions.'
+      examplePath='collections/Menu/Variations/MenuExampleStackable'
+    />
 
-      <ComponentExample
-        title='Inverted'
-        description='A menu may have its colors inverted to show greater contrast.'
-        examplePath='collections/Menu/Variations/MenuExampleInverted'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedVertical' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedPointing' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedSegment' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedSecondary' />
+    <ComponentExample
+      title='Inverted'
+      description='A menu may have its colors inverted to show greater contrast.'
+      examplePath='collections/Menu/Variations/MenuExampleInverted'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedVertical' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedPointing' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedSegment' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleInvertedSecondary' />
 
-      <ComponentExample
-        title='Colored'
-        description='Additional colors can be specified.'
-        examplePath='collections/Menu/Variations/MenuExampleColored'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleColoredMenus' />
-      <ComponentExample
-        description='These colors can also be inverted.'
-        examplePath='collections/Menu/Variations/MenuExampleColoredInverted'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleColoredInvertedMenus' />
+    <ComponentExample
+      title='Colored'
+      description='Additional colors can be specified.'
+      examplePath='collections/Menu/Variations/MenuExampleColored'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleColoredMenus' />
+    <ComponentExample
+      description='These colors can also be inverted.'
+      examplePath='collections/Menu/Variations/MenuExampleColoredInverted'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleColoredInvertedMenus' />
 
-      <ComponentExample
-        title='Icons'
-        description='A menu may have just icons.'
-        examplePath='collections/Menu/Variations/MenuExampleIcons'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleIconsVertical' />
+    <ComponentExample
+      title='Icons'
+      description='A menu may have just icons.'
+      examplePath='collections/Menu/Variations/MenuExampleIcons'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleIconsVertical' />
 
-      <ComponentExample
-        title='Labeled Icon'
-        description='A menu may have labeled icons.'
-        examplePath='collections/Menu/Variations/MenuExampleLabeledIcons'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleLabeledIconsVertical' />
+    <ComponentExample
+      title='Labeled Icon'
+      description='A menu may have labeled icons.'
+      examplePath='collections/Menu/Variations/MenuExampleLabeledIcons'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleLabeledIconsVertical' />
 
-      <ComponentExample
-        title='Fluid'
-        description='A vertical menu may take the size of its container.'
-        examplePath='collections/Menu/Variations/MenuExampleFluid'
-      />
+    <ComponentExample
+      title='Fluid'
+      description='A vertical menu may take the size of its container.'
+      examplePath='collections/Menu/Variations/MenuExampleFluid'
+    />
 
-      <ComponentExample
-        title='Compact'
-        description='A menu can take up only the space necessary to fit its content.'
-        examplePath='collections/Menu/Variations/MenuExampleCompact'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleCompactVertical' />
+    <ComponentExample
+      title='Compact'
+      description='A menu can take up only the space necessary to fit its content.'
+      examplePath='collections/Menu/Variations/MenuExampleCompact'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleCompactVertical' />
 
-      <ComponentExample
-        title='Evenly Divided'
-        description='A menu may divide its items evenly.'
-        examplePath='collections/Menu/Variations/MenuExampleEvenlyDivided'
-      />
+    <ComponentExample
+      title='Evenly Divided'
+      description='A menu may divide its items evenly.'
+      examplePath='collections/Menu/Variations/MenuExampleEvenlyDivided'
+    />
 
-      <ComponentExample
-        title='Attached'
-        description='A menu may be attached to other content segments.'
-        examplePath='collections/Menu/Variations/MenuExampleAttachedTabular'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleAttachedToSegment' />
+    <ComponentExample
+      title='Attached'
+      description='A menu may be attached to other content segments.'
+      examplePath='collections/Menu/Variations/MenuExampleAttachedTabular'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleAttachedToSegment' />
 
-      <ComponentExample
-        title='Size'
-        description='A menu can vary in size.'
-        examplePath='collections/Menu/Variations/MenuExampleSizeMini'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeTiny' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeSmall' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeLarge' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeHuge' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeMassive' />
-      <ComponentExample
-        description='A vertical menu can also vary in size.'
-        examplePath='collections/Menu/Variations/MenuExampleSizeVerticalMini'
-      />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeVerticalSmall' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeVerticalLarge' />
-      <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeVerticalMassive' />
+    <ComponentExample
+      title='Size'
+      description='A menu can vary in size.'
+      examplePath='collections/Menu/Variations/MenuExampleSizeMini'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeTiny' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeSmall' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeLarge' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeHuge' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeMassive' />
+    <ComponentExample
+      description='A vertical menu can also vary in size.'
+      examplePath='collections/Menu/Variations/MenuExampleSizeVerticalMini'
+    />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeVerticalSmall' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeVerticalLarge' />
+    <ComponentExample examplePath='collections/Menu/Variations/MenuExampleSizeVerticalMassive' />
 
-      <ComponentExample
-        title='Fitted'
-        description='A menu item or menu can remove element padding, vertically or horizontally.'
-        examplePath='collections/Menu/Variations/MenuExampleFitted'
-      />
-      <ComponentExample
-        examplePath='collections/Menu/Variations/MenuExampleVerticalFitted'
-      />
+    <ComponentExample
+      title='Fitted'
+      description='A menu item or menu can remove element padding, vertically or horizontally.'
+      examplePath='collections/Menu/Variations/MenuExampleFitted'
+    />
+    <ComponentExample
+      examplePath='collections/Menu/Variations/MenuExampleVerticalFitted'
+    />
 
-      <ComponentExample
-        title='Borderless'
-        description='A menu item or menu can have no borders.'
-        examplePath='collections/Menu/Variations/MenuExampleBorderless'
-      />
-    </ExampleSection>
-  )
-}
+    <ComponentExample
+      title='Borderless'
+      description='A menu item or menu can have no borders.'
+      examplePath='collections/Menu/Variations/MenuExampleBorderless'
+    />
+  </ExampleSection>
+)
 
 export default Variations
diff --git a/docs/app/Examples/collections/Menu/index.js b/docs/app/Examples/collections/Menu/index.js
index 6a16e436f8..4776b91892 100644
--- a/docs/app/Examples/collections/Menu/index.js
+++ b/docs/app/Examples/collections/Menu/index.js
@@ -5,15 +5,13 @@ import Types from './Types'
 import States from './States'
 import Variations from './Variations'
 
-const MenuExamples = () => {
-  return (
-    <div>
-      <Types />
-      <Content />
-      <States />
-      <Variations />
-    </div>
-  )
-}
+const MenuExamples = () => (
+  <div>
+    <Types />
+    <Content />
+    <States />
+    <Variations />
+  </div>
+)
 
 export default MenuExamples
diff --git a/docs/app/Examples/collections/Table/States/TableExampleActive.js b/docs/app/Examples/collections/Table/States/TableExampleActive.js
index 12bcbbf581..2c65be8619 100644
--- a/docs/app/Examples/collections/Table/States/TableExampleActive.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleActive.js
@@ -1,41 +1,39 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleActive = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleActive = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row active>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Selected</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell active>Jill</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row active>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Selected</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell active>Jill</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleActive
diff --git a/docs/app/Examples/collections/Table/States/TableExampleDisabled.js b/docs/app/Examples/collections/Table/States/TableExampleDisabled.js
index c282d3b100..812b541948 100644
--- a/docs/app/Examples/collections/Table/States/TableExampleDisabled.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleDisabled.js
@@ -1,41 +1,39 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleDisabled = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleDisabled = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row disabled>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Selected</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell disabled>Jill</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row disabled>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Selected</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell disabled>Jill</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleDisabled
diff --git a/docs/app/Examples/collections/Table/States/TableExampleError.js b/docs/app/Examples/collections/Table/States/TableExampleError.js
index b19b256ee8..076b2c5fd8 100644
--- a/docs/app/Examples/collections/Table/States/TableExampleError.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleError.js
@@ -1,44 +1,42 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableExampleError = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleError = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>No Name Specified</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row error>
-          <Table.Cell>Jimmy</Table.Cell>
-          <Table.Cell>Cannot pull data</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell error>
-            <Icon name='attention' />
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>No Name Specified</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row error>
+        <Table.Cell>Jimmy</Table.Cell>
+        <Table.Cell>Cannot pull data</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell error>
+          <Icon name='attention' />
             Classified
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleError
diff --git a/docs/app/Examples/collections/Table/States/TableExamplePositiveNegative.js b/docs/app/Examples/collections/Table/States/TableExamplePositiveNegative.js
index f2a9095539..10186817b4 100644
--- a/docs/app/Examples/collections/Table/States/TableExamplePositiveNegative.js
+++ b/docs/app/Examples/collections/Table/States/TableExamplePositiveNegative.js
@@ -1,47 +1,45 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableExamplePositiveNegative = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExamplePositiveNegative = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>No Name Specified</Table.Cell>
-          <Table.Cell>Unknown</Table.Cell>
-          <Table.Cell negative>None</Table.Cell>
-        </Table.Row>
-        <Table.Row positive>
-          <Table.Cell>Jimmy</Table.Cell>
-          <Table.Cell>
-            <Icon name='checkmark' />
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>No Name Specified</Table.Cell>
+        <Table.Cell>Unknown</Table.Cell>
+        <Table.Cell negative>None</Table.Cell>
+      </Table.Row>
+      <Table.Row positive>
+        <Table.Cell>Jimmy</Table.Cell>
+        <Table.Cell>
+          <Icon name='checkmark' />
             Approved
-          </Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Unknown</Table.Cell>
-          <Table.Cell positive>
-            <Icon name='close' />
+        </Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Unknown</Table.Cell>
+        <Table.Cell positive>
+          <Icon name='close' />
             Requires call
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row negative>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Unknown</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row negative>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Unknown</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExamplePositiveNegative
diff --git a/docs/app/Examples/collections/Table/States/TableExampleWarning.js b/docs/app/Examples/collections/Table/States/TableExampleWarning.js
index 49650cb15d..0593c60810 100644
--- a/docs/app/Examples/collections/Table/States/TableExampleWarning.js
+++ b/docs/app/Examples/collections/Table/States/TableExampleWarning.js
@@ -1,47 +1,45 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableExampleWarning = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleWarning = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>No Name Specified</Table.Cell>
-          <Table.Cell>Unknown</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row warning>
-          <Table.Cell>Jimmy</Table.Cell>
-          <Table.Cell>
-            <Icon name='attention' />
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>No Name Specified</Table.Cell>
+        <Table.Cell>Unknown</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row warning>
+        <Table.Cell>Jimmy</Table.Cell>
+        <Table.Cell>
+          <Icon name='attention' />
             Requires Action
-          </Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Unknown</Table.Cell>
-          <Table.Cell warning>
-            <Icon name='attention' />
+        </Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Unknown</Table.Cell>
+        <Table.Cell warning>
+          <Icon name='attention' />
             Hostile
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Unknown</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Unknown</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleWarning
diff --git a/docs/app/Examples/collections/Table/States/index.js b/docs/app/Examples/collections/Table/States/index.js
index d3c88013e6..479d05d848 100644
--- a/docs/app/Examples/collections/Table/States/index.js
+++ b/docs/app/Examples/collections/Table/States/index.js
@@ -3,41 +3,39 @@ import React from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-const States = () => {
-  return (
-    <ExampleSection title='States'>
-      <ComponentExample
-        title='Positive / Negative'
-        description='A cell or row may let a user know whether a value is good or bad.'
-        examplePath='collections/Table/States/TableExamplePositiveNegative'
-      />
-      <ComponentExample
-        title='Error'
-        description='A cell or row may call attention to an error or a negative value.'
-        examplePath='collections/Table/States/TableExampleError'
-      />
-      <ComponentExample
-        title='Warning'
-        description='A cell or row may warn a user.'
-        examplePath='collections/Table/States/TableExampleWarning'
-      />
-      <ComponentExample
-        title='Warning Shorthand'
-        description='Same as warning example but configured via shorthand.'
-        examplePath='collections/Table/States/TableExampleWarningShorthand'
-      />
-      <ComponentExample
-        title='Active'
-        description='A cell or row can be active or selected by a user.'
-        examplePath='collections/Table/States/TableExampleActive'
-      />
-      <ComponentExample
-        title='Disabled'
-        description='A cell can be disabled.'
-        examplePath='collections/Table/States/TableExampleDisabled'
-      />
-    </ExampleSection>
-  )
-}
+const States = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Positive / Negative'
+      description='A cell or row may let a user know whether a value is good or bad.'
+      examplePath='collections/Table/States/TableExamplePositiveNegative'
+    />
+    <ComponentExample
+      title='Error'
+      description='A cell or row may call attention to an error or a negative value.'
+      examplePath='collections/Table/States/TableExampleError'
+    />
+    <ComponentExample
+      title='Warning'
+      description='A cell or row may warn a user.'
+      examplePath='collections/Table/States/TableExampleWarning'
+    />
+    <ComponentExample
+      title='Warning Shorthand'
+      description='Same as warning example but configured via shorthand.'
+      examplePath='collections/Table/States/TableExampleWarningShorthand'
+    />
+    <ComponentExample
+      title='Active'
+      description='A cell or row can be active or selected by a user.'
+      examplePath='collections/Table/States/TableExampleActive'
+    />
+    <ComponentExample
+      title='Disabled'
+      description='A cell can be disabled.'
+      examplePath='collections/Table/States/TableExampleDisabled'
+    />
+  </ExampleSection>
+)
 
 export default States
diff --git a/docs/app/Examples/collections/Table/Types/TableExampleApprove.js b/docs/app/Examples/collections/Table/Types/TableExampleApprove.js
index 3beb4a4c77..e3dc1b01a9 100644
--- a/docs/app/Examples/collections/Table/Types/TableExampleApprove.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleApprove.js
@@ -1,63 +1,61 @@
 import React from 'react'
 import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
 
-const TableExampleApprove = () => {
-  return (
-    <Table compact celled definition>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell />
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Registration Date</Table.HeaderCell>
-          <Table.HeaderCell>E-mail address</Table.HeaderCell>
-          <Table.HeaderCell>Premium Plan</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleApprove = () => (
+  <Table compact celled definition>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell />
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Registration Date</Table.HeaderCell>
+        <Table.HeaderCell>E-mail address</Table.HeaderCell>
+        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell collapsing>
-            <Checkbox slider />
-          </Table.Cell>
-          <Table.Cell>John Lilki</Table.Cell>
-          <Table.Cell>September 14, 2013</Table.Cell>
-          <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-          <Table.Cell>No</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell collapsing>
-            <Checkbox slider />
-          </Table.Cell>
-          <Table.Cell>Jamie Harington</Table.Cell>
-          <Table.Cell>January 11, 2014</Table.Cell>
-          <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell collapsing>
-            <Checkbox slider />
-          </Table.Cell>
-          <Table.Cell>Jill Lewis</Table.Cell>
-          <Table.Cell>May 11, 2014</Table.Cell>
-          <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell collapsing>
+          <Checkbox slider />
+        </Table.Cell>
+        <Table.Cell>John Lilki</Table.Cell>
+        <Table.Cell>September 14, 2013</Table.Cell>
+        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
+        <Table.Cell>No</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell collapsing>
+          <Checkbox slider />
+        </Table.Cell>
+        <Table.Cell>Jamie Harington</Table.Cell>
+        <Table.Cell>January 11, 2014</Table.Cell>
+        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell collapsing>
+          <Checkbox slider />
+        </Table.Cell>
+        <Table.Cell>Jill Lewis</Table.Cell>
+        <Table.Cell>May 11, 2014</Table.Cell>
+        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer fullWidth>
-        <Table.Row>
-          <Table.HeaderCell />
-          <Table.HeaderCell colSpan='4'>
-            <Button floated='right' icon labelPosition='left' primary size='small'>
-              <Icon name='user' /> Add User
-            </Button>
-            <Button size='small'>Approve</Button>
-            <Button disabled size='small'>Approve All</Button>
-          </Table.HeaderCell>
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer fullWidth>
+      <Table.Row>
+        <Table.HeaderCell />
+        <Table.HeaderCell colSpan='4'>
+          <Button floated='right' icon labelPosition='left' primary size='small'>
+            <Icon name='user' /> Add User
+          </Button>
+          <Button size='small'>Approve</Button>
+          <Button disabled size='small'>Approve All</Button>
+        </Table.HeaderCell>
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleApprove
diff --git a/docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js b/docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js
index c26930e605..4c51e9ef8c 100644
--- a/docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleCollapsing.js
@@ -1,76 +1,74 @@
 import React from 'react'
 import { Header, Image, Table } from 'semantic-ui-react'
 
-const TableExampleCollapsing = () => {
-  return (
-    <Table basic='very' celled collapsing>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Employee</Table.HeaderCell>
-          <Table.HeaderCell>Correct Guesses</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleCollapsing = () => (
+  <Table basic='very' celled collapsing>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Employee</Table.HeaderCell>
+        <Table.HeaderCell>Correct Guesses</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h4' image>
-              <Image src='/assets/images/avatar/small/lena.png' shape='rounded' size='mini' />
-              <Header.Content>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>
+          <Header as='h4' image>
+            <Image src='/assets/images/avatar/small/lena.png' shape='rounded' size='mini' />
+            <Header.Content>
                 Lena
-                <Header.Subheader>Human Resources</Header.Subheader>
-              </Header.Content>
-            </Header>
-          </Table.Cell>
-          <Table.Cell>
+              <Header.Subheader>Human Resources</Header.Subheader>
+            </Header.Content>
+          </Header>
+        </Table.Cell>
+        <Table.Cell>
             22
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h4' image>
-              <Image src='/assets/images/avatar/small/matthew.png' shape='rounded' size='mini' />
-              <Header.Content>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Header as='h4' image>
+            <Image src='/assets/images/avatar/small/matthew.png' shape='rounded' size='mini' />
+            <Header.Content>
                 Matthew
-                <Header.Subheader>Fabric Design</Header.Subheader>
-              </Header.Content>
-            </Header>
-          </Table.Cell>
-          <Table.Cell>
+              <Header.Subheader>Fabric Design</Header.Subheader>
+            </Header.Content>
+          </Header>
+        </Table.Cell>
+        <Table.Cell>
             15
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h4' image>
-              <Image src='/assets/images/avatar/small/lindsay.png' shape='rounded' size='mini' />
-              <Header.Content>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Header as='h4' image>
+            <Image src='/assets/images/avatar/small/lindsay.png' shape='rounded' size='mini' />
+            <Header.Content>
                 Lindsay
-                <Header.Subheader>Entertainment</Header.Subheader>
-              </Header.Content>
-            </Header>
-          </Table.Cell>
-          <Table.Cell>
+              <Header.Subheader>Entertainment</Header.Subheader>
+            </Header.Content>
+          </Header>
+        </Table.Cell>
+        <Table.Cell>
             12
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h4' image>
-              <Image src='/assets/images/avatar/small/mark.png' shape='rounded' size='mini' />
-              <Header.Content>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Header as='h4' image>
+            <Image src='/assets/images/avatar/small/mark.png' shape='rounded' size='mini' />
+            <Header.Content>
                 Mark
-                <Header.Subheader>Executive</Header.Subheader>
-              </Header.Content>
-            </Header>
-          </Table.Cell>
-          <Table.Cell>
+              <Header.Subheader>Executive</Header.Subheader>
+            </Header.Content>
+          </Header>
+        </Table.Cell>
+        <Table.Cell>
             11
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleCollapsing
diff --git a/docs/app/Examples/collections/Table/Types/TableExampleDefinition.js b/docs/app/Examples/collections/Table/Types/TableExampleDefinition.js
index 81eae3b25f..dce5c31bca 100644
--- a/docs/app/Examples/collections/Table/Types/TableExampleDefinition.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleDefinition.js
@@ -1,31 +1,29 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleDefinition = () => {
-  return (
-    <Table definition>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell />
-          <Table.HeaderCell>Arguments</Table.HeaderCell>
-          <Table.HeaderCell>Description</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleDefinition = () => (
+  <Table definition>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell />
+        <Table.HeaderCell>Arguments</Table.HeaderCell>
+        <Table.HeaderCell>Description</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>reset rating</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-          <Table.Cell>Resets rating to default value</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>set rating</Table.Cell>
-          <Table.Cell>rating (integer)</Table.Cell>
-          <Table.Cell>Sets the current star rating to specified value</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>reset rating</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+        <Table.Cell>Resets rating to default value</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>set rating</Table.Cell>
+        <Table.Cell>rating (integer)</Table.Cell>
+        <Table.Cell>Sets the current star rating to specified value</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleDefinition
diff --git a/docs/app/Examples/collections/Table/Types/TableExamplePadded.js b/docs/app/Examples/collections/Table/Types/TableExamplePadded.js
index e160a0d3e5..0d1fadc0a8 100644
--- a/docs/app/Examples/collections/Table/Types/TableExamplePadded.js
+++ b/docs/app/Examples/collections/Table/Types/TableExamplePadded.js
@@ -1,57 +1,55 @@
 import React from 'react'
 import { Header, Table, Rating } from 'semantic-ui-react'
 
-const TableExamplePadded = () => {
-  return (
-    <Table celled padded>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell singleLine>Evidence Rating</Table.HeaderCell>
-          <Table.HeaderCell>Effect</Table.HeaderCell>
-          <Table.HeaderCell>Efficacy</Table.HeaderCell>
-          <Table.HeaderCell>Consensus</Table.HeaderCell>
-          <Table.HeaderCell>Comments</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExamplePadded = () => (
+  <Table celled padded>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell singleLine>Evidence Rating</Table.HeaderCell>
+        <Table.HeaderCell>Effect</Table.HeaderCell>
+        <Table.HeaderCell>Efficacy</Table.HeaderCell>
+        <Table.HeaderCell>Consensus</Table.HeaderCell>
+        <Table.HeaderCell>Comments</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h2' textAlign='center'>A</Header>
-          </Table.Cell>
-          <Table.Cell singleLine>Power Output</Table.Cell>
-          <Table.Cell>
-            <Rating icon='star' defaultRating={3} maxRating={3} />
-          </Table.Cell>
-          <Table.Cell textAlign='right'>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>
+          <Header as='h2' textAlign='center'>A</Header>
+        </Table.Cell>
+        <Table.Cell singleLine>Power Output</Table.Cell>
+        <Table.Cell>
+          <Rating icon='star' defaultRating={3} maxRating={3} />
+        </Table.Cell>
+        <Table.Cell textAlign='right'>
             80% <br />
-            <a href='#'>18 studies</a>
-          </Table.Cell>
-          <Table.Cell>
+          <a href='#'>18 studies</a>
+        </Table.Cell>
+        <Table.Cell>
             Creatine supplementation is the reference compound for increasing muscular creatine levels; there is
             variability in this increase, however, with some nonresponders.
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Header as='h2' textAlign='center'>A</Header>
-          </Table.Cell>
-          <Table.Cell singleLine>Weight</Table.Cell>
-          <Table.Cell>
-            <Rating icon='star' defaultRating={3} maxRating={3} />
-          </Table.Cell>
-          <Table.Cell textAlign='right'>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Header as='h2' textAlign='center'>A</Header>
+        </Table.Cell>
+        <Table.Cell singleLine>Weight</Table.Cell>
+        <Table.Cell>
+          <Rating icon='star' defaultRating={3} maxRating={3} />
+        </Table.Cell>
+        <Table.Cell textAlign='right'>
             100% <br />
-            <a href='#'>65 studies</a>
-          </Table.Cell>
-          <Table.Cell>
+          <a href='#'>65 studies</a>
+        </Table.Cell>
+        <Table.Cell>
             Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess
             potency
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExamplePadded
diff --git a/docs/app/Examples/collections/Table/Types/TableExamplePagination.js b/docs/app/Examples/collections/Table/Types/TableExamplePagination.js
index 2ce85c0f2d..fa14f072d5 100644
--- a/docs/app/Examples/collections/Table/Types/TableExamplePagination.js
+++ b/docs/app/Examples/collections/Table/Types/TableExamplePagination.js
@@ -1,38 +1,37 @@
 import React from 'react'
 import { Icon, Label, Menu, Table } from 'semantic-ui-react'
 
-const TableExamplePagination = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Header</Table.HeaderCell>
-          <Table.HeaderCell>Header</Table.HeaderCell>
-          <Table.HeaderCell>Header</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExamplePagination = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Header</Table.HeaderCell>
+        <Table.HeaderCell>Header</Table.HeaderCell>
+        <Table.HeaderCell>Header</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>
-            <Label ribbon>First</Label>
-          </Table.Cell>
-          <Table.Cell>Cell</Table.Cell>
-          <Table.Cell>Cell</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Cell</Table.Cell>
-          <Table.Cell>Cell</Table.Cell>
-          <Table.Cell>Cell</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Cell</Table.Cell>
-          <Table.Cell>Cell</Table.Cell>
-          <Table.Cell>Cell</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>
+          <Label ribbon>First</Label>
+        </Table.Cell>
+        <Table.Cell>Cell</Table.Cell>
+        <Table.Cell>Cell</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Cell</Table.Cell>
+        <Table.Cell>Cell</Table.Cell>
+        <Table.Cell>Cell</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Cell</Table.Cell>
+        <Table.Cell>Cell</Table.Cell>
+        <Table.Cell>Cell</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
+    <Table.Footer>
       <Table.Row>
         <Table.HeaderCell colSpan='3'>
           <Menu floated='right' pagination>
@@ -49,9 +48,8 @@ const TableExamplePagination = () => {
           </Menu>
         </Table.HeaderCell>
       </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExamplePagination
diff --git a/docs/app/Examples/collections/Table/Types/TableExampleStriped.js b/docs/app/Examples/collections/Table/Types/TableExampleStriped.js
index ba84b4df35..0e85ee6e9e 100644
--- a/docs/app/Examples/collections/Table/Types/TableExampleStriped.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleStriped.js
@@ -1,54 +1,52 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableExampleStriped = () => {
-  return (
-    <Table celled striped>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell colSpan='3'>Git Repository</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleStriped = () => (
+  <Table celled striped>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell colSpan='3'>Git Repository</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell collapsing>
-            <Icon name='folder' /> node_modules
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell collapsing textAlign='right'>10 hours ago</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Icon name='folder' /> test
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Icon name='folder' /> build
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Icon name='file outline' /> package.json
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Icon name='file outline' /> Gruntfile.js
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell collapsing>
+          <Icon name='folder' /> node_modules
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell collapsing textAlign='right'>10 hours ago</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Icon name='folder' /> test
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Icon name='folder' /> build
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Icon name='file outline' /> package.json
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Icon name='file outline' /> Gruntfile.js
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell textAlign='right'>10 hours ago</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleStriped
diff --git a/docs/app/Examples/collections/Table/Types/TableExampleStructured.js b/docs/app/Examples/collections/Table/Types/TableExampleStructured.js
index d40e63fc21..6aaf5053dc 100644
--- a/docs/app/Examples/collections/Table/Types/TableExampleStructured.js
+++ b/docs/app/Examples/collections/Table/Types/TableExampleStructured.js
@@ -1,65 +1,63 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableExampleStructured = () => {
-  return (
-    <Table celled structured>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell rowSpan='2'>Name</Table.HeaderCell>
-          <Table.HeaderCell rowSpan='2'>Type</Table.HeaderCell>
-          <Table.HeaderCell rowSpan='2'>Files</Table.HeaderCell>
-          <Table.HeaderCell colSpan='3'>Languages</Table.HeaderCell>
-        </Table.Row>
-        <Table.Row>
-          <Table.HeaderCell>Ruby</Table.HeaderCell>
-          <Table.HeaderCell>JavaScript</Table.HeaderCell>
-          <Table.HeaderCell>Python</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleStructured = () => (
+  <Table celled structured>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell rowSpan='2'>Name</Table.HeaderCell>
+        <Table.HeaderCell rowSpan='2'>Type</Table.HeaderCell>
+        <Table.HeaderCell rowSpan='2'>Files</Table.HeaderCell>
+        <Table.HeaderCell colSpan='3'>Languages</Table.HeaderCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>Ruby</Table.HeaderCell>
+        <Table.HeaderCell>JavaScript</Table.HeaderCell>
+        <Table.HeaderCell>Python</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>Alpha Team</Table.Cell>
-          <Table.Cell>Project 1</Table.Cell>
-          <Table.Cell textAlign='right'>2</Table.Cell>
-          <Table.Cell textAlign='center'>
-            <Icon color='green' name='checkmark' size='large' />
-          </Table.Cell>
-          <Table.Cell />
-          <Table.Cell />
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell rowSpan='3'>Beta Team</Table.Cell>
-          <Table.Cell>Project 1</Table.Cell>
-          <Table.Cell textAlign='right'>52</Table.Cell>
-          <Table.Cell textAlign='center'>
-            <Icon color='green' name='checkmark' size='large' />
-          </Table.Cell>
-          <Table.Cell />
-          <Table.Cell />
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Project 2</Table.Cell>
-          <Table.Cell textAlign='right'>12</Table.Cell>
-          <Table.Cell />
-          <Table.Cell textAlign='center'>
-            <Icon color='green' name='checkmark' size='large' />
-          </Table.Cell>
-          <Table.Cell />
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Project 3</Table.Cell>
-          <Table.Cell textAlign='right'>21</Table.Cell>
-          <Table.Cell textAlign='center'>
-            <Icon color='green' name='checkmark' size='large' />
-          </Table.Cell>
-          <Table.Cell />
-          <Table.Cell />
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>Alpha Team</Table.Cell>
+        <Table.Cell>Project 1</Table.Cell>
+        <Table.Cell textAlign='right'>2</Table.Cell>
+        <Table.Cell textAlign='center'>
+          <Icon color='green' name='checkmark' size='large' />
+        </Table.Cell>
+        <Table.Cell />
+        <Table.Cell />
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell rowSpan='3'>Beta Team</Table.Cell>
+        <Table.Cell>Project 1</Table.Cell>
+        <Table.Cell textAlign='right'>52</Table.Cell>
+        <Table.Cell textAlign='center'>
+          <Icon color='green' name='checkmark' size='large' />
+        </Table.Cell>
+        <Table.Cell />
+        <Table.Cell />
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Project 2</Table.Cell>
+        <Table.Cell textAlign='right'>12</Table.Cell>
+        <Table.Cell />
+        <Table.Cell textAlign='center'>
+          <Icon color='green' name='checkmark' size='large' />
+        </Table.Cell>
+        <Table.Cell />
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Project 3</Table.Cell>
+        <Table.Cell textAlign='right'>21</Table.Cell>
+        <Table.Cell textAlign='center'>
+          <Icon color='green' name='checkmark' size='large' />
+        </Table.Cell>
+        <Table.Cell />
+        <Table.Cell />
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleStructured
diff --git a/docs/app/Examples/collections/Table/Types/index.js b/docs/app/Examples/collections/Table/Types/index.js
index 129e894395..d18ca4cf83 100644
--- a/docs/app/Examples/collections/Table/Types/index.js
+++ b/docs/app/Examples/collections/Table/Types/index.js
@@ -3,32 +3,30 @@ import React from 'react'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-const Types = () => {
-  return (
-    <ExampleSection title='Types'>
-      <ComponentExample
-        title='Types'
-        description='A standard table.'
-        examplePath='collections/Table/Types/TableExamplePagination'
-      />
-      <ComponentExample examplePath='collections/Table/Types/TableExamplePadded' />
-      <ComponentExample examplePath='collections/Table/Types/TableExampleCollapsing' />
-      <ComponentExample examplePath='collections/Table/Types/TableExampleStriped' />
+const Types = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Types'
+      description='A standard table.'
+      examplePath='collections/Table/Types/TableExamplePagination'
+    />
+    <ComponentExample examplePath='collections/Table/Types/TableExamplePadded' />
+    <ComponentExample examplePath='collections/Table/Types/TableExampleCollapsing' />
+    <ComponentExample examplePath='collections/Table/Types/TableExampleStriped' />
 
-      <ComponentExample
-        title='Definition'
-        description='A table may be formatted to emphasize a first column that defines a row content.'
-        examplePath='collections/Table/Types/TableExampleDefinition'
-      />
-      <ComponentExample examplePath='collections/Table/Types/TableExampleApprove' />
+    <ComponentExample
+      title='Definition'
+      description='A table may be formatted to emphasize a first column that defines a row content.'
+      examplePath='collections/Table/Types/TableExampleDefinition'
+    />
+    <ComponentExample examplePath='collections/Table/Types/TableExampleApprove' />
 
-      <ComponentExample
-        title='Structured'
-        description='A table can be formatted to display complex structured data.'
-        examplePath='collections/Table/Types/TableExampleStructured'
-      />
-    </ExampleSection>
-  )
-}
+    <ComponentExample
+      title='Structured'
+      description='A table can be formatted to display complex structured data.'
+      examplePath='collections/Table/Types/TableExampleStructured'
+    />
+  </ExampleSection>
+)
 
 export default Types
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleBasic.js b/docs/app/Examples/collections/Table/Variations/TableExampleBasic.js
index 4a32ef7e64..8aad0ed268 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleBasic.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleBasic.js
@@ -1,36 +1,34 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleBasic = () => {
-  return (
-    <Table basic>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleBasic = () => (
+  <Table basic>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleBasic
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleCelled.js b/docs/app/Examples/collections/Table/Variations/TableExampleCelled.js
index 830e12e6ed..3b8e679001 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleCelled.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCelled.js
@@ -1,44 +1,42 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleCelled = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleCelled = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
-        <Table.Row>
-          <Table.HeaderCell>3 People</Table.HeaderCell>
-          <Table.HeaderCell>2 Approved</Table.HeaderCell>
-          <Table.HeaderCell />
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer>
+      <Table.Row>
+        <Table.HeaderCell>3 People</Table.HeaderCell>
+        <Table.HeaderCell>2 Approved</Table.HeaderCell>
+        <Table.HeaderCell />
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleCelled
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleCollapsing.js b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsing.js
index eceaa2a313..7537557a7e 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleCollapsing.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsing.js
@@ -1,44 +1,42 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleCollapsing = () => {
-  return (
-    <Table collapsing>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleCollapsing = () => (
+  <Table collapsing>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
-        <Table.Row>
-          <Table.HeaderCell>3 People</Table.HeaderCell>
-          <Table.HeaderCell>2 Approved</Table.HeaderCell>
-          <Table.HeaderCell />
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer>
+      <Table.Row>
+        <Table.HeaderCell>3 People</Table.HeaderCell>
+        <Table.HeaderCell>2 Approved</Table.HeaderCell>
+        <Table.HeaderCell />
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleCollapsing
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleCollapsingCell.js b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsingCell.js
index b676c07e06..2a81ad0278 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleCollapsingCell.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCollapsingCell.js
@@ -1,37 +1,35 @@
 import React from 'react'
 import { Icon, Table } from 'semantic-ui-react'
 
-const TableExampleCollapsingCell = () => {
-  return (
-    <Table>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell collapsing>
-            <Icon name='folder' />
+const TableExampleCollapsingCell = () => (
+  <Table>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell collapsing>
+          <Icon name='folder' />
             node_modules
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell>10 hours ago</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Icon name='folder' />
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell>10 hours ago</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Icon name='folder' />
             test
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell>10 hours ago</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            <Icon name='folder' />
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell>10 hours ago</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Icon name='folder' />
             build
-          </Table.Cell>
-          <Table.Cell>Initial commit</Table.Cell>
-          <Table.Cell>10 hours ago</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+        <Table.Cell>Initial commit</Table.Cell>
+        <Table.Cell>10 hours ago</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleCollapsingCell
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleColumnCount.js b/docs/app/Examples/collections/Table/Variations/TableExampleColumnCount.js
index 20cbc75891..9f29eb39d2 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleColumnCount.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleColumnCount.js
@@ -1,54 +1,52 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleColumnCount = () => {
-  return (
-    <Table columns={5}>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Age</Table.HeaderCell>
-          <Table.HeaderCell>Gender</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleColumnCount = () => (
+  <Table columns={5}>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Age</Table.HeaderCell>
+        <Table.HeaderCell>Gender</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>22</Table.Cell>
-          <Table.Cell>Male</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>32</Table.Cell>
-          <Table.Cell>Male</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>22</Table.Cell>
-          <Table.Cell>Female</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>22</Table.Cell>
+        <Table.Cell>Male</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>32</Table.Cell>
+        <Table.Cell>Male</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>22</Table.Cell>
+        <Table.Cell>Female</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
-        <Table.Row>
-          <Table.HeaderCell>3 People</Table.HeaderCell>
-          <Table.HeaderCell>2 Approved</Table.HeaderCell>
-          <Table.HeaderCell />
-          <Table.HeaderCell />
-          <Table.HeaderCell />
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer>
+      <Table.Row>
+        <Table.HeaderCell>3 People</Table.HeaderCell>
+        <Table.HeaderCell>2 Approved</Table.HeaderCell>
+        <Table.HeaderCell />
+        <Table.HeaderCell />
+        <Table.HeaderCell />
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleColumnCount
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleColumnWidth.js b/docs/app/Examples/collections/Table/Variations/TableExampleColumnWidth.js
index 979c0602eb..0072d3fa94 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleColumnWidth.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleColumnWidth.js
@@ -1,39 +1,37 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleColumnWidth = () => {
-  return (
-    <Table>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell width={10}>Name</Table.HeaderCell>
-          <Table.HeaderCell width='six'>Status</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleColumnWidth = () => (
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell width={10}>Name</Table.HeaderCell>
+        <Table.HeaderCell width='six'>Status</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
-        <Table.Row>
-          <Table.HeaderCell>3 People</Table.HeaderCell>
-          <Table.HeaderCell>2 Approved</Table.HeaderCell>
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer>
+      <Table.Row>
+        <Table.HeaderCell>3 People</Table.HeaderCell>
+        <Table.HeaderCell>2 Approved</Table.HeaderCell>
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleColumnWidth
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleCompact.js b/docs/app/Examples/collections/Table/Variations/TableExampleCompact.js
index 7f83734fb2..218d251873 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleCompact.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleCompact.js
@@ -1,61 +1,59 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleCompact = () => {
-  return (
-    <Table compact>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleCompact = () => (
+  <Table compact>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleCompact
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleFixed.js b/docs/app/Examples/collections/Table/Variations/TableExampleFixed.js
index f739fdb954..da1ccea008 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleFixed.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleFixed.js
@@ -1,42 +1,40 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleFixed = () => {
-  return (
-    <Table fixed>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Description</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleFixed = () => (
+  <Table fixed>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Description</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>
             John is an interesting boy but sometimes you don't really have enough room to describe everything you'd like
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>
             Jamie is a kind girl but sometimes you don't really have enough room to describe everything you'd like
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>
             Jill is an alright girl but sometimes you don't really have enough room to describe everything you'd like
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleFixed
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleFixedLine.js b/docs/app/Examples/collections/Table/Variations/TableExampleFixedLine.js
index c499f8988c..b2c9ba84d8 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleFixedLine.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleFixedLine.js
@@ -1,46 +1,42 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleFixedLine = () => {
-  return (
-    <Table celled fixed singleLine>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Description</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleFixedLine = () => (
+  <Table celled fixed singleLine>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Description</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell
-            title={
-            [
-              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
-              'et dolore magna aliqua.',
-            ].join(' ')
-            }
-          >
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell
+          title={[
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
+            'et dolore magna aliqua.',
+          ].join(' ')}
+        >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Shorter description</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>Shorter description</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Shorter description</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>Shorter description</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleFixedLine
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleFullWidth.js b/docs/app/Examples/collections/Table/Variations/TableExampleFullWidth.js
index 03d024263a..970c9966e9 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleFullWidth.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleFullWidth.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import { Button, Checkbox, Icon, Table } from 'semantic-ui-react'
 
-const TableExampleFullWidth = () => {
-  return (
-    <Table celled compact definition>
-      <Table.Header fullWidth>
+const TableExampleFullWidth = () => (
+  <Table celled compact definition>
+    <Table.Header fullWidth>
       <Table.Row>
         <Table.HeaderCell />
         <Table.HeaderCell>Name</Table.HeaderCell>
@@ -12,9 +11,9 @@ const TableExampleFullWidth = () => {
         <Table.HeaderCell>E-mail address</Table.HeaderCell>
         <Table.HeaderCell>Premium Plan</Table.HeaderCell>
       </Table.Row>
-      </Table.Header>
+    </Table.Header>
 
-      <Table.Body>
+    <Table.Body>
       <Table.Row>
         <Table.Cell collapsing>
           <Checkbox slider />
@@ -42,9 +41,9 @@ const TableExampleFullWidth = () => {
         <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
         <Table.Cell>Yes</Table.Cell>
       </Table.Row>
-      </Table.Body>
+    </Table.Body>
 
-      <Table.Footer fullWidth>
+    <Table.Footer fullWidth>
       <Table.Row>
         <Table.HeaderCell />
         <Table.HeaderCell colSpan='4'>
@@ -55,9 +54,8 @@ const TableExampleFullWidth = () => {
           <Button disabled size='small'>Approve All</Button>
         </Table.HeaderCell>
       </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleFullWidth
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleInverted.js b/docs/app/Examples/collections/Table/Variations/TableExampleInverted.js
index 9637099cbd..53f603f59c 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleInverted.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleInverted.js
@@ -1,44 +1,42 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleInverted = () => {
-  return (
-    <Table inverted>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleInverted = () => (
+  <Table inverted>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
-        <Table.Row>
-          <Table.HeaderCell>3 People</Table.HeaderCell>
-          <Table.HeaderCell>2 Approved</Table.HeaderCell>
-          <Table.HeaderCell />
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer>
+      <Table.Row>
+        <Table.HeaderCell>3 People</Table.HeaderCell>
+        <Table.HeaderCell>2 Approved</Table.HeaderCell>
+        <Table.HeaderCell />
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleInverted
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleLarge.js b/docs/app/Examples/collections/Table/Variations/TableExampleLarge.js
index b6782f514d..486464afd3 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleLarge.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleLarge.js
@@ -1,44 +1,42 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleLarge = () => {
-  return (
-    <Table size='large'>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleLarge = () => (
+  <Table size='large'>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
-        <Table.Row>
-          <Table.HeaderCell>3 People</Table.HeaderCell>
-          <Table.HeaderCell>2 Approved</Table.HeaderCell>
-          <Table.HeaderCell />
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer>
+      <Table.Row>
+        <Table.HeaderCell>3 People</Table.HeaderCell>
+        <Table.HeaderCell>2 Approved</Table.HeaderCell>
+        <Table.HeaderCell />
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleLarge
diff --git a/docs/app/Examples/collections/Table/Variations/TableExamplePadded.js b/docs/app/Examples/collections/Table/Variations/TableExamplePadded.js
index 0d32051a2a..6607d246ea 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExamplePadded.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExamplePadded.js
@@ -1,33 +1,31 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExamplePadded = () => {
-  return (
-    <Table padded>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExamplePadded = () => (
+  <Table padded>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>
             He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Jamie was not interested in purchasing our product.</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Jamie was not interested in purchasing our product.</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExamplePadded
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleSelectableCell.js b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableCell.js
index d6007deead..553983efef 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleSelectableCell.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableCell.js
@@ -1,63 +1,61 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleSelectableCell = () => {
-  return (
-    <Table celled>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleSelectableCell = () => (
+  <Table celled>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>No Action</Table.Cell>
-          <Table.Cell selectable>
-            <a href='#'>Edit</a>
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell selectable>
-            <a href='#'>Edit</a>
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell selectable>
-            <a href='#'>Edit</a>
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row warning>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>No Action</Table.Cell>
-          <Table.Cell selectable warning>
-            <a href='#'>Requires change</a>
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell positive>Approved</Table.Cell>
-          <Table.Cell selectable positive>
-            <a href='#'>Approve</a>
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell negative>Denied</Table.Cell>
-          <Table.Cell selectable negative>
-            <a href='#'>Remove</a>
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>No Action</Table.Cell>
+        <Table.Cell selectable>
+          <a href='#'>Edit</a>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell selectable>
+          <a href='#'>Edit</a>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell selectable>
+          <a href='#'>Edit</a>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row warning>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>No Action</Table.Cell>
+        <Table.Cell selectable warning>
+          <a href='#'>Requires change</a>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell positive>Approved</Table.Cell>
+        <Table.Cell selectable positive>
+          <a href='#'>Approve</a>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell negative>Denied</Table.Cell>
+        <Table.Cell selectable negative>
+          <a href='#'>Remove</a>
+        </Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleSelectableCell
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
index 7179ac822b..560d4eef37 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js
@@ -1,36 +1,34 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleSelectableInvertedRow = () => {
-  return (
-    <Table celled inverted selectable>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleSelectableInvertedRow = () => (
+  <Table celled inverted selectable>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleSelectableInvertedRow
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleSelectableRow.js b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableRow.js
index fc3823ee4d..829b8238c7 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleSelectableRow.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSelectableRow.js
@@ -1,51 +1,49 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleSelectableRow = () => {
-  return (
-    <Table celled selectable>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleSelectableRow = () => (
+  <Table celled selectable>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>No Action</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row warning>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>No Action</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell positive>Approved</Table.Cell>
-          <Table.Cell warning>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell negative>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>No Action</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row warning>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>No Action</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell positive>Approved</Table.Cell>
+        <Table.Cell warning>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell negative>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleSelectableRow
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleSingleLine.js b/docs/app/Examples/collections/Table/Variations/TableExampleSingleLine.js
index d1c2d306cc..674ac8b835 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleSingleLine.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSingleLine.js
@@ -1,40 +1,38 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleSingleLine = () => {
-  return (
-    <Table singleLine>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Registration Date</Table.HeaderCell>
-          <Table.HeaderCell>E-mail address</Table.HeaderCell>
-          <Table.HeaderCell>Premium Plan</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleSingleLine = () => (
+  <Table singleLine>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Registration Date</Table.HeaderCell>
+        <Table.HeaderCell>E-mail address</Table.HeaderCell>
+        <Table.HeaderCell>Premium Plan</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John Lilki</Table.Cell>
-          <Table.Cell>September 14, 2013</Table.Cell>
-          <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-          <Table.Cell>No</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie Harington</Table.Cell>
-          <Table.Cell>January 11, 2014</Table.Cell>
-          <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill Lewis</Table.Cell>
-          <Table.Cell>May 11, 2014</Table.Cell>
-          <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John Lilki</Table.Cell>
+        <Table.Cell>September 14, 2013</Table.Cell>
+        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
+        <Table.Cell>No</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie Harington</Table.Cell>
+        <Table.Cell>January 11, 2014</Table.Cell>
+        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill Lewis</Table.Cell>
+        <Table.Cell>May 11, 2014</Table.Cell>
+        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleSingleLine
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleSmall.js b/docs/app/Examples/collections/Table/Variations/TableExampleSmall.js
index 56d507e433..3041a54b31 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleSmall.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleSmall.js
@@ -1,44 +1,42 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleSmall = () => {
-  return (
-    <Table size='small'>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleSmall = () => (
+  <Table size='small'>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
 
-      <Table.Footer>
-        <Table.Row>
-          <Table.HeaderCell>3 People</Table.HeaderCell>
-          <Table.HeaderCell>2 Approved</Table.HeaderCell>
-          <Table.HeaderCell />
-        </Table.Row>
-      </Table.Footer>
-    </Table>
-  )
-}
+    <Table.Footer>
+      <Table.Row>
+        <Table.HeaderCell>3 People</Table.HeaderCell>
+        <Table.HeaderCell>2 Approved</Table.HeaderCell>
+        <Table.HeaderCell />
+      </Table.Row>
+    </Table.Footer>
+  </Table>
+)
 
 export default TableExampleSmall
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleStackable.js b/docs/app/Examples/collections/Table/Variations/TableExampleStackable.js
index 24ec6dc323..87fe678301 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleStackable.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleStackable.js
@@ -1,36 +1,34 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleStackable = () => {
-  return (
-    <Table stackable>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleStackable = () => (
+  <Table stackable>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleStackable
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleStriped.js b/docs/app/Examples/collections/Table/Variations/TableExampleStriped.js
index 2752ce0d80..bc7d97a3a7 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleStriped.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleStriped.js
@@ -1,70 +1,68 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleStriped = () => {
-  return (
-    <Table striped>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Date Joined</Table.HeaderCell>
-          <Table.HeaderCell>E-mail</Table.HeaderCell>
-          <Table.HeaderCell>Called</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleStriped = () => (
+  <Table striped>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Date Joined</Table.HeaderCell>
+        <Table.HeaderCell>E-mail</Table.HeaderCell>
+        <Table.HeaderCell>Called</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John Lilki</Table.Cell>
-          <Table.Cell>September 14, 2013</Table.Cell>
-          <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-          <Table.Cell>No</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie Harington</Table.Cell>
-          <Table.Cell>January 11, 2014</Table.Cell>
-          <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill Lewis</Table.Cell>
-          <Table.Cell>May 11, 2014</Table.Cell>
-          <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John Lilki</Table.Cell>
-          <Table.Cell>September 14, 2013</Table.Cell>
-          <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-          <Table.Cell>No</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John Lilki</Table.Cell>
-          <Table.Cell>September 14, 2013</Table.Cell>
-          <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-          <Table.Cell>No</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie Harington</Table.Cell>
-          <Table.Cell>January 11, 2014</Table.Cell>
-          <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill Lewis</Table.Cell>
-          <Table.Cell>May 11, 2014</Table.Cell>
-          <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
-          <Table.Cell>Yes</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John Lilki</Table.Cell>
-          <Table.Cell>September 14, 2013</Table.Cell>
-          <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
-          <Table.Cell>No</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John Lilki</Table.Cell>
+        <Table.Cell>September 14, 2013</Table.Cell>
+        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
+        <Table.Cell>No</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie Harington</Table.Cell>
+        <Table.Cell>January 11, 2014</Table.Cell>
+        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill Lewis</Table.Cell>
+        <Table.Cell>May 11, 2014</Table.Cell>
+        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John Lilki</Table.Cell>
+        <Table.Cell>September 14, 2013</Table.Cell>
+        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
+        <Table.Cell>No</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John Lilki</Table.Cell>
+        <Table.Cell>September 14, 2013</Table.Cell>
+        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
+        <Table.Cell>No</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie Harington</Table.Cell>
+        <Table.Cell>January 11, 2014</Table.Cell>
+        <Table.Cell>jamieharingonton@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill Lewis</Table.Cell>
+        <Table.Cell>May 11, 2014</Table.Cell>
+        <Table.Cell>jilsewris22@yahoo.com</Table.Cell>
+        <Table.Cell>Yes</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John Lilki</Table.Cell>
+        <Table.Cell>September 14, 2013</Table.Cell>
+        <Table.Cell>jhlilk22@yahoo.com</Table.Cell>
+        <Table.Cell>No</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleStriped
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleTextAlign.js b/docs/app/Examples/collections/Table/Variations/TableExampleTextAlign.js
index 6a8fce25a3..69546bd646 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleTextAlign.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleTextAlign.js
@@ -1,36 +1,34 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleTextAlign = () => {
-  return (
-    <Table striped>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleTextAlign = () => (
+  <Table striped>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row textAlign='center'>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row textAlign='center'>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleTextAlign
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleUnstackable.js b/docs/app/Examples/collections/Table/Variations/TableExampleUnstackable.js
index 04e76d74e4..cd0640ef16 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleUnstackable.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleUnstackable.js
@@ -1,36 +1,34 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleUnstackable = () => {
-  return (
-    <Table unstackable>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleUnstackable = () => (
+  <Table unstackable>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell textAlign='right'>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell textAlign='right'>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell textAlign='right'>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell textAlign='right'>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell textAlign='right'>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleUnstackable
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleVerticalAlign.js b/docs/app/Examples/collections/Table/Variations/TableExampleVerticalAlign.js
index a665ee59f5..a11c175816 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleVerticalAlign.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVerticalAlign.js
@@ -1,39 +1,37 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleVerticalAlign = () => {
-  return (
-    <Table striped>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleVerticalAlign = () => (
+  <Table striped>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row verticalAlign='top'>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell verticalAlign='top'>
+    <Table.Body>
+      <Table.Row verticalAlign='top'>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell verticalAlign='top'>
             Notes<br />
             1<br />
             2<br />
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell verticalAlign='bottom'>Approved</Table.Cell>
-          <Table.Cell>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell verticalAlign='bottom'>Approved</Table.Cell>
+        <Table.Cell>
             Notes<br />
             1<br />
             2<br />
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleVerticalAlign
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleVeryBasic.js b/docs/app/Examples/collections/Table/Variations/TableExampleVeryBasic.js
index 5fe7c9eec9..83ac553e6b 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleVeryBasic.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVeryBasic.js
@@ -1,36 +1,34 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleVeryBasic = () => {
-  return (
-    <Table basic='very'>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleVeryBasic = () => (
+  <Table basic='very'>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jill</Table.Cell>
-          <Table.Cell>Denied</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jill</Table.Cell>
+        <Table.Cell>Denied</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleVeryBasic
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleVeryCompact.js b/docs/app/Examples/collections/Table/Variations/TableExampleVeryCompact.js
index bb302ec82e..82faaf4a54 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleVeryCompact.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVeryCompact.js
@@ -1,61 +1,59 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleVeryCompact = () => {
-  return (
-    <Table compact='very'>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleVeryCompact = () => (
+  <Table compact='very'>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>None</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Requires call</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>None</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Requires call</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleVeryCompact
diff --git a/docs/app/Examples/collections/Table/Variations/TableExampleVeryPadded.js b/docs/app/Examples/collections/Table/Variations/TableExampleVeryPadded.js
index 3da85db7ba..9930067a15 100644
--- a/docs/app/Examples/collections/Table/Variations/TableExampleVeryPadded.js
+++ b/docs/app/Examples/collections/Table/Variations/TableExampleVeryPadded.js
@@ -1,33 +1,31 @@
 import React from 'react'
 import { Table } from 'semantic-ui-react'
 
-const TableExampleVeryPadded = () => {
-  return (
-    <Table padded='very'>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Name</Table.HeaderCell>
-          <Table.HeaderCell>Status</Table.HeaderCell>
-          <Table.HeaderCell>Notes</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
+const TableExampleVeryPadded = () => (
+  <Table padded='very'>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Name</Table.HeaderCell>
+        <Table.HeaderCell>Status</Table.HeaderCell>
+        <Table.HeaderCell>Notes</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
 
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell>John</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>John</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>
             He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>Jamie</Table.Cell>
-          <Table.Cell>Approved</Table.Cell>
-          <Table.Cell>Jamie was not interested in purchasing our product.</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Jamie</Table.Cell>
+        <Table.Cell>Approved</Table.Cell>
+        <Table.Cell>Jamie was not interested in purchasing our product.</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+)
 
 export default TableExampleVeryPadded
diff --git a/docs/app/Examples/collections/Table/Variations/index.js b/docs/app/Examples/collections/Table/Variations/index.js
index 48ee0e7e7d..7cecac6b5f 100644
--- a/docs/app/Examples/collections/Table/Variations/index.js
+++ b/docs/app/Examples/collections/Table/Variations/index.js
@@ -1,169 +1,166 @@
 import React from 'react'
 import { Message } from 'semantic-ui-react'
+
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 
-const Variations = () => {
-  return (
-    <ExampleSection title='Variations'>
-      <ComponentExample
-        title='Single Line'
-        description='A table can specify that its cell contents should remain on a single line, and not wrap.'
-        examplePath='collections/Table/Variations/TableExampleSingleLine'
-      />
-
-      <ComponentExample
-        title='Attached'
-        description='A table can be attached to other content on a page.'
-        examplePath='collections/Table/Variations/TableExampleAttached'
-      />
-
-      <ComponentExample
-        title='Fixed'
-        description={
-        [
-          'A table can use fixed a special faster form of table rendering that does not resize table cells based on',
-          'content.',
-        ].join(' ')
-        }
-        examplePath='collections/Table/Variations/TableExampleFixed'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleFixedLine'>
-        <Message info>
+const Variations = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Single Line'
+      description='A table can specify that its cell contents should remain on a single line, and not wrap.'
+      examplePath='collections/Table/Variations/TableExampleSingleLine'
+    />
+
+    <ComponentExample
+      title='Attached'
+      description='A table can be attached to other content on a page.'
+      examplePath='collections/Table/Variations/TableExampleAttached'
+    />
+
+    <ComponentExample
+      title='Fixed'
+      description={[
+        'A table can use fixed a special faster form of table rendering that does not resize table cells based on',
+        'content.',
+      ].join(' ')}
+      examplePath='collections/Table/Variations/TableExampleFixed'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleFixedLine'>
+      <Message info>
           Fixed <code>single line</code> tables will automatically ensure content that does not fit in a single line
           will receive "..." ellipsis.
-        </Message>
-      </ComponentExample>
-
-      <ComponentExample
-        title='Stacking'
-        description='A table can specify how it stacks table content responsively.'
-        examplePath='collections/Table/Variations/TableExampleUnstackable'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleStackable' />
-
-      <ComponentExample
-        title='Selectable Row'
-        description='A table can have its rows appear selectable.'
-        examplePath='collections/Table/Variations/TableExampleSelectableRow'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleSelectableInvertedRow' />
-
-      <ComponentExample
-        title='Selectable Cell'
-        description='A table cell can be selectable.'
-        examplePath='collections/Table/Variations/TableExampleSelectableCell'
-      >
-        <Message info>
+      </Message>
+    </ComponentExample>
+
+    <ComponentExample
+      title='Stacking'
+      description='A table can specify how it stacks table content responsively.'
+      examplePath='collections/Table/Variations/TableExampleUnstackable'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleStackable' />
+
+    <ComponentExample
+      title='Selectable Row'
+      description='A table can have its rows appear selectable.'
+      examplePath='collections/Table/Variations/TableExampleSelectableRow'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleSelectableInvertedRow' />
+
+    <ComponentExample
+      title='Selectable Cell'
+      description='A table cell can be selectable.'
+      examplePath='collections/Table/Variations/TableExampleSelectableCell'
+    >
+      <Message info>
           Using an <code>a</code> link inside a selectable cell will automatically make the hit box the entire
           cell area. By default links will inherit their cell color.
-        </Message>
-      </ComponentExample>
-
-      <ComponentExample
-        title='Vertical Alignment'
-        description='A table, header, row or cell can adjust its vertical alignment.'
-        examplePath='collections/Table/Variations/TableExampleVerticalAlign'
-      />
-
-      <ComponentExample
-        title='Text Alignment'
-        description='A table, header, row, or cell can adjust its text alignment.'
-        examplePath='collections/Table/Variations/TableExampleTextAlign'
-      />
-
-      <ComponentExample
-        title='Striped'
-        description='A table can stripe alternate rows of content with a darker color to increase contrast.'
-        examplePath='collections/Table/Variations/TableExampleStriped'
-      />
-
-      <ComponentExample
-        title='Celled'
-        description='A table may be divided each row into separate cells.'
-        examplePath='collections/Table/Variations/TableExampleCelled'
-      />
-
-      <ComponentExample
-        title='Basic'
-        description='A table can reduce its complexity to increase readability.'
-        examplePath='collections/Table/Variations/TableExampleBasic'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryBasic' />
-
-      <ComponentExample
-        title='Collapsing Cell'
-        description='A cell can be collapsing so that it only uses as much space as required.'
-        examplePath='collections/Table/Variations/TableExampleCollapsingCell'
-      />
-
-      <ComponentExample
-        title='Column Count'
-        description='A table can specify its column count to divide its content evenly.'
-        examplePath='collections/Table/Variations/TableExampleColumnCount'
-      />
-
-      <ComponentExample
-        title='Column Width'
-        description='A table can specify the width of individual columns independently.'
-        examplePath='collections/Table/Variations/TableExampleColumnWidth'
-      />
-
-      <ComponentExample
-        title='Collapsing'
-        description='A table can be collapsing, taking up only as much space as its rows.'
-        examplePath='collections/Table/Variations/TableExampleCollapsing'
-      />
-
-      <ComponentExample
-        title='Colored'
-        description='A table can be given a color to distinguish it from other table.'
-        examplePath='collections/Table/Variations/TableExampleColors'
-      />
-
-      <ComponentExample
-        title='Inverted'
-        description="A table's colors can be inverted."
-        examplePath='collections/Table/Variations/TableExampleInverted'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleInvertedColors' />
-
-      <ComponentExample
-        title='Sortable'
-        description='A table can appear to sort its data by column in ascending or descending order.'
-        examplePath='collections/Table/Variations/TableExampleSortable'
-      />
-
-      <ComponentExample
-        title='Full-Width Header / Footer'
-        description={
-          'A definition table can have a full width header or footer, filling in the gap left by the first column.'
-        }
-        examplePath='collections/Table/Variations/TableExampleFullWidth'
-      />
-
-      <ComponentExample
-        title='Padded'
-        description='A table may sometimes need to be more padded for legibility.'
-        examplePath='collections/Table/Variations/TableExamplePadded'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryPadded' />
-
-      <ComponentExample
-        title='Compact'
-        description='A table may sometimes need to be more compact to make more rows visible at a time.'
-        examplePath='collections/Table/Variations/TableExampleCompact'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryCompact' />
-
-      <ComponentExample
-        title='Size'
-        description='A table can also be small or large.'
-        examplePath='collections/Table/Variations/TableExampleSmall'
-      />
-      <ComponentExample examplePath='collections/Table/Variations/TableExampleLarge' />
-    </ExampleSection>
-  )
-}
+      </Message>
+    </ComponentExample>
+
+    <ComponentExample
+      title='Vertical Alignment'
+      description='A table, header, row or cell can adjust its vertical alignment.'
+      examplePath='collections/Table/Variations/TableExampleVerticalAlign'
+    />
+
+    <ComponentExample
+      title='Text Alignment'
+      description='A table, header, row, or cell can adjust its text alignment.'
+      examplePath='collections/Table/Variations/TableExampleTextAlign'
+    />
+
+    <ComponentExample
+      title='Striped'
+      description='A table can stripe alternate rows of content with a darker color to increase contrast.'
+      examplePath='collections/Table/Variations/TableExampleStriped'
+    />
+
+    <ComponentExample
+      title='Celled'
+      description='A table may be divided each row into separate cells.'
+      examplePath='collections/Table/Variations/TableExampleCelled'
+    />
+
+    <ComponentExample
+      title='Basic'
+      description='A table can reduce its complexity to increase readability.'
+      examplePath='collections/Table/Variations/TableExampleBasic'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryBasic' />
+
+    <ComponentExample
+      title='Collapsing Cell'
+      description='A cell can be collapsing so that it only uses as much space as required.'
+      examplePath='collections/Table/Variations/TableExampleCollapsingCell'
+    />
+
+    <ComponentExample
+      title='Column Count'
+      description='A table can specify its column count to divide its content evenly.'
+      examplePath='collections/Table/Variations/TableExampleColumnCount'
+    />
+
+    <ComponentExample
+      title='Column Width'
+      description='A table can specify the width of individual columns independently.'
+      examplePath='collections/Table/Variations/TableExampleColumnWidth'
+    />
+
+    <ComponentExample
+      title='Collapsing'
+      description='A table can be collapsing, taking up only as much space as its rows.'
+      examplePath='collections/Table/Variations/TableExampleCollapsing'
+    />
+
+    <ComponentExample
+      title='Colored'
+      description='A table can be given a color to distinguish it from other table.'
+      examplePath='collections/Table/Variations/TableExampleColors'
+    />
+
+    <ComponentExample
+      title='Inverted'
+      description="A table's colors can be inverted."
+      examplePath='collections/Table/Variations/TableExampleInverted'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleInvertedColors' />
+
+    <ComponentExample
+      title='Sortable'
+      description='A table can appear to sort its data by column in ascending or descending order.'
+      examplePath='collections/Table/Variations/TableExampleSortable'
+    />
+
+    <ComponentExample
+      title='Full-Width Header / Footer'
+      description={
+        'A definition table can have a full width header or footer, filling in the gap left by the first column.'
+      }
+      examplePath='collections/Table/Variations/TableExampleFullWidth'
+    />
+
+    <ComponentExample
+      title='Padded'
+      description='A table may sometimes need to be more padded for legibility.'
+      examplePath='collections/Table/Variations/TableExamplePadded'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryPadded' />
+
+    <ComponentExample
+      title='Compact'
+      description='A table may sometimes need to be more compact to make more rows visible at a time.'
+      examplePath='collections/Table/Variations/TableExampleCompact'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleVeryCompact' />
+
+    <ComponentExample
+      title='Size'
+      description='A table can also be small or large.'
+      examplePath='collections/Table/Variations/TableExampleSmall'
+    />
+    <ComponentExample examplePath='collections/Table/Variations/TableExampleLarge' />
+  </ExampleSection>
+)
 
 export default Variations