gg

package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^15.5.0",
     "@types/react-router-dom": "^4.0.4",
     "@types/react-tap-event-plugin": "^0.0.30",
+    "@types/lodash": "^4.14.69",
     "awesome-typescript-loader": "^3.1.3",
     "css-loader": "^0.28.2",
     "copy-webpack-plugin": "^4.0.1",
@@ -34,6 +35,7 @@
     "react-dom": "15.5.4",
     "react-router-dom": "^4.1.1",
     "react-tap-event-plugin": "^2.0.1",
-    "semantic-ui-react": "^0.70.0"
+    "semantic-ui-react": "^0.70.0",
+    "lodash": "^4.17.4"
   }
 }

src/ts/Routes.tsx

@@ -12,6 +12,7 @@ import { Components } from './containers/test/Components';
 import { Sensors } from './containers/test/Sensors';
 // import { Layout } from './containers/test/layout/Layout'
 import { Tree } from './containers/test/commons/Tree';
+import { TableExampleSortable } from './containers/test/TableExampleSortable'
 
 export class Blank extends React.Component<any, any> {
   render() {
@@ -52,6 +53,7 @@ export class Routes extends React.Component<any, any> {
           <Route exact path='/test5' component={ProbeDown} />
           <Route exact path='/test6' component={DiscoveryDetails} />
           <Route exact path='/test7' component={Tree} />
+          <Route exact path='/test8' component={TableExampleSortable} />
 
           <Route exact path='/test14' component={Components} />
 

src/ts/containers/test/TableExampleSortable.tsx

@@ -0,0 +1,74 @@
+import * as _ from 'lodash';
+import * as React 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 class TableExampleSortable extends React.Component<any, any>  {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      column: null,
+      data: tableData,
+      direction: null,
+    };
+  }
+
+
+  handleSort = (clickedColumn:any) => () => {
+    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 : null} onClick={this.handleSort('name')}>
+              Name
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
+              Age
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'gender' ? direction : null} 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>
+    )
+  }
+}

src/ts/containers/test/layout/LeftMenu.tsx

@@ -88,6 +88,7 @@ export class LeftMenu extends React.Component<any, any> {
                   <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
                   <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
                   <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
+                  <Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
                 </Dropdown.Menu>
               </Dropdown>
             </Menu.Item>