Sorting table by key values

Question

I have already figured out that you need to use the sort function to sort the table onClick. What I am trying to do is sort by the key so that I don't have to keep repeating the code to sort the function by key. I want to keep my code Dry. How would I go about doing this. Also

Code

  const sortTable = (key) => {
    const clonedOptions = [...listOfOptions];
    clonedOptions.sort((a, b) => {
      return a.key - b.key;
    });
    console.log(clonedOptions, key);
    setListOfOptions(clonedOptions);
  };

    <div className="outputs">
      <table>
        <thead>
          <tr>
            <th></th>
            <th onClick={() => sortTable()}>Date</th>
            <th onClick={sortTable}>Stock Name</th>
            <th onClick={sortTable}>Price Of Option</th>
            <th onClick={sortTable}>Number Of Options</th>
            <th onClick={sortTable}>Total Amount Spent</th>
            <th onClick={sortTable}>Option Sold At</th>
            <th onClick={sortTable}>Amount Of Options Sold</th>
            <th onClick={sortTable}>Proft</th>
          </tr>
        </thead>
        {listOfOptions.map((option) => {
          return (
            <tbody key={uuidv1()}>
              <tr>
                <td title="delete" onClick={() => deleteOption(option.id)}>
                  <span className="delete">x</span>
                </td>
                <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

Your code only needs few changes for that: use the value of key param in the sort function and pass the key in every onClick

  const sortTable = (key) => {
    const clonedOptions = [...listOfOptions];
    clonedOptions.sort((a, b) => {
      return a[key] - b[key];
    });
    console.log(clonedOptions, key);
    setListOfOptions(clonedOptions);
  };

    <tr>
      <th></th>
      <th onClick={() => sortTable('date')}>Date</th>
      <th onClick={() => sortTable('name')}>Stock Name</th>
      <th onClick={() => sortTable('price')}>Price Of Option</th>
      <th onClick={() => sortTable('amountOfOptions')}>Number Of Options</th>
      <th onClick={() => sortTable('totalAmountSpent')}>Total Amount Spent</th>
      <th onClick={() => sortTable('optionPriceSoldAt')}>Option Sold At</th>
      <th onClick={() => sortTable('amountOfOptionsSold')}>Amount Of Options Sold</th>
      <th onClick={() => sortTable('totalProfit')}>Proft</th>
    </tr>