docs(Table): add sortable table example (#1594)

* add example of sortable table

* style(Table): style fixes to example

* docs(TableExampleSortable): add fixed prop

docs/app/Examples/collections/Table/Variations/TableExampleSortable.js

@@ -0,0 +1,68 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { Table } from 'semantic-ui-react'
+
+const tableData = [
+  { name: 'John', age: 15, gender: 'Male' },
+  { name: 'Amber', age: 40, gender: 'Female' },
+  { name: 'Leslie', age: 25, gender: 'Female' },
+  { name: 'Ben', age: 70, gender: 'Male' },
+]
+
+export default class TableExampleSortable extends Component {
+  state = {
+    column: null,
+    data: tableData,
+    direction: null,
+  }
+
+  handleSort = clickedColumn => () => {
+    const { column, data, direction } = this.state
+
+    if (column !== clickedColumn) {
+      this.setState({
+        column: clickedColumn,
+        data: _.sortBy(data, [clickedColumn]),
+        direction: 'ascending',
+      })
+
+      return
+    }
+
+    this.setState({
+      data: data.reverse(),
+      direction: direction === 'ascending' ? 'descending' : 'ascending',
+    })
+  }
+
+  render() {
+    const { column, data, direction } = this.state
+
+    return (
+      <Table sortable celled fixed>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell sorted={column === 'name' && direction} onClick={this.handleSort('name')}>
+              Name
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'age' && direction} onClick={this.handleSort('age')}>
+              Age
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'gender' && direction} onClick={this.handleSort('gender')}>
+              Gender
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {_.map(data, ({ age, gender, name }) => (
+            <Table.Row key={name}>
+              <Table.Cell>{name}</Table.Cell>
+              <Table.Cell>{age}</Table.Cell>
+              <Table.Cell>{gender}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    )
+  }
+}

docs/app/Examples/collections/Table/Variations/index.js

@@ -128,6 +128,12 @@ const Variations = () => {
       />
       <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={