JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<link rel="stylesheet" href="http://www.do-web.com/code-canyon-preview/jplist/css/jplist.css">
<link rel="stylesheet" href="http://www.do-web.com/code-canyon-preview/jplist/css/demo.css">
<script src="http://www.do-web.com/code-canyon-preview/jplist/js/jplist.min.js"></script>
<div class="center">
            <div class="box" id="wrapper">
            
                <!-- demo -->
                <div id="demo" class="box jplist">
                
                    <!-- panel -->
                    <div class="panel box panel-top">                        
                                                
                        <div class="drop-down page-by">
                            <ul>
                                <li><span data-number="3"> 3 per page </span></li>
                                <li><span data-number="5"> 5 per page </span></li>
                                <li><span data-number="10" data-default="true"> 10 per page </span></li>
                                <li><span data-number="all"> view all </span></li>
                            </ul>
                        </div>
                        <div class="drop-down sort-drop-down">
                            <ul>
                                <li><span data-path="default">Sort by</span></li>
                                <li><span data-path=".title" data-order="asc" data-type="text">Title A-Z</span></li>
                                <li><span data-path=".title" data-order="desc" data-type="text">Title Z-A</span></li>
                                <li><span data-path=".desc" data-order="asc" data-type="text">Description A-Z</span></li>
                                <li><span data-path=".desc" data-order="desc" data-type="text">Description Z-A</span></li>
                                <li><span data-path=".like" data-order="asc" data-type="number" data-default="true">Likes asc</span></li>
                                <li><span data-path=".like" data-order="desc"...

CSS

thead th{
    text-align: center;
    padding: 10px;
    font-weight: bold;
}

JavaScript

$("document").ready(function(){
                $("#demo").jplist({                
                    items_box: ".demo-tbl tbody" //items container
                    ,item_path: ".tbl-item" //path to the item    
                    ,cookies: false
                });
            });