JSFiddle - React, Tailwind, and code Playground

by juvian

HTML

<div><div class="Header">    
  <div class="item"><a href="#">Item</a>
  </div>
  <div class="Desc"><a href="#">Description</a>
  </div>      
  <div class="price"><a href="#">Price</a>
  </div>    
  <div class="status"><a href="#">Status</a>
  </div>
  </div>

  <div class="Info">
    <div class="itemName">
      <div class="item">Item 1</div>
    </div>
    <div class="itemInfo">
      <div class="List">
        <div class="Desc">Description 1</div>
        <div class="Box">                
          <div class="price">$79</div>
          <div class="status">16 in stock</div>
        </div>
      </div> 
    </div>
  </div>
  <div class="Info">
    <div class="itemName">
      <div class="item">Item 2</div>
    </div>
    <div class="itemInfo">
      <div class="List">
        <div class="Desc">Description 2</div>
        <div class="Box">                
          <div class="price">$89</div>
          <div class="status">2 in stock</div>
        </div>
      </div> 
    </div>
  </div>

  <div class="Info">
    <div class="itemName">
      <div class="item">Item 3</div>
    </div>
    <div class="itemInfo">
      <div class="List">
        <div class="Desc">Description 3</div>
        <div class="Box">                
          <div class="price">$119</div>
          <div class="status">11 in stock</div>
        </div>
      </div> 
    </div>
  </div><div class="Info">
  <div class="itemName">
    <div class="item">Item 4</div>
  </div>
  <div class="itemInfo">
    <div class="List">
      <div class="Desc">Description 4</div>
      <div class="Box">                
        <div class="price">$99</div>
        <div class="status">20 in stock</div>
      </div>
    </div> 
  </div>
  </div>
</div>

CSS

body {
    font-family: Arial;
}

.Header {
    overflow:hidden;
    border-bottom:1px solid #CCC;
    background-color:#dddddd;     
}
Header a {
    font-weight:bold
}
.Header .item {
    width:234px;    
    margin-left: 10px;
    float:left;   
}
.Header .desc {
    width:344px;
    float:left
}
.Header .price {
    width:80px;
    float:left
}
.Header .status {
    width:90px;
    float:left
}



.Info {
    background-color: #f9f9f9;
    font-size: 14px;
    border-bottom:1px solid #ccc;
    overflow:hidden;
    padding:2px 0
}
.Info .itemInfo {
    float:left;
    width:550px
}
.Info .item {
    font-weight:bold;
    margin-left: 10px;
}
.Info .itemName {
    width:244px;    
    float:left
}
.List .Desc {
    float:left;
    width:344px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.Box .price {
    float:left;
    width:80px
}
.Box .status {
    float:left;
    width:90px
}

JavaScript

var sorting=1;
$(".Header div").each(function(){
    $(this).click(function(){
        var cl=$(this).attr("class")
        sorting = sorting == 1 ? -1 : 1 ;        
        $(".Info").detach().sort(function(a,b){
            var str1=$(a).find('.'+cl).text();
            var str2=$(b).find('.'+cl).text();
            var n1 = str1.match(/\d+/)[0]
            var n2 = str2.match(/\d+/)[0]
            if(n1 != '' ){
                return n1*sorting > n2*sorting;
            }else{
                return sorting == 1 ? str1 > str2 : str1 < str2
            }
        }).appendTo($(".Header").parent());
    })
})