Add sorting to table columns

src/components/DataTable.js

@@ -7,12 +7,25 @@ export default class DataTable extends React.Component {
     this.state = {
       page: 0,
       wide: false,
+      sort: {
+        column: '',
+        order: 'asc',
+      },
     };
     this.resize = this.resize.bind(this);
     this.prevPage = this.prevPage.bind(this);
     this.nextPage = this.nextPage.bind(this);
   }
 
+  componentWillMount() {
+    this.setState({
+      sort: {
+        column: this.props.headers[0],
+        order: 'asc',
+      },
+    });
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.resize);
   }
@@ -29,6 +42,46 @@ export default class DataTable extends React.Component {
     window.removeEventListener('resize', this.resize);
   }
 
+  setSortState(col) {
+    const { sort } = this.state;
+
+    if (!sort.order) {
+      sort.order = 'asc';
+    }
+    if (sort.order && sort.column === col) {
+      sort.order = sort.order === 'asc' ? 'desc' : 'asc';
+    }
+    else {
+      sort.order = 'asc';
+    }
+
+    sort.column = col;
+    this.setState({ sort });
+  }
+
+  sortByOrder(column, sortOrder) {
+    return (a, b) => {
+      let result;
+      if (a[column] < b[column]) {
+        result = -1;
+      }
+      if (a[column] > b[column]) {
+        result = 1;
+      }
+      if (a[column] === b[column]) {
+        result = 0;
+      }
+      return result * sortOrder;
+    };
+  }
+
+  sortRows(values) {
+    const { sort: { column, order } } = this.state;
+    const sortOrder = order === 'asc' ? 1 : -1;
+    const sortedValues = values.sort(this.sortByOrder(column, sortOrder));
+    return sortedValues;
+  }
+
   resize() {
     this.forceUpdate();
   }
@@ -54,13 +107,14 @@ export default class DataTable extends React.Component {
 
   render() {
     const props = this.props;
+    let values = this.sortRows(props.values);
     const length = props.values.length;
     const limit = props.limit;
     const page = this.state.page;
     const start = page * limit;
     const end = start + limit;
-    const values = props.values.slice(start, end);
-    const columns = Object.keys(values[0] || {});
+    values = values.slice(start, end);
+    const columns = props.headers;
     const standardColumnWidth = 100;
     const wide = (columns.length * standardColumnWidth < window.innerWidth);
 
@@ -69,23 +123,36 @@ export default class DataTable extends React.Component {
         <table className={'table table-responsive ' + (wide ? styles.wide : styles.narrow)}>
           {(() => {
             if (wide) {
-              return (<thead>
-                <tr>
-                  {columns.map((col, i) => <th key={i}>{col}</th>)}
-                </tr>
-              </thead>);
+              return (
+                <thead>
+                  <tr>
+                    {columns.map((col, i) => {
+                      let arrow;
+                      if (col === this.state.sort.column) {
+                        arrow = this.state.sort.order === 'asc' ?
+                          <span>&#8593;</span> : <span>&#8595;</span>;
+                      }
+                      return (
+                        <th key={i} className="table-header" onClick={() => this.setSortState(col)}>
+                          {col} {arrow}
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+              );
             }
             return undefined;
           })()}
 
           <tbody>
             {values.map((val, i) => (
               <tr key={i}>
-                {columns.map((col, j) => (
+                {columns.map((col, j) =>
                   <td key={j}>
                     {wide ? '' : <span>{col + ':'}</span>} {val[col]}
                   </td>
-                ))}
+                )}
               </tr>
             ))}
           </tbody>
@@ -107,4 +174,5 @@ export default class DataTable extends React.Component {
 DataTable.propTypes = {
   limit: React.PropTypes.number.isRequired,
   values: React.PropTypes.array.isRequired,
+  headers: React.PropTypes.array.isRequired,
 };

src/components/MainView.js

@@ -83,9 +83,12 @@ export default class MainView extends React.Component {
   }
 
   parseCSV(results) {
+    let rowData = results.data;
+    rowData = rowData.filter((d) => Object.keys(d).length > 1);
     this.setState({
-      data: results.data,
-      filteredData: results.data,
+      data: rowData,
+      filteredData: rowData,
+      headers: Object.keys(rowData[0] || {}),
     });
   }
 
@@ -117,6 +120,7 @@ export default class MainView extends React.Component {
 
   render() {
     const data = this.state.data;
+    const headers = this.state.headers;
     const filteredData = this.state.filteredData;
     const dataSource = encodeURI(this.state.dataSource);
     const isError = this.state.isError;
@@ -156,7 +160,7 @@ export default class MainView extends React.Component {
                 <hr />
                 <div className="row">
                   <div className="col-xs-12">
-                    <DataTable limit={20} values={filteredData} />
+                    <DataTable limit={20} values={filteredData} headers={headers} />
                   </div>
                 </div>
               </div>

src/styles.css

@@ -20,6 +20,11 @@ body {
 .table-responsive {
   border: none;
 }
+
+.table-header {
+  cursor: pointer;
+}
+
 .pager li a {
   cursor: pointer;
   display: inline-block;
@@ -54,4 +59,4 @@ thead {
 
 tr:nth-child(even) {
   background-color: #f7f7f7;
-}
+}