mgsdatatable 1.0.3

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

package/README.md

@@ -0,0 +1,98 @@
+# mgsDataTable
+
+A simple, lightweight JavaScript library to create tables with **pagination**, **sorting**, **searching**, and **rows-per-page limits** — all with minimal setup and no external dependencies.
+
+---
+
+## ✨ Features
+
+- 🔍 **Search** — Filter rows you type then enter keyword.  
+- ↕ **Sorting** — Click column headers to sort (ascending/descending).  
+- 📄 **Pagination** — Navigate between pages easily.  
+- 📏 **Rows Limit** — Set how many rows appear per page.  
+- 🎨 **Customizable** — Fully styleable with your own CSS.  
+- 📦 **No Dependencies** — Works in all modern browsers.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install mgsdatatable
+
+```
+## after installation then use it-
+
+```
+<div id="tableContainer"></div>
+
+<script type="module">
+    import mgsDataTable from 'mgsdatatable';
+
+    // Call the function to render table
+	mgsDataTable({
+      target:"#tableContainer",
+      url:'http://localhost/mgs/users',
+      data: {},
+      methodType:'post',  // Optional, default is post
+      pageLimits : [10,20,30,50,100], // Optional
+      page : 1, // Optional, default is 1
+      limit:10, // Optional, default is 10
+      column : '', // Optional, default is ''
+      sort : 'asc', // Optional, default is asc
+      search: '', // Optional, default is ''
+      prevPage: null, // Optional, default is null
+      nextPage: null, // Optional, default is null
+      isLimit:true, // Optional, default true
+      isSearch:true, // Optional, default true
+      isResult:true, // Optional, default true
+      isPagination:true, // Optional, default true
+      isSorting:true // Optional, default true
+    });
+</script>
+```
+
+## api 'http://localhost/mgs/users' responsed like this format -
+```
+{
+    "status": true,
+    "data": {
+        "column": [
+            "name",
+            "role",
+            "email",
+            "mobile",
+            "image",
+            "status",
+            "action"
+        ],
+        "data": [
+            {
+                "id": 1,
+                "name": "Mangesh",
+                "role": "superadmin",
+                "email": "mangesh@gmail.com",
+                "mobile": "1234567890",
+                "image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px;width:100px; border-radius:50px;'>",
+                "status": "<span data-id='1' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
+                "action": "<span data-id='1' class='btn-danger  badge badge-sm badge-danger delete title='Delete'><i class='fa fa-trash'></i> </span> <a href='http://localhost/mgs/user-update/1' class='btn-success  badge badge-sm badge-success title='Update'><i class='fa fa-edit'></i> </a>"
+            },
+            {
+                "id": 2,
+                "name": "Ashwani",
+                "role": "superadmin",
+                "email": "ashwani@gmail.com",
+                "mobile": "1234567891",
+                "image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px;width:100px; border-radius:50px;'>",
+                "status": "<span data-id='2' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
+                "action": "<span data-id='2' class='btn-danger  badge badge-sm badge-danger delete title='Delete'><i class='fa fa-trash'></i> </span> <a href='http://localhost/mgs/user-update/2' class='btn-success  badge badge-sm badge-success title='Update'><i class='fa fa-edit'></i> </a>"
+            },
+        ],
+        "current_page:1,
+        "from": 1,
+        "to": 5,
+        "total": 27
+    },
+    "msg": "Data found"
+}
+```

package/dist/mgsdatatable.min.js

@@ -0,0 +1,3 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).mgsDataTable={})}(this,function(e){"use strict";function t(e,t,n,o,r,i,a){try{var l=e[i](a),c=l.value}catch(e){return void n(e)}l.done?t(c):Promise.resolve(c).then(o,r)}function n(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,o)}return n}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach(function(t){n(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function i(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n={};for(var o in e)if({}.hasOwnProperty.call(e,o)){if(-1!==t.indexOf(o))continue;n[o]=e[o]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function a(){
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+var e,t,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",r=n.toStringTag||"@@toStringTag";function i(n,o,r,i){var a=o&&o.prototype instanceof s?o:s,d=Object.create(a.prototype);return l(d,"_invoke",function(n,o,r){var i,a,l,s=0,d=r||[],u=!1,p={p:0,n:0,v:e,a:g,f:g.bind(e,4),d:function(t,n){return i=t,a=0,l=e,p.n=n,c}};function g(n,o){for(a=n,l=o,t=0;!u&&s&&!r&&t<d.length;t++){var r,i=d[t],g=p.p,f=i[2];n>3?(r=f===o)&&(l=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=g&&((r=n<2&&g<i[1])?(a=0,p.v=o,p.n=i[1]):g<f&&(r=n<3||i[0]>o||o>f)&&(i[4]=n,i[5]=o,p.n=f,a=0))}if(r||n>1)return c;throw u=!0,o}return function(r,d,f){if(s>1)throw TypeError("Generator is already running");for(u&&1===d&&g(d,f),a=d,l=f;(t=a<2?e:l)||!u;){i||(a?a<3?(a>1&&(p.n=-1),g(a,l)):p.n=l:p.v=l);try{if(s=2,i){if(a||(r="next"),t=i[r]){if(!(t=t.call(i,l)))throw TypeError("iterator result is not an object");if(!t.done)return t;l=t.value,a<2&&(a=0)}else 1===a&&(t=i.return)&&t.call(i),a<2&&(l=TypeError("The iterator does not provide a '"+r+"' method"),a=1);i=e}else if((t=(u=p.n<0)?l:n.call(o,p))!==c)break}catch(t){i=e,a=1,l=t}finally{s=1}}return{value:t,done:u}}}(n,r,i),!0),d}var c={};function s(){}function d(){}function u(){}t=Object.getPrototypeOf;var p=[][o]?t(t([][o]())):(l(t={},o,function(){return this}),t),g=u.prototype=s.prototype=Object.create(p);function f(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,u):(e.__proto__=u,l(e,r,"GeneratorFunction")),e.prototype=Object.create(g),e}return d.prototype=u,l(g,"constructor",u),l(u,"constructor",d),d.displayName="GeneratorFunction",l(u,r,"GeneratorFunction"),l(g),l(g,r,"Generator"),l(g,o,function(){return this}),l(g,"toString",function(){return"[object Generator]"}),(a=function(){return{w:i,m:f}})()}function l(e,t,n,o){var r=Object.defineProperty;try{r({},"",{})}catch(e){r=0}l=function(e,t,n,o){function i(t,n){l(e,t,function(e){return this._invoke(t,n,e)})}t?r?r(e,t,{value:n,enumerable:!o,configurable:!o,writable:!o}):e[t]=n:(i("next",0),i("throw",1),i("return",2))},l(e,t,n,o)}var c=["token"],s={target:"",url:"",methodType:"post",data:{},pageLimits:[10,20,30,50,100],page:1,limit:10,column:"",sort:"asc",search:"",prevPage:null,nextPage:null,isSearch:!0,isLimit:!0,isResult:!0,isPagination:!0,isSorting:!0},d=0,u=function(){var e,o=(e=a().m(function e(t){var o,l,u,g,f,m,v,y,h,b,x,P,w,_,L,S,T,j,O,k,E,C,A,I,M,H,D,N,R,q,F,z,G,U,B,J,X,K,Q,V,W,Y,Z,$,ee,te,ne,oe,re,ie,ae,le,ce,se,de,ue,pe,ge,fe,me,ve,ye,he,be,xe,Pe,we,_e,Le,Se,Te,je,Oe,ke,Ee,Ce,Ae,Ie,Me,He,De,Ne,Re,qe,Fe,ze,Ge,Ue,Be,Je,Xe,Ke,Qe,Ve,We,Ye;return a().w(function(e){for(;;)switch(e.p=e.n){case 0:if(s=r(r({},s),t),null!==(o=s)&&void 0!==o&&o.target){e.n=1;break}return alert("Target is requied."),e.a(2);case 1:if(null!==(l=s)&&void 0!==l&&l.url){e.n=2;break}return alert("URL is requied."),e.a(2);case 2:return z=null===(u=s)||void 0===u?void 0:u.target,G=null!==(g=null===(f=s)||void 0===f?void 0:f.url)&&void 0!==g?g:"/",U=r({},null===(m=s)||void 0===m?void 0:m.data),B=U.token,J=i(U,c),X=null===(v=s)||void 0===v?void 0:v.methodType,K=null!==(y=null===(h=s)||void 0===h?void 0:h.page)&&void 0!==y?y:1,Q=null!==(b=null===(x=s)||void 0===x?void 0:x.limit)&&void 0!==b?b:10,V=null!==(P=null===(w=s)||void 0===w?void 0:w.pageLimits)&&void 0!==P?P:[10,20,30,50,100],W=null===(_=s)||void 0===_?void 0:_.search,Y=null===(L=s)||void 0===L?void 0:L.column,Z=null===(S=s)||void 0===S?void 0:S.sort,$=null!==(T=null===(j=s)||void 0===j?void 0:j.nextPage)&&void 0!==T?T:null,ee=null!==(O=null===(k=s)||void 0===k?void 0:k.prevPage)&&void 0!==O?O:null,te=null===(E=null===(C=s)||void 0===C?void 0:C.isSearch)||void 0===E||E,ne=null===(A=null===(I=s)||void 0===I?void 0:I.isLimit)||void 0===A||A,oe=null===(M=null===(H=s)||void 0===H?void 0:H.isResult)||void 0===M||M,re=null===(D=null===(N=s)||void 0===N?void 0:N.isPagination)||void 0===D||D,ie=null===(R=null===(q=s)||void 0===q?void 0:q.isSorting)||void 0===R||R,J=r(r({},J),{},{page:K,limit:Q}),null!=W&&null!=W&&""!=W.trim()&&(J=r(r({},J),{},{search:W})),null!=Y&&null!=Y&&""!=Y.trim()&&(J=r(r({},J),{},{column:Y,sort:Z})),ae="post"===X.toLowerCase(),(le=new Headers).append("Content-Type","application/json"),ae&&le.append("X-CSRF-Token",B),ce={method:null===(F=s)||void 0===F?void 0:F.methodType,headers:le,body:JSON.stringify(J)},se=document.querySelector(z),(de=se.nextElementSibling)&&de.classList.contains("_mgsPaginateResult")&&de.remove(),(ue=se.querySelector("tbody"))&&ue.remove(),(pe=document.createElement("div")).className="_mgsSpinner",pe.innerHTML='<i class="fa fa-spinner fa-spin"></i> &nbsp; Loading...',pe.style.cssText="\n        position: fixed;\n        z-index: 1031;\n        width: 70%;\n        height: 30%;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        font-size: 20px;\n    ",e.p=3,e.n=4,fetch(G,ce);case 4:return ye=e.v,e.n=5,ye.json();case 5:if(he=e.v,be=null!==(ge=null==he?void 0:he.data)&&void 0!==ge?ge:[],xe=null!==(fe=null==he||null===(me=he.data)||void 0===me?void 0:me.data)&&void 0!==fe?fe:[],Pe=null!==(ve=null==he?void 0:he.column)&&void 0!==ve?ve:[],we=null!=(null==be?void 0:be.from)&&null!=(null==be?void 0:be.from)&&""!=(null==be?void 0:be.from)?null==be?void 0:be.from:0,_e=null!=(null==be?void 0:be.to)&&null!=(null==be?void 0:be.to)&&""!=(null==be?void 0:be.to)?null==be?void 0:be.to:0,Le=null!=(null==be?void 0:be.total)&&null!=(null==be?void 0:be.total)&&""!=(null==be?void 0:be.total)?null==be?void 0:be.total:0,Se=Math.ceil(Le/Q),Te=Se+2,$=Se>0&&null==$&&null==ee?2:$,se.insertAdjacentElement("beforebegin",pe),0==d&&(te||ne)&&(je="",ne&&V.forEach(function(e){je+='<option value="'.concat(e,'">').concat(e,"</option>")}),Oe='\n                <div class="row _mgsPerPageSearch"> \n                    '.concat(ne?'<div class="_mgsPerPageStyle"> \n                        <span>Show</span>\n                        <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit" style="width:100px !important">'.concat(je,"</select>\n                    </div>"):"","\n                    ").concat(te?'<div class="_mgsSearchStyle"> \n                        <span>Search</span> \n                        <input type="text" class="form-control _mgsSearchAnyField" name="_mgsSearchAnyField" value="'.concat(W,'" placeholder="Search any field...">\n                    </div> '):"","\n                </div>\n            "),se.insertAdjacentHTML("beforebegin",Oe),(ke=document.querySelector("._mgsPerPageSearch"))&&(ke.style.display="flex",ke.style.justifyContent="space-between",ke.style.alignItems="center",ke.style.gap="10px",ke.style.paddingLeft="14px",ke.style.paddingRight="14px",ke.style.marginBottom="10px",(Ee=ke.querySelector('input[type="search"]'))&&(Ee.style.flex="1",Ee.style.padding="6px 10px",Ee.style.border="1px solid #ccc",Ee.style.borderRadius="4px"),(Ce=ke.querySelector("select"))&&(Ce.style.padding="6px 10px",Ce.style.border="1px solid #ccc",Ce.style.borderRadius="4px"))),(Ae=document.createElement("table")).style.cssText="\n            width: 100%;\n            min-width: 100%;\n            max-width: 100%;\n            padding: 10px 5px;\n            vertical-align: top;\n            border: 1px solid rgb(222, 226, 230);\n            background-color: #fff;\n            color: #212529;\n            border-collapse: collapse;\n        ",Ie=document.createElement("thead"),Me=document.createElement("tr"),Pe.forEach(function(e,t){e=p(e);var n=document.createElement("th");(null==xe?void 0:xe.length)>0&&ie&&n.classList.add("_mgsSort"),ie?(n.setAttribute("data-column",t),Y&&t==Y&&"desc"==Z?(n.setAttribute("data-sort","desc"),n.innerHTML="".concat(e,' <i class="fa fa-arrow-down" style="font-size:10px !important"></i>')):(n.setAttribute("data-sort","asc"),n.innerHTML="".concat(e,' <i class="fa fa-arrow-up" style="font-size:10px !important"></i>'))):n.innerHTML=e,n.style.cssText="\n                background-color: #f8f9fa;\n                font-weight: bold;\n                cursor: ".concat((null==xe?void 0:xe.length)>0?"pointer":"not-allowed",";\n                width: 150px;\n                min-width: 150px;\n                max-width: 150px;\n                white-space: nowrap;\n                overflow: hidden;\n                text-overflow: ellipsis;\n                padding: 2px;\n                border-top: 1px solid rgb(222, 226, 230);\n            "),Me.appendChild(n)}),Ie.appendChild(Me),Ae.appendChild(Ie),He=document.createElement("tbody"),(null==xe?void 0:xe.length)>0?xe.forEach(function(e,t){var n=document.createElement("tr");Pe.forEach(function(t){var o=document.createElement("td");o.style.cssText="\n                        width: 150px;\n                        min-width: 150px;\n                        max-width: 150px;\n                        white-space: nowrap;\n                        overflow: hidden;\n                        text-overflow: ellipsis;\n                        padding: 2px;\n                        border-top: 1px solid rgb(222, 226, 230);\n                    ",o.innerHTML=e[t],o.title=e[t],n.appendChild(o)}),He.appendChild(n)}):(De=document.createElement("tr"),(Ne=document.createElement("td")).innerHTML="Data not Found",Ne.setAttribute("colspan",null==Pe?void 0:Pe.length),Ne.style.cssText="\n                width: 100%;\n                padding: 2px;\n                border-top: 1px solid rgb(222, 226, 230);\n                text-align: center;\n                color:red;\n            ",De.appendChild(Ne),He.appendChild(De)),Ae.appendChild(He),se.innerHTML="",se.appendChild(Ae),setTimeout(function(){pe.remove()},500),d++,Re="",Te>0)for((qe=document.createElement("style")).textContent="\n                ._mgsPagination {\n                    display: flex;\n                    list-style: none;\n                    padding: 0;\n                    gap: 6px;\n                }\n                ._mgsPageItem {\n                    display: inline-block;\n                }\n                ._mgsPageLink {\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    min-width: 36px;\n                    height: 36px;\n                    padding: 0 10px;\n                    border: 1px solid #0ec6d5;\n                    border-radius: 6px;\n                    font-size: 14px;\n                    font-weight: 500;\n                    color: #0ec6d5;\n                    text-decoration: none;\n                    transition: all 0.2s ease-in-out;\n                }\n                ._mgsPageLink:hover {\n                    background-color: #0ec6d5;\n                    color: #fff;\n                }\n                ._mgsPageItem.active ._mgsPageLink {\n                    background-color: #0ec6d5;\n                    color: #fff;\n                    border-color: #0ec6d5;\n                }\n                ._mgsPageItem.disabled ._mgsPageLink {\n                    border-color: #ccc;\n                    color: #ccc;\n                    pointer-events: none;\n                    cursor: not-allowed;\n                }\n            ",document.head.appendChild(qe),Fe=!0,ze=0;ze<Te;ze++)Ge=n({0:"« Previous"},Te-1,"Next »"),Ue=Ge[ze]?Ge[ze]:ze,Be="« Previous"==Ge[ze]?ee:"Next »"==Ge[ze]?$:ze,Je=null==Be?"cursor: not-allowed !important;":"cursor: pointer !important;",Xe=null==Be?"disabled":Be==K?"active":"",Ke=Ue,2==Te&&(Be=null,Xe="disabled"),Se>5&&["« Previous",1,2,3,"Next »"].includes(Ue)&&K<3?(Ke=Ue,Re+='<li class="_mgsPageItem '.concat(Xe,'" style="').concat(Je,'">\n                    <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Be,'">').concat(Ke,"</a>\n                    </li>")):Se>5&&K>2?(Xe=null==Be?"disabled":Be+1==K?"active":"",Ke=K>=3&&!["« Previous","Next »"].includes(Ue)?Ue+1:Ue,1==ze?Re+='<li class="_mgsPageItem '.concat(Xe,'" style="').concat(Je,'">\n                            <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="1">1</a>\n                        </li>'):K-1<=ze&&K>=ze&&ze<=K+1&&ze<Se-2&&!["« Previous","Next »"].includes(Ue)?Re+='<li class="_mgsPageItem '.concat(Xe,'" style="').concat(Je,'">\n                            <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Be+1,'">').concat(Ke,"</a>\n                        </li>"):Se>5&&ze>3&&ze<Se-1&&!["« Previous","Next »"].includes(Ue)?Fe&&(Fe=!1,Ke="...",Re+='<li class="_mgsPageItem '.concat(Xe,'" style="').concat(Je,'">\n                                <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Be+1,'">').concat(Ke,"</a>\n                            </li>")):(Ke=Ue,Re+='<li class="_mgsPageItem '.concat(Xe=null==Be?"disabled":Be==K?"active":"",'" style="').concat(Je,'">\n                            <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Be,'">').concat(Ke,"</a>\n                        </li>"))):Se>5&&ze>3&&ze<Se-1&&!["« Previous","Next »"].includes(Ue)?Fe&&(Fe=!1,Ke="...",Re+='<li class="_mgsPageItem '.concat(Xe,'" style="').concat(Je,'">\n                            <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Be,'">').concat(Ke,"</a>\n                        </li>")):(Ke=Ue,Re+='<li class="_mgsPageItem '.concat(Xe,'" style="').concat(Je,'">\n                        <a class="_mgsPageLink" data-mxpage="').concat(Se,'" href="').concat(Be,'">').concat(Ke,"</a>\n                    </li>"));Qe='\n            <div class="row _mgsPaginateResult">\n                '.concat(oe?"<div>Showing ".concat(we," to ").concat(_e," of ").concat(Le," results</div>"):"","\n                ").concat(re?'<div style="margin-top:10px;"> \n                    <ul class="mgsPagination" style="margin-left: auto !important"> \n                        '.concat(Re,"\n                    </ul> \n                </div> "):"","\n            </div>"),se.insertAdjacentHTML("afterend",Qe),(Ve=document.querySelector("._mgsPaginateResult"))&&(Ve.style.display="flex",Ve.style.justifyContent="space-between",Ve.style.alignItems="center",Ve.style.gap="10px",Ve.style.paddingLeft="14px",Ve.style.paddingRight="14px"),e.n=7;break;case 6:e.p=6,Ye=e.v,We='\n            <div class="row" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;"> \n                <p>Error Message : <span style=\'color: red; margin-left:10px;\'>'.concat(Ye.message,"</span></p>\n            </div>\n        "),se.innerHTML="",se.insertAdjacentHTML("beforebegin",We),pe.remove();case 7:return e.a(2)}},e,null,[[3,6]])}),function(){var n=this,o=arguments;return new Promise(function(r,i){var a=e.apply(n,o);function l(e){t(a,r,i,l,c,"next",e)}function c(e){t(a,r,i,l,c,"throw",e)}l(void 0)})});return function(e){return o.apply(this,arguments)}}();function p(e){return e.replace(/_/g," ").replace(/\b\w/g,function(e){return e.toUpperCase()})}document.addEventListener("click",function(e){var t=e.target.closest("._mgsPageItem");if(t){e.preventDefault(),t.textContent.trim();var n=t.querySelector("._mgsPageLink"),o=null==n?void 0:n.getAttribute("href"),r=null==n?void 0:n.getAttribute("data-mxpage");if(!o||"null"===o)return n.setAttribute("disabled",!0),void(n.style.cssText="cursor: not-allowed !important;");var i=parseInt(o),a=i>=r?null:i+1,l=i<=1?null:i-1;null==n||n.setAttribute("href",a),n.style.cssText=null==a||null==l?"cursor: not-allowed !important;":"cursor: pointer !important;",u({page:i,prevPage:l,nextPage:a})}}),document.addEventListener("change",function(e){var t=e.target;if(t.classList.contains("_mgsPerPageLimit")){e.preventDefault();var n=parseInt(t.value,10);u({page:1,limit:n,prevPage:null,nextPage:null})}}),document.addEventListener("keyup",function(e){var t=e.target;if(t.classList.contains("_mgsSearchAnyField")&&(e.preventDefault(),"Enter"===e.key)){var n=t.value;document.querySelectorAll("._mgsSort").forEach(function(e){var t=p(e.textContent.trim());e.innerHTML="".concat(t,' <i class="fa fa-arrow-up" style="font-size:10px !important"></i>'),e.setAttribute("data-sort","asc")}),u({page:1,column:"",sort:"",search:n})}}),document.addEventListener("click",function(e){var t=e.target.closest("._mgsSort");if(t){e.preventDefault();var n=t.getAttribute("data-column"),o=t.getAttribute("data-sort");u({page:1,column:n,sort:"asc"===o?"desc":"asc"})}}),window.mgsDataTable=u,window._mgsCapitalizeFirstLetter=p,e._mgsCapitalizeFirstLetter=p,e.mgsDataTable=u,Object.defineProperty(e,"__esModule",{value:!0})});

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "mgsdatatable",
+  "version": "1.0.3",
+  "main": "dist/mgsdatatable.min.js",
+  "browser": "dist/mgsdatatable.min.js",
+  "type": "module",
+  "description": "A lightweight and beginner-friendly JavaScript table generator with built-in pagination, sorting, searching, and row-limit controls. This library helps you quickly display tabular data with a clean, responsive design and minimal setup — no external dependencies required. Simply pass your data array and the library will handle rendering, filtering, sorting, and page navigation automatically.",
+  "keywords": [
+    "mgsdatatable",
+    "datatable",
+    "table",
+    "javascript",
+    "pagination",
+    "sorting",
+    "browser",
+    "UMD"
+  ],
+  "homepage": "https://github.com/Mangeshwar22102022/mgsDataTable#readme",
+  "bugs": {
+    "url": "https://github.com/Mangeshwar22102022/mgsDataTable/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mangeshwar22102022/mgsDataTable.git"
+  },
+  "license": "MIT",
+  "author": "Mangesh",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "rollup": "^2.79.2",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,15 @@
+import babel from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/mgsdatatable.min.js',
+    format: 'umd',
+    name: 'mgsDataTable',
+  },
+  plugins: [
+    babel({ babelHelpers: 'bundled' }),
+    terser()
+  ]
+};

package/src/index.js

@@ -0,0 +1,481 @@
+let _mgsCommonData = {
+    target : '',
+    url : '',
+    methodType : 'post',
+    data : {},
+    pageLimits : [10,20,30,50,100],
+    page : 1,
+    limit : 10,
+    column : '',
+    sort : 'asc',
+    search: '',
+    prevPage: null,
+    nextPage: null,
+    isSearch: true,
+    isLimit: true,
+    isResult: true,
+    isPagination: true,
+    isSorting: true,
+}
+let _mgsCountsCheck = 0;
+const mgsDataTable = async (data) => {
+    _mgsCommonData = {..._mgsCommonData, ...data};
+    if(!_mgsCommonData?.target){
+        alert('Target is requied.');
+        return;
+    }
+    if(!_mgsCommonData?.url){
+        alert('URL is requied.');
+        return;
+    }
+    let _mgsTarget = _mgsCommonData?.target;
+    let _mgsFullUrl = _mgsCommonData?.url ?? '/';
+    let { token, ...allData} = {..._mgsCommonData?.data};
+    let methodType = _mgsCommonData?.methodType;
+    let page = _mgsCommonData?.page ?? 1;
+    let limit = _mgsCommonData?.limit ?? 10;
+    let pageLimits = _mgsCommonData?.pageLimits ?? [10,20,30,50,100];
+    let search = _mgsCommonData?.search;
+    let column = _mgsCommonData?.column;
+    let sort = _mgsCommonData?.sort;
+    let nextPage = _mgsCommonData?.nextPage ?? null;
+    let prevPage = _mgsCommonData?.prevPage ?? null;
+    let isSearch = _mgsCommonData?.isSearch ?? true;
+    let isLimit = _mgsCommonData?.isLimit ?? true;
+    let isResult = _mgsCommonData?.isResult ?? true;
+    let isPagination = _mgsCommonData?.isPagination ?? true;
+    let isSorting = _mgsCommonData?.isSorting ?? true;
+
+    allData = { ...allData, page, limit }
+    if (search != null && search != undefined && search.trim() != '') {
+        allData = { ...allData, search }
+    }
+    if (column != null && column != undefined && column.trim() != '') {
+        allData = { ...allData, column, sort }
+    }
+
+    const _mgsIsPost = methodType.toLowerCase() === 'post';
+    // Prepare headers and body
+    const headers = new Headers();
+    headers.append("Content-Type", "application/json");
+    if (_mgsIsPost) headers.append("X-CSRF-Token", token);
+
+    const _mgsOptions = {
+        method: _mgsCommonData?.methodType,
+        headers: headers,
+        body: JSON.stringify(allData)
+    };
+
+    // Clean up previous results
+    const _mgsContainer = document.querySelector(_mgsTarget);
+    const nextPaginate = _mgsContainer.nextElementSibling;
+    if (nextPaginate && nextPaginate.classList.contains('_mgsPaginateResult')) {
+        nextPaginate.remove();
+    }
+    const tbody = _mgsContainer.querySelector('tbody');
+    if (tbody) tbody.remove();
+
+    // Initial setup for first time
+    const spinner = document.createElement('div');
+    spinner.className = '_mgsSpinner';
+    spinner.innerHTML = `<i class="fa fa-spinner fa-spin"></i> &nbsp; Loading...`;
+    spinner.style.cssText = `
+        position: fixed;
+        z-index: 1031;
+        width: 70%;
+        height: 30%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+    `;
+    
+    try {
+        const _mgsResponse = await fetch(_mgsFullUrl, _mgsOptions);
+        const _mgsResp = await _mgsResponse.json();
+        const _mgsResult = _mgsResp?.data ?? [];
+        const _mgsOutput = _mgsResp?.data?.data ?? [];
+        const _mgsColumn = _mgsResp?.column ?? [];
+        const _from = (_mgsResult?.from != undefined && _mgsResult?.from  != null && _mgsResult?.from  != '')?_mgsResult?.from :0;
+        const _to = (_mgsResult?.to != undefined && _mgsResult?.to  != null && _mgsResult?.to  != '')?_mgsResult?.to :0;
+        const _total = (_mgsResult?.total != undefined && _mgsResult?.total  != null && _mgsResult?.total  != '')?_mgsResult?.total :0;
+        const _mgsTotalPage = Math.ceil(_total/limit);
+        const _mgsPagination = (_mgsTotalPage+2);
+        nextPage = (_mgsTotalPage > 0 && nextPage == null && prevPage == null)? 2 : nextPage;
+
+        //create limit and search
+        _mgsContainer.insertAdjacentElement('beforebegin', spinner);
+        if (_mgsCountsCheck == 0 && (isSearch || isLimit)) {
+            let pageLimitData = '';
+            if(isLimit){
+                pageLimits.forEach(element => {
+                    pageLimitData += `<option value="${element}">${element}</option>`;
+                });
+            }
+
+            const _mgsPerPageSearch = `
+                <div class="row _mgsPerPageSearch"> 
+                    ${isLimit ? `<div class="_mgsPerPageStyle"> 
+                        <span>Show</span>
+                        <select class="_mgsPerPageLimit form-control" name="_mgsPerPageLimit" style="width:100px !important">${pageLimitData}</select>
+                    </div>`:``}
+                    ${isSearch ? `<div class="_mgsSearchStyle"> 
+                        <span>Search</span> 
+                        <input type="text" class="form-control _mgsSearchAnyField" name="_mgsSearchAnyField" value="${search}" placeholder="Search any field...">
+                    </div> `:``}
+                </div>
+            `;
+            _mgsContainer.insertAdjacentHTML('beforebegin', _mgsPerPageSearch);
+            const target = document.querySelector('._mgsPerPageSearch');
+            if (target) {
+                target.style.display = 'flex';
+                target.style.justifyContent = 'space-between';
+                target.style.alignItems = 'center';
+                target.style.gap = '10px';
+                target.style.paddingLeft = '14px';
+                target.style.paddingRight = '14px';
+                target.style.marginBottom = '10px';
+
+                // Optional: style search input
+                const searchInput = target.querySelector('input[type="search"]');
+                if (searchInput) {
+                    searchInput.style.flex = '1';
+                    searchInput.style.padding = '6px 10px';
+                    searchInput.style.border = '1px solid #ccc';
+                    searchInput.style.borderRadius = '4px';
+                }
+
+                // Optional: style select dropdown
+                const select = target.querySelector('select');
+                if (select) {
+                    select.style.padding = '6px 10px';
+                    select.style.border = '1px solid #ccc';
+                    select.style.borderRadius = '4px';
+                }
+            }
+        }
+
+        //create table
+        const _mgsCreateTable = document.createElement('table');
+        _mgsCreateTable.style.cssText = `
+            width: 100%;
+            min-width: 100%;
+            max-width: 100%;
+            padding: 10px 5px;
+            vertical-align: top;
+            border: 1px solid rgb(222, 226, 230);
+            background-color: #fff;
+            color: #212529;
+            border-collapse: collapse;
+        `;
+
+        // Create thead
+        const _mgsThead = document.createElement('thead');
+        const _mgsHeadRow = document.createElement('tr');
+        _mgsColumn.forEach((text, key) => {
+            text = _mgsCapitalizeFirstLetter (text);
+            const th = document.createElement('th');
+            if(_mgsOutput?.length > 0 && isSorting){
+                th.classList.add('_mgsSort');
+            }
+            if(isSorting){
+                th.setAttribute('data-column', key); // or actual key if mapping to backend
+                if (column && key == column && sort == 'desc') {
+                    th.setAttribute('data-sort', 'desc');
+                    th.innerHTML = `${text} <i class="fa fa-arrow-down" style="font-size:10px !important"></i>`;
+                }else{
+                    th.setAttribute('data-sort', 'asc');
+                    th.innerHTML = `${text} <i class="fa fa-arrow-up" style="font-size:10px !important"></i>`;
+                }
+            }else{
+                th.innerHTML = text;
+            }
+            th.style.cssText = `
+                background-color: #f8f9fa;
+                font-weight: bold;
+                cursor: ${(_mgsOutput?.length > 0)?'pointer':'not-allowed'};
+                width: 150px;
+                min-width: 150px;
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                padding: 2px;
+                border-top: 1px solid rgb(222, 226, 230);
+            `;
+            _mgsHeadRow.appendChild(th);
+        });
+        _mgsThead.appendChild(_mgsHeadRow);
+        _mgsCreateTable.appendChild(_mgsThead);        
+
+        // Create tbody
+        const _mgsTbody = document.createElement('tbody');
+        if(_mgsOutput?.length > 0){
+            _mgsOutput.forEach((text, key) => {
+                let _createRow = document.createElement('tr');
+                _mgsColumn.forEach(col => {
+                    let td = document.createElement('td');
+                    td.style.cssText = `
+                        width: 150px;
+                        min-width: 150px;
+                        max-width: 150px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        padding: 2px;
+                        border-top: 1px solid rgb(222, 226, 230);
+                    `;
+                    td.innerHTML = text[col];
+                    td.title = text[col];
+                    _createRow.appendChild(td);
+                });
+                _mgsTbody.appendChild(_createRow);
+            });
+        }else{
+            let _createRow = document.createElement('tr');
+            let td = document.createElement('td');
+            td.innerHTML = 'Data not Found';
+            td.setAttribute('colspan', _mgsColumn?.length)
+            td.style.cssText = `
+                width: 100%;
+                padding: 2px;
+                border-top: 1px solid rgb(222, 226, 230);
+                text-align: center;
+                color:red;
+            `;
+            _createRow.appendChild(td);
+            _mgsTbody.appendChild(_createRow);  
+        }
+        
+        _mgsCreateTable.appendChild(_mgsTbody);
+
+        // Append the table to the container
+        _mgsContainer.innerHTML = ''; // clear previous content
+        _mgsContainer.appendChild(_mgsCreateTable);
+
+        setTimeout(() => {
+            spinner.remove();
+        }, 500);
+
+        _mgsCountsCheck++;
+        let _mgsPaginationHtml = ``;
+        if (_mgsPagination > 0) {
+            let style = document.createElement('style');
+            style.textContent = `
+                ._mgsPagination {
+                    display: flex;
+                    list-style: none;
+                    padding: 0;
+                    gap: 6px;
+                }
+                ._mgsPageItem {
+                    display: inline-block;
+                }
+                ._mgsPageLink {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    min-width: 36px;
+                    height: 36px;
+                    padding: 0 10px;
+                    border: 1px solid #0ec6d5;
+                    border-radius: 6px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: #0ec6d5;
+                    text-decoration: none;
+                    transition: all 0.2s ease-in-out;
+                }
+                ._mgsPageLink:hover {
+                    background-color: #0ec6d5;
+                    color: #fff;
+                }
+                ._mgsPageItem.active ._mgsPageLink {
+                    background-color: #0ec6d5;
+                    color: #fff;
+                    border-color: #0ec6d5;
+                }
+                ._mgsPageItem.disabled ._mgsPageLink {
+                    border-color: #ccc;
+                    color: #ccc;
+                    pointer-events: none;
+                    cursor: not-allowed;
+                }
+            `;
+            document.head.appendChild(style);
+            let _mgsCheckCreate = true;
+            for (let _mgsIndex = 0; _mgsIndex < _mgsPagination; _mgsIndex++) {
+                let _mgsPrevNextPage = {0:'« Previous', [_mgsPagination-1]:'Next »'};
+                let _mgsLabel = (_mgsPrevNextPage[_mgsIndex])?_mgsPrevNextPage[_mgsIndex]:_mgsIndex;
+                let _mgsPage = (_mgsPrevNextPage[_mgsIndex] == '« Previous')?prevPage:((_mgsPrevNextPage[_mgsIndex] == 'Next »')? nextPage :_mgsIndex);
+                let _mgsCursorStye = (_mgsPage == null)?`cursor: not-allowed !important;`:`cursor: pointer !important;`;
+                let _mgsActiveDisablePage = (_mgsPage == null)?'disabled':((_mgsPage == page)?'active':'');
+                let _mgsMoreThenFive = _mgsLabel;
+                if(_mgsPagination == 2){
+                    _mgsPage = null;
+                    _mgsActiveDisablePage = 'disabled';
+                }
+                if(_mgsTotalPage > 5 && ['« Previous',1,2,3,'Next »'].includes(_mgsLabel) && page < 3){
+                    _mgsMoreThenFive = _mgsLabel;
+                    _mgsPaginationHtml += `<li class="_mgsPageItem ${_mgsActiveDisablePage}" style="${_mgsCursorStye}">
+                    <a class="_mgsPageLink" data-mxpage="${_mgsTotalPage}" href="${_mgsPage}">${_mgsMoreThenFive}</a>
+                    </li>`;
+                }else if(_mgsTotalPage > 5 && page > 2){
+                    _mgsActiveDisablePage = (_mgsPage == null)?'disabled':((_mgsPage+1 == page)?'active':'');
+                    _mgsMoreThenFive = (page >= 3 && !['« Previous','Next »'].includes(_mgsLabel))?_mgsLabel+1:_mgsLabel;
+                    if(_mgsIndex == 1){
+                        _mgsPaginationHtml += `<li class="_mgsPageItem ${_mgsActiveDisablePage}" style="${_mgsCursorStye}">
+                            <a class="_mgsPageLink" data-mxpage="${_mgsTotalPage}" href="1">1</a>
+                        </li>`;
+                    }else if((page-1) <= _mgsIndex && page >= _mgsIndex && _mgsIndex <= (page+1)  && _mgsIndex < (_mgsTotalPage-2) && !['« Previous','Next »'].includes(_mgsLabel)){
+                        _mgsPaginationHtml += `<li class="_mgsPageItem ${_mgsActiveDisablePage}" style="${_mgsCursorStye}">
+                            <a class="_mgsPageLink" data-mxpage="${_mgsTotalPage}" href="${_mgsPage+1}">${_mgsMoreThenFive}</a>
+                        </li>`;
+                    }else if(_mgsTotalPage > 5 && _mgsIndex > 3 && _mgsIndex < _mgsTotalPage-1 && !['« Previous','Next »'].includes(_mgsLabel)){
+                        if(_mgsCheckCreate){
+                            _mgsCheckCreate = false;
+                            _mgsMoreThenFive = '...';
+                            _mgsPaginationHtml += `<li class="_mgsPageItem ${_mgsActiveDisablePage}" style="${_mgsCursorStye}">
+                                <a class="_mgsPageLink" data-mxpage="${_mgsTotalPage}" href="${_mgsPage+1}">${_mgsMoreThenFive}</a>
+                            </li>`;
+                        }
+                    }else {
+                        _mgsActiveDisablePage = (_mgsPage == null)?'disabled':((_mgsPage == page)?'active':'');
+                        _mgsMoreThenFive = _mgsLabel;
+                        _mgsPaginationHtml += `<li class="_mgsPageItem ${_mgsActiveDisablePage}" style="${_mgsCursorStye}">
+                            <a class="_mgsPageLink" data-mxpage="${_mgsTotalPage}" href="${_mgsPage}">${_mgsMoreThenFive}</a>
+                        </li>`;
+                    }
+                    
+                }else if(_mgsTotalPage > 5 && _mgsIndex > 3 && _mgsIndex < _mgsTotalPage-1 && !['« Previous','Next »'].includes(_mgsLabel)){
+                    if(_mgsCheckCreate){
+                        _mgsCheckCreate = false;
+                        _mgsMoreThenFive = '...';
+                        _mgsPaginationHtml += `<li class="_mgsPageItem ${_mgsActiveDisablePage}" style="${_mgsCursorStye}">
+                            <a class="_mgsPageLink" data-mxpage="${_mgsTotalPage}" href="${_mgsPage}">${_mgsMoreThenFive}</a>
+                        </li>`;
+                    }
+                }else{
+                    _mgsMoreThenFive = _mgsLabel;
+                    _mgsPaginationHtml += `<li class="_mgsPageItem ${_mgsActiveDisablePage}" style="${_mgsCursorStye}">
+                        <a class="_mgsPageLink" data-mxpage="${_mgsTotalPage}" href="${_mgsPage}">${_mgsMoreThenFive}</a>
+                    </li>`;
+                }
+            }
+        }
+        
+        const paginationResult = `
+            <div class="row _mgsPaginateResult">
+                ${isResult ? `<div>Showing ${_from} to ${_to} of ${_total} results</div>`:``}
+                ${isPagination? `<div style="margin-top:10px;"> 
+                    <ul class="mgsPagination" style="margin-left: auto !important"> 
+                        ${_mgsPaginationHtml}
+                    </ul> 
+                </div> `:``}
+            </div>`;
+        _mgsContainer.insertAdjacentHTML('afterend', paginationResult);
+        const target = document.querySelector('._mgsPaginateResult');
+        if (target) {
+            target.style.display = 'flex';
+            target.style.justifyContent = 'space-between';
+            target.style.alignItems = 'center';
+            target.style.gap = '10px';
+            target.style.paddingLeft = '14px';
+            target.style.paddingRight = '14px';
+        }
+    } catch (error) {
+        const _mgsErrorMessage = `
+            <div class="row" style="text-align: center; display: block; margin: 10px auto; font-weight: bold; margin-top:50px;"> 
+                <p>Error Message : <span style='color: red; margin-left:10px;'>${error.message}</span></p>
+            </div>
+        `;
+        _mgsContainer.innerHTML = ''; 
+        _mgsContainer.insertAdjacentHTML('beforebegin', _mgsErrorMessage);
+        spinner.remove();
+    }
+};
+
+//for per page
+document.addEventListener('click', function (e) {
+  const target = e.target.closest('._mgsPageItem');
+  if (!target) return;
+  e.preventDefault();
+  let page = target.textContent.trim();
+  const pageLink = target.querySelector('._mgsPageLink');
+  const href = pageLink?.getAttribute('href');
+  const totalPage = pageLink?.getAttribute('data-mxpage');
+  if (href && href !== 'null') {
+    let page = parseInt(href);
+    let nextPage = (page >= totalPage)?null:page+1;
+    let prevPage = (page <= 1)?null:page-1;
+    pageLink?.setAttribute('href', nextPage);
+    if(nextPage == null || prevPage == null){
+        pageLink.style.cssText = `cursor: not-allowed !important;`;
+    }else{
+        pageLink.style.cssText = `cursor: pointer !important;`;
+    }
+    mgsDataTable({page, prevPage, nextPage});
+  }else{
+    pageLink.setAttribute('disabled', true);
+    pageLink.style.cssText = `cursor: not-allowed !important;`;
+    return;
+  }
+});
+
+//for limit
+document.addEventListener('change', function (e) {
+  const target = e.target;
+  if (target.classList.contains('_mgsPerPageLimit')) {
+    e.preventDefault();
+    let limit = parseInt(target.value, 10);
+    let page = 1;
+    let prevPage = null;
+    let nextPage = null;
+    mgsDataTable({page,limit, prevPage, nextPage});
+  }
+});
+
+//for searching
+document.addEventListener('keyup', function (e) {
+  const target = e.target;
+  if (target.classList.contains('_mgsSearchAnyField')) {
+    e.preventDefault();
+    if(e.key === "Enter"){
+        let search = target.value;
+        let page = 1;
+        let column = '';
+        let sort = '';
+        document.querySelectorAll('._mgsSort').forEach((el) => {
+          const text = _mgsCapitalizeFirstLetter (el.textContent.trim());
+          el.innerHTML = `${text} <i class="fa fa-arrow-up" style="font-size:10px !important"></i>`;
+          el.setAttribute('data-sort', 'asc');
+        });
+        mgsDataTable({page,column, sort, search});
+    }
+  }
+});
+
+//for sorting
+document.addEventListener('click', function (e) {
+    const target = e.target.closest('._mgsSort');
+    if (!target) return;
+    e.preventDefault();
+    const page = 1;
+    const column = target.getAttribute('data-column');
+    const columnSortType = target.getAttribute('data-sort');
+    let sort = columnSortType === 'asc'?'desc':'asc';
+    mgsDataTable({page, column, sort});
+});
+
+// string to convert first letter of a string to uppercase
+function _mgsCapitalizeFirstLetter(str) {
+    const capitalized = str.replace(/_/g,' ').replace(/\b\w/g, function(match) {return match.toUpperCase();});
+    return capitalized;
+}
+
+// Export globally for UMD/IIFE
+window.mgsDataTable = mgsDataTable;
+window._mgsCapitalizeFirstLetter  = _mgsCapitalizeFirstLetter ;
+
+// If using modules
+export { mgsDataTable, _mgsCapitalizeFirstLetter };