table sort

src/ts/@overflow/temp/react/components/TableSort.tsx

@@ -16,15 +16,50 @@ export type Props = StateProps & DispatchProps;
 export interface State {
   column: string;
   data: any;
-  direction: string;
+  direction: 'ascending' | 'descending';
 }
 
+//
+// 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' },
+// ];
 
 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' },
+  {
+    'id': '11',
+
+    'cidr': '192.168.1.0/24',
+    'displayName': '192.168.1.105\'s probe',
+    // 'infraHost': {
+    //   'ip': '192.168.1.105',
+    //   'mac': 'ab:cd:ef:gh:ij',
+    // },
+    'targetCount': '20',
+    'sensorCount': '30',
+    'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',
+    'description': 'description1111111111',
+  },
+  {
+    'id': '22',
+    'displayName': '192.168.1.105\'s probe',
+    'cidr': '192.168.1.0/24',
+    'targetCount': '20',
+    'sensorCount': '50',
+    'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',
+    'description': 'description1111111111',
+  },
+  {
+    'id': '33',
+    'cidr': '192.168.1.0/24',
+    'displayName': '192.168.1.105\'s probe',
+    'targetCount': '20',
+    'sensorCount': '60',
+    'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ',
+    'description': 'description1111111111',
+  },
 ];
 
 export class TableSort extends React.Component<Props, State> {
@@ -34,7 +69,7 @@ export class TableSort extends React.Component<Props, State> {
     this.state = {
       column: null,
       data: tableData,
-      direction: null,
+      direction:  null,
     };
   }
 
@@ -45,29 +80,75 @@ export class TableSort extends React.Component<Props, State> {
           {this.generationHeaderRow()}
         </Table.Header>
         <Table.Body>
-
+          {this.generationBodyRow()}
         </Table.Body>
       </Table>
     );
   }
 
-  private generationHeaderRow(): JSX.Element {
+  private getHeaderValue = ():Map<string, string> => {
+    let tem:any = this.state.data;
+    let column:Map<string, string> = new Map();
+    for (let obj in tem) {
+      if (tem.hasOwnProperty(obj)) {
+        Object.keys(tem[obj]).map((key:string, index:number ) => {
+          if (tem[obj].hasOwnProperty(key)) {
+            column.set(key, key);
+          }
+        });
+      }
+    }
+
+    return column;
+  }
+
+  private generationHeaderRow(): (JSX.Element | JSX.Element[]) {
     return (
+
       <Table.Row>
+        {
+          this.renderHeaderCells()
+        }
 
       </Table.Row>
     );
   }
 
-  private generationBodyRow(): JSX.Element {
-    return (
-      <Table.Row>
+  private renderHeaderCells = ():JSX.Element[] => {
+    const { column, data, direction } = this.state;
+    let te = this.getHeaderValue();
+    let arr = new Array();
+    te.forEach((value:string, key:string ) => {
 
-      </Table.Row>
-    );
+      arr.push(
+        <Table.HeaderCell
+          sorted={column === value ? direction : 'ascending'}
+          onClick={this.handleSort(value)} >{value}</Table.HeaderCell> );
+    });
+
+    return arr;
   }
 
-  private handleSort(clickedColumn:any):void {
+  private generationBodyRow(): JSX.Element[] {
+    let arr = new Array<JSX.Element>();
+    let idx:number = 0;
+    for(let temp of this.state.data) {
+      arr.push( <Table.Row key={idx++}> { this.renderBodyCells(temp) } </Table.Row> );
+    }
+    return arr;
+  }
+
+  private renderBodyCells = (temp:any): JSX.Element[] => {
+    let te = this.getHeaderValue();
+    let arr = new Array();
+
+    te.forEach((value:string, key:string ) => {
+
+      arr.push(<Table.Cell>{temp[key]}</Table.Cell>);
+    });
+    return arr;
+  }
+  private handleSort = (clickedColumn:string) => ():void => {
     const {column, data, direction} = this.state;
 
     if (column !== clickedColumn) {
@@ -85,19 +166,5 @@ export class TableSort extends React.Component<Props, State> {
       direction: direction === 'ascending' ? 'descending' : 'ascending',
     });
   }
-
-  private handleDirection():string {
-    const { column, data, direction } = this.state;
-
-    if (column === 'name') {
-      return direction;
-    } else if(column === 'age') {
-      return direction;
-    } else if (column === 'gender' ) {
-      return direction;
-    }
-
-    return null;
-  }
 }