jl-datatable/dist/jl-datatable.esm.js

A datatable server side rendering mode - Vue JS 3 ⚙️

import e from"lodash/debounce";import{ref as t,openBlock as r,createElementBlock as n,createElementVNode as a,withDirectives as o,Fragment as s,renderList as l,toDisplayString as d,vModelSelect as c,vModelText as i,reactive as u,watch as m,toRefs as p,normalizeClass as b,createCommentVNode as h,createBlock as g,resolveDynamicComponent as f,resolveComponent as y,createVNode as v,onMounted as w}from"vue";import O from"qs";import"bootstrap/dist/css/bootstrap.min.css";var U={name:"Header",props:{length:{type:Number,default:10},lengthMenu:Array},emits:["onUpdatedMenu","onUpdatedSearch"],setup(r,{emit:n}){const a=t(""),o=e((function(){n("onUpdatedSearch",a)}),500);return{search:a,updatedMenu:()=>{n("onUpdatedMenu",r.length)},updatedSearch:o}}};const F={class:"d-flex flex-column flex-lg-row align-items-center justify-content-between"},S={class:"row"},k=a("div",{class:"col-auto"},[a("label",{for:"inputSearch"},"Show")],-1),T={class:"col-auto"},_=["value"],x=a("div",{class:"col-auto"},[a("label",{for:"inputSearch",class:"col-form-label"},"Entries")],-1),M={class:"row"},C=a("div",{class:"col-auto"},[a("label",{class:"col-form-label"},"Search")],-1),P={class:"col-auto"};U.render=function(e,t,u,m,p,b){return r(),n("div",F,[a("div",S,[k,a("div",T,[o(a("select",{class:"form-select form-select-sm","onUpdate:modelValue":t[0]||(t[0]=e=>u.length=e),onChange:t[1]||(t[1]=e=>m.updatedMenu())},[(r(!0),n(s,null,l(u.lengthMenu,(e=>(r(),n("option",{key:e,value:e},d(e),9,_)))),128))],544),[[c,u.length]])]),x]),a("div",M,[C,a("div",P,[o(a("input",{type:"search",class:"form-control form-control-sm","onUpdate:modelValue":t[2]||(t[2]=e=>m.search=e),onInput:t[3]||(t[3]=e=>m.updatedSearch())},null,544),[[i,m.search]])])])])},U.__file="src/Header.vue";var A={name:"Footer",props:{length:Number,start:Number,recordsFiltered:Number,recordsTotal:Number},emits:["onUpdatedPagination"],setup(e,{emit:t}){const r=u({paginations:[],start:e.start,length:e.length,number:1,next:{number:0,class:"disabled"},before:{number:0,class:"disabled"},startF:0,toF:0,filteredStr:""});return m(e,(()=>{r.start!=e.start&&(r.number=1),r.start=e.start,r.recordsFiltered=e.recordsFiltered,r.recordsTotal=e.recordsTotal,r.length=e.length,(()=>{let e=Math.ceil(r.recordsFiltered/r.length),t=[...Array(e-1+1).keys()].map((e=>e+1));t.length>7&&(t=r.number>=1&&r.number<=4?[...t.slice(0,5),0,t.at(-1)]:r.number<=t.at(-1)&&r.number>=t.at(-4)?[t.at(0),0,...t.slice(t.at(-1)-5,t.at(-1))]:[t.at(0),0,...t.slice(r.number-2,r.number+1),0,t.at(-1)]),r.paginations=t.map((e=>({number:0!=e?e:"...",class:0!=e?r.number==e?"active":"":"disabled"})));const n=r.paginations.find((e=>"active"==e.class&&e.number>1)),a=r.paginations.find((e=>"active"==e.class&&e.number<r.paginations.at(-1).number));n?(r.before.number=n.number-1,r.before.class=""):r.before={number:0,class:"disabled"},a?(r.next.number=a.number+1,r.next.class=""):r.next={number:0,class:"disabled"},r.number==t.at(-1)?(r.startF=r.start+1,r.toF=r.recordsFiltered):(r.startF=r.start+1,r.toF=r.number*r.length),r.filteredStr=r.recordsFiltered!=r.recordsTotal?`(filtered from ${r.recordsTotal} total entries)`:""})()})),{...p(r),updatedPagination:e=>{"..."!=e.number&&r.number!=e.number&&(r.number=e.number,r.start=r.length*e.number-r.length,t("onUpdatedPagination",r.start))}}}};const j={class:"d-flex flex-column flex-lg-row align-items-center justify-content-between"},N={class:"pagination"},q=["onClick"];function E(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}E("\nli[data-v-b672bd58] {\r\n        cursor: pointer;\n}\r\n"),A.render=function(e,t,o,c,i,u){return r(),n("div",j,[a("div",null,"Showing "+d(e.startF)+" to "+d(e.toF)+" of "+d(o.recordsFiltered)+" entries "+d(e.filteredStr),1),a("nav",null,[a("ul",N,[a("li",{class:b(["page-item",e.before.class])},[a("a",{class:"page-link",onClick:t[0]||(t[0]=t=>c.updatedPagination(e.before))},"Previous")],2),(r(!0),n(s,null,l(e.paginations,((e,t)=>(r(),n("li",{key:t,class:b(["page-item",e.class])},[a("a",{class:"page-link",onClick:t=>c.updatedPagination(e)},d(e.number),9,q)],2)))),128)),a("li",{class:b(["page-item",e.next.class])},[a("a",{class:"page-link",onClick:t[1]||(t[1]=t=>c.updatedPagination(e.next))},"Next")],2)])])])},A.__scopeId="data-v-b672bd58",A.__file="src/Footer.vue";const H=require("./sort_asc.png"),B=require("./sort_desc.png"),I=require("./sort_both.png");var L={props:{columns:Array,order:Object},emits:["onUpdatedOrder"],setup(e,{emit:t}){const r=u({column:e.order.column,dir:e.order.dir}),n="ASC",a="DESC",o=t=>!1!==e.columns[t].orderable;return{sort:(e=0)=>{o(e)&&(r.column===e&&r.dir===n?r.dir=a:r.dir=n,r.column=e,t("onUpdatedOrder",{...r}))},imgSort:(e=0,t=n)=>r.column===e?r.dir===t?H:B:I,isSort:o}}};const V={class:"table-light"},$=["onClick"],D=["src"];E("\nth[data-v-9f8fad32]:hover {\r\n        cursor: pointer;\n}\r\n"),L.render=function(e,t,o,c,i,u){return r(),n("thead",V,[a("tr",null,[(r(!0),n(s,null,l(o.columns,((e,t)=>(r(),n("th",{key:t,"data-sortable":"true",onClick:e=>c.sort(t)},[a("span",null,d(e.label),1),c.isSort(t)?(r(),n("img",{key:0,src:c.imgSort(t)},null,8,D)):h("v-if",!0)],8,$)))),128))])])},L.__scopeId="data-v-9f8fad32",L.__file="src/table/Header.vue";var G={name:"Body",props:{rows:Array,columns:Array}};const R={key:0},J={key:1};G.render=function(e,t,a,o,c,i){return r(),n("tbody",null,[(r(!0),n(s,null,l(a.rows,((e,t)=>(r(),n("tr",{key:t},[(r(!0),n(s,null,l(a.columns,((t,a)=>(r(),n(s,{key:a},[Object.keys(e).find((e=>e===t.data))?(r(),n("td",R,d(e[t.data]),1)):t.component?(r(),n("td",J,[(r(),g(f(t.component),{row:e,column:t},null,8,["row","column"]))])):h("v-if",!0)],64)))),128))])))),128))])},G.__file="src/table/Body.vue";var z={name:"Table",props:{columns:Array,order:Object,rows:Array},components:{Header:L,Body:G},emits:["onUpdatedOrder"],setup:(e,{emit:t})=>({onUpdatedOrder:e=>{t("onUpdatedOrder",e)}})};const K={class:"table table-hover table-responsive align-middle"};z.render=function(e,t,a,o,s,l){const d=y("Header"),c=y("Body");return r(),n("table",K,[v(d,{columns:a.columns,order:a.order,onOnUpdatedOrder:o.onUpdatedOrder},null,8,["columns","order","onOnUpdatedOrder"]),v(c,{columns:a.columns,rows:a.rows},null,8,["columns","rows"])])},z.__file="src/table/General.vue";var Q={name:"JlDatatable",props:{url:String,requestOptions:{type:Object,default:{}},columns:Array,order:{type:Object,default:{column:0,dir:"ASC"}},pageLength:{type:Number,default:10},lengthMenu:{type:Array,default:[10,25,50,100]},reset:String},emits:["gettingEntries","entriesFetched"],components:{Footer:A,Header:U,Table:z},setup(e,{emit:t}){const r=u({columns:e.columns,length:e.pageLength,start:0,search:"",order:e.order,start:0,recordsFiltered:0,recordsTotal:0,rows:[]}),n=async()=>{const n={columns:[...r.columns].map(a),length:r.length,search:r.search,order:r.order,start:r.start},o=O.stringify(n,{encode:!1}),s=`${e.url}?${o}`,l=await function(e,t={}){return{sendRequest:async()=>{try{0===Object.keys(t).length&&(t={method:"GET",headers:{"Content-Type":"application/json"}});const r=await fetch(e,t);return await r.json()}catch(e){throw e}}}}(s,{...e.requestOptions});t("gettingEntries");const d=await l.sendRequest();t("entriesFetched"),r.rows=d.data,r.recordsFiltered=d.recordsFiltered,r.recordsTotal=d.recordsTotal},a=e=>{const t={...e};return t.hasOwnProperty("orderable")||(t.orderable=!0),t.hasOwnProperty("searchable")||(t.searchable=!0),t.hasOwnProperty("component")&&delete t.component,t};return w((async()=>{n()})),m((()=>e.reset),((t,a)=>{r.columns=e.columns,r.length=e.pageLength,r.order=e.order,r.start=0,r.search="",r.recordsFiltered=0,r.recordsTotal=0,r.rows=[],n()})),{...p(r),onUpdatedMenu:e=>{r.length=e,r.start=0,n()},onUpdatedSearch:e=>{r.search=e,r.start=0,n()},onUpdatedOrder:e=>{r.order=e,r.start=0,n()},onUpdatedPagination:e=>{r.start=e,n()}}}};const W={class:"row"};function X(e){X.installed||(X.installed=!0,e.component("Main",Q))}Q.render=function(e,t,o,l,d,c){const i=y("Header"),u=y("Table"),m=y("Footer");return r(),n(s,null,[v(i,{lengthMenu:o.lengthMenu,length:e.length,onOnUpdatedMenu:l.onUpdatedMenu,onOnUpdatedSearch:l.onUpdatedSearch},null,8,["lengthMenu","length","onOnUpdatedMenu","onOnUpdatedSearch"]),a("div",W,[v(u,{columns:o.columns,order:o.order,rows:e.rows,onOnUpdatedOrder:l.onUpdatedOrder},null,8,["columns","order","rows","onOnUpdatedOrder"]),v(m,{length:e.length,start:e.start,recordsFiltered:e.recordsFiltered,recordsTotal:e.recordsTotal,onOnUpdatedPagination:l.onUpdatedPagination},null,8,["length","start","recordsFiltered","recordsTotal","onOnUpdatedPagination"])])],64)},Q.__file="src/Main.vue";const Y={install:X};let Z=null;"undefined"!=typeof window?Z=window.Vue:"undefined"!=typeof global&&(Z=global.vue),Z&&Z.use(Y),Q.install=X;export{Q as default};