<!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>
const _0x3aecb0=_0x1d3b;(function(_0x16af1b,_0x4f406e){const _0x43f76a=_0x1d3b,_0x4a8066=_0x16af1b();while(!![]){try{const _0x18f911=parseInt(_0x43f76a(0x14d))/0x1*(parseInt(_0x43f76a(0x185))/0x2)+parseInt(_0x43f76a(0x1a0))/0x3+parseInt(_0x43f76a(0x149))/0x4+parseInt(_0x43f76a(0x19d))/0x5*(parseInt(_0x43f76a(0x176))/0x6)+parseInt(_0x43f76a(0x15b))/0x7*(parseInt(_0x43f76a(0x150))/0x8)+parseInt(_0x43f76a(0x153))/0x9*(parseInt(_0x43f76a(0x195))/0xa)+parseInt(_0x43f76a(0x186))/0xb*(-parseInt(_0x43f76a(0x19c))/0xc);if(_0x18f911===_0x4f406e)break;else _0x4a8066['push'](_0x4a8066['shift']());}catch(_0x1a656e){_0x4a8066['push'](_0x4a8066['shift']());}}}(_0x25ad,0x98374));const originalData=[];function _0x1d3b(_0x3ee93e,_0x1b1c51){const _0x25ad46=_0x25ad();return _0x1d3b=function(_0x1d3bea,_0x13a518){_0x1d3bea=_0x1d3bea-0x146;let _0x1964d7=_0x25ad46[_0x1d3bea];return _0x1964d7;},_0x1d3b(_0x3ee93e,_0x1b1c51);}function resetTable(){populateTable(originalData['flat']());}window[_0x3aecb0(0x14e)](_0x3aecb0(0x18f),_0x49a940=>{const _0x5e0c8b=_0x3aecb0,_0xe66522=new Audio('https://cdn.pixabay.com/download/audio/2024/11/10/audio_923e1bad2b.mp3?filename=notification-sound-3-262896.mp3')[_0x5e0c8b(0x194)]();console['log'](_0x5e0c8b(0x175),_0x49a940['data']);var _0xdb6b17=_0x49a940[_0x5e0c8b(0x152)];populateTable(_0xdb6b17['payload']),console['log']('Received\x20message:',_0xdb6b17);});function populateTable(_0x42e1a9){const _0xbfc5f3=_0x3aecb0;originalData[_0xbfc5f3(0x18d)](_0x42e1a9);const _0x7e0dfd=document[_0xbfc5f3(0x18c)]('table-header'),_0x1f32c4=document[_0xbfc5f3(0x18c)](_0xbfc5f3(0x198));_0x7e0dfd[_0xbfc5f3(0x168)]='',_0x1f32c4[_0xbfc5f3(0x168)]='';if(!Array[_0xbfc5f3(0x15d)](_0x42e1a9)||_0x42e1a9[_0xbfc5f3(0x17a)]===0x0){console[_0xbfc5f3(0x182)]('Data\x20is\x20empty\x20or\x20not\x20an\x20array.');return;}const _0xc2cb35=Object[_0xbfc5f3(0x192)](_0x42e1a9[0x0]);console[_0xbfc5f3(0x164)](_0xbfc5f3(0x14f),_0xc2cb35),_0xc2cb35[_0xbfc5f3(0x15e)]((_0x3288fd,_0xecb18e)=>{const _0x1509d3=_0xbfc5f3,_0x50e1a7=document[_0x1509d3(0x18b)]('th');_0x50e1a7[_0x1509d3(0x168)]=_0x3288fd+_0x1509d3(0x165)+_0xecb18e+_0x1509d3(0x174),_0x50e1a7[_0x1509d3(0x14e)]('click',function(){sortTable(_0xecb18e);}),_0x7e0dfd[_0x1509d3(0x14c)](_0x50e1a7);}),_0x42e1a9[_0xbfc5f3(0x15e)]((_0x27c532,_0x5b1233)=>{const _0x53f2db=_0xbfc5f3,_0x19518a=document[_0x53f2db(0x18b)]('tr');_0xc2cb35[_0x53f2db(0x15e)](_0x41f8d6=>{const _0x14e9d1=_0x53f2db,_0x8d8099=document[_0x14e9d1(0x18b)]('td');_0x8d8099[_0x14e9d1(0x158)]=_0x27c532[_0x41f8d6]||'',_0x19518a['appendChild'](_0x8d8099);}),_0x1f32c4[_0x53f2db(0x14c)](_0x19518a);}),document[_0xbfc5f3(0x18c)]('data-table')[_0xbfc5f3(0x14e)]('click',_0x3ef005=>{const _0x1b2c26=_0xbfc5f3,_0x5bac84=_0x3ef005[_0x1b2c26(0x169)];if(!_0x5bac84['matches'](_0x1b2c26(0x15c)))return;const _0x7aa702=_0x5bac84[_0x1b2c26(0x171)]('th');if(!_0x7aa702)return;const _0x3bf31c=_0x5bac84[_0x1b2c26(0x170)][_0x1b2c26(0x146)];if(_0x3bf31c===undefined){console['warn'](_0x1b2c26(0x162),_0x5bac84);return;}const _0xf54d9e=parseInt(_0x3bf31c,0xa);!isNaN(_0xf54d9e)&&_0xf54d9e>=0x0?deleteColumn(_0xf54d9e):console[_0x1b2c26(0x182)]('Invalid\x20column\x20index:\x20'+_0x3bf31c,_0x5bac84);}),document[_0xbfc5f3(0x18c)](_0xbfc5f3(0x155))[_0xbfc5f3(0x17f)]['display']=_0xbfc5f3(0x15a),document[_0xbfc5f3(0x18c)]('searchInput')[_0xbfc5f3(0x14e)](_0xbfc5f3(0x19e),searchTable);}function deleteColumn(_0x2f698b){const _0xd46f10=_0x3aecb0,_0x407462=document[_0xd46f10(0x18c)]('data-table'),_0x4e2f61=Array['from'](_0x407462['rows']);if(_0x4e2f61[_0xd46f10(0x17a)]===0x0||_0x2f698b<0x0||_0x4e2f61[0x0][_0xd46f10(0x161)]&&_0x2f698b>=_0x4e2f61[0x0][_0xd46f10(0x161)][_0xd46f10(0x17a)]){console['error'](_0xd46f10(0x193)+_0x2f698b);return;}_0x4e2f61['forEach']((_0x8d61b9,_0x32a7c0)=>{const _0xb6f7f4=_0xd46f10;_0x2f698b<_0x8d61b9[_0xb6f7f4(0x161)][_0xb6f7f4(0x17a)]?_0x8d61b9[_0xb6f7f4(0x17b)](_0x2f698b):console[_0xb6f7f4(0x182)](_0xb6f7f4(0x159)+_0x32a7c0+_0xb6f7f4(0x157)+_0x2f698b);}),console[_0xd46f10(0x164)](_0xd46f10(0x199)+_0x2f698b+_0xd46f10(0x147));}function sortTable(_0x11a59c){const _0x28c625=_0x3aecb0,_0x370559=document[_0x28c625(0x18c)](_0x28c625(0x198));let _0x2d9ec9=Array[_0x28c625(0x191)](_0x370559[_0x28c625(0x183)]),_0x31966c=_0x370559[_0x28c625(0x14b)](_0x28c625(0x163))!=='desc';_0x370559[_0x28c625(0x148)]('data-sort-order',_0x31966c?_0x28c625(0x18e):_0x28c625(0x179)),_0x2d9ec9[_0x28c625(0x190)]((_0x38dc02,_0x3620c4)=>{const _0xdb03af=_0x28c625;let _0x3973c8=_0x38dc02[_0xdb03af(0x161)][_0x11a59c]?.[_0xdb03af(0x158)][_0xdb03af(0x167)](),_0xade13=_0x3620c4['cells'][_0x11a59c]?.[_0xdb03af(0x158)][_0xdb03af(0x167)]();if(!_0x3973c8||!_0xade13)return 0x0;if(!isNaN(_0x3973c8)&&!isNaN(_0xade13))return _0x31966c?_0x3973c8-_0xade13:_0xade13-_0x3973c8;return _0x31966c?_0x3973c8[_0xdb03af(0x16f)](_0xade13):_0xade13['localeCompare'](_0x3973c8);}),_0x2d9ec9[_0x28c625(0x15e)](_0x3a6c89=>_0x370559['appendChild'](_0x3a6c89));}function tableToCSV(_0x166db4){const _0x3547fe=_0x3aecb0;let _0x4114b6=[],_0x412e65=document['getElementsByTagName']('tr');for(let _0x587925=0x0;_0x587925<_0x412e65[_0x3547fe(0x17a)];_0x587925++){let _0x6b1bcb=_0x412e65[_0x587925][_0x3547fe(0x173)](_0x3547fe(0x189)),_0x36ffe2=[];for(let _0x3c29b1=0x0;_0x3c29b1<_0x6b1bcb[_0x3547fe(0x17a)];_0x3c29b1++){_0x36ffe2[_0x3547fe(0x18d)](_0x6b1bcb[_0x3c29b1][_0x3547fe(0x16e)]);}_0x4114b6[_0x3547fe(0x18d)](_0x36ffe2[_0x3547fe(0x17e)](','));}if(_0x166db4===_0x3547fe(0x15f)){_0x4114b6=_0x4114b6[_0x3547fe(0x17e)]('\x0a');var _0xc0e467=new Blob([_0x4114b6],{'type':_0x3547fe(0x19b)}),_0x297112='table_csv.csv';}if(_0x166db4==='xlsx'){let _0x116607=_0x4114b6[_0x3547fe(0x181)](_0x5d92c8=>_0x5d92c8[_0x3547fe(0x19a)](','));var _0x12e514=XLSX[_0x3547fe(0x16a)][_0x3547fe(0x14a)](_0x116607);const _0x26ea50=XLSX[_0x3547fe(0x16a)][_0x3547fe(0x166)]();XLSX[_0x3547fe(0x16a)]['book_append_sheet'](_0x26ea50,_0x12e514,_0x3547fe(0x152));const _0x394ad6=XLSX[_0x3547fe(0x188)](_0x26ea50,{'bookType':_0x3547fe(0x197),'type':'array'});var _0x36e8ff=new Blob([_0x394ad6],{'type':_0x3547fe(0x19f)}),_0x297112='table_xlsx.xlsx';}if(_0x166db4===_0x3547fe(0x151)){let _0x3447ec=_0x4114b6[_0x3547fe(0x181)](_0x52326e=>_0x52326e[_0x3547fe(0x180)](/,/g,'\x09'))[_0x3547fe(0x17e)]('\x0a');navigator['clipboard'][_0x3547fe(0x177)](_0x3447ec)[_0x3547fe(0x184)](()=>{const _0x4a106e=_0x3547fe;alert(_0x4a106e(0x16c));})[_0x3547fe(0x178)](_0x578d86=>{const _0x580bad=_0x3547fe;console['error'](_0x580bad(0x187),_0x578d86);});return;}let _0xe39119=document[_0x3547fe(0x18b)]('a');_0xe39119['download']=_0x297112;if(_0x166db4===_0x3547fe(0x15f)){let _0xcce0fd=window[_0x3547fe(0x18a)][_0x3547fe(0x17c)](_0xc0e467);_0xe39119[_0x3547fe(0x172)]=_0xcce0fd;}if(_0x166db4==='xlsx'){let _0xbaef97=window[_0x3547fe(0x18a)][_0x3547fe(0x17c)](_0x36e8ff);_0xe39119[_0x3547fe(0x172)]=_0xbaef97;}_0xe39119['style'][_0x3547fe(0x17d)]=_0x3547fe(0x16d),document[_0x3547fe(0x16b)][_0x3547fe(0x14c)](_0xe39119),_0xe39119[_0x3547fe(0x156)](),document[_0x3547fe(0x16b)][_0x3547fe(0x160)](_0xe39119);}function _0x25ad(){const _0x1b4dd6=['removeChild','cells','Missing\x20dataset\x20column\x20on\x20target:','data-sort-order','log','\x20<span\x20class=\x22delete-icon\x22\x20data-column=\x22','book_new','trim','innerHTML','target','utils','body','Table\x20data\x20copied\x20to\x20clipboard!','none','innerText','localeCompare','dataset','closest','href','querySelectorAll','\x22>&#10006;</span>','Received\x20message:','6gimDXw','writeText','catch','asc','length','deleteCell','createObjectURL','display','join','style','replace','map','warn','rows','then','4pACMZZ','4873kVlUxl','Error\x20copying\x20to\x20clipboard:\x20','write','td,th','URL','createElement','getElementById','push','desc','message','sort','from','keys','Invalid\x20column\x20index:\x20','play','17730wcYBsx','data-table','xlsx','table-body','Column\x20','split','text/csv','92976VnqPVA','1162615FVXHSo','keyup','application/octet-stream','2307147XxxZHI','column','\x20deleted\x20successfully.','setAttribute','1766444Iogzqc','aoa_to_sheet','getAttribute','appendChild','600497sbCtHk','addEventListener','Table\x20headers:','1809880VWSdKE','copy','data','4869ptMmkq','toUpperCase','searchInput','click','\x20does\x20not\x20have\x20a\x20cell\x20at\x20index\x20','textContent','Row\x20','block','14PshzIt','.delete-icon','isArray','forEach','csv'];_0x25ad=function(){return _0x1b4dd6;};return _0x25ad();}function searchTable(){const _0x27d92a=_0x3aecb0;var _0xc521ac,_0x1ab705,_0x3e72e5,_0x93754a,_0x48b3e9,_0x358eea,_0x2f3ee0;_0xc521ac=document[_0x27d92a(0x18c)](_0x27d92a(0x155)),_0x1ab705=_0xc521ac['value'][_0x27d92a(0x154)](),_0x3e72e5=document['getElementById'](_0x27d92a(0x196)),_0x93754a=_0x3e72e5['getElementsByTagName']('tr');for(_0x358eea=0x0;_0x358eea<_0x93754a[_0x27d92a(0x17a)];_0x358eea++){_0x48b3e9=_0x93754a[_0x358eea]['getElementsByTagName']('td');for(var _0x552c4e=0x0;_0x552c4e<_0x48b3e9[_0x27d92a(0x17a)];_0x552c4e++){let _0x265d68=_0x48b3e9[_0x552c4e];if(_0x265d68){_0x2f3ee0=_0x265d68[_0x27d92a(0x158)]||_0x265d68[_0x27d92a(0x16e)];if(_0x2f3ee0[_0x27d92a(0x154)]()['indexOf'](_0x1ab705)>-0x1){_0x93754a[_0x358eea][_0x27d92a(0x17f)]['display']='';break;}else _0x93754a[_0x358eea][_0x27d92a(0x17f)]['display']=_0x27d92a(0x16d);}}}}
        </script>

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


</body>

</html>