如何在 React 中对 HTML 表格进行排序？

Question

I have a table that contains numbers, dates, and strings. I want to be able to sort them by clicking on the table's headings and have them sort by the particular clicked on heading, but I am having trouble with the logic to do this. I have read other stack overflow answers but they are somewhat confusing as to what I am supposed to do. Can someone point me in the right direction?

Function 

 const sorted = () => {
        const arr = []
        const tableBody = document.getElementsByTagName('table')
        const tableRow = document.getElementsByTagName('tr')
        const tableHeader = document.querySelectorAll('th');
        console.log(tableBody)

        for (let i = 0; i < tableHeader.length; i++) {
            tableHeader[i].addEventListener('click', () => {
                console.log(tableBody)
            })
        }

    }
    sorted()

Table

 <div className="outputs" >
                <table>
                    <tr>
                        <th>Date</th>
                        <th>Stock Name</th>
                        <th>Price Of Option</th>
                        <th>Number Of Options</th>
                        <th>Total Amount Spent</th>
                        <th>Option Sold At</th>
                        <th>Amount Of Options Sold</th>
                        <th>Proft</th>
                    </tr>
                    {listOfOptions.map(option => {
                        return (
                            <tbody>
                                <tr>
                                    <td>{option.clock}</td>
                                    <td>{option.name.toUpperCase()}</td>
                                    <td>${option.price}</td>
                                    <td>{option.amountOfOptions}</td>
                                    <td>${option.totalAmountSpent.toFixed(2)}</td>
                                    <td>${option.optionPriceSoldAt}</td>
                                    <td>{option.amountOfOptionsSold}</td>
                                    <td style={{ color: option.totalProfit >= 0 ? 'green' : 'red' }}>${option.totalProfit.toFixed(2)}</td>
                                </tr>
                            </tbody>
                        )
                    })}
                </table>
            </div>

Answer 1

As I can see it -

• add handler on each or one that wrapps all
• in handler get name of column and sort listOfOptions by this name (before it, map column name to key, ex: Price Of Option -> price, etc...)
• use hooks (useState) or setState to set new sortedArray to state and rerender component

Answer 2

The steps to take are:

1. Store the array in a local variable listOfOptions
2. Attach click handlers to the header elements of the table
3. Within these handlers, sort the arrays and replace the old array with the new sorted arrays.

I have only implemented two header click handlers, but it should be enough to get the general idea.

import React, { useState } from "react";


export default function App() {
  const [listOfOptions, setListOfOptions] = useState([
    {
      clock: "23/12/2020",
      name: "Dorothy",
      price: 12.34,
      amountOfOptions: 1,
      totalAmountSpent: 23.3232,
      optionPriceSoldAt: 34.22323,
      amountOfOptionsSold: 122.34,
      totalProfit: 44433.343
    },
    {
      clock: "23/12/2020",
      name: "Brian",
      price: 12.34,
      amountOfOptions: 2,
      totalAmountSpent: 255.3232,
      optionPriceSoldAt: 52.194323,
      amountOfOptionsSold: 622.34,
      totalProfit: 9433.343
    },
    {
      clock: "23/12/2020",
      name: "Alfred",
      price: 12.34,
      amountOfOptions: 3,
      totalAmountSpent: 123.3232,
      optionPriceSoldAt: 12.22323,
      amountOfOptionsSold: 72.34,
      totalProfit: 5433.343
    }
  ]);

  function sortByNumberOfOptions() {
    const clonedOptions = [...listOfOptions];

    clonedOptions.sort((a, b) => {
      return a.amountOfOptions  - b.amountOfOptions;
    });

    setListOfOptions(clonedOptions);
  }

  function sortByName() {
    const clonedOptions = [...listOfOptions];

    clonedOptions.sort((a, b) => {
      if (a.name > b.name) {
        return 1;
      } else if (a.name < b.name) {
        return -1;
      }
      return 0;
    });

    setListOfOptions(clonedOptions);
  }

  return (
    <div>
      <div className="outputs">
        <table>
          <tr>
            <th>Date</th>
            <th onClick={sortByName}>Stock Name</th>
            <th>Price Of Option</th>
            <th onClick={sortByNumberOfOptions}>Number Of Options</th>
            <th>Total Amount Spent</th>
            <th>Option Sold At</th>
            <th>Amount Of Options Sold</th>
            <th>Proft</th>
          </tr>

          <tbody>
            {listOfOptions.map((option, index) => {
              return (
                <tr key={index}>
                  <td>{option.clock}</td>
                  <td>{option.name.toUpperCase()}</td>
                  <td>${option.price}</td>
                  <td>{option.amountOfOptions}</td>
                  <td>${option.totalAmountSpent.toFixed(2)}</td>
                  <td>${option.optionPriceSoldAt}</td>
                  <td>{option.amountOfOptionsSold}</td>
                  <td
                    style={{ color: option.totalProfit >= 0 ? "green" : "red" }}
                  >
                    ${option.totalProfit.toFixed(2)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

StackBlitz version here