iPirat

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"));