From 3526de299716b531bb7d667a066539a346beabe3 Mon Sep 17 00:00:00 2001 From: Katie Schick Date: Fri, 2 Sep 2016 20:23:25 -0400 Subject: [PATCH 1/3] Add sorting to table columns --- src/components/DataTable.js | 86 +++++++++++++++++++++++++++++++++---- src/components/MainView.js | 10 +++-- src/styles.css | 7 ++- 3 files changed, 90 insertions(+), 13 deletions(-) diff --git a/src/components/DataTable.js b/src/components/DataTable.js index 9bfa43b..cd4d1de 100644 --- a/src/components/DataTable.js +++ b/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,11 +123,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 +148,11 @@ export default class DataTable extends React.Component { {values.map((val, i) => ( - {columns.map((col, j) => ( + {columns.map((col, j) => - ))} + )} ))} @@ -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, }; diff --git a/src/components/MainView.js b/src/components/MainView.js index 88f38ef..6f5813b 100644 --- a/src/components/MainView.js +++ b/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 {
- +
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 +} From 8c5edce3cc5de45dc8542e255e463e2e18ce9643 Mon Sep 17 00:00:00 2001 From: Katie Schick Date: Sat, 3 Sep 2016 10:58:25 -0400 Subject: [PATCH 2/3] Change some lets to consts --- src/components/DataTable.js | 3 +-- src/components/MainView.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/DataTable.js b/src/components/DataTable.js index cd4d1de..37aa4d1 100644 --- a/src/components/DataTable.js +++ b/src/components/DataTable.js @@ -107,13 +107,12 @@ 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; - values = values.slice(start, end); + const values = this.sortRows(props.values).slice(start, end); const columns = props.headers; const standardColumnWidth = 100; const wide = (columns.length * standardColumnWidth < window.innerWidth); diff --git a/src/components/MainView.js b/src/components/MainView.js index 6f5813b..ad9a413 100644 --- a/src/components/MainView.js +++ b/src/components/MainView.js @@ -83,8 +83,7 @@ export default class MainView extends React.Component { } parseCSV(results) { - let rowData = results.data; - rowData = rowData.filter((d) => Object.keys(d).length > 1); + const rowData = results.data.filter((d) => Object.keys(d).length > 1); this.setState({ data: rowData, filteredData: rowData, From d41c4cfa86af308694254dab4b1b63ce6f1df61f Mon Sep 17 00:00:00 2001 From: Katie Schick Date: Sat, 3 Sep 2016 11:23:11 -0400 Subject: [PATCH 3/3] Set default sort column in constructor --- src/components/DataTable.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/DataTable.js b/src/components/DataTable.js index 37aa4d1..846adf8 100644 --- a/src/components/DataTable.js +++ b/src/components/DataTable.js @@ -8,7 +8,7 @@ export default class DataTable extends React.Component { page: 0, wide: false, sort: { - column: '', + column: props.headers[0], order: 'asc', }, }; @@ -17,15 +17,6 @@ export default class DataTable extends React.Component { this.nextPage = this.nextPage.bind(this); } - componentWillMount() { - this.setState({ - sort: { - column: this.props.headers[0], - order: 'asc', - }, - }); - } - componentDidMount() { window.addEventListener('resize', this.resize); }
{col}
this.setSortState(col)}> + {col} {arrow} +
{wide ? '' : {col + ':'}} {val[col]}