<!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>
    <script defer data-domain="tools.badheshchauhan.com"  src="https://getanalyzr.vercel.app/tracking-script.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 Z=D;(function(V,l){const I=D,d=V();while(!![]){try{const K=parseInt(I(0x118))/(-0x179b+-0x7*-0x405+0x13*-0x3d)+parseInt(I(0x144))/(-0x1*0x66f+-0x192a*-0x1+-0x12b9)*(-parseInt(I(0x10a))/(0x3*0x757+-0x1fe7+-0x9e5*-0x1))+-parseInt(I(0x12d))/(-0x1159*-0x1+-0x2*-0x1281+-0x1*0x3657)*(parseInt(I(0x111))/(-0x16d2+0x260b+-0xf34))+parseInt(I(0x110))/(0x4b6*-0x4+0x4f2+0xdec)+-parseInt(I(0x145))/(0xe15*-0x2+0x4d6+0x175b)*(parseInt(I(0x102))/(-0x295*0x3+-0xbff+-0x2*-0x9e3))+parseInt(I(0x12e))/(-0xd1d+0x1f15*-0x1+0x2c3b)+parseInt(I(0x11c))/(-0x1fc3+0x1757+0x876)*(-parseInt(I(0xf1))/(0x1*0x16f0+-0x1*0x229+0x4*-0x52f));if(K===l)break;else d['push'](d['shift']());}catch(L){d['push'](d['shift']());}}}(F,-0xcdb2a*-0x1+-0x296ea+0x47145));function F(){const J=['removeChild','deleteCell','151944VCHBvh','none','split','href','https://cdn.pixabay.com/download/audio/2024/11/10/audio_923e1bad2b.mp3?filename=notification-sound-3-262896.mp3','data-table','writeText','length','354GALMxg','addEventListener','join','Invalid\x20column\x20index:\x20','getAttribute','Received\x20message:','8180154vIfTpg','387365NxcIoO','block','.delete-icon','style','map','getElementById','table_xlsx.xlsx','1599705kkuWTv','data','URL','Data\x20is\x20empty\x20or\x20not\x20an\x20array.','24690RiViLm','data-sort-order','clipboard','table-body','table_csv.csv','Table\x20data\x20copied\x20to\x20clipboard!','toUpperCase','textContent','createElement','write','isArray','copy','keys','message','Missing\x20dataset\x20column\x20on\x20target:','innerText','book_append_sheet','16eIfyAR','12907719eCHKRO','csv','getElementsByTagName','appendChild','body','Column\x20','forEach','asc','localeCompare','from','log','target','catch','cells','column','createObjectURL','keyup','searchInput','warn','dataset','indexOf','push','29346NngpYq','301vwYBVY','setAttribute','innerHTML','2563Lctwmk','utils','matches','then','xlsx','rows','desc','display','click','play','\x20does\x20not\x20have\x20a\x20cell\x20at\x20index\x20','td,th','table-header','error','trim'];F=function(){return J;};return F();}const originalData=[];function resetTable(){populateTable(originalData['flat']());}window[Z(0x10b)](Z(0x129),V=>{const r=Z,l=new Audio(r(0x106))[r(0xfa)]();console['log'](r(0x10f),V[r(0x119)]);var d=V[r(0x119)];populateTable(d['payload']),console['log'](r(0x10f),d);});function populateTable(V){const S=Z;originalData[S(0x143)](V);const l=document[S(0x116)](S(0xfd)),d=document[S(0x116)](S(0x11f));l[S(0x147)]='',d[S(0x147)]='';if(!Array[S(0x126)](V)||V[S(0x109)]===-0x1571+-0x237b+0x38ec){console[S(0x140)](S(0x11b));return;}const K=Object[S(0x128)](V[0x1*-0xd4+-0x25*0xfa+0x24f6]);console[S(0x138)]('Table\x20headers:',K),K[S(0x134)]((L,P)=>{const X=S,s=document[X(0x124)]('th');s[X(0x147)]=L+'\x20<span\x20class=\x22delete-icon\x22\x20data-column=\x22'+P+'\x22>&#10006;</span>',s[X(0x10b)](X(0xf9),function(){sortTable(P);}),l['appendChild'](s);}),V['forEach']((L,P)=>{const x=S,s=document[x(0x124)]('tr');K[x(0x134)](t=>{const n=x,M=document[n(0x124)]('td');M[n(0x123)]=L[t]||'',s[n(0x131)](M);}),d[x(0x131)](s);}),document[S(0x116)]('data-table')[S(0x10b)](S(0xf9),L=>{const Y=S,P=L[Y(0x139)];if(!P[Y(0xf3)](Y(0x113)))return;const s=P['closest']('th');if(!s)return;const t=P[Y(0x141)][Y(0x13c)];if(t===undefined){console['warn'](Y(0x12a),P);return;}const M=parseInt(t,0x1626+0x25eb+-0x3c07*0x1);!isNaN(M)&&M>=0x6*0x1a1+-0xf2f+0x569?deleteColumn(M):console[Y(0x140)]('Invalid\x20column\x20index:\x20'+t,P);}),document[S(0x116)](S(0x13f))['style'][S(0xf8)]=S(0x112),document[S(0x116)](S(0x13f))['addEventListener'](S(0x13e),searchTable);}function deleteColumn(V){const b=Z,l=document[b(0x116)]('data-table'),d=Array['from'](l[b(0xf6)]);if(d[b(0x109)]===-0x1c18+0x290+0x1*0x1988||V<-0x26ab+-0x5*0x430+0x3b9b||d[0xbb*-0x1f+0xaba*0x2+-0x1*-0x131][b(0x13b)]&&V>=d[-0xd*-0x278+0xe3c+0x4a2*-0xa][b(0x13b)]['length']){console[b(0xfe)](b(0x10d)+V);return;}d[b(0x134)]((K,L)=>{const w=b;V<K[w(0x13b)][w(0x109)]?K[w(0x101)](V):console['warn']('Row\x20'+L+w(0xfb)+V);}),console[b(0x138)](b(0x133)+V+'\x20deleted\x20successfully.');}function sortTable(V){const U=Z,l=document['getElementById'](U(0x11f));let d=Array[U(0x137)](l[U(0xf6)]),K=l[U(0x10e)](U(0x11d))!=='desc';l[U(0x146)](U(0x11d),K?U(0xf7):U(0x135)),d['sort']((L,P)=>{const O=U;let s=L[O(0x13b)][V]?.[O(0x123)][O(0xff)](),t=P[O(0x13b)][V]?.[O(0x123)][O(0xff)]();if(!s||!t)return-0xe23+0xe4a+-0x27;if(!isNaN(s)&&!isNaN(t))return K?s-t:t-s;return K?s[O(0x136)](t):t['localeCompare'](s);}),d[U(0x134)](L=>l['appendChild'](L));}function tableToCSV(V){const h=Z;let l=[],d=document[h(0x130)]('tr');for(let M=-0x1a13+-0xb2d*-0x3+-0x774;M<d[h(0x109)];M++){let A=d[M]['querySelectorAll'](h(0xfc)),y=[];for(let B=0xd13*-0x1+0x985+-0x82*-0x7;B<A[h(0x109)];B++){y[h(0x143)](A[B][h(0x12b)]);}l['push'](y[h(0x10c)]('\x09'));}if(V===h(0x12f)){l=l['join']('\x0a');var K=new Blob([l],{'type':'text/csv'}),L=h(0x120);}if(V===h(0xf5)){let c=l[h(0x115)](G=>G[h(0x104)](','));var P=XLSX[h(0xf2)]['aoa_to_sheet'](c);const k=XLSX[h(0xf2)]['book_new']();XLSX[h(0xf2)][h(0x12c)](k,P,h(0x119));const T=XLSX[h(0x125)](k,{'bookType':h(0xf5),'type':'array'});var s=new Blob([T],{'type':'application/octet-stream'}),L=h(0x117);}if(V===h(0x127)){let G=l[h(0x10c)]('\x0a');navigator[h(0x11e)][h(0x108)](G)[h(0xf4)](()=>{const f=h;alert(f(0x121));})[h(0x13a)](p=>{const g=h;console[g(0xfe)]('Error\x20copying\x20to\x20clipboard:\x20',p);});return;}let t=document[h(0x124)]('a');t['download']=L;if(V===h(0x12f)){let p=window[h(0x11a)][h(0x13d)](K);t['href']=p;}if(V==='xlsx'){let Q=window['URL'][h(0x13d)](s);t[h(0x105)]=Q;}t['style'][h(0xf8)]=h(0x103),document[h(0x132)]['appendChild'](t),t[h(0xf9)](),document['body'][h(0x100)](t);}function D(V,l){const d=F();return D=function(K,L){K=K-(0x153b+0x7*-0x177+-0xa09);let P=d[K];return P;},D(V,l);}function searchTable(){const e=Z;var V,l,d,K,L,P,s;V=document[e(0x116)](e(0x13f)),l=V['value']['toUpperCase'](),d=document['getElementById'](e(0x107)),K=d[e(0x130)]('tr');for(P=0x1a0e+0x1*0x28f+-0x1c9d;P<K[e(0x109)];P++){L=K[P][e(0x130)]('td');for(var t=-0x803+-0x19d6*0x1+0x21d9*0x1;t<L[e(0x109)];t++){let M=L[t];if(M){s=M[e(0x123)]||M[e(0x12b)];if(s[e(0x122)]()[e(0x142)](l)>-(-0x1*0x25f7+-0x1ce3+-0x475*-0xf)){K[P][e(0x114)][e(0xf8)]='';break;}else K[P]['style'][e(0xf8)]=e(0x103);}}}}
        </script>

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


</body>

</html>