-
Notifications
You must be signed in to change notification settings - Fork 3
Add sorting to table columns #71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. is this There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I can update it if you think it's clearer, but it's setting the |
||
} | ||
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); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. let's do the slice up here, so it can be a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Will do. |
||
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); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We have |
||
|
||
|
@@ -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; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i would prefer to see a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That would create a nested ternary here, which the linter yelled at me for. I also feel like it makes it less readable, so I'm inclined to leave it as is unless you feel very strongly about it. Let me know! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What about moving this embedded logic into other methods (which would be the first step to extracting them to components, were we to go that far)? For example: https://gist.github.com/bscofield/0fb968a9f69b14955b508f919d5f2b86 |
||
if (col === this.state.sort.column) { | ||
arrow = this.state.sort.order === 'asc' ? | ||
<span>↑</span> : <span>↓</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, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -83,9 +83,12 @@ export default class MainView extends React.Component { | |
} | ||
|
||
parseCSV(results) { | ||
let rowData = results.data; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. drying to do |
||
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> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why do we have to setState again, when we already have a default state? because we don't get headers until now?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, exactly. I tried to put it in the constructor, but
this.props.headers
wasn't defined yet.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would
props.headers
in the constructor work?this
isn't defined at that point, butprops
does get passed in as an argument.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, good call! Yeah, that worked. I'll update.