title: How do you build a row sorting (Horizontal sort) for html table?
body: <p>I need to implement a functionality in jquery where a user clicks on very first row and sort remaining items in clicked row.
  I've prepared a codepen here <a href="https://codepen.io/shaikh709/pen/orNLaY?editors=0010" rel="nofollow noreferrer">https://codepen.io/shaikh709/pen/orNLaY?editors=0010</a></p>
  
  <p>Here is the js I've for sorting table</p>
  
  <pre><code>function sortRow(rowIndex) {
  
      let table               = $('.report')
      let tr                  = table.find('tr');
      let selectedRow         = $(tr[rowIndex]);
      let selectedRowTd       = selectedRow.find('td');
      let selectedRowSorting  = [];
  
      // find and get clicked tr and it formats it in index and value of the cells
      selectedRowTd.each(function(tdIndex){
          let td = $(selectedRowTd[tdIndex]);
          selectedRowSorting.push({
              tdIndex: tdIndex,
              value: parseInt(Math.ceil(td.text().trim()))
          })
      })
  
  
      // it will compare values and sort
      selectedRowSorting = selectedRowSorting.sort(function(a, b){
  
          if (a.value == 0) {
              return -1;
          }
  
          if (b.value == 0) {
              return -1;
          }
  
          return b.value - a.value
      });
  
      console.log(selectedRowSorting)
  
      // it will only return indexs of sorted list of cells
      var sortedIndexs = selectedRowSorting.map(function(rowSorting){
          return rowSorting.tdIndex
      })
  
      console.log(sortedIndexs)
  
      table.find('tr').each(function(){
          let tr = $(this);
          let modifiedTr = [];
  
          tr.children().each(function(tdIndex, td){
  
            if (tdIndex == 0) {
              console.log(td)           
              modifiedTr[0] = td;
  
            } else {
              for (let i =0; i &lt; sortedIndexs.length;i++) {
                console.log(sortedIndexs[i])
                // it gives me index of sorted column.
                if (tdIndex == i) {
                  let sortedIndex = sortedIndexs[i];
  
                  if ( sortedIndex == undefined) {
                    console.log('i', i, sortedIndex)
                    sortedIndex = sortedIndexs.length+1
                  }
  
                  modifiedTr[sortedIndex] = td;
                }
              }
            }
  
          })
  
          tr.append(modifiedTr)
      })
  }
  </code></pre>
  
  <p>I've created a demo here <a href="https://codepen.io/shaikh709/pen/orNLaY?editors=0010" rel="nofollow noreferrer">https://codepen.io/shaikh709/pen/orNLaY?editors=0010</a></p>
  
  <p>When user click on first (very left) cell in a row. I want rest of the row to switch to largest to smallest value.</p>
  
  <p>Been stuck here for about couple of days. Any help is appreciated. Thanks.
  :)</p>