sort

src/ts/@overflow/commons/react/component/SortTableHeaderRow.tsx

@@ -0,0 +1,69 @@
+
+import * as React from 'react';
+import {
+  Table,
+} from 'semantic-ui-react';
+
+
+export interface Props {
+  columnList?: string[];
+  onHeaderColumnClick?(col:string, direction: string): void;
+}
+
+export interface State {
+  column: string;
+  direction: 'ascending' | 'descending';
+}
+
+
+export class SortTableHeaderRow extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+      column: null,
+      direction: null,
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Table.Row>
+        {this.renderCell()}
+      </Table.Row>
+    );
+  }
+
+  private renderCell = (): (JSX.Element | JSX.Element[]) => {
+    let arr = [];
+    let idx:number = 0;
+
+    for (let colValue of this.props.columnList) {
+
+      arr.push(
+        <Table.HeaderCell key={idx++} textAlign={'center'}
+          sorted={this.state.column === colValue ? this.state.direction : null}
+          onClick={this.handleColumnSort(colValue)}>{colValue}</Table.HeaderCell>);
+    }
+
+    return arr;
+  }
+
+  private handleColumnSort = (col:string) => ():void => {
+    if (this.state.column !== col) {
+      this.setState({
+        column: col,
+        direction: 'ascending',
+      });
+    } else {
+      this.setState({
+        direction: this.state.direction === 'ascending' ? 'descending' : 'ascending',
+      });
+    }
+
+    this.props.onHeaderColumnClick(this.state.column, this.state.direction);
+
+  }
+
+}
+

src/ts/@overflow/history/react/components/HistoryList.tsx

@@ -7,7 +7,7 @@ import History from '@overflow/history/api/model/History';
 import Page from '@overflow/commons/api/model/Page';
 import MetaHistoryType from '@overflow/meta/api/model/MetaHistoryType';
 import { Pager } from '@overflow/commons/react/component/Pager';
-
+import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
 
 export interface StateProps {
   probes: Probe[];
@@ -117,19 +117,25 @@ export class HistoryList extends React.Component<Props, State> {
     }
   }
 
+  private handleSort = (col:string, direction:string):void => {
+    console.log(col + 'direction:' + direction);
+  }
+
   public render(): JSX.Element {
+    let cols:string[] = ['No.', 'Probe', 'Type', 'Message', 'Created At', 'Created By'];
     let historyList: JSX.Element = (
       <Container fluid>
         <Table celled selectable striped>
           <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Probe</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Message</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Created By</Table.HeaderCell>
-            </Table.Row>
+            <SortTableHeaderRow columnList={cols} onHeaderColumnClick={this.handleSort} />
+            {/*<Table.Row>*/}
+              {/*<Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>*/}
+              {/*<Table.HeaderCell textAlign={'center'}>Probe</Table.HeaderCell>*/}
+              {/*<Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>*/}
+              {/*<Table.HeaderCell textAlign={'center'}>Message</Table.HeaderCell>*/}
+              {/*<Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>*/}
+              {/*<Table.HeaderCell textAlign={'center'}>Created By</Table.HeaderCell>*/}
+            {/*</Table.Row>*/}
           </Table.Header>
 
           <Table.Body>