%%html
# defines the tableID that is going to be referred to in the future
<table id="sportsTable">
    <thead>
      <tr>
        # these are the sortTable functions for each of the columns. the onclick allows for on click of the table header. 
        <th onclick="sortTable('assists per game')">Assists Per Game</th>
        <th onclick="sortTable('minutes per game')">Minutes Per Game</th>
        <th onclick="sortTable('blocks per game')">Blocks Per Game</th>
        <th onclick="sortTable('defensive rebounds')">Defensive Rebounds</th>
        <th onclick="sortTable('fg percent')">FG Percent</th>
        <th onclick="sortTable('ft percent')">FT Percent</th>
        <th onclick="sortTable('games played')">Games Played</th>
        <th onclick="sortTable('height (inches)')">Height (inches)</th>
        <th onclick="sortTable('name')">Name</th>
        <th onclick="sortTable('offensive rebounds')">Offensive Rebounds</th>
        <th onclick="sortTable('points per game')">Points Per Game</th>
        <th onclick="sortTable('steals per game')">Steals Per Game</th>
        <th onclick="sortTable('team')">Team</th>
        <th onclick="sortTable('three percent')">Three Percent</th>
        <th onclick="sortTable('weight (pounds)')">Weight (pounds)</th>
      </tr>
    </thead>
    <tbody>
    # sample data following on frontend, just for demo.
      <tr>
        <td>2</td>
        <td>35</td>
        <td>1</td>
        <td>5</td>
        <td>44</td>
        <td>88</td>
        <td>1421</td>
        <td>81</td>
        <td>LeBron James</td>
        <td>6</td>
        <td>28</td>
        <td>1</td>
        <td>Los Angeles Lakers</td>
        <td>24</td>
        <td>250</td>
      </tr>
      <tr>
        <td>3</td>
        <td>32</td>
        <td>2</td>
        <td>6</td>
        <td>55</td>
        <td>92</td>
        <td>1231</td>
        <td>75</td>
        <td>Steph Curry</td>
        <td>5</td>
        <td>29</td>
        <td>1</td>
        <td>Golden State Warriors</td>
        <td>34</td>
        <td>185</td>
      </tr>
  </table>
  
  <script>
    // sortTable function meant to sort based on each column header.
    function getColumnIndex(columnName) {
      // each column name is taken in columnName to get its index.
      const table = document.getElementById('sportsTable');
      const headerRow = table.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0];
      // contains the column headers, index 0
      const headers = Array.from(headerRow.getElementsByTagName('th'));
      return headers.findIndex(header => header.innerText.toLowerCase() === columnName.toLowerCase()) + 1;
      // converts column header names to lowercase to account for sortTable definitions
    }
    
function sortTable(columnName) {
  const table = document.getElementById('sportsTable');
  // constant calls the tableID that was previously defined
  const rows = Array.from(table.tBodies[0].getElementsByTagName('tr'));
  const headerRow = table.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0];
  const isAscending = !headerRow.classList.contains('asc');
  // this is a very important line - the asc class helps the function decide whether or not the column is going to be sorted in increasing order or decreasing order.
  
  rows.sort((rowA, rowB) => {
    let cellA = rowA.querySelector(`td:nth-child(${getColumnIndex(columnName)})`).innerText;
    let cellB = rowB.querySelector(`td:nth-child(${getColumnIndex(columnName)})`).innerText;
    // the nth-child selector is different from normal JS arrays, these have an index starting at 1 rather than 0
    // the rows are sorted based on the column. getColumnIndex is used to get the index of the column. 

    if (columnName.toLowerCase() === 'name' || columnName.toLowerCase() === 'team') {
      return isAscending ? cellA.localeCompare(cellB, undefined, { sensitivity: 'base' }) : cellB.localeCompare(cellA, undefined, { sensitivity: 'base' });
    }
    
    // these were for special situations. the name and team columns were not sorting properly, so the localeCompare was used to sort the rows alphabetically. 

    // Convert the cell values to numbers for the "Games Played" column
    if (columnName.toLowerCase() === 'games played') {
      cellA = parseInt(cellA);
      cellB = parseInt(cellB);
    }
    
    // games played was not sorting for some odd reason, which is why this if statement was added.
    // purpose is to parse the values as an integer and then sort numerically. 
    
    return isAscending ? cellA - cellB : cellB - cellA;
  });
  
  rows.forEach(row => table.tBodies[0].appendChild(row));
  headerRow.classList.toggle('asc');
  // this is meant for after sorting. after the sorting is done, the appendChild is meant to append these cell values back into the specified table.
}

  </script>

defines the tableID that is going to be referred to in the future

# these are the sortTable functions for each of the columns. the onclick allows for on click of the table header. # sample data following on frontend, just for demo. </table>
Assists Per Game Minutes Per Game Blocks Per Game Defensive Rebounds FG Percent FT Percent Games Played Height (inches) Name Offensive Rebounds Points Per Game Steals Per Game Team Three Percent Weight (pounds)
2 35 1 5 44 88 1421 81 LeBron James 6 28 1 Los Angeles Lakers 24 250
3 32 2 6 55 92 1231 75 Steph Curry 5 29 1 Golden State Warriors 34 185