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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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: 10;
        }

  #searchInput {
            width: 90%;
            padding: 10px;
            border: none;
            border-radius: 25px;
            background-image: linear-gradient(to right, #FF6B6B, #1E90FF);
            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, #44515e);
            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, #555759);
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
        }

        body {
            margin: 20px;
        }

        table {
            margin-bottom: 20px;
        }

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

        .controls {
            margin-bottom: 10px;
        }

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


        body {
            padding-top: 15px;
        }

        .controls {
            margin-bottom: 10px;
        }

        .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: darkred;
        }

        /* .btn-block {
            display: none;
        } */
    </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 class="table-responsive">
        <center> <input type="text" id="searchInput" placeholder="Search Data in Table Example"
            style="display: block;"> </center> <br>

        <table id="data-table" class="table table-bordered table-striped">
            <thead class="table-success">
                <tr id="table-header"></tr>
            </thead>
            <tbody id="table-body"></tbody>
        </table>

        <script>

const _0xc8e86c=_0x4ca9;function _0x4ca9(_0xf1221e,_0x422835){const _0x480a89=_0x480a();return _0x4ca9=function(_0x4ca920,_0xc85ef4){_0x4ca920=_0x4ca920-0x85;let _0x498881=_0x480a89[_0x4ca920];return _0x498881;},_0x4ca9(_0xf1221e,_0x422835);}(function(_0x1f919e,_0x1e3ddd){const _0x3a056d=_0x4ca9,_0x4f2c6e=_0x1f919e();while(!![]){try{const _0x198b56=-parseInt(_0x3a056d(0xdc))/0x1+parseInt(_0x3a056d(0xc0))/0x2+-parseInt(_0x3a056d(0x8c))/0x3+parseInt(_0x3a056d(0xce))/0x4*(parseInt(_0x3a056d(0xd2))/0x5)+-parseInt(_0x3a056d(0xcf))/0x6*(-parseInt(_0x3a056d(0x9b))/0x7)+-parseInt(_0x3a056d(0xa0))/0x8+-parseInt(_0x3a056d(0x93))/0x9*(-parseInt(_0x3a056d(0xc6))/0xa);if(_0x198b56===_0x1e3ddd)break;else _0x4f2c6e['push'](_0x4f2c6e['shift']());}catch(_0x265d73){_0x4f2c6e['push'](_0x4f2c6e['shift']());}}}(_0x480a,0x2f8d8));function searchTable(){const _0x4d140c=_0x4ca9;var _0x60bfec,_0x3c98fa,_0x1e2625,_0x34a5ea,_0x17bea9,_0x309d3c,_0x717c71,_0x40b45e;_0x60bfec=document[_0x4d140c(0xc4)](_0x4d140c(0xd3)),_0x3c98fa=_0x60bfec[_0x4d140c(0xc3)][_0x4d140c(0x99)](),_0x1e2625=document[_0x4d140c(0xc4)](_0x4d140c(0xc5)),_0x34a5ea=_0x1e2625[_0x4d140c(0xcd)]('tr');for(_0x309d3c=0x1;_0x309d3c<_0x34a5ea[_0x4d140c(0xb0)];_0x309d3c++){var _0x22ad2b=![];for(_0x717c71=0x0;_0x717c71<_0x34a5ea[_0x309d3c][_0x4d140c(0xcb)][_0x4d140c(0xb0)];_0x717c71++){_0x17bea9=_0x34a5ea[_0x309d3c]['cells'][_0x717c71];if(_0x17bea9){_0x40b45e=_0x17bea9[_0x4d140c(0xdb)]||_0x17bea9[_0x4d140c(0x89)];if(_0x40b45e[_0x4d140c(0x99)]()[_0x4d140c(0x8f)](_0x3c98fa)>-0x1){_0x22ad2b=!![];break;}}}_0x22ad2b?_0x34a5ea[_0x309d3c][_0x4d140c(0x97)][_0x4d140c(0xb3)]='':_0x34a5ea[_0x309d3c][_0x4d140c(0x97)][_0x4d140c(0xb3)]=_0x4d140c(0xe2);}}function _0x480a(){const _0x350ed1=['12qwMvnm','rows','write','100vMsnbL','searchInput','data','getAttribute','removeChild','text/csv','querySelectorAll','trim','data-sort-order','textContent','276532bONJiE','catch','aoa_to_sheet','warn','table-header','from','none','Table\x20headers:','keys','isArray','Data\x20is\x20empty\x20or\x20not\x20an\x20array.','error','innerHTML','innerText','contains','join','745749QDaEtD','classList','book_append_sheet','indexOf','createElement','\x22>&#10006;</span>','split','7605skXEDq','message','addEventListener','asc','style','application/octet-stream','toUpperCase','deleteCell','23723tjcvVJ','Received\x20message:','xlsx','table_csv.csv','payload','2126296ECKzNg','createObjectURL','column','desc','map','click','closest','\x20<span\x20class=\x22delete-icon\x22\x20data-column=\x22','table-body','sort','href','Table\x20data\x20copied\x20to\x20clipboard!','delete-icon','then','replace','keyup','length','setAttribute','dataset','display','writeText','copy','Error\x20copying\x20to\x20clipboard:\x20','push','utils','td,th','URL','target','csv','clipboard','body','flat','554290wyPNMI','book_new','table_xlsx.xlsx','value','getElementById','data-table','5430tVMZFW','array','localeCompare','appendChild','log','cells','forEach','getElementsByTagName','48584osfjII'];_0x480a=function(){return _0x350ed1;};return _0x480a();}let originalData=[];function resetTable(){const _0x4b982a=_0x4ca9;populateTable(originalData[_0x4b982a(0xbf)]());}window[_0xc8e86c(0x95)](_0xc8e86c(0x94),_0x15833c=>{const _0x413cd4=_0xc8e86c;console[_0x413cd4(0xca)](_0x413cd4(0x9c),_0x15833c[_0x413cd4(0xd4)]);var _0x4736e7=_0x15833c[_0x413cd4(0xd4)];populateTable(_0x4736e7[_0x413cd4(0x9f)]),console[_0x413cd4(0xca)](_0x413cd4(0x9c),_0x4736e7);});function populateTable(_0x297257){const _0x458505=_0xc8e86c;originalData[_0x458505(0xb7)](_0x297257);const _0x124436=document[_0x458505(0xc4)](_0x458505(0xe0)),_0x555079=document[_0x458505(0xc4)](_0x458505(0xa8));_0x124436[_0x458505(0x88)]='',_0x555079[_0x458505(0x88)]='';if(!Array[_0x458505(0x85)](_0x297257)||_0x297257[_0x458505(0xb0)]===0x0){console[_0x458505(0xdf)](_0x458505(0x86));return;}const _0x144323=Object[_0x458505(0xe4)](_0x297257[0x0]);console[_0x458505(0xca)](_0x458505(0xe3),_0x144323),_0x144323[_0x458505(0xcc)]((_0x440789,_0xfcc1bc)=>{const _0x581b69=_0x458505,_0x2e63b4=document[_0x581b69(0x90)]('th');_0x2e63b4[_0x581b69(0x88)]=_0x440789+_0x581b69(0xa7)+_0xfcc1bc+_0x581b69(0x91),_0x2e63b4[_0x581b69(0x95)](_0x581b69(0xa5),function(){sortTable(_0xfcc1bc);}),_0x124436[_0x581b69(0xc9)](_0x2e63b4);}),_0x297257[_0x458505(0xcc)]((_0x345699,_0x38e76e)=>{const _0x3b8b53=_0x458505,_0x4ac400=document[_0x3b8b53(0x90)]('tr');_0x144323[_0x3b8b53(0xcc)](_0x180e0d=>{const _0x39e512=_0x3b8b53,_0x4d6624=document[_0x39e512(0x90)]('td');_0x4d6624[_0x39e512(0xdb)]=_0x345699[_0x180e0d]||'',_0x4ac400[_0x39e512(0xc9)](_0x4d6624);}),_0x555079[_0x3b8b53(0xc9)](_0x4ac400);}),document[_0x458505(0xc4)](_0x458505(0xc5))[_0x458505(0x95)](_0x458505(0xa5),_0x5b750f=>{const _0x55614b=_0x458505,_0x313136=_0x5b750f[_0x55614b(0xbb)];if(_0x313136[_0x55614b(0x8d)][_0x55614b(0x8a)](_0x55614b(0xac))&&_0x313136[_0x55614b(0xa6)]('th')){const _0x17dea9=parseInt(_0x313136[_0x55614b(0xb2)][_0x55614b(0xa2)],0xa);deleteColumn(_0x17dea9);}}),document[_0x458505(0xc4)](_0x458505(0xd3))[_0x458505(0x95)](_0x458505(0xaf),searchTable);}function deleteColumn(_0x126162){const _0x240032=_0xc8e86c,_0x4e02d3=document[_0x240032(0xc4)](_0x240032(0xc5)),_0x1be5c3=_0x4e02d3[_0x240032(0xd0)];for(let _0x5ea7cc=0x0;_0x5ea7cc<_0x1be5c3[_0x240032(0xb0)];_0x5ea7cc++){_0x1be5c3[_0x5ea7cc][_0x240032(0x9a)](_0x126162);}}function sortTable(_0x37e40d){const _0xa4aa13=_0xc8e86c,_0x4770f4=document[_0xa4aa13(0xc4)](_0xa4aa13(0xa8));let _0x31bf6b=Array[_0xa4aa13(0xe1)](_0x4770f4[_0xa4aa13(0xd0)]),_0x25082a=_0x4770f4[_0xa4aa13(0xd5)](_0xa4aa13(0xda))!==_0xa4aa13(0xa3);_0x4770f4[_0xa4aa13(0xb1)](_0xa4aa13(0xda),_0x25082a?_0xa4aa13(0xa3):_0xa4aa13(0x96)),_0x31bf6b[_0xa4aa13(0xa9)]((_0x8082d6,_0x5dd632)=>{const _0x261d71=_0xa4aa13;let _0x3c02ff=_0x8082d6[_0x261d71(0xcb)][_0x37e40d]?.[_0x261d71(0xdb)][_0x261d71(0xd9)](),_0x697dd2=_0x5dd632[_0x261d71(0xcb)][_0x37e40d]?.[_0x261d71(0xdb)][_0x261d71(0xd9)]();if(!_0x3c02ff||!_0x697dd2)return 0x0;if(!isNaN(_0x3c02ff)&&!isNaN(_0x697dd2))return _0x25082a?_0x3c02ff-_0x697dd2:_0x697dd2-_0x3c02ff;return _0x25082a?_0x3c02ff[_0x261d71(0xc8)](_0x697dd2):_0x697dd2[_0x261d71(0xc8)](_0x3c02ff);}),_0x31bf6b[_0xa4aa13(0xcc)](_0x1b6d97=>_0x4770f4[_0xa4aa13(0xc9)](_0x1b6d97));}function tableToCSV(_0x4e20c8){const _0x3773ed=_0xc8e86c;let _0x460072=[],_0x59e333=document[_0x3773ed(0xcd)]('tr');for(let _0x4817b1=0x0;_0x4817b1<_0x59e333[_0x3773ed(0xb0)];_0x4817b1++){let _0x2738c0=_0x59e333[_0x4817b1][_0x3773ed(0xd8)](_0x3773ed(0xb9)),_0x1bcf69=[];for(let _0x45d847=0x0;_0x45d847<_0x2738c0[_0x3773ed(0xb0)];_0x45d847++){_0x1bcf69[_0x3773ed(0xb7)](_0x2738c0[_0x45d847][_0x3773ed(0x89)]);}_0x460072[_0x3773ed(0xb7)](_0x1bcf69[_0x3773ed(0x8b)](','));}if(_0x4e20c8===_0x3773ed(0xbc)){_0x460072=_0x460072[_0x3773ed(0x8b)]('\x0a');var _0x2c8728=new Blob([_0x460072],{'type':_0x3773ed(0xd7)}),_0x14862a=_0x3773ed(0x9e);}if(_0x4e20c8===_0x3773ed(0x9d)){let _0x198058=_0x460072[_0x3773ed(0xa4)](_0x205c5b=>_0x205c5b[_0x3773ed(0x92)](','));var _0x519c78=XLSX[_0x3773ed(0xb8)][_0x3773ed(0xde)](_0x198058);const _0x181960=XLSX[_0x3773ed(0xb8)][_0x3773ed(0xc1)]();XLSX[_0x3773ed(0xb8)][_0x3773ed(0x8e)](_0x181960,_0x519c78,_0x3773ed(0xd4));const _0x13dd59=XLSX[_0x3773ed(0xd1)](_0x181960,{'bookType':_0x3773ed(0x9d),'type':_0x3773ed(0xc7)});var _0x294a15=new Blob([_0x13dd59],{'type':_0x3773ed(0x98)}),_0x14862a=_0x3773ed(0xc2);}if(_0x4e20c8===_0x3773ed(0xb5)){let _0x1a58c4=_0x460072[_0x3773ed(0xa4)](_0x36adf6=>_0x36adf6[_0x3773ed(0xae)](/,/g,'\x09'))[_0x3773ed(0x8b)]('\x0a');navigator[_0x3773ed(0xbd)][_0x3773ed(0xb4)](_0x1a58c4)[_0x3773ed(0xad)](()=>{const _0x5dbe63=_0x3773ed;alert(_0x5dbe63(0xab));})[_0x3773ed(0xdd)](_0x5e67ff=>{const _0x3d034c=_0x3773ed;console[_0x3d034c(0x87)](_0x3d034c(0xb6),_0x5e67ff);});return;}let _0x1dcd1a=document[_0x3773ed(0x90)]('a');_0x1dcd1a['download']=_0x14862a;if(_0x4e20c8===_0x3773ed(0xbc)){let _0x3a078a=window[_0x3773ed(0xba)][_0x3773ed(0xa1)](_0x2c8728);_0x1dcd1a[_0x3773ed(0xaa)]=_0x3a078a;}if(_0x4e20c8===_0x3773ed(0x9d)){let _0x29ad4a=window[_0x3773ed(0xba)][_0x3773ed(0xa1)](_0x294a15);_0x1dcd1a[_0x3773ed(0xaa)]=_0x29ad4a;}_0x1dcd1a[_0x3773ed(0x97)][_0x3773ed(0xb3)]=_0x3773ed(0xe2),document[_0x3773ed(0xbe)][_0x3773ed(0xc9)](_0x1dcd1a),_0x1dcd1a[_0x3773ed(0xa5)](),document[_0x3773ed(0xbe)][_0x3773ed(0xd6)](_0x1dcd1a);}

        </script>

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


</body>

</html>