Для сортировки колонок в таблице использую sortBy (lodash). Не могу додуматься как передать sortColumn из state компонента. Вот код:
import React from 'react';
import OrderRow from './OrderRow';
import userInfo from './userInfo';
import './css/table.css';
import SearchBar from './SearchBar';
const sortBy = require('lodash/sortBy');
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
filterText: '',
order: require('../data/orders.json'),
user: require('../data/users.json'),
company: require('../data/companies.json'),
sortColumn: 'card_type'
};
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
}
handleFilterTextChange(filterText) {
this.setState({
filterText: filterText
});
}
render() {
const filterText = this.state.filterText;
const user = this.state.user;
const company = this.state.company;
const order = this.state.order;
const sortColumn = this.state.sortColumn;
//render table rows
let rows = [];
sortBy(order, c => c.sortColumn).forEach( order => {
if (
order.transaction_id.indexOf(filterText) === -1 &&
order.total.indexOf(filterText) === -1 &&
order.order_country.indexOf(filterText) === -1 &&
order.card_type.indexOf(filterText) === -1 &&
order.order_ip.indexOf(filterText) === -1 &&
userInfo(order.user_id, user).indexOf(filterText) === -1) {
return;
}
rows.push(
<OrderRow
user={user}
order={order}
company={company}
key={order.id}
/>);
});
return (
<table>
<thead>
<SearchBar
filterText={this.state.filterText}
onFilterTextChange={this.handleFilterTextChange}
/>
<tr>
<th>Transaction ID</th>
<th>User Info</th>
<th>Order Date</th>
<th>Order Amount</th>
<th>Card Number</th>
<th>Card Type</th>
<th>Location</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
);
}
};
export default Table