JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div style="padding-bottom: 10px">
            <span class="lblSortedBy DdsConstantBoldGreen">Sorted by Factory Status and Factory Code</span>
        </div>
        <table id="data-table"> 
            <thead>                      
                <tr>
                    <th></th>
                    <th><input type="text" id="txtFactoryCodeFilter" style="width: 100px" /></th>
                    <th><input type="text" id="txtFactoryNameFilter" /></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>   
                <tr>
                    <th data-field="select">Select</th>
                    <th data-field="factoryCode">Factory Code</th>
                    <th data-field="factoryName">Factory Name</th>
                    <th data-field="factoryCountry">Factory Country</th>
                    <th data-field="factoryStatus">Factory Status</th>
                    <th data-field="primaryFactory">Primary Factory</th>
                    <th data-field="ristRating">Risk Rating</th>
                    <th data-field="active" id="thActive">Active Y/N</th>
                </tr>       
            </thead>
            <tbody style="white-space: normal;">
                <asp:Repeater ID="gridFactory" runat="server">
                    <ItemTemplate>
                        <tr>
                            <td class="center"><input type="radio" name="radioSelect" value='<%# Eval("FactoryCode").ToString().Trim() %>' data-bind="click:select, checked: selectedRow"></td>
                            <td><%# Eval("FactoryCode").ToString().Trim() %></td>
                            <td><%# Convert.ToString(Eval("FactoryName")) %></td>
                            <td><%# Eval("FactoryCountry")%></td>
                            <td><%# Eval("FactoryStatus")%></td>
                            <td><%# Eval("PrimaryFactory")%></td>
                 ...

CSS

/* table */

.sort-icon {    
    font-family: 'Glyphicons Halflings';
    color: #555 !important;
}

.sort-icon-asc::after {
    content: '\e113'
}
.sort-icon-desc::after {
    content: '\e114'
}

.k-grid {
    box-shadow: none;
    border-radius: 0px;   
}

    .k-grid table thead th {
        background: #fff;
        border: none !important;
        font-weight: 700 !important;
        color: #555 !important;
        padding: 10px auto !important;
    }

        .k-grid table thead th.sortable {
            cursor: pointer;
        }

    .k-grid tbody tr.k-alt {
        background: #f9f9f9;
    }

    .k-grid tbody tr td {
        color: #555;
        border-top: 1px solid #ddd;
    }

    .k-grid tbody tr td.center {
        text-align: center !important;
    }

.k-grid-header th.k-header {
    vertical-align: middle !important;
}

/* Pagination */

#page-info {
    padding: 10px 0px;
}

.k-pager-wrap {

    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 5px;
    float: right;
}

    .k-pager-wrap .k-icon {
        margin-top: 5px;
    }

    .k-pager-wrap .k-link, 
    .k-pager-wrap .k-state-selected {
        border: 1px solid #ddd !important;
        margin: 0 !important;
        margin-left: -1px !important;
        height: 25px !important;
        line-height: 25px !important;
        padding: 0 5px !important;
        color: #0E7E69 !important;
        font-size: 8pt !important;
    }

    .k-pager-wrap .k-state-selected {
        background: #fff;
        box-shadow: none;
    }

JavaScript

$("#data-table").kendoGrid({
                scrollable: false,
                sortable: true,                
                dataBound: function (e) {
                    kendo.bind($("#data-table"), vm);
                    
                    var _currentPage = this.pager.page();
                    var _totalPages = this.pager.totalPages();

                    $('#page-info span').text("Page " + _currentPage + " of " + _totalPages);
                },
                pageable: {
                    pageSize: 20,
                    info: false,
                    buttonCount: 5
                },
                columns: [
                    {
                        field: "select",
                        filterable: false,
                        width: "50px",
                        attributes: {
                            "class": "center"
                        },
                        sortable: false
                    },
                    {
                        field: "factoryCode",
                        filterable: {                            
                            cell: {
                                showOperators: false,
                                operator: 'contains'
                            }
                        },
                        width: "100px"
                    },
                    {
                        field: "factoryName",
                        filterable: {
                            cell: {
                                showOperators: false,
                                operator: 'contains'
                            }
                        }
                    },
                    {
                        field: "factoryCountry",
                        filterable: false,
                        width: "100px",
                        sortable: false
                    },
                    {
                        field: "factoryStatus",
                       ...