<!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>
        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;
        }
    </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">
        <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 _0x495bb0=_0x5e49;(function(_0x191dab,_0x59e992){const _0x3a69b3=_0x5e49,_0x392a0c=_0x191dab();while(!![]){try{const _0x3b0d26=parseInt(_0x3a69b3(0x109))/0x1+parseInt(_0x3a69b3(0x113))/0x2+-parseInt(_0x3a69b3(0x139))/0x3+-parseInt(_0x3a69b3(0xe7))/0x4+parseInt(_0x3a69b3(0xed))/0x5+-parseInt(_0x3a69b3(0xf2))/0x6+parseInt(_0x3a69b3(0x10c))/0x7*(parseInt(_0x3a69b3(0xf1))/0x8);if(_0x3b0d26===_0x59e992)break;else _0x392a0c['push'](_0x392a0c['shift']());}catch(_0x4d25d9){_0x392a0c['push'](_0x392a0c['shift']());}}}(_0x5064,0xd3ce9));let originalData=[];function resetTable(){const _0x18b272=_0x5e49;populateTable(originalData[_0x18b272(0x12a)]());}function _0x5e49(_0x56ee07,_0x536b34){const _0x506445=_0x5064();return _0x5e49=function(_0x5e496d,_0x12b145){_0x5e496d=_0x5e496d-0xe3;let _0x3516fa=_0x506445[_0x5e496d];return _0x3516fa;},_0x5e49(_0x56ee07,_0x536b34);}window[_0x495bb0(0x12f)](_0x495bb0(0x116),_0x5b5b2f=>{const _0x17f497=_0x495bb0;console[_0x17f497(0x119)](_0x17f497(0xe4),_0x5b5b2f[_0x17f497(0x102)]);var _0x16bcfa=_0x5b5b2f[_0x17f497(0x102)];populateTable(_0x16bcfa[_0x17f497(0x124)]),console[_0x17f497(0x119)](_0x17f497(0xe4),_0x16bcfa);});function _0x5064(){const _0x129121=['data-table','error','removeChild','contains','application/octet-stream','Data\x20is\x20empty\x20or\x20not\x20an\x20array.','432910YPdSQR','setAttribute','then','message','desc','innerHTML','log','replace','split','data-sort-order','localeCompare','body','push','getAttribute','querySelectorAll','delete-icon','asc','payload','writeText','none','table-body','trim','column','flat','textContent','getElementsByTagName','catch','closest','addEventListener','isArray','createObjectURL','table_xlsx.xlsx','join','write','copy','book_append_sheet','forEach','rows','2461674dpCpZJ','clipboard','xlsx','Table\x20headers:','href','Received\x20message:','Error\x20copying\x20to\x20clipboard:\x20','map','3703108HFgqAI','URL','style','createElement','sort','deleteCell','2467735WmPDRB','array','\x20<span\x20class=\x22delete-icon\x22\x20data-column=\x22','table_csv.csv','13245864keELbv','1321392ihSREz','appendChild','Table\x20data\x20copied\x20to\x20clipboard!','text/csv','getElementById','innerText','keys','length','dataset','cells','aoa_to_sheet','warn','utils','\x22>&#10006;</span>','click','target','data','book_new','classList','download','display','table-header','td,th','468393QEErOy','from','csv','7VsvwVc'];_0x5064=function(){return _0x129121;};return _0x5064();}function populateTable(_0x560372){const _0x4ab0f0=_0x495bb0;originalData[_0x4ab0f0(0x11f)](_0x560372);const _0x45e5e9=document[_0x4ab0f0(0xf6)](_0x4ab0f0(0x107)),_0x4025ab=document[_0x4ab0f0(0xf6)](_0x4ab0f0(0x127));_0x45e5e9[_0x4ab0f0(0x118)]='',_0x4025ab[_0x4ab0f0(0x118)]='';if(!Array[_0x4ab0f0(0x130)](_0x560372)||_0x560372[_0x4ab0f0(0xf9)]===0x0){console[_0x4ab0f0(0xfd)](_0x4ab0f0(0x112));return;}const _0x46eaaf=Object[_0x4ab0f0(0xf8)](_0x560372[0x0]);console[_0x4ab0f0(0x119)](_0x4ab0f0(0x13c),_0x46eaaf),_0x46eaaf[_0x4ab0f0(0x137)]((_0xab2d0e,_0x592848)=>{const _0x3ed422=_0x4ab0f0,_0x4afa29=document[_0x3ed422(0xea)]('th');_0x4afa29[_0x3ed422(0x118)]=_0xab2d0e+_0x3ed422(0xef)+_0x592848+_0x3ed422(0xff),_0x4afa29[_0x3ed422(0x12f)](_0x3ed422(0x100),function(){sortTable(_0x592848);}),_0x45e5e9[_0x3ed422(0xf3)](_0x4afa29);}),_0x560372[_0x4ab0f0(0x137)]((_0x35cfaa,_0x116066)=>{const _0x32c914=_0x4ab0f0,_0x2d17b2=document[_0x32c914(0xea)]('tr');_0x46eaaf[_0x32c914(0x137)](_0x573137=>{const _0x375b0d=_0x32c914,_0x5c1a4b=document[_0x375b0d(0xea)]('td');_0x5c1a4b[_0x375b0d(0x12b)]=_0x35cfaa[_0x573137]||'',_0x2d17b2[_0x375b0d(0xf3)](_0x5c1a4b);}),_0x4025ab[_0x32c914(0xf3)](_0x2d17b2);}),document[_0x4ab0f0(0xf6)](_0x4ab0f0(0x10d))[_0x4ab0f0(0x12f)](_0x4ab0f0(0x100),_0x35f8df=>{const _0x5aab1f=_0x4ab0f0,_0xf81201=_0x35f8df[_0x5aab1f(0x101)];if(_0xf81201[_0x5aab1f(0x104)][_0x5aab1f(0x110)](_0x5aab1f(0x122))&&_0xf81201[_0x5aab1f(0x12e)]('th')){const _0x2d04cf=parseInt(_0xf81201[_0x5aab1f(0xfa)][_0x5aab1f(0x129)],0xa);deleteColumn(_0x2d04cf);}});}function deleteColumn(_0x10d99e){const _0x49ee51=_0x495bb0,_0x3b5460=document[_0x49ee51(0xf6)](_0x49ee51(0x10d)),_0x1acbd7=_0x3b5460[_0x49ee51(0x138)];for(let _0x1a07c6=0x0;_0x1a07c6<_0x1acbd7[_0x49ee51(0xf9)];_0x1a07c6++){_0x1acbd7[_0x1a07c6][_0x49ee51(0xec)](_0x10d99e);}}function sortTable(_0xf7c7d2){const _0xd700ec=_0x495bb0,_0x2eecf8=document[_0xd700ec(0xf6)](_0xd700ec(0x127));let _0x55ffa7=Array[_0xd700ec(0x10a)](_0x2eecf8[_0xd700ec(0x138)]),_0x24d861=_0x2eecf8[_0xd700ec(0x120)](_0xd700ec(0x11c))!==_0xd700ec(0x117);_0x2eecf8[_0xd700ec(0x114)](_0xd700ec(0x11c),_0x24d861?_0xd700ec(0x117):_0xd700ec(0x123)),_0x55ffa7[_0xd700ec(0xeb)]((_0x31d9cd,_0x5a0391)=>{const _0x5bc5b2=_0xd700ec;let _0x4ac9b2=_0x31d9cd[_0x5bc5b2(0xfb)][_0xf7c7d2]?.[_0x5bc5b2(0x12b)][_0x5bc5b2(0x128)](),_0x44d992=_0x5a0391[_0x5bc5b2(0xfb)][_0xf7c7d2]?.[_0x5bc5b2(0x12b)][_0x5bc5b2(0x128)]();if(!_0x4ac9b2||!_0x44d992)return 0x0;if(!isNaN(_0x4ac9b2)&&!isNaN(_0x44d992))return _0x24d861?_0x4ac9b2-_0x44d992:_0x44d992-_0x4ac9b2;return _0x24d861?_0x4ac9b2[_0x5bc5b2(0x11d)](_0x44d992):_0x44d992[_0x5bc5b2(0x11d)](_0x4ac9b2);}),_0x55ffa7[_0xd700ec(0x137)](_0x247552=>_0x2eecf8[_0xd700ec(0xf3)](_0x247552));}function tableToCSV(_0x5a694d){const _0x5b4183=_0x495bb0;let _0x565fe2=[],_0x53486b=document[_0x5b4183(0x12c)]('tr');for(let _0x175d4f=0x0;_0x175d4f<_0x53486b[_0x5b4183(0xf9)];_0x175d4f++){let _0x291dd2=_0x53486b[_0x175d4f][_0x5b4183(0x121)](_0x5b4183(0x108)),_0x1af667=[];for(let _0xda4675=0x0;_0xda4675<_0x291dd2[_0x5b4183(0xf9)];_0xda4675++){_0x1af667[_0x5b4183(0x11f)](_0x291dd2[_0xda4675][_0x5b4183(0xf7)]);}_0x565fe2[_0x5b4183(0x11f)](_0x1af667[_0x5b4183(0x133)](','));}if(_0x5a694d===_0x5b4183(0x10b)){_0x565fe2=_0x565fe2[_0x5b4183(0x133)]('\x0a');var _0x48d516=new Blob([_0x565fe2],{'type':_0x5b4183(0xf5)}),_0x5d0f7a=_0x5b4183(0xf0);}if(_0x5a694d===_0x5b4183(0x13b)){let _0x525aef=_0x565fe2[_0x5b4183(0xe6)](_0x121c54=>_0x121c54[_0x5b4183(0x11b)](','));var _0x16bd9c=XLSX[_0x5b4183(0xfe)][_0x5b4183(0xfc)](_0x525aef);const _0x4f37fd=XLSX[_0x5b4183(0xfe)][_0x5b4183(0x103)]();XLSX[_0x5b4183(0xfe)][_0x5b4183(0x136)](_0x4f37fd,_0x16bd9c,_0x5b4183(0x102));const _0x1ff139=XLSX[_0x5b4183(0x134)](_0x4f37fd,{'bookType':_0x5b4183(0x13b),'type':_0x5b4183(0xee)});var _0x592be9=new Blob([_0x1ff139],{'type':_0x5b4183(0x111)}),_0x5d0f7a=_0x5b4183(0x132);}if(_0x5a694d===_0x5b4183(0x135)){let _0x1e64e2=_0x565fe2[_0x5b4183(0xe6)](_0xd07f0d=>_0xd07f0d[_0x5b4183(0x11a)](/,/g,'\x09'))[_0x5b4183(0x133)]('\x0a');navigator[_0x5b4183(0x13a)][_0x5b4183(0x125)](_0x1e64e2)[_0x5b4183(0x115)](()=>{const _0x318b36=_0x5b4183;alert(_0x318b36(0xf4));})[_0x5b4183(0x12d)](_0x531daa=>{const _0x2a4223=_0x5b4183;console[_0x2a4223(0x10e)](_0x2a4223(0xe5),_0x531daa);});return;}let _0x21005e=document[_0x5b4183(0xea)]('a');_0x21005e[_0x5b4183(0x105)]=_0x5d0f7a;if(_0x5a694d===_0x5b4183(0x10b)){let _0x34dc9b=window[_0x5b4183(0xe8)][_0x5b4183(0x131)](_0x48d516);_0x21005e[_0x5b4183(0xe3)]=_0x34dc9b;}if(_0x5a694d===_0x5b4183(0x13b)){let _0x241e9c=window[_0x5b4183(0xe8)][_0x5b4183(0x131)](_0x592be9);_0x21005e[_0x5b4183(0xe3)]=_0x241e9c;}_0x21005e[_0x5b4183(0xe9)][_0x5b4183(0x106)]=_0x5b4183(0x126),document[_0x5b4183(0x11e)][_0x5b4183(0xf3)](_0x21005e),_0x21005e[_0x5b4183(0x100)](),document[_0x5b4183(0x11e)][_0x5b4183(0x10f)](_0x21005e);}

        </script>

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


</body>

</html>