@vielzeug/refine 1.8.0 → 2.0.0

package/dist/datagrid.cjs

@@ -1,22 +1,27 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/table-base.css.cjs"),t=require("./_dev.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./headless/ore.cjs"),i=require("./headless/datagrid.cjs"),a=require("./inputs/datagrid/datagrid-column.cjs"),o=require("./inputs/datagrid/datagrid-controls.cjs"),s=require("./inputs/datagrid/datagrid-nav.cjs"),c=require("./inputs/datagrid/datagrid.css.cjs");let l=require("@vielzeug/ore"),u=require("@vielzeug/ripple"),d=require("@vielzeug/arsenal"),f=require("@vielzeug/ore/directives");function p(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function m(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}var h=`ore-datagrid`;(0,l.define)(h,{props:{activeView:l.prop.string(),density:l.prop.string(),...n.disablableBundle,...n.loadableBundle,columns:l.prop.data(),emptyText:l.prop.string(`No data`),expandable:l.prop.bool(!1),filterOptions:l.prop.data(),fullwidth:l.prop.bool(!1),getRowKey:l.prop.data(),label:l.prop.string(),pageSize:l.prop.number(10),pageSizeOptions:l.prop.data(),rows:l.prop.data(),searchLabel:l.prop.data(),searchPlaceholder:l.prop.string(`Search…`),selectedKeys:l.prop.data(),selectionMode:l.prop.string(`none`),sortMode:l.prop.string(`client`),source:l.prop.data(),striped:l.prop.bool(!1),views:l.prop.data()},setup(e){let n=(0,l.getHost)(),c=(0,l.useEmit)(),h=(0,l.useSlots)(),g=(0,u.computed)(()=>e.disabled.value===!0),_=(0,u.computed)(()=>e.selectionMode.value??`none`),v=(0,u.signal)(new Set),y=(0,u.computed)(()=>e.expandable.value===!0&&C.value.some(e=>typeof e.renderExpanded==`function`)),b=(0,u.computed)(()=>+(_.value===`multi`)),x=(0,u.signal)(e.pageSize.value??10);(0,u.watch)(e.pageSize,e=>{e!=null&&(x.value=e)});let S=(0,u.signal)([]);(0,l.onMounted)(()=>{S.value=a.parseColumnChildren(n);let e=new MutationObserver(()=>{S.value=a.parseColumnChildren(n)});return e.observe(n,{attributeFilter:a.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let C=(0,u.computed)(()=>{let t=e.columns.value;return t===void 0?S.value:t}),w=n=>{let r=e.getRowKey.value;if(r)return r(n);let i=n.id;return i==null?(t.warn("ore-datagrid: row missing `id` — keys will collide. Provide `getRowKey` or add a unique `id` field."),`__missing_${Math.random().toString(36).slice(2)}`):String(i)},T=o.createDataGridControls({columns:C,filterOptions:e.filterOptions,rows:(0,u.computed)(()=>e.rows.value??[])}),E=(0,d.debounce)(t=>{let n=t,r=e.source.value;r?.search?r.search(n):T.setSearchQuery(n)},250),D=(0,u.computed)(()=>e.source.value!=null),O=(0,u.signal)([]),k=(0,u.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:x.value,totalItems:0}),A=null;(0,l.onCleanup)(()=>{A?.(),A=null}),(0,u.watch)(e.source,e=>{if(A?.(),A=null,!e){O.value=[],k.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:x.value,totalItems:0};return}let t=()=>{O.value=e.current,k.value=e.meta};t(),A=e.subscribe(t)},{immediate:!0});let j=i.createDataGridControl({columns:()=>C.value,getRowKey:w,items:(0,u.computed)(()=>D.value?O.value:T.filteredRows.value),onSelectionChange:e=>{c(`selection-change`,{keys:[...e],rows:j.selectedRows.value})},onSortChange:e=>{c(`sort-change`,e)},pageSize:()=>D.value?0:x.value,selectionMode:()=>_.value,signal:r.lifecycleSignal(l.onCleanup)});(0,u.watch)(e.selectedKeys,e=>{Array.isArray(e)&&j.setSelection(new Set(e))},{immediate:!0});let M=(0,u.signal)({}),N=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{M.value={...M.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},P=(0,u.computed)(()=>C.value.filter(e=>!T.hiddenColumns.value.has(e.key))),F=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};(0,u.watch)(T.filteredRows,()=>j.goToPage(0),{immediate:!1});function I(t){let n=e.source.value;if(n){t===`prev`?n.prev?.():n.next?.();return}t===`prev`?j.prevPage():j.nextPage(),c(`page-change`,{pageIndex:j.pageIndex.value,pageSize:x.value})}let L=(0,u.computed)(()=>{let e=j.currentPageItems.value;return!e.length||j.isAllSelected()?!1:e.some(e=>j.selectedKeys.value.has(w(e)))}),R=(0,u.computed)(()=>P.value.length+ +(_.value===`multi`)+ +!!y.value),z=(0,u.computed)(()=>D.value?k.value.pageCount>1:x.value>0),B=(0,u.computed)(()=>{if(D.value){let{pageNumber:e,pageSize:t,totalItems:n}=k.value,r=Math.max(1,t);if(!z.value)return`${n} row${n===1?``:`s`}`;if(n===0)return`0 to 0 of 0`;let i=(e-1)*r+1;return`${i} to ${Math.min(i+r-1,n)} of ${n}`}let e=j.totalItems.value;if(!z.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=j.pageIndex.value*x.value+1;return`${t} to ${Math.min(t+x.value-1,e)} of ${e}`}),V=(0,u.computed)(()=>e.loading.value===!0||D.value&&k.value.isLoading),H=(0,u.computed)(()=>D.value?k.value.pageNumber>1:j.hasPrevPage.value),U=(0,u.computed)(()=>D.value?k.value.pageNumber<k.value.pageCount:j.hasNextPage.value),W=(0,u.computed)(()=>D.value?k.value.totalItems===0?`0 / 0`:`${k.value.pageNumber} / ${k.value.pageCount}`:`${j.pageIndex.value+1} / ${j.pageCount.value}`),G=[`compact`,`cozy`,`comfortable`],K={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},q={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},J=(0,u.signal)(e.density.value??`cozy`);(0,u.watch)(e.density,e=>{e&&(J.value=e)});let Y=()=>{let e=G.indexOf(J.value),t=G[(e+1)%G.length];J.value=t,n.setAttribute(`density`,t),c(`density-change`,{density:t})},X=(0,u.signal)(!1),Z=e=>{let t=new Set(v.value),n=!t.has(e);n?t.add(e):t.delete(e),v.value=t,c(`row-expand`,{expanded:n,key:e})},Q={activeCell:(0,u.signal)({col:0,row:0}),focusCell:()=>{}};(0,l.onMounted)(()=>{let e=n.shadowRoot,t=e.querySelector(`.dg-table`);if(!t)return;let{cleanup:r,handle:i}=s.createGridNav(t,e);return Q=i,r}),n.focusCell=e=>Q.focusCell(e);let $=()=>{let t=e.views.value??[],n=e.activeView.value;return l.html`<div
-        class="dg-tabs"
-        role="tablist"
-        aria-label="Views"
-        aria-controls="dg-tabpanel"
-        @keydown="${e=>{if(![`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`.dg-tab`)),n=t.findIndex(e=>e.classList.contains(`dg-tab--active`)),r=n;if(e.key===`ArrowLeft`?r=Math.max(0,n-1):e.key===`ArrowRight`?r=Math.min(t.length-1,n+1):e.key===`Home`?r=0:e.key===`End`&&(r=t.length-1),r!==n){e.preventDefault();let n=t[r];n.focus(),n.click()}}}">
-        ${t.map(e=>l.html`<ore-button
-              class="${()=>`dg-tab${n===e.id?` dg-tab--active`:``}`}"
-              role="tab"
-              variant="ghost"
-              rounded="full"
-              size="sm"
-              :tabindex="${()=>n===e.id?`0`:`-1`}"
-              :aria-selected="${()=>String(n===e.id)}"
-              aria-controls="dg-tabpanel"
-              @click="${()=>{c(`view-change`,{id:e.id,label:e.label})}}">
-              ${e.label}
-            </ore-button>`)}
-      </div>`},ee=()=>l.html`<ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("./_dev.cjs");const e=require("./styles/mixins/table-base.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./inputs/datagrid/datagrid-column.cjs"),r=require("./inputs/datagrid/datagrid-model.cjs"),i=require("./inputs/datagrid/datagrid-nav.cjs"),a=require("./inputs/datagrid/datagrid.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/ripple/watch"),l=require("@vielzeug/arsenal/function");function u(e,t){return e.key!==t||e.direction===`none`?`chevrons-up-down`:e.direction===`asc`?`chevron-up`:`chevron-down`}function d(e,t){return e.key!==t||e.direction===`none`?`none`:e.direction===`asc`?`ascending`:`descending`}var f=`ore-datagrid`;(0,o.define)(f,{props:{activeView:o.prop.string(),density:o.prop.string(),...t.disablableBundle,...t.loadableBundle,columns:o.prop.data(),emptyText:o.prop.string(`No data`),expandable:o.prop.bool(!1),filterOptions:o.prop.data(),fullwidth:o.prop.bool(!1),getRowKey:o.prop.data(),label:o.prop.string(),pageSize:o.prop.number(10),pageSizeOptions:o.prop.data(),rows:o.prop.data(),searchLabel:o.prop.data(),searchPlaceholder:o.prop.string(`Search…`),selectedKeys:o.prop.data(),selectionMode:o.prop.string(`none`),sortMode:o.prop.string(`client`),source:o.prop.data(),striped:o.prop.bool(!1),views:o.prop.data()},setup(e){let t=(0,o.getHost)(),a=(0,o.useEmit)(),f=(0,o.useSlots)(),p=(0,s.computed)(()=>e.disabled.value===!0),m=(0,s.computed)(()=>e.selectionMode.value??`none`),h=(0,s.signal)(new Set),g=(0,s.computed)(()=>e.expandable.value===!0&&b.value.some(e=>typeof e.renderExpanded==`function`)),_=(0,s.computed)(()=>+(m.value===`multi`)),v=(0,s.signal)(e.pageSize.value??10);(0,c.watch)(e.pageSize,e=>{e!=null&&(v.value=e)});let y=(0,s.signal)([]);(0,o.onMounted)(()=>{y.value=n.parseColumnChildren(t);let e=new MutationObserver(()=>{y.value=n.parseColumnChildren(t)});return e.observe(t,{attributeFilter:n.COLUMN_OBSERVED_ATTRS,attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()});let b=(0,s.computed)(()=>{let t=e.columns.value;return t===void 0?y.value:t}),x=t=>{let n=e.getRowKey.value;if(n)return n(t);let r=t.id;return r==null?`__missing_${Math.random().toString(36).slice(2)}`:String(r)},S=(0,s.computed)(()=>e.source.value!=null),C=(0,s.signal)([]),w=(0,s.signal)({error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0}),T=null;(0,o.onCleanup)(()=>{T?.(),T=null}),(0,c.watch)(e.source,e=>{if(T?.(),T=null,!e){C.value=[],w.value={error:null,isLoading:!1,pageCount:1,pageNumber:1,pageSize:v.value,totalItems:0};return}let t=(t=e.snapshot)=>{C.value=t.data,w.value={error:t.error,isLoading:t.isFetching,pageCount:t.pagination.count,pageNumber:t.pagination.index,pageSize:t.pagination.size,totalItems:t.pagination.total}};t(),T=e.subscribe(t)},{immediate:!0});let E=r.createDataGridModel({clientSide:(0,s.computed)(()=>!S.value),columns:b,filterOptions:e.filterOptions,getRowKey:x,items:(0,s.computed)(()=>S.value?C.value:e.rows.value??[]),onSelectionChange:e=>{a(`selection-change`,{keys:[...e],rows:E.selectedRows.value})},onSortChange:e=>{a(`sort-change`,e)},pageSize:(0,s.computed)(()=>S.value?0:v.value),selectionMode:m,sortMode:(0,s.computed)(()=>e.sortMode.value??`client`)}),D=(0,l.debounce)(t=>{let n=e.source.value;n?.setQuery?n.setQuery({search:t}):E.setSearchQuery(t)},250);(0,c.watch)(e.selectedKeys,e=>{Array.isArray(e)&&E.setSelection(new Set(e))},{immediate:!0});let O=(0,s.signal)({}),k=(e,t)=>n=>{n.preventDefault();let r=n.clientX,i=t.getBoundingClientRect().width,a=new AbortController,{signal:o}=a;window.addEventListener(`pointermove`,t=>{O.value={...O.value,[e]:Math.max(40,i+t.clientX-r)}},{signal:o}),window.addEventListener(`pointerup`,()=>a.abort(),{signal:o})},A=E.visibleColumns,j=(e,t)=>{if(e.cell)return e.cell(t);let n=t[e.key];return n==null?``:String(n)};function M(t){let n=e.source.value;if(n){t===`prev`?n.page?.previous():n.page?.next();return}t===`prev`?E.prevPage():E.nextPage(),a(`page-change`,{pageIndex:E.pageIndex.value,pageSize:v.value})}let N=(0,s.computed)(()=>{let e=E.currentPageItems.value;return!e.length||E.isAllSelected()?!1:e.some(e=>E.selectedKeys.value.has(x(e)))}),P=(0,s.computed)(()=>A.value.length+ +(m.value===`multi`)+ +!!g.value),F=(0,s.computed)(()=>S.value?w.value.pageCount>1:v.value>0),I=(0,s.computed)(()=>{if(S.value){let{pageNumber:e,pageSize:t,totalItems:n}=w.value,r=Math.max(1,t);if(!F.value)return`${n} row${n===1?``:`s`}`;if(n===0)return`0 to 0 of 0`;let i=(e-1)*r+1;return`${i} to ${Math.min(i+r-1,n)} of ${n}`}let e=E.totalItems.value;if(!F.value)return`${e} row${e===1?``:`s`}`;if(e===0)return`0 to 0 of 0`;let t=E.pageIndex.value*v.value+1;return`${t} to ${Math.min(t+v.value-1,e)} of ${e}`}),L=(0,s.computed)(()=>e.loading.value===!0||S.value&&w.value.isLoading),R=(0,s.computed)(()=>S.value?w.value.pageNumber>1:E.hasPrevPage.value),z=(0,s.computed)(()=>S.value?w.value.pageNumber<w.value.pageCount:E.hasNextPage.value),B=(0,s.computed)(()=>S.value?w.value.totalItems===0?`0 / 0`:`${w.value.pageNumber} / ${w.value.pageCount}`:`${E.pageIndex.value+1} / ${E.pageCount.value}`),V=[`compact`,`cozy`,`comfortable`],H={comfortable:`rows-2`,compact:`rows-4`,cozy:`rows-3`},U={comfortable:`Density: Comfortable`,compact:`Density: Compact`,cozy:`Density: Cozy`},W=(0,s.signal)(e.density.value??`cozy`);(0,c.watch)(e.density,e=>{e&&(W.value=e)});let G=()=>{let e=V.indexOf(W.value),n=V[(e+1)%V.length];W.value=n,t.setAttribute(`density`,n),a(`density-change`,{density:n})},K=(0,s.signal)(!1),q=e=>{let t=new Set(h.value),n=!t.has(e);n?t.add(e):t.delete(e),h.value=t,a(`row-expand`,{expanded:n,key:e})},J={activeCell:(0,s.signal)({col:0,row:0}),focusCell:()=>{}};(0,o.onMounted)(()=>{let e=t.shadowRoot,n=e.querySelector(`.dg-table`);if(!n)return;let{cleanup:r,handle:a}=i.createGridNav(n,e);return J=a,r}),t.focusCell=e=>J.focusCell(e);let Y=()=>{let t=e.views.value??[],n=e.activeView.value;return o.html`
+        <div
+          class="dg-tabs"
+          role="tablist"
+          aria-label="Views"
+          aria-controls="dg-tabpanel"
+          @keydown="${e=>{if(![`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(e.key))return;let t=Array.from(e.currentTarget.querySelectorAll(`.dg-tab`)),n=t.findIndex(e=>e.classList.contains(`dg-tab--active`)),r=n;if(e.key===`ArrowLeft`?r=Math.max(0,n-1):e.key===`ArrowRight`?r=Math.min(t.length-1,n+1):e.key===`Home`?r=0:e.key===`End`&&(r=t.length-1),r!==n){e.preventDefault();let n=t[r];n.focus(),n.click()}}}">
+          ${t.map(e=>o.html`
+              <ore-button
+                class="${()=>`dg-tab${n===e.id?` dg-tab--active`:``}`}"
+                role="tab"
+                variant="ghost"
+                rounded="full"
+                size="sm"
+                tabindex="${()=>n===e.id?`0`:`-1`}"
+                aria-selected="${()=>String(n===e.id)}"
+                aria-controls="dg-tabpanel"
+                @click="${()=>{a(`view-change`,{id:e.id,label:e.label})}}">
+                ${e.label}
+              </ore-button>
+            `)}
+        </div>
+      `},X=()=>o.html`
+      <ore-popover class="dg-action-popover" placement="bottom-end" label="Sort" style="--popover-min-width:18rem">
         <ore-button variant="ghost" size="sm" icon-only label="Sort">
           <ore-icon name="arrow-up-down" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
@@ -29,8 +34,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               size="sm"
               icon-only
               label="Clear sort"
-              :disabled="${()=>j.sortState.value.direction===`none`||void 0}"
-              @click="${()=>j.sortTo(``,`none`)}">
+              disabled="${()=>E.sortState.value.direction===`none`||void 0}"
+              @click="${()=>E.sortTo(``,`none`)}">
               <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
             </ore-button>
           </div>
@@ -42,56 +47,64 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               rounded="lg"
               placeholder="Property"
               fullwidth
-              :value="${()=>j.sortState.value.key}"
-              :options="${()=>C.value.map(e=>({label:e.label,value:e.key}))}"
-              @change="${e=>{let t=e.detail.values[0]??``,n=j.sortState.value.direction===`none`?`asc`:j.sortState.value.direction;j.sortTo(t,n)}}"></ore-select>
+              value="${()=>E.sortState.value.key}"
+              options="${()=>b.value.map(e=>({label:e.label,value:e.key}))}"
+              @change="${e=>{let t=e.detail.values[0]??``,n=E.sortState.value.direction===`none`?`asc`:E.sortState.value.direction;E.sortTo(t,n)}}"></ore-select>
             <ore-select
               class="dg-pop-dir-select"
               variant="flat"
               size="sm"
               rounded="lg"
               fullwidth
-              :disabled="${()=>!j.sortState.value.key||void 0}"
-              :value="${()=>j.sortState.value.direction===`none`?`asc`:j.sortState.value.direction}"
-              :options="${()=>[{label:`A → Z`,value:`asc`},{label:`Z → A`,value:`desc`}]}"
-              @change="${e=>{j.sortState.value.key&&j.sortTo(j.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
+              disabled="${()=>!E.sortState.value.key||void 0}"
+              value="${()=>E.sortState.value.direction===`none`?`asc`:E.sortState.value.direction}"
+              options="${()=>[{label:`A → Z`,value:`asc`},{label:`Z → A`,value:`desc`}]}"
+              @change="${e=>{E.sortState.value.key&&E.sortTo(E.sortState.value.key,e.detail.values[0]??`asc`)}}"></ore-select>
           </div>
         </div>
-      </ore-popover>`,te=()=>l.html`<ore-popover
+      </ore-popover>
+    `,Z=()=>o.html`
+      <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Filter"
         style="--popover-min-width:16rem;--popover-max-height:min(90vh,48rem)">
-        ${()=>T.filterDefs.value.length?l.html`<ore-badge
-                anchor="top-end"
-                color="primary"
-                size="xs"
-                :count="${()=>X.value?T.filterDefs.value.length:void 0}"
-                :dot="${()=>!X.value||void 0}"
-                :label="${()=>`${T.filterDefs.value.length} active filter${T.filterDefs.value.length>1?`s`:``}`}"
-                aria-hidden="true"
-                @mouseenter="${()=>X.value=!0}"
-                @mouseleave="${()=>X.value=!1}"
-                @focusin="${()=>X.value=!0}"
-                @focusout="${()=>X.value=!1}">
-                <ore-button slot="target" variant="ghost" size="sm" icon-only label="Filter">
+        ${()=>E.filterDefs.value.length?o.html`
+                <ore-badge
+                  anchor="top-end"
+                  color="primary"
+                  size="xs"
+                  count="${()=>K.value?E.filterDefs.value.length:void 0}"
+                  dot="${()=>!K.value||void 0}"
+                  label="${()=>`${E.filterDefs.value.length} active filter${E.filterDefs.value.length>1?`s`:``}`}"
+                  aria-hidden="true"
+                  @mouseenter="${()=>K.value=!0}"
+                  @mouseleave="${()=>K.value=!1}"
+                  @focusin="${()=>K.value=!0}"
+                  @focusout="${()=>K.value=!1}">
+                  <ore-button slot="target" variant="ghost" size="sm" icon-only label="Filter">
+                    <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                  </ore-button>
+                </ore-badge>
+              `:o.html`
+                <ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
                   <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
                 </ore-button>
-              </ore-badge>`:l.html`<ore-button class="dg-icon-btn" variant="ghost" size="sm" icon-only label="Filter">
-                <ore-icon name="filter" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
-              </ore-button>`}
+              `}
         <div slot="content" class="dg-pop-filter">
           <div class="dg-pop-header">
             <span class="dg-pop-title">Filter by</span>
-            ${()=>T.filterDefs.value.length?l.html`<ore-button
-                    class="dg-icon-btn"
-                    variant="ghost"
-                    size="sm"
-                    icon-only
-                    label="Clear all filters"
-                    @click="${()=>T.clearAllFilters()}">
-                    <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-button>`:l.html``}
+            ${()=>E.filterDefs.value.length?o.html`
+                    <ore-button
+                      class="dg-icon-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="Clear all filters"
+                      @click="${()=>E.clearAllFilters()}">
+                      <ore-icon name="trash-2" size="14" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                  `:o.html``}
           </div>
 
           <!-- Always-visible field picker: select columns to add filter rules -->
@@ -101,15 +114,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               multiple
               fullwidth
               autoclose
-              :options="${()=>C.value.map(e=>({label:e.label,value:e.key}))}"
-              :value="${()=>T.filterDefs.value.map(e=>e.key)}"
-              @change="${e=>{T.setActiveFilterKeys(e.detail.values)}}">
-            </ore-combobox>
+              options="${()=>b.value.map(e=>({label:e.label,value:e.key}))}"
+              value="${()=>E.filterDefs.value.map(e=>e.key)}"
+              @change="${e=>{E.setActiveFilterKeys(e.detail.values)}}"></ore-combobox>
           </div>
 
           <!-- Active filter rules (appear below the field picker as rules are added) -->
-          <div class="dg-pop-filter-rules" ?hidden="${()=>!T.filterDefs.value.length}">
-            ${()=>T.filterDefs.value.map(e=>l.html`
+          <div class="dg-pop-filter-rules" ?hidden="${()=>!E.filterDefs.value.length}">
+            ${()=>E.filterDefs.value.map(e=>o.html`
                   <div class="dg-pop-filter-rule">
                     <div class="dg-pop-filter-rule-header">
                       <span class="dg-pop-filter-field">${e.label}</span>
@@ -118,34 +130,36 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                         variant="ghost"
                         size="sm"
                         fullwidth
-                        :value="${()=>T.filterValues.value.get(e.key)?.operator??`contains`}"
-                        :options="${()=>e.operators??[]}"
-                        @change="${t=>{T.setFilterOperator(e.key,t.detail.values[0])}}"></ore-select>
+                        value="${()=>E.filterValues.value.get(e.key)?.operator??`contains`}"
+                        options="${()=>e.operators??[]}"
+                        @change="${t=>{E.setFilterOperator(e.key,t.detail.values[0])}}"></ore-select>
                       <ore-button
                         class="dg-icon-btn"
                         variant="ghost"
                         size="sm"
                         icon-only
                         label="Remove filter"
-                        @click="${()=>T.removeFilter(e.key)}">
+                        @click="${()=>E.removeFilter(e.key)}">
                         <ore-icon name="trash-2" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
                       </ore-button>
                     </div>
                     <ore-combobox
                       class="dg-filter"
-                      :placeholder="${()=>e.label}"
-                      :options="${()=>e.options}"
-                      :value="${()=>[...T.filterValues.value.get(e.key)?.values??[]]}"
-                      :disabled="${()=>g.value||void 0}"
+                      placeholder="${()=>e.label}"
+                      options="${()=>e.options}"
+                      value="${()=>[...E.filterValues.value.get(e.key)?.values??[]]}"
+                      disabled="${()=>p.value||void 0}"
                       multiple
                       fullwidth
                       autoclose
-                      @change="${t=>{T.setFilter(e.key,t.detail.values)}}"></ore-combobox>
+                      @change="${t=>{E.setFilter(e.key,t.detail.values)}}"></ore-combobox>
                   </div>
                 `)}
           </div>
         </div>
-      </ore-popover>`,ne=()=>l.html`<ore-popover
+      </ore-popover>
+    `,Q=()=>o.html`
+      <ore-popover
         class="dg-action-popover"
         placement="bottom-end"
         label="Column options"
@@ -154,31 +168,34 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <ore-icon name="columns-2" size="15" stroke-width="1.75" aria-hidden="true"></ore-icon>
         </ore-button>
         <div slot="content" class="dg-pop-col-list" role="menu" aria-label="Column visibility">
-          ${()=>C.value.map(e=>l.html`<ore-button
+          ${()=>b.value.map(e=>o.html`
+                <ore-button
                   class="dg-pop-col-item"
                   role="menuitemcheckbox"
                   variant="ghost"
                   size="sm"
-                  :aria-checked="${()=>String(!T.hiddenColumns.value.has(e.key))}"
-                  @click="${()=>T.toggleColumnVisibility(e.key)}">
+                  aria-checked="${()=>String(!E.hiddenColumns.value.has(e.key))}"
+                  @click="${()=>E.toggleColumnVisibility(e.key)}">
                   <ore-icon
                     slot="prefix"
-                    :name="${()=>T.hiddenColumns.value.has(e.key)?`eye-off`:`eye`}"
+                    name="${()=>E.hiddenColumns.value.has(e.key)?`eye-off`:`eye`}"
                     size="13"
                     stroke-width="2"
                     aria-hidden="true"></ore-icon>
                   ${e.label}
-                </ore-button>`)}
+                </ore-button>
+              `)}
         </div>
-      </ore-popover>`;return l.html`
+      </ore-popover>
+    `;return o.html`
       <!-- ── Controls Bar ────────────────────────────────────────────────── -->
       <div class="dg-controls" part="controls">
         <!-- Left: view tabs -->
-        ${()=>$()}
+        ${()=>Y()}
 
         <!-- Right: Action bar -->
         <div class="dg-actions">
-          ${()=>ee()} ${()=>te()} ${()=>ne()}
+          ${()=>X()} ${()=>Z()} ${()=>Q()}
 
           <!-- Density toggle -->
           <ore-button
@@ -186,42 +203,44 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             variant="ghost"
             size="sm"
             icon-only
-            :label="${()=>q[J.value]}"
-            @click="${Y}">
+            label="${()=>U[W.value]}"
+            @click="${G}">
             <ore-icon
-              :name="${()=>K[J.value]}"
+              name="${()=>H[W.value]}"
               size="15"
               stroke-width="1.75"
               aria-hidden="true"></ore-icon>
           </ore-button>
 
-          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!h.has(`actions`).value}"></span>
+          <span class="dg-action-divider" aria-hidden="true" ?hidden="${()=>!f.has(`actions`).value}"></span>
 
           <slot name="actions"></slot>
 
           <!-- Search toggle: rightmost, expands in-place -->
-          <div class="${()=>`dg-search${T.searchActive.value?` dg-search--open`:``}`}">
-            ${()=>T.searchActive.value?l.html`<ore-input
-                    class="dg-search-input"
-                    type="search"
-                    variant="flat"
-                    size="sm"
-                    rounded="full"
-                    :placeholder="${()=>e.searchPlaceholder.value??`Search…`}"
-                    :disabled="${()=>g.value||void 0}"
-                    ref="${e=>{e&&requestAnimationFrame(()=>e.focus())}}"
-                    @input="${e=>{E(e.detail.value)}}"
-                    @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.search&&t.search(``),T.toggleSearch()}}}">
-                    <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </ore-input>`:l.html``}
+          <div class="${()=>`dg-search${E.searchActive.value?` dg-search--open`:``}`}">
+            ${()=>E.searchActive.value?o.html`
+                    <ore-input
+                      class="dg-search-input"
+                      type="search"
+                      variant="flat"
+                      size="sm"
+                      rounded="full"
+                      placeholder="${()=>e.searchPlaceholder.value??`Search…`}"
+                      disabled="${()=>p.value||void 0}"
+                      ref="${e=>{e&&requestAnimationFrame(()=>e.focus())}}"
+                      @input="${e=>{D(e.detail.value)}}"
+                      @keydown="${t=>{if(t.key===`Escape`){let t=e.source.value;t?.setQuery&&t.setQuery({search:``}),E.toggleSearch()}}}">
+                      <ore-icon slot="prefix" name="search" size="13" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                    </ore-input>
+                  `:o.html``}
             <ore-button
               variant="ghost"
               size="sm"
               icon-only
-              :label="${()=>{let[t,n]=e.searchLabel.value??[`Search`,`Close search`];return T.searchActive.value?n:t}}"
-              @click="${()=>{let t=e.source.value;t?.search&&T.searchActive.value&&t.search(``),T.toggleSearch()}}">
+              label="${()=>{let[t,n]=e.searchLabel.value??[`Search`,`Close search`];return E.searchActive.value?n:t}}"
+              @click="${()=>{let t=e.source.value;t?.setQuery&&E.searchActive.value&&t.setQuery({search:``}),E.toggleSearch()}}">
               <ore-icon
-                :name="${()=>T.searchActive.value?`x`:`search`}"
+                name="${()=>E.searchActive.value?`x`:`search`}"
                 size="15"
                 stroke-width="1.75"
                 aria-hidden="true"></ore-icon>
@@ -238,198 +257,228 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           class="dg-table"
           part="table"
           role="grid"
-          :aria-label="${()=>e.label.value??void 0}"
-          :aria-busy="${()=>V.value?`true`:null}"
-          :aria-disabled="${()=>g.value?`true`:null}">
+          aria-label="${()=>e.label.value??void 0}"
+          aria-busy="${()=>L.value?`true`:null}"
+          aria-disabled="${()=>p.value?`true`:null}">
           <!-- Head -->
           <thead class="dg-head" part="thead">
             <tr role="row">
-              ${()=>_.value===`multi`?l.html`<th
-                      class="dg-th dg-th-check"
+              ${()=>m.value===`multi`?o.html`
+                      <th
+                        class="dg-th dg-th-check"
+                        role="columnheader"
+                        scope="col"
+                        tabindex="${()=>J.activeCell.value.row===0&&J.activeCell.value.col===0&&_.value>=1?`0`:`-1`}">
+                        <ore-checkbox
+                          class="dg-check"
+                          checked="${()=>E.isAllSelected()}"
+                          indeterminate="${N}"
+                          ?disabled="${p}"
+                          aria-label="Select all rows on this page"
+                          @change="${()=>{p.value||E.selectAll()}}"></ore-checkbox>
+                      </th>
+                    `:o.html``}
+              ${()=>A.value.map((e,t)=>{let n=t===A.value.length-1;return o.html`
+                    <th
+                      class="${`dg-th${n&&g.value?` dg-th-last`:``}`}"
                       role="columnheader"
                       scope="col"
-                      :tabindex="${()=>Q.activeCell.value.row===0&&Q.activeCell.value.col===0&&b.value>=1?`0`:`-1`}">
-                      <ore-checkbox
-                        class="dg-check"
-                        :checked="${()=>j.isAllSelected()}"
-                        :indeterminate="${L}"
-                        ?disabled="${g}"
-                        aria-label="Select all rows on this page"
-                        @change="${()=>{g.value||j.selectAll()}}"></ore-checkbox>
-                    </th>`:l.html``}
-              ${()=>P.value.map((e,t)=>l.html`<th
-                    class="${`dg-th${t===P.value.length-1&&y.value?` dg-th-last`:``}`}"
-                    role="columnheader"
-                    scope="col"
-                    :tabindex="${()=>{let e=Q.activeCell.value;return e.row===0&&e.col===t+b.value?`0`:`-1`}}"
-                    data-align="${e.align??`left`}"
-                    :aria-sort="${()=>e.sortable?m(j.sortState.value,e.key):void 0}"
-                    :aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
-                    :style="${()=>{let t=M.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
-                    <div class="dg-th-inner">
-                      ${()=>e.sortable?l.html`<ore-button
-                              class="dg-sort-btn"
-                              variant="text"
-                              size="sm"
-                              fullwidth
-                              :label="${e.headerLabel??e.label}"
-                              :disabled="${()=>g.value||void 0}"
-                              @click="${()=>{g.value||j.sortBy(e.key)}}">
-                              ${e.label}
-                              <ore-icon
-                                slot="suffix"
-                                class="dg-sort-icon"
-                                :name="${()=>p(j.sortState.value,e.key)}"
-                                size="14"
-                                stroke-width="2"></ore-icon>
-                            </ore-button>`:e.label}
-                      ${e.resizable?l.html`<span
-                              class="dg-col-resize"
-                              aria-hidden="true"
-                              ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,N(e.key,n))}}"></span>`:l.html``}
-                    </div>
-                  </th>`)}
-              ${()=>y.value?l.html`<th
-                      class="dg-th dg-th-expand"
-                      role="columnheader"
-                      scope="col"
-                      aria-label="Row details"
-                      tabindex="-1"></th>`:l.html``}
-            </tr>
-          </thead>
-
-          <!-- Body -->
-          <tbody class="dg-body" part="tbody">
-            ${()=>j.currentPageItems.value.length===0?l.html`<tr role="row">
-                    <td class="dg-empty" role="gridcell" :colspan="${()=>String(R.value)}">
-                      <div class="dg-empty-content">
-                        ${()=>e.emptyText.value??`No data`}
-                        ${()=>T.searchQuery.value||T.filterValues.value.size?l.html`<div class="dg-empty-actions">
+                      tabindex="${()=>{let e=J.activeCell.value;return e.row===0&&e.col===t+_.value?`0`:`-1`}}"
+                      data-align="${e.align??`left`}"
+                      aria-sort="${()=>e.sortable?d(E.sortState.value,e.key):void 0}"
+                      aria-label="${e.sortable?void 0:e.headerLabel??e.label}"
+                      style="${()=>{let t=O.value[e.key];return t?`width:${t}px`:e.width?`width:${e.width}`:``}}">
+                      <div class="dg-th-inner">
+                        ${()=>e.sortable?o.html`
                                 <ore-button
+                                  class="dg-sort-btn"
                                   variant="text"
                                   size="sm"
-                                  @click="${()=>{T.resetSearch(),T.resetFilters()}}">
-                                  Clear all filters & search
+                                  fullwidth
+                                  label="${e.headerLabel??e.label}"
+                                  disabled="${()=>p.value||void 0}"
+                                  @click="${()=>{p.value||E.sortBy(e.key)}}">
+                                  ${e.label}
+                                  <ore-icon
+                                    slot="suffix"
+                                    class="dg-sort-icon"
+                                    name="${()=>u(E.sortState.value,e.key)}"
+                                    size="14"
+                                    stroke-width="2"></ore-icon>
                                 </ore-button>
-                              </div>`:l.html``}
+                              `:e.label}
+                        ${e.resizable?o.html`
+                                <span
+                                  class="dg-col-resize"
+                                  aria-hidden="true"
+                                  ref="${t=>{if(!t)return;let n=t.closest(`th`);n&&t.addEventListener(`pointerdown`,k(e.key,n))}}"></span>
+                              `:o.html``}
                       </div>
-                    </td>
-                  </tr>`:j.currentPageItems.value.map((e,t)=>{let n=w(e),r=_.value!==`none`&&!g.value,i=t+1;return l.html`<tr
+                    </th>
+                  `})}
+              ${()=>g.value?o.html`
+                      <th
+                        class="dg-th dg-th-expand"
+                        role="columnheader"
+                        scope="col"
+                        aria-label="Row details"
+                        tabindex="-1"></th>
+                    `:o.html``}
+            </tr>
+          </thead>
+
+          <!-- Body -->
+          <tbody class="dg-body" part="tbody">
+            ${()=>E.currentPageItems.value.length===0?o.html`
+                    <tr role="row">
+                      <td class="dg-empty" role="gridcell" colspan="${()=>String(P.value)}">
+                        <div class="dg-empty-content">
+                          ${()=>e.emptyText.value??`No data`}
+                          ${()=>E.searchQuery.value||E.filterValues.value.size?o.html`
+                                  <div class="dg-empty-actions">
+                                    <ore-button
+                                      variant="text"
+                                      size="sm"
+                                      @click="${()=>{E.resetSearch(),E.resetFilters()}}">
+                                      Clear all filters & search
+                                    </ore-button>
+                                  </div>
+                                `:o.html``}
+                        </div>
+                      </td>
+                    </tr>
+                  `:E.currentPageItems.value.map((e,t)=>{let n=x(e),r=m.value!==`none`&&!p.value,i=t+1;return o.html`
+                      <tr
                         class="dg-tr"
                         part="row"
                         role="row"
-                        :aria-selected="${()=>_.value===`none`?null:String(j.selectedKeys.value.has(n))}"
-                        :aria-expanded="${()=>y.value?String(v.value.has(n)):null}"
+                        aria-selected="${()=>m.value===`none`?null:String(E.selectedKeys.value.has(n))}"
+                        aria-expanded="${()=>g.value?String(h.value.has(n)):null}"
                         ?data-selectable="${r}"
-                        ?data-disabled="${g}"
-                        @click="${()=>{r&&_.value===`single`&&j.toggleRow(n)}}"
-                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&_.value===`single`&&(e.preventDefault(),j.toggleRow(n))}}">
-                        ${()=>_.value===`multi`?l.html`<td
-                                class="dg-td dg-td-check"
-                                role="gridcell"
-                                :tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
-                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g.value||j.toggleRow(n))}}">
-                                <ore-checkbox
-                                  class="dg-check"
-                                  :checked="${()=>j.selectedKeys.value.has(n)}"
-                                  ?disabled="${g}"
-                                  aria-label="Select row"
-                                  tabindex="-1"
-                                  @click="${e=>e.stopPropagation()}"
-                                  @change="${()=>{g.value||j.toggleRow(n)}}"></ore-checkbox>
-                              </td>`:l.html``}
-                        ${P.value.map((t,n)=>{let r=F(t,e);return l.html`<td
-                            class="${`dg-td${n===P.value.length-1&&y.value?` dg-td-last`:``}`}"
-                            part="cell"
-                            role="gridcell"
-                            data-align="${t.align??`left`}"
-                            :tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===n+b.value?`0`:`-1`}}"
-                            :title="${r}">
-                            ${r}
-                          </td>`})}
-                        ${()=>y.value?l.html`<td
-                                class="dg-td dg-td-expand"
-                                role="gridcell"
-                                :tabindex="${()=>{let e=Q.activeCell.value;return e.row===i&&e.col===R.value-1?`0`:`-1`}}"
-                                @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),g.value||Z(n))}}">
-                                <ore-button
-                                  class="dg-expand-btn"
-                                  variant="ghost"
-                                  size="sm"
-                                  icon-only
-                                  tabindex="-1"
-                                  :label="${()=>v.value.has(n)?`Collapse row`:`Expand row`}"
-                                  :aria-expanded="${()=>String(v.value.has(n))}"
-                                  :disabled="${()=>g.value||void 0}"
-                                  @click="${e=>{e.stopPropagation(),g.value||Z(n)}}">
-                                  <ore-icon
-                                    :name="${()=>v.value.has(n)?`chevron-up`:`chevron-down`}"
-                                    size="14"
-                                    stroke-width="2"
-                                    aria-hidden="true"></ore-icon>
-                                </ore-button>
-                              </td>`:l.html``}
+                        ?data-disabled="${p}"
+                        @click="${()=>{r&&m.value===`single`&&E.toggleRow(n)}}"
+                        @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&r&&m.value===`single`&&(e.preventDefault(),E.toggleRow(n))}}">
+                        ${()=>m.value===`multi`?o.html`
+                                <td
+                                  class="dg-td dg-td-check"
+                                  role="gridcell"
+                                  tabindex="${()=>{let e=J.activeCell.value;return e.row===i&&e.col===0?`0`:`-1`}}"
+                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p.value||E.toggleRow(n))}}">
+                                  <ore-checkbox
+                                    class="dg-check"
+                                    checked="${()=>E.selectedKeys.value.has(n)}"
+                                    ?disabled="${p}"
+                                    aria-label="Select row"
+                                    tabindex="-1"
+                                    @click="${e=>e.stopPropagation()}"
+                                    @change="${()=>{p.value||E.toggleRow(n)}}"></ore-checkbox>
+                                </td>
+                              `:o.html``}
+                        ${A.value.map((t,n)=>{let r=j(t,e),a=n===A.value.length-1;return o.html`
+                            <td
+                              class="${`dg-td${a&&g.value?` dg-td-last`:``}`}"
+                              part="cell"
+                              role="gridcell"
+                              data-align="${t.align??`left`}"
+                              tabindex="${()=>{let e=J.activeCell.value;return e.row===i&&e.col===n+_.value?`0`:`-1`}}"
+                              title="${r}">
+                              ${r}
+                            </td>
+                          `})}
+                        ${()=>g.value?o.html`
+                                <td
+                                  class="dg-td dg-td-expand"
+                                  role="gridcell"
+                                  tabindex="${()=>{let e=J.activeCell.value;return e.row===i&&e.col===P.value-1?`0`:`-1`}}"
+                                  @keydown="${e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),p.value||q(n))}}">
+                                  <ore-button
+                                    class="dg-expand-btn"
+                                    variant="ghost"
+                                    size="sm"
+                                    icon-only
+                                    tabindex="-1"
+                                    label="${()=>h.value.has(n)?`Collapse row`:`Expand row`}"
+                                    aria-expanded="${()=>String(h.value.has(n))}"
+                                    disabled="${()=>p.value||void 0}"
+                                    @click="${e=>{e.stopPropagation(),p.value||q(n)}}">
+                                    <ore-icon
+                                      name="${()=>h.value.has(n)?`chevron-up`:`chevron-down`}"
+                                      size="14"
+                                      stroke-width="2"
+                                      aria-hidden="true"></ore-icon>
+                                  </ore-button>
+                                </td>
+                              `:o.html``}
                       </tr>
-                      ${()=>y.value&&v.value.has(n)?l.html`<tr class="dg-tr-expanded" role="row">
-                              <td
-                                class="dg-td-expanded"
-                                role="gridcell"
-                                :colspan="${()=>String(R.value)}">
-                                ${(0,f.raw)(()=>C.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
-                              </td>
-                            </tr>`:l.html``} `})}
+                      ${()=>g.value&&h.value.has(n)?o.html`
+                              <tr class="dg-tr-expanded" role="row">
+                                <td
+                                  class="dg-td-expanded"
+                                  role="gridcell"
+                                  colspan="${()=>String(P.value)}">
+                                  ${(0,o.unsafeHtml)(()=>b.value.find(e=>typeof e.renderExpanded==`function`)?.renderExpanded?.(e)??``)}
+                                </td>
+                              </tr>
+                            `:o.html``}
+                    `})}
           </tbody>
         </table>
       </div>
 
       <!-- Footer / Pagination -->
-      ${()=>z.value?l.html`<div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
-              ${()=>(e.pageSizeOptions.value??[]).length?l.html``:l.html`<span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true"
-                      >${B}</span
-                    >`}
-              <div class="dg-footer-end">
-                ${()=>{let t=e.pageSizeOptions.value??[];return t.length?l.html`<div class="dg-page-size-wrap">
-                        <ore-select
-                          class="dg-page-size-select"
-                          fullwidth
-                          aria-label="Rows per page"
-                          :value="${()=>String(x.value)}"
-                          :options="${()=>t.map(e=>({label:String(e),value:String(e)}))}"
-                          :disabled="${()=>g.value||void 0}"
-                          @change="${e=>{let t=parseInt(e.detail.values[0],10);isNaN(t)||(x.value=t,j.goToPage(0),c(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
-                      </div>`:l.html``}}
-                <div class="dg-pagination" role="group" aria-label="Page navigation">
-                  <ore-button
-                    class="dg-page-btn"
-                    variant="ghost"
-                    size="sm"
-                    icon-only
-                    label="Previous page"
-                    :disabled="${()=>!H.value||g.value}"
-                    @click="${()=>I(`prev`)}">
-                    <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-                  </ore-button>
-                  <span
-                    class="dg-page-label"
-                    dir="ltr"
-                    aria-current="page"
-                    role="status"
-                    aria-live="polite"
-                    aria-atomic="true">
-                    ${()=>W.value}
-                  </span>
-                  <ore-button
-                    class="dg-page-btn"
-                    variant="ghost"
-                    size="sm"
-                    icon-only
-                    label="Next page"
-                    :disabled="${()=>!U.value||g.value}"
-                    @click="${()=>I(`next`)}">
-                    <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-                  </ore-button>
+      ${()=>F.value?o.html`
+              <div class="dg-footer" part="footer" role="navigation" aria-label="Pagination">
+                ${()=>(e.pageSizeOptions.value??[]).length?o.html``:o.html`
+                        <span class="dg-footer-info" dir="ltr" aria-live="polite" aria-atomic="true">
+                          ${I}
+                        </span>
+                      `}
+                <div class="dg-footer-end">
+                  ${()=>{let t=e.pageSizeOptions.value??[];return t.length?o.html`
+                          <div class="dg-page-size-wrap">
+                            <ore-select
+                              class="dg-page-size-select"
+                              fullwidth
+                              aria-label="Rows per page"
+                              value="${()=>String(v.value)}"
+                              options="${()=>t.map(e=>({label:String(e),value:String(e)}))}"
+                              disabled="${()=>p.value||void 0}"
+                              @change="${e=>{let t=parseInt(e.detail.values[0],10);isNaN(t)||(v.value=t,E.goToPage(0),a(`page-change`,{pageIndex:0,pageSize:t}))}}"></ore-select>
+                          </div>
+                        `:o.html``}}
+                  <div class="dg-pagination" role="group" aria-label="Page navigation">
+                    <ore-button
+                      class="dg-page-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="Previous page"
+                      disabled="${()=>!R.value||p.value}"
+                      @click="${()=>M(`prev`)}">
+                      <ore-icon name="chevron-left" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                    <span
+                      class="dg-page-label"
+                      dir="ltr"
+                      aria-current="page"
+                      role="status"
+                      aria-live="polite"
+                      aria-atomic="true">
+                      ${()=>B.value}
+                    </span>
+                    <ore-button
+                      class="dg-page-btn"
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      label="Next page"
+                      disabled="${()=>!z.value||p.value}"
+                      @click="${()=>M(`next`)}">
+                      <ore-icon name="chevron-right" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
+                    </ore-button>
+                  </div>
                 </div>
               </div>
-            </div>`:l.html``}
-    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),c.default]}),exports.COLUMN_TAG=a.COLUMN_TAG,exports.DATAGRID_TAG=h,exports.ariaSortValue=m,exports.sortIconName=p;
+            `:o.html``}
+    `},shadow:{delegatesFocus:!0},styles:[e.tableBaseMixin(`datagrid`),a.default]}),exports.COLUMN_TAG=n.COLUMN_TAG,exports.DATAGRID_TAG=f,exports.ariaSortValue=d,exports.sortIconName=u;
 //# sourceMappingURL=datagrid.cjs.map