JSFiddle - React, Tailwind, and code Playground

by biz79

HTML

<div id = "container">
<table width="300px" height="150px" border="1" id="presort">
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    <tr>
        <td id="1">data&nbsp;&nbsp;&nbsp;1</td>
        <td id="aa">AA</td>
    </tr>
    <tr>
        <td id="1">data&nbsp;&nbsp;&nbsp;1</td>
        <td id="bb">BB</td>
    </tr>
    <tr>
        <td id="1">data&nbsp;&nbsp;&nbsp;1</td>
        <td id="cc">CC</td>
    </tr>
    <tr>
        <td id="2">data&nbsp;&nbsp;&nbsp;2</td>
        <td id="dd">DD</td>
    </tr>
    <tr>
        <td id="2">data&nbsp;&nbsp;&nbsp;2</td>
        <td id="ee">EE</td>
    </tr>
    <tr>
        <td id="3">data&nbsp;&nbsp;&nbsp;3</td>
        <td id="ff">FF</td>
    </tr>
    <tr>
        <td id="4">data&nbsp;&nbsp;&nbsp;4</td>
        <td id="ff">FF</td>
    </tr>
    <tr>
        <td id="5">data&nbsp;&nbsp;&nbsp;5</td>
        <td id="ff">FF</td>
    </tr>
</table>
</div>

CSS

table {
     margin-top:20px;
 }

td {
    text-align:center;
}

th {
    width:50%;
}

JavaScript

sortByCol(0);
sortByCol(1);

function sortByCol(keyCol) {

    // keyCol = 0 for first col, 1 for 2nd col
    var valCol = (keyCol === 0) ? 1 : 0;
    var $rows = $('#presort tr');
    var dict = {};
    var col1name = $('th').eq(keyCol).html();
    var col2name = $('th').eq(valCol).html();

    for (var i = 0; i < $rows.length; i++) {

        if ($rows.eq(i).children('td').length > 0) {

            var key = $rows.eq(i).children('td').eq(keyCol).html();
            var val = $rows.eq(i).children('td').eq(valCol).html();

            //    console.log(val);


            if (key in dict) {
                dict[key].push(val);
            } else {
                dict[key] = [val];
            }
        }
    }
    redrawTable(dict,col1name,col2name);
}


function redrawTable(dict,col1name,col2name) {
    var $table = $('<table>').attr("border",1);
    $table.css( {"width":"300px" } );
    $table.append($('<tr><th>' +col1name+ '</th><th>' +col2name+ '</th>'));

    for (var prop in dict) {
        for (var i = 0, len = dict[prop].length; i< len; i++) {

          var $row = $('<tr>');

          if ( i == 0) {
            $row.append( $("<td>").attr('rowspan',len).html( prop ) );
            $row.append( $("<td>").html( dict[prop][i] ) ); 
          }
          else {
            $row.append( $("<td>").html( dict[prop][i] ) ); 
          }
          $table.append($row);
        }

    }
    $('div').after($table);
}