QueryTable.js

class QueryTable extends React.Component {
  state = {
    order: 'asc',
    sortedBy: 'meat',
    query: 'chicken',
    columnHeaders: ['meat', 'protein (g)', 'calories (cal)', 'carbohydrates (g)', 'fat (g)'],
    rows: [
      ['chicken breast', '25g', '200cal', '37g', '8g'],
      ['fried chicken', '45g', '450cal', '21g', '16g'],
      ['beef stew', '20g', '250cal', '8g', '14g'],
    ],
  }

  /**
   * Get the order and sortedBy
   * Depending on which header is clicked you must change that element's column in the rows array
   * meat [0] -> rows[0][1], rows[0][2], rows[0][3] ([columnHeader's index][rows' length])
   * 
   * Get the element of columnHeaders[sortedBy]
   */
  sort = () => {
    const { order, sortedBy, columnHeaders, rows } = this.state;
    const firstIndex = columnHeaders.indexOf(sortedBy);
    console.log(firstIndex);
  }

  /**
   * Needs to get the column header choice and change the sortedBy state
   * Needs to get the order and order items by alphabetical or numeric order
   * Needs to check if the order is asc or desc and change vice-versa by each click
   */
  handleHeaderClick = (event) => {
    const value = event.target.getAttribute('value');
    const name  = event.target.getAttribute('name');

    this.setState({
      'sortedBy': name,
    });

    if (this.state.sortedBy === name) {
      if (this.state.order === 'asc') {
        this.setState({
          'order': 'desc',
        });
      } else {
        this.setState({
          'order': 'asc',
        });
      }
    }

    this.sort();

  }

  /**
   * When checkbox is clicked needs to gray out all rows under the header
   * If the checkbox is click and the rows were ordered by checkbox, go to next header ele and
   *   sort by that
   * 
   */
  handleHeaderCheckboxClick = () => {
    console.log('Hello from handleHeaderCheckboxClick!')
  }

  /**
   * When a string is entered needs to check all rows array
   *   if array does not have query, filter out
   */
  handleTextLabelQuery = () => {
    console.log('Hello from handleTextLabelQuery!')
  }

  /**
   * TODO: TableRow headers need on-click
   * TODO: Create a query TextLabel
   * TODO: TableRow headers need different hover state changes
   */
  render(){
    const { order, sortedBy, query, columnHeaders, rows } = this.state;

    return (
      <Paper>
        <TextField
          id="query-textfield"
          label="Search"
          value={query}
          onChange={this.handleTextLabelQuery}
          margin="normal"
          variant="outlined"
        />
        <Table>
          <TableHead>
            <TableRow>
              {
                columnHeaders.map(header => (
                  <TableCell
                    className="order-headers"
                    onClick={this.handleHeaderClick}
                    value={sortedBy}
                    name={header}
                  >{header}</TableCell>
                ))
              }
            </TableRow>
          </TableHead>
          <TableBody>
            {
              rows.map(row => (
                <TableRow>
                {
                  row.map(item => (
                    <TableCell>{item}</TableCell>
                  ))
                }
                </TableRow>
              ))
            }
          </TableBody>
        </Table>
      </Paper>
    );
  }

}

export default withStyles(styles)(QueryTable);