<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

    <title>Data Display</title>
    <style>
        thead th {
            position: sticky;
            top: 0;
            z-index: 2;
        }

        #searchInput {
            width: 90%;
            padding: 10px;
            border: none;
            border-radius: 25px;
            /*background-image: linear-gradient(to right, #8d8888, #cdd0d4); */
            color: #fff;
            font-size: 20px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
            outline: none;
            transition: background-image 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }


        /* Hover styles for the search input and search button */
        #searchInput:hover,
        #searchBtn:hover {
            background-image: linear-gradient(to right, #a89ba2, #dbdee3);
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);

        }

        /* Focus styles for the search input */
        #searchInput:focus {
            background-image: linear-gradient(to right, #a5979f, #a7b0b9);
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
        }

        body {
            margin: 5px;
        }

        table {
            margin-bottom: 20px;
        }

        th {
            position: sticky;
            top: 0;
            z-index: 1;
        }

        td {
            overflow-wrap: break-word;
        }

        .btn,
        #delay,
        .alert {
            margin: 5px;
        }


        body {
            padding-top: 5px;
        }


        .delete-icon {
            cursor: pointer;
            color: red;
            margin-left: 5px;
            display: none;
        }

        th:hover .delete-icon,
        td:hover .delete-icon {
            display: inline;
        }

        .delete-icon:hover {
            color: rgb(228, 17, 17);
        }

        /* .btn-block {
            display: none;
        } */




        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            th,
            td {
                padding: 6px;
                font-size: 0.8rem;
            }
        }
    </style>
</head>

<body>
    <div class="col-xs-3">
        <center>
            <button type="button" class="btn btn-success download-button  btn-block" id='csv'
                onclick="tableToCSV('csv')"><span class="glyphicon glyphicon-download-alt"></span> CSV</button>
            <button type="button" class="btn btn-success download-button  btn-block" id='xlsx'
                onclick="tableToCSV('xlsx')"><span class="glyphicon glyphicon-download-alt"></span> XLSX</button>
            <button type="button" class="btn btn-success download-button  btn-block" id='copy'
                onclick="tableToCSV('copy')"><span class="glyphicon glyphicon-copy"></span> COPY ALL</button>
            <button type="button" class="btn btn-warning btn-block" id='resetColumns' onclick="resetTable()">Reset
                columns</button>
        </center>
    </div>

    <br>
    <div>
        <center> <input type="text" id="searchInput" placeholder="Search Data in Table Example" style="display: none;">
        </center> <br>

        <table id="data-table" class="table table-bordered table-sm table-hover border-primary table-responsive">
            <thead class="table-success">
                <tr id="table-header"></tr>
            </thead>
            <tbody id="table-body"></tbody>
        </table>

        <script>

           const _0xaecae8=_0x7616;(function(_0x48f478,_0x1501ea){const _0x3e8fb1=_0x7616,_0x4e8e24=_0x48f478();while(!![]){try{const _0xfcd4a0=parseInt(_0x3e8fb1(0x1e4))/0x1+parseInt(_0x3e8fb1(0x1c1))/0x2+-parseInt(_0x3e8fb1(0x1eb))/0x3*(parseInt(_0x3e8fb1(0x1cb))/0x4)+-parseInt(_0x3e8fb1(0x1b2))/0x5*(parseInt(_0x3e8fb1(0x1e0))/0x6)+parseInt(_0x3e8fb1(0x1b7))/0x7*(-parseInt(_0x3e8fb1(0x1ac))/0x8)+parseInt(_0x3e8fb1(0x1d1))/0x9*(parseInt(_0x3e8fb1(0x1b9))/0xa)+parseInt(_0x3e8fb1(0x1af))/0xb*(parseInt(_0x3e8fb1(0x1b6))/0xc);if(_0xfcd4a0===_0x1501ea)break;else _0x4e8e24['push'](_0x4e8e24['shift']());}catch(_0x2b5410){_0x4e8e24['push'](_0x4e8e24['shift']());}}}(_0x3c35,0xb71d8));const originalData=[];function resetTable(){populateTable(originalData['flat']());}function _0x3c35(){const _0x2e3ae5=['Missing\x20dataset\x20column\x20on\x20target:','style','.delete-icon','aoa_to_sheet','log','getElementsByTagName','innerText','book_append_sheet','18296SKDcNw','table_xlsx.xlsx','data-table','484GORgjQ','asc','map','1721770FbZQIl','Column\x20','isArray','block','472452hWsDej','2485XvTrgD','href','11590VpmcCg','application/octet-stream','cells','dataset','td,th','\x22>&#10006;</span>','utils','Received\x20message:','1600044YORgLf','join','\x20deleted\x20successfully.','length','copy','warn','matches','payload','\x20does\x20not\x20have\x20a\x20cell\x20at\x20index\x20','searchInput','1570892kIcEQU','table_csv.csv','push','forEach','closest','csv','1917DadvVU','text/csv','createElement','none','book_new','split','data-sort-order','target','Data\x20is\x20empty\x20or\x20not\x20an\x20array.','rows','localeCompare','display','Table\x20headers:','querySelectorAll','deleteCell','6fEyIvH','catch','click','from','305235zjJZlX','addEventListener','table-body','download','appendChild','innerHTML','setAttribute','9oLDCOy','getElementById','\x20<span\x20class=\x22delete-icon\x22\x20data-column=\x22','body','URL','Invalid\x20column\x20index:\x20','array','table-header','Error\x20copying\x20to\x20clipboard:\x20','replace','error','writeText','textContent','xlsx','sort','then','trim','desc'];_0x3c35=function(){return _0x2e3ae5;};return _0x3c35();}window[_0xaecae8(0x1e5)]('message',_0x36f031=>{const _0x2e8e74=_0xaecae8;console[_0x2e8e74(0x1a8)](_0x2e8e74(0x1c0),_0x36f031['data']);var _0x44b016=_0x36f031['data'];populateTable(_0x44b016[_0x2e8e74(0x1c8)]),console[_0x2e8e74(0x1a8)]('Received\x20message:',_0x44b016);});function populateTable(_0x575b1a){const _0x6f93c9=_0xaecae8;originalData[_0x6f93c9(0x1cd)](_0x575b1a);const _0x4638e1=document[_0x6f93c9(0x1ec)](_0x6f93c9(0x199)),_0x870bf5=document['getElementById'](_0x6f93c9(0x1e6));_0x4638e1[_0x6f93c9(0x1e9)]='',_0x870bf5[_0x6f93c9(0x1e9)]='';if(!Array[_0x6f93c9(0x1b4)](_0x575b1a)||_0x575b1a['length']===0x0){console[_0x6f93c9(0x1c6)](_0x6f93c9(0x1d9));return;}const _0x183773=Object['keys'](_0x575b1a[0x0]);console[_0x6f93c9(0x1a8)](_0x6f93c9(0x1dd),_0x183773),_0x183773[_0x6f93c9(0x1ce)]((_0x58ba07,_0x128052)=>{const _0x367eeb=_0x6f93c9,_0x5b3f98=document['createElement']('th');_0x5b3f98[_0x367eeb(0x1e9)]=_0x58ba07+_0x367eeb(0x1ed)+_0x128052+_0x367eeb(0x1be),_0x5b3f98[_0x367eeb(0x1e5)](_0x367eeb(0x1e2),function(){sortTable(_0x128052);}),_0x4638e1[_0x367eeb(0x1e8)](_0x5b3f98);}),_0x575b1a[_0x6f93c9(0x1ce)]((_0x18d16e,_0x2f57c4)=>{const _0x287756=_0x6f93c9,_0x4ce595=document['createElement']('tr');_0x183773[_0x287756(0x1ce)](_0x207ba9=>{const _0x35de59=_0x287756,_0x556921=document[_0x35de59(0x1d3)]('td');_0x556921['textContent']=_0x18d16e[_0x207ba9]||'',_0x4ce595[_0x35de59(0x1e8)](_0x556921);}),_0x870bf5[_0x287756(0x1e8)](_0x4ce595);}),document[_0x6f93c9(0x1ec)](_0x6f93c9(0x1ae))[_0x6f93c9(0x1e5)](_0x6f93c9(0x1e2),_0x1677ae=>{const _0x5102f3=_0x6f93c9,_0x310dfb=_0x1677ae[_0x5102f3(0x1d8)];if(!_0x310dfb[_0x5102f3(0x1c7)](_0x5102f3(0x1a6)))return;const _0x4999f1=_0x310dfb[_0x5102f3(0x1cf)]('th');if(!_0x4999f1)return;const _0x11e6b8=_0x310dfb[_0x5102f3(0x1bc)]['column'];if(_0x11e6b8===undefined){console[_0x5102f3(0x1c6)](_0x5102f3(0x1a4),_0x310dfb);return;}const _0x2f0313=parseInt(_0x11e6b8,0xa);!isNaN(_0x2f0313)&&_0x2f0313>=0x0?deleteColumn(_0x2f0313):console[_0x5102f3(0x1c6)](_0x5102f3(0x1f0)+_0x11e6b8,_0x310dfb);}),document[_0x6f93c9(0x1ec)](_0x6f93c9(0x1ca))[_0x6f93c9(0x1a5)][_0x6f93c9(0x1dc)]=_0x6f93c9(0x1b5),document[_0x6f93c9(0x1ec)](_0x6f93c9(0x1ca))[_0x6f93c9(0x1e5)]('keyup',searchTable);}function deleteColumn(_0x417d9b){const _0x3f654f=_0xaecae8,_0x19b59f=document['getElementById'](_0x3f654f(0x1ae)),_0x7ad21b=Array[_0x3f654f(0x1e3)](_0x19b59f[_0x3f654f(0x1da)]);if(_0x7ad21b[_0x3f654f(0x1c4)]===0x0||_0x417d9b<0x0||_0x7ad21b[0x0]['cells']&&_0x417d9b>=_0x7ad21b[0x0]['cells']['length']){console[_0x3f654f(0x19c)](_0x3f654f(0x1f0)+_0x417d9b);return;}_0x7ad21b['forEach']((_0x3459a5,_0x11f4ff)=>{const _0x256ed6=_0x3f654f;_0x417d9b<_0x3459a5[_0x256ed6(0x1bb)]['length']?_0x3459a5[_0x256ed6(0x1df)](_0x417d9b):console[_0x256ed6(0x1c6)]('Row\x20'+_0x11f4ff+_0x256ed6(0x1c9)+_0x417d9b);}),console[_0x3f654f(0x1a8)](_0x3f654f(0x1b3)+_0x417d9b+_0x3f654f(0x1c3));}function sortTable(_0x249141){const _0x336a9a=_0xaecae8,_0x11e43a=document[_0x336a9a(0x1ec)](_0x336a9a(0x1e6));let _0x1d8bfd=Array['from'](_0x11e43a[_0x336a9a(0x1da)]),_0x26e0cf=_0x11e43a['getAttribute']('data-sort-order')!==_0x336a9a(0x1a3);_0x11e43a[_0x336a9a(0x1ea)](_0x336a9a(0x1d7),_0x26e0cf?_0x336a9a(0x1a3):_0x336a9a(0x1b0)),_0x1d8bfd[_0x336a9a(0x1a0)]((_0xd9f999,_0x454889)=>{const _0x3695c1=_0x336a9a;let _0xaee1d7=_0xd9f999[_0x3695c1(0x1bb)][_0x249141]?.['textContent'][_0x3695c1(0x1a2)](),_0xf2bd05=_0x454889['cells'][_0x249141]?.[_0x3695c1(0x19e)]['trim']();if(!_0xaee1d7||!_0xf2bd05)return 0x0;if(!isNaN(_0xaee1d7)&&!isNaN(_0xf2bd05))return _0x26e0cf?_0xaee1d7-_0xf2bd05:_0xf2bd05-_0xaee1d7;return _0x26e0cf?_0xaee1d7[_0x3695c1(0x1db)](_0xf2bd05):_0xf2bd05['localeCompare'](_0xaee1d7);}),_0x1d8bfd[_0x336a9a(0x1ce)](_0x2d7b9c=>_0x11e43a['appendChild'](_0x2d7b9c));}function _0x7616(_0x4b4b95,_0x44c13d){const _0x3c35b4=_0x3c35();return _0x7616=function(_0x761685,_0x551c6e){_0x761685=_0x761685-0x199;let _0x4eb08d=_0x3c35b4[_0x761685];return _0x4eb08d;},_0x7616(_0x4b4b95,_0x44c13d);}function tableToCSV(_0x3aebbc){const _0x1f83db=_0xaecae8;let _0x36c666=[],_0x811795=document[_0x1f83db(0x1a9)]('tr');for(let _0x12706b=0x0;_0x12706b<_0x811795[_0x1f83db(0x1c4)];_0x12706b++){let _0x377bb1=_0x811795[_0x12706b][_0x1f83db(0x1de)](_0x1f83db(0x1bd)),_0x28c5ea=[];for(let _0x5f7f2b=0x0;_0x5f7f2b<_0x377bb1[_0x1f83db(0x1c4)];_0x5f7f2b++){_0x28c5ea[_0x1f83db(0x1cd)](_0x377bb1[_0x5f7f2b][_0x1f83db(0x1aa)]);}_0x36c666[_0x1f83db(0x1cd)](_0x28c5ea['join'](','));}if(_0x3aebbc===_0x1f83db(0x1d0)){_0x36c666=_0x36c666[_0x1f83db(0x1c2)]('\x0a');var _0x22918c=new Blob([_0x36c666],{'type':_0x1f83db(0x1d2)}),_0x29f663=_0x1f83db(0x1cc);}if(_0x3aebbc===_0x1f83db(0x19f)){let _0x4d3e65=_0x36c666[_0x1f83db(0x1b1)](_0x2b12e3=>_0x2b12e3[_0x1f83db(0x1d6)](','));var _0x9c4888=XLSX[_0x1f83db(0x1bf)][_0x1f83db(0x1a7)](_0x4d3e65);const _0x3cc537=XLSX[_0x1f83db(0x1bf)][_0x1f83db(0x1d5)]();XLSX[_0x1f83db(0x1bf)][_0x1f83db(0x1ab)](_0x3cc537,_0x9c4888,'data');const _0x573a88=XLSX['write'](_0x3cc537,{'bookType':_0x1f83db(0x19f),'type':_0x1f83db(0x1f1)});var _0x552e89=new Blob([_0x573a88],{'type':_0x1f83db(0x1ba)}),_0x29f663=_0x1f83db(0x1ad);}if(_0x3aebbc===_0x1f83db(0x1c5)){let _0x287c12=_0x36c666[_0x1f83db(0x1b1)](_0x476742=>_0x476742[_0x1f83db(0x19b)](/,/g,'\x09'))['join']('\x0a');navigator['clipboard'][_0x1f83db(0x19d)](_0x287c12)[_0x1f83db(0x1a1)](()=>{alert('Table\x20data\x20copied\x20to\x20clipboard!');})[_0x1f83db(0x1e1)](_0x1fae96=>{const _0x3a8c75=_0x1f83db;console[_0x3a8c75(0x19c)](_0x3a8c75(0x19a),_0x1fae96);});return;}let _0x13f549=document[_0x1f83db(0x1d3)]('a');_0x13f549[_0x1f83db(0x1e7)]=_0x29f663;if(_0x3aebbc===_0x1f83db(0x1d0)){let _0x268fc5=window[_0x1f83db(0x1ef)]['createObjectURL'](_0x22918c);_0x13f549[_0x1f83db(0x1b8)]=_0x268fc5;}if(_0x3aebbc==='xlsx'){let _0x834748=window[_0x1f83db(0x1ef)]['createObjectURL'](_0x552e89);_0x13f549[_0x1f83db(0x1b8)]=_0x834748;}_0x13f549['style'][_0x1f83db(0x1dc)]=_0x1f83db(0x1d4),document[_0x1f83db(0x1ee)][_0x1f83db(0x1e8)](_0x13f549),_0x13f549[_0x1f83db(0x1e2)](),document[_0x1f83db(0x1ee)]['removeChild'](_0x13f549);}

        </script>

        <script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>


</body>

</html>