JSFiddle - React, Tailwind, and code Playground

by Pasit R

HTML

<div id="account-user-list" class="cpac-grid">
    <form action="/UserAccount/Account/SearchUsers/?cid=SL1-1JHV1-1&amp;paging.PageSize=10" class="form" id="account-user-list-form" method="get">
        <input id="account-user-list-sort-orderby" name="Paging.OrderBy" type="hidden" value=""/>
        <input data-val="true" id="account-user-list-sort-descending" name="Paging.Reverse" type="hidden" value="False"/>        
        <div class="component">
            <input id="account-user-list-filter-text" name="filterText" type="search" />
            <div>
                <select name="accFilter">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
            <div class="inner-shadow">
                <div>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <a data-sort-orderby="Name" data-sort-descending="false" href="#">Name</a>
                                </td>
                                <td>
                                    <a data-sort-orderby="UserID" data-sort-descending="false" href="#">User ID</a>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="account-user-list-scroll-viewport" class="scroll-viewport">
                    <table class="normal container" id="account-user-list-gridbody">
                        <tbody>
                            <tr style="cursor: pointer;">
                                <td data-col-key="Name">
                                    <div class="cell-container">David Pare</div>
                                </td>
                                <td data-col-key="UserID">
                                    <div class="cell-container...

JavaScript

(function ($) {
    //-- plugin definition.
    $.fn.novagrid = function (options) {
        //-- start!
        if(!methods[options]){
            console.log('novagrid init..');
            methods.init.apply(this, arguments);
        }else{
            console.log('apply method:' + options);
            return methods[options].apply(this, Array.prototype.slice.call( arguments, 1 ));
        }
    }; //end plungin definition
    
    //-- default settings:
    var defaults = {
        height: "550px",
        delay: 800,
    };
    //-- private function definition.
    var delay = (function () {
        var timer = 0;
        return function (callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();
    //-- methods for public use
    var methods = {
        init : function(options) {
            //--- init start 
            var self = this; //'this' is already jQuery object context
            var settings = $.extend( {}, defaults, options);
            console.log(settings);
            //---- adjust styles
            $(self.selector + '-scroll-viewport').css('height', settings.height);
            $(self.selector + '-filter-text').click(function () { 
                var textbox = $(this);
                textbox.focus();
                textbox.select();
            });
            $('.ui-icon-triangle-1-n.ui-icon', self).parent().data('sort-descending', true);
            //---- search form
            $('form', self).submit(function (e) {
                var $form = $(this);
                var baseUrl = $form.attr('action');
                var delimiter = /(\?)/.test(baseUrl) ? '&' : '?'; //handle if URL already contain '?'
                var url = baseUrl + delimiter + $form.serialize();
                /*loadGridData(url, function (content) {
                    //var adjustedBody = adjustCol(content);
                    $(context + '-gridbody tbody:last').html($('tr', content));
          ...