если я вас правильно понял вы хотите просто сортировать таблицу.
вот мой демо код
codesandbox.io
там используется обычный метод
Array.sort, хотя вы можете использовать lodash или underscore
import React from "react";
import { render } from "react-dom";
import "./index.css";
const data = [
{ index: 0, product: "Bread", category: "Food", price: 1 },
{
index: 1,
product: 'F. Dostoyevsky "Crime and Punishment"',
category: "Books",
price: 8
},
{ index: 2, product: "iPhone", category: "Electronics", price: 699 },
{ index: 3, product: "Milk", category: "Food", price: 2 },
{ index: 4, product: "TV", category: "Electronics", price: 1099 }
];
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.index}</td>
<td>{this.props.product}</td>
<td>{this.props.category}</td>
<td>
{"$"}
{this.props.price}
</td>
</tr>
);
}
}
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
index: true,
product: true,
category: true,
price: true,
data: props.data
};
}
sortByIndex() {
var getIndex = !this.state.index;
var data = this.state.data;
data.sort((a, b) => {
if (!getIndex) {
return b.index - a.index;
} else {
return a.index - b.index;
}
});
this.setState({ data, index: getIndex });
}
sortByProductName() {
var getProduct = !this.state.product;
var data = this.state.data;
data.sort((a, b) => {
if (!getProduct) {
return b.product > a.product;
} else {
return a.product > b.product;
}
});
this.setState({ data, product: getProduct });
}
sortByCategory() {
var getCategory = !this.state.category;
var data = this.state.data;
data.sort((a, b) => {
if (!getCategory) {
return b.category > a.category;
} else {
return a.category > b.category;
}
});
this.setState({ data, category: getCategory });
}
sortByPrice() {
var getPrice = !this.state.price;
var data = this.state.data;
data.sort((a, b) => {
if (!getPrice) {
return b.price - a.price;
} else {
return a.price - b.price;
}
});
this.setState({ data, price: getPrice });
}
render() {
return (
<table className="table">
<tr>
<th onClick={this.sortByIndex.bind(this)}>
Index <i className={this.state.index ? "fa fa-caret-up" : "fa fa-caret-down"} aria-hidden="true" />{" "}
</th>
<th onClick={this.sortByProductName.bind(this)}>
Product <i className={this.state.product ? "fa fa-caret-up" : "fa fa-caret-down"} aria-hidden="true" />{" "}
</th>
<th onClick={this.sortByCategory.bind(this)}>
Category <i className={this.state.category ? "fa fa-caret-up" : "fa fa-caret-down"} aria-hidden="true" />{" "}
</th>
<th onClick={this.sortByPrice.bind(this)}>
Price <i className={this.state.price ? "fa fa-caret-up" : "fa fa-caret-down"} aria-hidden="true" />{" "}
</th>
</tr>
<tbody>{this.state.data.map((element, i) => <TableRow key={Math.random()} index={element.index} product={element.product} category={element.category} price={element.price} />)}</tbody>
</table>
);
}
}
render(<Table data={data} />, document.getElementById("root"));
