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 {
{col} | )} -
---|
this.setSortState(col)}> + {col} {arrow} + | + ); + })} +
{wide ? '' : {col + ':'}} {val[col]} | - ))} + )}