vue3-pivot-data-table
Version:
A non-aggregating Vue3 table component for presenting pivot-like data
2 lines (1 loc) • 20 kB
JavaScript
(function(e,q){typeof exports=="object"&&typeof module<"u"?module.exports=q(require("vue")):typeof define=="function"&&define.amd?define(["vue"],q):(e=typeof globalThis<"u"?globalThis:e||self,e.Vue3PivotDataTable=q(e.Vue))})(this,function(e){"use strict";const q={items:{type:Array,default:()=>[],required:!0,description:"Array of data objects, should be a flat array."},measures:{type:Array,default:()=>[],required:!0,description:"Array of Measure objects representing the metrics"},dimensions:{type:Array,default:()=>[],description:"Array of Dimension objects representing the row-dimensions"},pivot:{type:Object,default:null,description:"Single Pivot object representing the column-dimension. Limited to 1 for reduced complexity."},locale:{type:String,default:"en-US",description:"Locale setting for the table."},currentPage:{type:Number,default:1,description:"Current page number."},noRowsCustom:{type:Boolean,default:!1,description:"Indicates whether to use custom rows when no data is available."},emptyMessage:{type:String,default:"No Available Data",description:"Message to display when there is no available data."},filterOptions:{type:Array,default:null,description:"Array of filter options for the table."},hideFooter:{type:Boolean,default:!1,description:"Indicates whether to hide the table footer."},hideHeader:{type:Boolean,default:!1,description:"Indicates whether to hide the table header."},loading:{type:Boolean,default:!1,description:"Indicates whether the table is in a loading state."},rowsPerPage:{type:Number,default:25,description:"Number of rows per page."},searchField:{type:[String,Array],default:"",description:"Field or fields to search within."},rowsItems:{type:Array,default:()=>[25,50,100]},rowsOfPageSeparatorMessage:{type:String,default:"of"},searchValue:{type:String,default:"",description:"Value to search for within the specified field(s)."},showIndex:{type:Boolean,default:!1,description:"Indicates whether to display an index column."},showIndexSymbol:{type:String,default:"#",description:"Symbol used for the index column."},showIndexClass:{type:String,default:"",description:"Class used for the index column."},oddRowClass:{type:String,default:"odd-row",description:"CSS class applied to odd-numbered rows."},evenRowClass:{type:String,default:"even-row",description:"CSS class applied to even-numbered rows."},oddRowCellClass:{type:String,default:"odd-row-cell",description:"CSS class applied to cells in odd-numbered rows."},customTableRowClass:{type:Function,default:()=>null,description:"Custom function to apply classes to tablerows <tr>."},customTableDataClass:{type:Function,default:()=>null,description:"Custom function to apply classes to tablerows <td>."},evenRowCellClass:{type:String,default:"even-row-cell",description:"CSS class applied to cells in even-numbered rows."},sortBy:{type:String,default:"",description:"Field or fields to sort by."},sortType:{type:String,default:"asc",description:"Sort type or types (ascending or descending)."},sortPivotValue:{type:String,default:"",description:"Sort pivotValue when pivot is active"},tableClassName:{type:String,default:"",description:"CSS class applied to the table element."},innerTableClassName:{type:String,default:"",description:"CSS class applied to the inner table element."},headerClassName:{type:String,default:"",description:"CSS class applied to the table header element."},mustSort:{type:Boolean,default:!1,description:"Indicates whether sorting is required."},tableNodeId:{type:String,default:"",description:"ID attribute for the table element."},nullFillText:{type:String,default:"-",description:"Text to be shown if cellvalue is null"},splitDimensionHeaders:{type:Boolean,default:!1,description:"Forces spit of dimension headers into separate cells."}};function L(r,l){if(r.includes(".")){const d=r.split("."),{length:u}=d;let s,f=0;for(;f<u;){if(f===0)s=l[d[0]];else if(s&&typeof s=="object")s=s[d[f]];else{s="";break}f+=1}return s??""}return l[r]}function te(r,l,d,u){return r==null?u:Array.isArray(r)?r.join(", "):(l.formatFunc?r=l.formatFunc(r):l.numberFormat&&(r=new Intl.NumberFormat(d,l.numberFormat).format(r)),l.prefix&&(r=l.prefix+r),l.suffix&&(r=r+l.suffix),r)}function re(r,l,d,u){const s=L(r.value,l);return te(s,r,d,u)}function ne(r,l,d,u,s){var x;let f;return r.pivotValue?f=(x=l.items.find(V=>V[d.value]===r.pivotValue))==null?void 0:x[r.value]:f=L(r.value,l.dimensions),te(f,r,u,s)}function ce(r,l,d,u,s,f,x,V,S){const M=k=>{if(typeof x.value=="string"&&x.value!=="")return L(x.value,k);if(Array.isArray(x.value)){let o="";return x.value.forEach(g=>{o+=L(g,k)}),o}return Object.values(k).join(" ")},$=e.computed(()=>{if(s.value){const k=f.value.map(g=>g.value),o=u.value.reduce((g,w)=>{const h=k.map(C=>w[C]).join("|"),y=g.find(C=>C.key===h);if(y)y.items.push(w);else{const C=Object.fromEntries(Object.entries(w).filter(([m])=>k.includes(m)));g.push({key:h,dimensions:C,items:[w]})}return g},[]);if(V.value!==""){const g=new RegExp(V.value,"i");return o.filter(w=>g.test(w.key))}return o}if(V.value!==""){const k=new RegExp(V.value,"i");return u.value.filter(o=>k.test(M(o)))}return u.value}),E=e.computed(()=>{let k=[...$.value];return s.value?k:d.value?(d.value.forEach(o=>{k=k.filter(g=>{const{field:w,comparison:h,criteria:y}=o;if(typeof h=="function")return h(L(w,g),y);const C=L(w,g);if(C===null)return!1;switch(h){case"=":return C===y;case"!=":return C!==y;case">":return C>y;case"<":return C<y;case"<=":return C<=y;case">=":return C>=y;case"between":return C>=Math.min(...y)&&C<=Math.max(...y);case"in":return Array.isArray(y)?y.includes(C):!0;default:return C===y}})}),k):$.value});e.watch(E,k=>{d.value&&S("updateFilter",k)},{immediate:!0,deep:!0});const A=e.computed(()=>{var m;if(l.value===null)return E.value;const k=[...E.value],{sortBy:o,sortDesc:g,sortPivotValue:w}=l.value,h=(m=r.value.find(c=>c.value===o))==null?void 0:m.sortFunc,y=s.value;return k.sort((c,i)=>{var P,T,I,O;let n,p;return y?w?(n=h?h((P=c.items.find(D=>D[y.value]===w))==null?void 0:P[o]):(T=c.items.find(D=>D[y.value]===w))==null?void 0:T[o],p=h?h((I=i.items.find(D=>D[y.value]===w))==null?void 0:I[o]):(O=i.items.find(D=>D[y.value]===w))==null?void 0:O[o]):(n=h?h(c.dimensions[o]):c.dimensions[o],p=h?h(i.dimensions[o]):i.dimensions[o]):(n=h?h(L(o,c)):L(o,c),p=h?h(L(o,i)):L(o,i)),n==null&&p!=null?1:n!=null&&p==null?-1:n==null&&p==null?0:n<p?g?1:-1:n>p?g?-1:1:0})}),z=e.computed(()=>A.value.length);return{totalItems:A,totalItemsLength:z}}function de(r,l,d,u,s,f,x,V,S,M,$,E,A){const z=e.computed(()=>{const m=s.value;return m?[...new Set(r.value.map(c=>c[m.value]))]:[]}),k=(m,c,i)=>m&&m!==""?{sortBy:m,sortDesc:c==="desc",sortPivotValue:i}:null,o=e.ref(k(S.value,M.value,$.value));let g=[];const w=e.computed(()=>{if(s.value){const i=z.value.flatMap((n,p)=>{const P=u.value.map(T=>({...T,pivotValue:n}));return[{...P[0],colType:`firstEntry ${p%2===0?"evenPivot":"oddPivot"}`},...P.slice(1).map(T=>({...T,colType:`nonFirstEntry ${p%2===0?"evenPivot":"oddPivot"}`}))]});g=[...d.value.map(n=>({...n,type:"tableRow"})),...i.map(n=>({...n,type:"tableValue"}))]}else g=[...d.value.map(i=>({...i,type:"tableRow"})),...u.value.map(i=>({...i,type:"tableValue"}))];const m=g.map(i=>{const n=Object.assign(i);return n.sortable&&(n.sortType="none"),o.value&&n.value===o.value.sortBy&&o.value.sortPivotValue?o.value.sortPivotValue===n.pivotValue?n.sortType=o.value.sortDesc?"desc":"asc":n.sortType="none":o.value&&n.value===o.value.sortBy&&(n.sortType=o.value.sortDesc?"desc":"asc"),n});let c=[];return x.value?c=[{text:l.value,value:"index",cssClass:V.value},...m.map(n=>({...n,cssClass:[n.cssClass??"",n.colType].join(" ")}))]:c=m.map(i=>({...i,cssClass:[i.cssClass??"",i.colType].join(" ")})),c}),h=e.computed(()=>{const m=[];if(s.value){const c=s.value,i=w.value.reduce((n,p)=>{var O,D;const P=p.pivotValue;let T;p.pivotValue?c.formatFunc?T=c.formatFunc(p.pivotValue):T=p.pivotValue:T=null;const I=n[n.length-1];return I&&(p.type==="tableValue"||!E.value)&&(((O=I.parent)==null?void 0:O.text)!==null||((D=p.parent)==null?void 0:D.text)!==null)&&I.text===T&&!I.isIndex&&I.originalText===P?I.count++:n.push({type:"pivot",isIndex:p.value==="index",text:T,originalText:P,count:1,cssClass:p.cssClass??"",parent:p.parent}),n},[]);m.push(i)}if(w.value.findIndex(c=>c.parent)>-1){const c=w.value.reduce((i,n)=>{var I;const p=((I=n.parent)==null?void 0:I.text)||null,P=n.pivotValue,T=i[i.length-1];return T&&(n.type==="tableValue"||!E.value)&&(T.text!==null||p!==null)&&T.text===p&&!T.isIndex&&T.pivotValue===P?T.count++:i.push({type:"parent",isIndex:n.value==="index",pivotValue:P,text:p,count:1,cssClass:n.cssClass??""}),i},[]);m.push(c)}return m}),y=e.computed(()=>w.value.map(m=>m.value));return{clientSortOptions:o,headerColumns:y,headersForRenderParents:h,headersForRender:w,updateSortField:(m,c,i=!1,n=void 0,p=!1)=>{let P=null;i?P=c==="none"?null:c:c==="none"?P="asc":c==="asc"?P="desc":P=f.value?"asc":null,P===null?o.value=null:o.value={sortBy:m,sortDesc:P==="desc",sortPivotValue:n},p||A("updateSort",{sortPivotValue:n,sortType:P,sortBy:m})}}}function pe(r,l){const d=e.computed(()=>r.value.findIndex(f=>f===l.value)===-1?[l.value,...r.value]:r.value),u=e.ref(l.value);return{rowsItemsComputed:d,rowsPerPageRef:u,updateRowsPerPage:f=>{u.value=f}}}function fe(r,l,d,u){const s=e.ref(r.value),f=e.computed(()=>Math.ceil(d.value/u.value)),x=e.computed(()=>f.value===0||s.value===f.value),V=e.computed(()=>s.value===1);return{currentPaginationNumber:s,maxPaginationNumber:f,isLastPage:x,isFirstPage:V,nextPage:()=>{d.value!==0&&(x.value||l.value||(s.value+=1))},prevPage:()=>{d.value!==0&&(V.value||l.value||(s.value-=1))},updatePage:A=>{l.value||(s.value=A)},updateCurrentPaginationNumber:A=>{s.value=A}}}function me(r,l,d,u,s){const f=e.computed(()=>(r.value-1)*l.value+1),x=e.computed(()=>Math.min(u.value.length,r.value*l.value)),V=e.computed(()=>l.value===-1?u.value:u.value.slice(f.value-1,x.value)),S=e.computed(()=>d.value?s.value?V.value.map(($,E)=>($.dimensions={index:f.value+E,...$.dimensions},$)):V.value.map(($,E)=>({index:f.value+E,...$})):V.value),M=e.computed(()=>S.value);return{currentPageFirstIndex:f,currentPageLastIndex:x,pageItems:M}}const ge=[{name:"scroll",description:"Triggered when scrolling"},{name:"clickRow",description:"Triggered when a row is clicked"},{name:"clickCell",description:"Triggered when a cell is clicked"},{name:"updateSort",description:"Triggered when sorting is updated"},{name:"updateFilter",description:"Triggered when filtering is updated"},{name:"updatePageItems",description:"Triggered when page items are updated"},{name:"updateTotalItems",description:"Triggered when total items are updated"},{name:"mouseover",description:"Triggered when mouse is over"},{name:"mouseleave",description:"Triggered when mouse leaves"}].map(r=>r.name),ye=["id"],Se=["colspan"],be={class:"header"},we={key:3,class:"header-text"},he=["onClick"],ke={class:"header"},Ce={key:3,class:"header-text"},Pe=["id"],Te=["role","onClick","onMouseover","onMouseleave"],Be={id:"errors"},Ve={style:{color:"red"}},xe={key:6},Fe=e.defineComponent({__name:"PivotDataTable",props:q,emits:ge,setup(r,{expose:l,emit:d}){const u=e.ref([]),s=e.ref();e.provide("dataTable",s);const f=r,{measures:x,dimensions:V,pivot:S,locale:M,tableNodeId:$,currentPage:E,filterOptions:A,emptyMessage:z,noRowsCustom:k,items:o,loading:g,mustSort:w,rowsItems:h,rowsPerPage:y,searchField:C,searchValue:m,showIndex:c,sortBy:i,sortType:n,sortPivotValue:p,showIndexSymbol:P,showIndexClass:T,nullFillText:I,hideFooter:O,customTableRowClass:D,customTableDataClass:Ie,splitDimensionHeaders:Ee}=e.toRefs(f),R=e.useSlots(),G=d,{clientSortOptions:Ne,headersForRenderParents:$e,headersForRender:_,updateSortField:W}=de(o,P,V,x,S,w,c,T,i,n,p,Ee,G),{totalItems:oe,totalItemsLength:U}=ce(_,Ne,A,o,S,V,C,m,G),{rowsItemsComputed:De,rowsPerPageRef:K,updateRowsPerPage:Re}=pe(h,y),{currentPaginationNumber:Y,maxPaginationNumber:Z,isLastPage:se,isFirstPage:le,nextPage:J,prevPage:Q,updatePage:X}=fe(E,g,U,K),{currentPageFirstIndex:v,currentPageLastIndex:ee,pageItems:ae}=me(Y,K,c,oe,S),Ae=(a,N,t,b)=>{G("clickCell",a,N,t,b)};e.watch(K,()=>{X(1)}),e.watch([m,A],()=>{X(1)}),e.watch([o,S],()=>{Le()},{immediate:!0});const ie=e.ref(!1);function Le(){u.value=[],S.value&&Array.isArray(S.value)?u.value.push({type:"propError",text:"pivot is of type Array"}):S.value&&Me()&&u.value.push({type:"dataShapeError",text:"duplicate item Objects (by rows * columns) found in items"})}e.onMounted(()=>{s.value.addEventListener("scroll",()=>{ie.value=s.value.scrollLeft>0})}),l({currentPageFirstIndex:v,currentPageLastIndex:ee,clientItemsLength:U,totalItems:oe,maxPaginationNumber:Z,currentPaginationNumber:Y,isLastPage:se,isFirstPage:le,nextPage:J,prevPage:Q,updatePage:X,updateSortField:W,rowsPerPageOptions:De,rowsPerPageActiveOption:K,updateRowsPerPageActiveOption:Re});function Me(){const a=S.value;if(!a)return!1;const N=[...V.value.map(b=>b.value),a.value],t=new Set;for(let b=0;b<o.value.length;b++){const B=N.map(F=>o.value[b][F]).join("|");if(t.has(B))return!0;t.add(B)}return!1}return(a,N)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"dataTable",ref:s,class:e.normalizeClass(["vue3-pivot-data-table",[a.tableClassName]]),onScroll:N[0]||(N[0]=t=>a.$emit("scroll",t))},[e.createElementVNode("table",{id:e.unref($),class:e.normalizeClass({[a.innerTableClassName]:!0,"show-shadow":ie.value})},[e.unref(R)["customize-headers"]?e.renderSlot(a.$slots,"customize-headers",e.normalizeProps(e.mergeProps({key:0},{headersForRender:e.unref(_),updateSortField:e.unref(W)})),void 0,!0):e.unref(_).length&&!a.hideHeader?(e.openBlock(),e.createElementBlock("thead",{key:1,class:e.normalizeClass([a.headerClassName])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref($e),(t,b)=>(e.openBlock(),e.createElementBlock("tr",{key:"headerRowGroup"+b},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t,(B,F)=>(e.openBlock(),e.createElementBlock("th",{key:"pivotHeader"+F,colspan:B.count,class:e.normalizeClass([{shadow:F===0,[B.cssClass??""]:!0,[B.type??""]:!0}])},[e.createElementVNode("span",be,[e.unref(R)[`header-${B.type}-${B.text}`]?e.renderSlot(a.$slots,`header-${B.type}-${B.text}`,e.mergeProps({key:0,ref_for:!0},B),void 0,!0):e.unref(R)[`header-${B.type}`]?e.renderSlot(a.$slots,`header-${B.type}`,e.mergeProps({key:1,ref_for:!0},B),void 0,!0):e.unref(R).header?e.renderSlot(a.$slots,"header",e.mergeProps({key:2,ref_for:!0},B),void 0,!0):(e.openBlock(),e.createElementBlock("span",we,e.toDisplayString(B.text),1))])],10,Se))),128))]))),128)),e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(_),(t,b)=>(e.openBlock(),e.createElementBlock("th",{key:b,role:"button",tabindex:0,class:e.normalizeClass([{sortable:t.sortable,none:t.sortable&&t.sortType==="none",desc:t.sortable&&t.sortType==="desc",asc:t.sortable&&t.sortType==="asc",shadow:b===0,[t.cssClass??""]:!0,[t.type??""]:!0}]),onClick:e.withModifiers(B=>t.sortable&&t.sortType?e.unref(W)(t.value,t.sortType,!1,t.pivotValue):null,["stop"])},[e.createElementVNode("span",ke,[e.unref(R)[`header-${t.value}`]?e.renderSlot(a.$slots,`header-${t.value}`,e.mergeProps({key:0,ref_for:!0},t),void 0,!0):e.unref(R)[`header-${t.value.toLowerCase()}`]?e.renderSlot(a.$slots,`header-${t.value.toLowerCase()}`,e.mergeProps({key:1,ref_for:!0},t),void 0,!0):e.unref(R).header?e.renderSlot(a.$slots,"header",e.mergeProps({key:2,ref_for:!0},t),void 0,!0):(e.openBlock(),e.createElementBlock("span",Ce,e.toDisplayString(t.text),1)),t.sortable&&e.unref(R)["sort-icon"]?e.renderSlot(a.$slots,"sort-icon",e.mergeProps({key:4,ref_for:!0},t),void 0,!0):t.sortable?(e.openBlock(),e.createElementBlock("i",{key:t.sortType?t.sortType:"none",class:e.normalizeClass(["sortType-icon",{desc:t.sortType==="desc"}])},null,2)):e.createCommentVNode("",!0)])],10,he))),128))])],2)):e.createCommentVNode("",!0),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(ae),(t,b)=>{var B;return e.openBlock(),e.createElementBlock("tr",{id:`row-${b}`,key:b,class:e.normalizeClass([{[a.oddRowClass]:(b+1)%2===0},{[a.evenRowClass]:b%2===0},...((B=e.unref(D))==null?void 0:B({index:b,item:t}))??[]]),role:"button",tabindex:0},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(_),(F,H)=>{var ue;return e.openBlock(),e.createElementBlock("td",{key:H,role:e.unref(_)[H].clickable||e.unref(_)[H].hoverable?"button":"",tabindex:"0",class:e.normalizeClass([{[a.oddRowCellClass]:(b+1)%2===0,[a.evenRowCellClass]:b%2===0,shadow:H===0,[F.cssClass??""]:!0,[F.type??""]:!0},...((ue=e.unref(Ie))==null?void 0:ue({header:F,item:e.unref(S)&&F.pivotValue?t.items.find(j=>j[e.unref(S).value]===F.pivotValue):e.unref(S)?t.dimensions:t,index:b}))??[]]),onClick:j=>Ae(t,e.unref(_)[H],b,j),onMouseover:j=>G("mouseover",t,e.unref(_)[H],j),onMouseleave:j=>G("mouseleave",t,j)},[e.unref(R)[`item-${F.value}`]?e.renderSlot(a.$slots,`item-${F.value}`,e.mergeProps({key:0,ref_for:!0},e.unref(S)&&F.pivotValue?t.items.find(j=>j[e.unref(S).value]===F.pivotValue):e.unref(S)?t.dimensions:t),void 0,!0):e.unref(R).item?e.renderSlot(a.$slots,"item",e.mergeProps({key:1,ref_for:!0},{pivot:e.unref(S),item:t}),void 0,!0):e.unref(S)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(e.unref(ne)(F,t,e.unref(S),e.unref(M),e.unref(I))),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createTextVNode(e.toDisplayString(e.unref(re)(F,t,e.unref(M),e.unref(I))),1)],64))],42,Te)}),128))],10,Pe)}),128))]),e.unref(R)["customize-footers"]?e.renderSlot(a.$slots,"customize-footers",e.normalizeProps(e.mergeProps({key:2},{headersForRender:e.unref(_),updateSortField:e.unref(W),generateCellContentBasedOnPivot:e.unref(ne),generateCellContent:e.unref(re),locale:e.unref(M)})),void 0,!0):e.createCommentVNode("",!0)],10,ye)],34),u.value.length?e.renderSlot(a.$slots,"errors",{key:0},()=>[e.createElementVNode("div",Be,[e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(t,b)=>(e.openBlock(),e.createElementBlock("li",{key:"error"+b},[e.createElementVNode("span",Ve,e.toDisplayString(t.type)+":",1),e.createTextVNode(" "+e.toDisplayString(t.text),1)]))),128))])])],!0):e.unref(g)?e.renderSlot(a.$slots,"loading",{key:1},()=>[N[3]||(N[3]=e.createTextVNode(" Slot: loading ",-1))],!0):!e.unref(o).length&&!e.unref(g)&&e.unref(k)?e.renderSlot(a.$slots,"no-rows-custom",{key:2},()=>[N[4]||(N[4]=e.createTextVNode(" Slot: no-rows-custom ",-1))],!0):!e.unref(o).length&&!e.unref(g)?e.renderSlot(a.$slots,"no-rows",{key:3},()=>[e.createTextVNode(e.toDisplayString(e.unref(z)),1)],!0):!e.unref(ae).length&&!e.unref(g)?e.renderSlot(a.$slots,"empty-message",{key:4},()=>[e.createTextVNode(e.toDisplayString(e.unref(z)),1)],!0):e.createCommentVNode("",!0),e.unref(R).footer?e.renderSlot(a.$slots,"footer",e.normalizeProps(e.mergeProps({key:5},{currentPageFirstIndex:e.unref(v),currentPageLastIndex:e.unref(ee),rowsOfPageSeparatorMessage:a.rowsOfPageSeparatorMessage,totalItemsLength:e.unref(U),isFirstPage:e.unref(le),isLastPage:e.unref(se),currentPaginationNumber:e.unref(Y),maxPaginationNumber:e.unref(Z),nextPage:e.unref(J),prevPage:e.unref(Q),updatePage:e.unref(X)})),void 0,!0):e.unref(O)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",xe,[e.createTextVNode(e.toDisplayString(`${e.unref(v)}–${e.unref(ee)}`)+" "+e.toDisplayString(a.rowsOfPageSeparatorMessage)+" "+e.toDisplayString(e.unref(U))+" ",1),e.createElementVNode("button",{onClick:N[1]||(N[1]=(...t)=>e.unref(Q)&&e.unref(Q)(...t))},e.toDisplayString("<")),e.createTextVNode(" "+e.toDisplayString(e.unref(E))+" of "+e.toDisplayString(e.unref(Z))+" ",1),e.createElementVNode("button",{onClick:N[2]||(N[2]=(...t)=>e.unref(J)&&e.unref(J)(...t))},">")]))],64))}}),je="";return((r,l)=>{const d=r.__vccOpts||r;for(const[u,s]of l)d[u]=s;return d})(Fe,[["__scopeId","data-v-3ba830dc"]])});