<!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;
            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>

          function _0x2353(){const _0x103949=['querySelectorAll','searchInput','display','60fKqavh','117232wvGVOZ','588RUtkZa','target','body','length','deleteCell','writeText','payload','desc','split','play','setAttribute','log','Table\x20data\x20copied\x20to\x20clipboard!','Data\x20is\x20empty\x20or\x20not\x20an\x20array.','data-sort-order','trim','60hAexTT','innerHTML','4401246CzQmcd','createElement','addEventListener','getElementById','click','cells','catch','application/octet-stream','innerText','data','.delete-icon','xlsx','Received\x20message:','URL','replace','Error\x20copying\x20to\x20clipboard:\x20','forEach','Row\x20','array','clipboard','Invalid\x20column\x20index:\x20','column','push','then','utils','write','Column\x20','href','map','removeChild','\x20does\x20not\x20have\x20a\x20cell\x20at\x20index\x20','error','https://cdn.pixabay.com/download/audio/2024/11/10/audio_923e1bad2b.mp3?filename=notification-sound-3-262896.mp3','520812qOnvIc','appendChild','209529cdxmxi','getAttribute','flat','asc','data-table','\x20deleted\x20successfully.','download','book_append_sheet','sort','rows','\x20<span\x20class=\x22delete-icon\x22\x20data-column=\x22','matches','keyup','copy','none','warn','getElementsByTagName','csv','textContent','book_new','from','table_xlsx.xlsx','7299895TLEOmo','join','indexOf','keys','block','style','table-header','338224YSQANE','2792532Pyaawz'];_0x2353=function(){return _0x103949;};return _0x2353();}(function(_0x54b21e,_0x2eacaf){const _0x44421e=_0x1036,_0x3e9c75=_0x54b21e();while(!![]){try{const _0x379338=-parseInt(_0x44421e(0x138))/0x1+-parseInt(_0x44421e(0x158))/0x2+-parseInt(_0x44421e(0x15c))/0x3*(-parseInt(_0x44421e(0x157))/0x4)+parseInt(_0x44421e(0x150))/0x5+parseInt(_0x44421e(0x117))/0x6+-parseInt(_0x44421e(0x15e))/0x7*(parseInt(_0x44421e(0x15d))/0x8)+-parseInt(_0x44421e(0x13a))/0x9*(-parseInt(_0x44421e(0x16e))/0xa);if(_0x379338===_0x2eacaf)break;else _0x3e9c75['push'](_0x3e9c75['shift']());}catch(_0x3a4338){_0x3e9c75['push'](_0x3e9c75['shift']());}}}(_0x2353,0xd5f18));const originalData=[];function resetTable(){const _0x3223b4=_0x1036;populateTable(originalData[_0x3223b4(0x13c)]());}function _0x1036(_0x52a4c5,_0x84841c){const _0x235341=_0x2353();return _0x1036=function(_0x103638,_0x5526f0){_0x103638=_0x103638-0x117;let _0x2ccdc6=_0x235341[_0x103638];return _0x2ccdc6;},_0x1036(_0x52a4c5,_0x84841c);}window['addEventListener']('message',_0xebc769=>{const _0x262708=_0x1036,_0x4f7599=new Audio(_0x262708(0x137));_0x4f7599[_0x262708(0x167)](),console[_0x262708(0x169)]('Received\x20message:',_0xebc769['data']);var _0x338c6c=_0xebc769['data'];populateTable(_0x338c6c[_0x262708(0x164)]),console[_0x262708(0x169)](_0x262708(0x123),_0x338c6c);});function populateTable(_0x164b05){const _0x20db4=_0x1036;originalData[_0x20db4(0x12d)](_0x164b05);const _0x2dfba3=document['getElementById'](_0x20db4(0x156)),_0x45b814=document[_0x20db4(0x11a)]('table-body');_0x2dfba3[_0x20db4(0x16f)]='',_0x45b814['innerHTML']='';if(!Array['isArray'](_0x164b05)||_0x164b05[_0x20db4(0x161)]===0x0){console[_0x20db4(0x149)](_0x20db4(0x16b));return;}const _0xf38ba8=Object[_0x20db4(0x153)](_0x164b05[0x0]);console['log']('Table\x20headers:',_0xf38ba8),_0xf38ba8[_0x20db4(0x127)]((_0x444b98,_0x1e313c)=>{const _0x41625c=_0x20db4,_0x1d1923=document[_0x41625c(0x118)]('th');_0x1d1923[_0x41625c(0x16f)]=_0x444b98+_0x41625c(0x144)+_0x1e313c+'\x22>&#10006;</span>',_0x1d1923['addEventListener']('click',function(){sortTable(_0x1e313c);}),_0x2dfba3[_0x41625c(0x139)](_0x1d1923);}),_0x164b05['forEach']((_0x27ccfe,_0x94055)=>{const _0x3e4772=_0x20db4,_0x421016=document['createElement']('tr');_0xf38ba8[_0x3e4772(0x127)](_0x3873b0=>{const _0x554392=_0x3e4772,_0x5b2782=document['createElement']('td');_0x5b2782[_0x554392(0x14c)]=_0x27ccfe[_0x3873b0]||'',_0x421016[_0x554392(0x139)](_0x5b2782);}),_0x45b814['appendChild'](_0x421016);}),document[_0x20db4(0x11a)]('data-table')[_0x20db4(0x119)](_0x20db4(0x11b),_0xce3973=>{const _0x26cc4f=_0x20db4,_0xd83bf6=_0xce3973[_0x26cc4f(0x15f)];if(!_0xd83bf6[_0x26cc4f(0x145)](_0x26cc4f(0x121)))return;const _0x3f74f4=_0xd83bf6['closest']('th');if(!_0x3f74f4)return;const _0xa2bffc=_0xd83bf6['dataset'][_0x26cc4f(0x12c)];if(_0xa2bffc===undefined){console[_0x26cc4f(0x149)]('Missing\x20dataset\x20column\x20on\x20target:',_0xd83bf6);return;}const _0x19134a=parseInt(_0xa2bffc,0xa);!isNaN(_0x19134a)&&_0x19134a>=0x0?deleteColumn(_0x19134a):console[_0x26cc4f(0x149)]('Invalid\x20column\x20index:\x20'+_0xa2bffc,_0xd83bf6);}),document[_0x20db4(0x11a)]('searchInput')[_0x20db4(0x155)][_0x20db4(0x15b)]=_0x20db4(0x154),document[_0x20db4(0x11a)](_0x20db4(0x15a))[_0x20db4(0x119)](_0x20db4(0x146),searchTable);}function deleteColumn(_0x1d84da){const _0x29cacd=_0x1036,_0x7811a6=document[_0x29cacd(0x11a)](_0x29cacd(0x13e)),_0x28a8d9=Array[_0x29cacd(0x14e)](_0x7811a6[_0x29cacd(0x143)]);if(_0x28a8d9[_0x29cacd(0x161)]===0x0||_0x1d84da<0x0||_0x28a8d9[0x0][_0x29cacd(0x11c)]&&_0x1d84da>=_0x28a8d9[0x0][_0x29cacd(0x11c)]['length']){console[_0x29cacd(0x136)](_0x29cacd(0x12b)+_0x1d84da);return;}_0x28a8d9[_0x29cacd(0x127)]((_0x13d678,_0x52d85c)=>{const _0x54193b=_0x29cacd;_0x1d84da<_0x13d678[_0x54193b(0x11c)]['length']?_0x13d678[_0x54193b(0x162)](_0x1d84da):console[_0x54193b(0x149)](_0x54193b(0x128)+_0x52d85c+_0x54193b(0x135)+_0x1d84da);}),console['log'](_0x29cacd(0x131)+_0x1d84da+_0x29cacd(0x13f));}function sortTable(_0x15237e){const _0x351f9b=_0x1036,_0x5154cb=document[_0x351f9b(0x11a)]('table-body');let _0x4afcee=Array[_0x351f9b(0x14e)](_0x5154cb[_0x351f9b(0x143)]),_0x182acc=_0x5154cb[_0x351f9b(0x13b)](_0x351f9b(0x16c))!==_0x351f9b(0x165);_0x5154cb[_0x351f9b(0x168)](_0x351f9b(0x16c),_0x182acc?'desc':_0x351f9b(0x13d)),_0x4afcee[_0x351f9b(0x142)]((_0x2dafbf,_0x3f7f6c)=>{const _0x429839=_0x351f9b;let _0x4773f7=_0x2dafbf['cells'][_0x15237e]?.['textContent'][_0x429839(0x16d)](),_0x4765ea=_0x3f7f6c[_0x429839(0x11c)][_0x15237e]?.['textContent'][_0x429839(0x16d)]();if(!_0x4773f7||!_0x4765ea)return 0x0;if(!isNaN(_0x4773f7)&&!isNaN(_0x4765ea))return _0x182acc?_0x4773f7-_0x4765ea:_0x4765ea-_0x4773f7;return _0x182acc?_0x4773f7['localeCompare'](_0x4765ea):_0x4765ea['localeCompare'](_0x4773f7);}),_0x4afcee[_0x351f9b(0x127)](_0x4dbb34=>_0x5154cb['appendChild'](_0x4dbb34));}function tableToCSV(_0x368462){const _0x3f7169=_0x1036;let _0x22af56=[],_0x23e437=document['getElementsByTagName']('tr');for(let _0x52aa12=0x0;_0x52aa12<_0x23e437[_0x3f7169(0x161)];_0x52aa12++){let _0x713f77=_0x23e437[_0x52aa12][_0x3f7169(0x159)]('td,th'),_0x439f7d=[];for(let _0x2a5bfd=0x0;_0x2a5bfd<_0x713f77[_0x3f7169(0x161)];_0x2a5bfd++){_0x439f7d[_0x3f7169(0x12d)](_0x713f77[_0x2a5bfd][_0x3f7169(0x11f)]);}_0x22af56[_0x3f7169(0x12d)](_0x439f7d[_0x3f7169(0x151)](','));}if(_0x368462===_0x3f7169(0x14b)){_0x22af56=_0x22af56['join']('\x0a');var _0x155538=new Blob([_0x22af56],{'type':'text/csv'}),_0x4ad86b='table_csv.csv';}if(_0x368462==='xlsx'){let _0xbb650=_0x22af56[_0x3f7169(0x133)](_0x3e7cc4=>_0x3e7cc4[_0x3f7169(0x166)](','));var _0x480688=XLSX['utils']['aoa_to_sheet'](_0xbb650);const _0x3cf257=XLSX[_0x3f7169(0x12f)][_0x3f7169(0x14d)]();XLSX['utils'][_0x3f7169(0x141)](_0x3cf257,_0x480688,_0x3f7169(0x120));const _0x1ddd11=XLSX[_0x3f7169(0x130)](_0x3cf257,{'bookType':'xlsx','type':_0x3f7169(0x129)});var _0xb2c1a8=new Blob([_0x1ddd11],{'type':_0x3f7169(0x11e)}),_0x4ad86b=_0x3f7169(0x14f);}if(_0x368462===_0x3f7169(0x147)){let _0x5552d1=_0x22af56['map'](_0x1a1a2d=>_0x1a1a2d[_0x3f7169(0x125)](/,/g,'\x09'))[_0x3f7169(0x151)]('\x0a');navigator[_0x3f7169(0x12a)][_0x3f7169(0x163)](_0x5552d1)[_0x3f7169(0x12e)](()=>{const _0x2d204e=_0x3f7169;alert(_0x2d204e(0x16a));})[_0x3f7169(0x11d)](_0x1e3a71=>{const _0xc3e041=_0x3f7169;console[_0xc3e041(0x136)](_0xc3e041(0x126),_0x1e3a71);});return;}let _0x1ae028=document[_0x3f7169(0x118)]('a');_0x1ae028[_0x3f7169(0x140)]=_0x4ad86b;if(_0x368462===_0x3f7169(0x14b)){let _0x1e33d9=window[_0x3f7169(0x124)]['createObjectURL'](_0x155538);_0x1ae028[_0x3f7169(0x132)]=_0x1e33d9;}if(_0x368462===_0x3f7169(0x122)){let _0x3c5418=window[_0x3f7169(0x124)]['createObjectURL'](_0xb2c1a8);_0x1ae028[_0x3f7169(0x132)]=_0x3c5418;}_0x1ae028['style'][_0x3f7169(0x15b)]=_0x3f7169(0x148),document[_0x3f7169(0x160)][_0x3f7169(0x139)](_0x1ae028),_0x1ae028['click'](),document[_0x3f7169(0x160)][_0x3f7169(0x134)](_0x1ae028);}function searchTable(){const _0x8db454=_0x1036;var _0x20155f,_0x3646bf,_0x4246d1,_0x5245ee,_0x20973e,_0x4390e7,_0x3470c4;_0x20155f=document[_0x8db454(0x11a)]('searchInput'),_0x3646bf=_0x20155f['value']['toUpperCase'](),_0x4246d1=document[_0x8db454(0x11a)](_0x8db454(0x13e)),_0x5245ee=_0x4246d1['getElementsByTagName']('tr');for(_0x4390e7=0x0;_0x4390e7<_0x5245ee['length'];_0x4390e7++){_0x20973e=_0x5245ee[_0x4390e7][_0x8db454(0x14a)]('td');for(var _0x4ac277=0x0;_0x4ac277<_0x20973e[_0x8db454(0x161)];_0x4ac277++){let _0x2a31ff=_0x20973e[_0x4ac277];if(_0x2a31ff){_0x3470c4=_0x2a31ff[_0x8db454(0x14c)]||_0x2a31ff[_0x8db454(0x11f)];if(_0x3470c4['toUpperCase']()[_0x8db454(0x152)](_0x3646bf)>-0x1){_0x5245ee[_0x4390e7][_0x8db454(0x155)][_0x8db454(0x15b)]='';break;}else _0x5245ee[_0x4390e7][_0x8db454(0x155)]['display']='none';}}}}

        </script>

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


</body>

</html>