diff --git a/src/components/DataTable.js b/src/components/DataTable.js index 9bfa43b..846adf8 100644 --- a/src/components/DataTable.js +++ b/src/components/DataTable.js @@ -7,6 +7,10 @@ export default class DataTable extends React.Component { this.state = { page: 0, wide: false, + sort: { + column: props.headers[0], + order: 'asc', + }, }; this.resize = this.resize.bind(this); this.prevPage = this.prevPage.bind(this); @@ -29,6 +33,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(); } @@ -59,8 +103,8 @@ export default class DataTable extends React.Component { 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] || {}); + const values = this.sortRows(props.values).slice(start, end); + const columns = props.headers; const standardColumnWidth = 100; const wide = (columns.length * standardColumnWidth < window.innerWidth); @@ -69,11 +113,24 @@ export default class DataTable extends React.Component { {(() => { if (wide) { - return ( - - {columns.map((col, i) => )} - - ); + return ( + + + {columns.map((col, i) => { + let arrow; + if (col === this.state.sort.column) { + arrow = this.state.sort.order === 'asc' ? + : ; + } + return ( + + ); + })} + + + ); } return undefined; })()} @@ -81,11 +138,11 @@ export default class DataTable extends React.Component { {values.map((val, i) => ( - {columns.map((col, j) => ( + {columns.map((col, j) => - ))} + )} ))} @@ -107,4 +164,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, }; diff --git a/src/components/MainView.js b/src/components/MainView.js index 88f38ef..ad9a413 100644 --- a/src/components/MainView.js +++ b/src/components/MainView.js @@ -83,9 +83,11 @@ export default class MainView extends React.Component { } parseCSV(results) { + const rowData = results.data.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 +119,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 +159,7 @@ export default class MainView extends React.Component {
- +
diff --git a/src/styles.css b/src/styles.css index 3a9fb53..513104e 100644 --- a/src/styles.css +++ b/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; -} \ No newline at end of file +}
{col}
this.setSortState(col)}> + {col} {arrow} +
{wide ? '' : {col + ':'}} {val[col]}