From e655df511ddee6fa8bccc3039982a31ee2f3b4ed Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Fri, 5 May 2023 20:55:44 +0300
Subject: [PATCH] Support for lazy data frames

---
 assets/data_table/main.js           | 9 +++++----
 lib/assets/data_table/build/main.js | 2 +-
 lib/kino/table.ex                   | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/assets/data_table/main.js b/assets/data_table/main.js
index df67450e..850b9d07 100644
--- a/assets/data_table/main.js
+++ b/assets/data_table/main.js
@@ -136,7 +136,7 @@ function App({ ctx, data }) {
   const fixedHeight = 440 + headerHeight;
   const minRowsToFitMenu = hasSorting ? 3 : 2;
   const autoHeight =
-    totalRows < minRowsToFitMenu && menu ? menuHeight + headerHeight : null;
+    totalRows && totalRows < minRowsToFitMenu && menu ? menuHeight + headerHeight : null;
   const height = totalRows >= 10 && infiniteScroll ? fixedHeight : autoHeight;
   const rowMarkerStartIndex = (content.page - 1) * content.limit + 1;
   const minColumnWidth = hasSummaries ? 150 : 50;
@@ -474,6 +474,7 @@ function App({ ctx, data }) {
             maxPage={content.max_page}
             onPrev={onPrev}
             onNext={onNext}
+            rows={rows}
           />
         )}
       </div>
@@ -566,14 +567,14 @@ function LimitSelect({ limit, totalRows, onChange }) {
           <option value="20">20</option>
           <option value="50">50</option>
           <option value="100">100</option>
-          <option value={totalRows}>All</option>
+          {totalRows ? <option value={totalRows}>All</option> : null}
         </select>
       </form>
     </div>
   );
 }
 
-function Pagination({ page, maxPage, onPrev, onNext }) {
+function Pagination({ page, maxPage, onPrev, onNext, rows }) {
   return (
     <div className="pagination">
       <button
@@ -592,7 +593,7 @@ function Pagination({ page, maxPage, onPrev, onNext }) {
       <button
         className="pagination__button"
         onClick={onNext}
-        disabled={page === maxPage}
+        disabled={page === maxPage || rows === 0}
       >
         <span>Next</span>
         <RiArrowRightSLine />
diff --git a/lib/assets/data_table/build/main.js b/lib/assets/data_table/build/main.js
index 6b8b2219..2cb20fef 100644
--- a/lib/assets/data_table/build/main.js
+++ b/lib/assets/data_table/build/main.js
@@ -196,7 +196,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   </svg>`,arrowDown:t=>`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
     <path fill="${t.fgColor}" d="M0 0h24v24H0z"/>
     <path fill="${t.bgColor}" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm1 10V8h-2v4H8l4 4 4-4h-3z"/>
-  </svg>`},V_={text:He.HeaderString,number:He.HeaderNumber,uri:He.HeaderUri,date:He.HeaderDate},R_={text:t1.Text,number:t1.Number,uri:t1.Uri,date:t1.Text},lm={fontFamily:"JetBrains Mono",bgHeader:"white",textDark:"#61758a",textHeader:"#304254",headerFontStyle:"bold 14px",baseFontStyle:"14px",borderColor:"#E1E8F0",horizontalBorderColor:"#E1E8F0",accentColor:"#3E64FF",accentLight:"#ECF0FF",bgHeaderHovered:"#F0F5F9",bgHeaderHasFocus:"#E1E8F0",bgSearchResult:"#FFF7EC",headerIconSize:22};function DO(t,a){t.importCSS("main.css"),t.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"),t.importCSS("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"),(0,om.createRoot)(t.root).render(p1.default.createElement(y_,{ctx:t,data:a}))}function y_({ctx:t,data:a}){let e=[],r=[],n=a.content.columns.map(o1=>{let U=o1.summary,B1=o1.label,u1=o1.key;return r.push({[B1]:250}),U&&e.push(U.keys.length),{title:B1,id:u1,type:o1.type,icon:V_[o1.type]||He.HeaderString,hasMenu:!0,summary:U}}),i=a.features.includes("refetch"),l=a.content.columns.length!==0,o=e.length>0,h=a.features.includes("sorting"),c={rows:Mt.empty(),columns:Mt.empty()},[v,g]=(0,p1.useState)(a.content),[s,d]=(0,p1.useState)(!1),[p,z]=(0,p1.useState)(n),[w,u]=(0,p1.useState)(r),[f,m]=(0,p1.useState)(null),[M,L]=(0,p1.useState)(!1),[y,x]=(0,p1.useState)(c),[V,R]=(0,p1.useState)(0),[S,E]=(0,p1.useState)(null),k=v.total_rows,C=l&&k>0,T=a.features.includes("pagination")&&(k===null||k>0),D=v.limit===k,J=44,j=o&&C?Math.max(...e):0,a1=J+j*22,i1=h?140:70,v1=440+a1,H1=k<(h?3:2)&&f?i1+a1:null,f1=k>=10&&D?v1:H1,c1=(v.page-1)*v.limit+1,q1=o?150:50,G1=a.content.columns.length===1?800:350,O1=v.page_length,T1=(0,p1.useCallback)(o1=>{let{ctx:U,theme:B1,rect:u1,column:C1,menuBounds:ot,isHovered:et,isSelected:Z1,spriteManager:Ht}=o1;if(C1.sourceIndex===0)return!0;if(!C)return!1;U.rect(u1.x,u1.y,u1.width,u1.height);let xt=10,gt=19,Bt=Z1?B1.textHeaderSelected:B1.textHeader,vt=Z1?B1.accentLight:B1.textDark,tt=C1.hasMenu===!0&&et,_t=!!C1.summary,kt=35,W0=u1.width-kt,k2=u1.width-kt*.7,l2=W0/u1.width,qt=k2/u1.width,dt=U.createLinearGradient(u1.x,0,u1.x+u1.width,0),rt=sr(Bt,0),ft=_a(U,`${B1.headerFontStyle} ${B1.fontFamily}`);if(dt.addColorStop(0,Bt),dt.addColorStop(l2,Bt),dt.addColorStop(qt,rt),dt.addColorStop(1,rt),U.fillStyle=tt?dt:Bt,C1.icon){let St=Z1?"selected":C1.style==="highlight"?"special":"normal",Z0=B1.headerIconSize;Ht.drawSprite(C1.icon,St,U,u1.x+xt,u1.y+xt,Z0,B1),C1.overlayIcon&&Ht.drawSprite(C1.overlayIcon,Z1?"selected":"special",U,u1.x+xt+gt/2,u1.y+xt+gt/2,gt,B1)}if(U.fillText(C1.title,ot.x-u1.width+B1.headerIconSize*2.5+14,_t?u1.y+xt+B1.headerIconSize/2+ft:ot.y+ot.height/2+ft),_t){let St=v.columns[C1.sourceIndex-1].summary,Z0=Object.fromEntries(St.keys.map((E2,fa)=>[E2,St.values[fa]])),e0=13,M0=e0+xt,J2=`${e0}px ${B1.fontFamily}`,b2=`bold ${J2}`;U.fillStyle=vt,Object.entries(Z0).forEach(([E2,fa],ta)=>{U.font=b2,U.fillText(`${E2}:`,u1.x+M0/2,u1.y+M0*(ta+1)+M0),U.font=J2,U.fillText(fa,u1.x+U.measureText(E2).width+M0,u1.y+M0*(ta+1)+M0)})}if(tt){U.fillStyle=dt;let St=ot.x+ot.width/2-xt*1.5,Z0=B1.headerIconSize/2-2,e0=new Path2D("M12 16l-6-6h12z");U.translate(St,Z0),U.fill(e0)}return!0},[v]),lt=(0,p1.useCallback)(([o1,U])=>{let B1=R_[v.columns[o1].type]||t1.Text,C1=v.data_orientation==="columns"?v.data[o1][U]:v.data[U][o1];return{kind:B1,data:C1,displayData:C1,allowOverlay:!0,allowWrapping:!1,readonly:!0}},[v]),b1=()=>{d(!s)},K1=o1=>{let U=o1!=="none"?f.columnKey:null;t.pushEvent("order_by",{key:U,direction:o1??"asc"}),m(null)},q=()=>{t.pushEvent("show_page",{page:v.page-1}),x({...c,columns:y.columns})},N=()=>{t.pushEvent("show_page",{page:v.page+1}),x({...c,columns:y.columns})},s1=()=>{let o1={...c,columns:Mt.fromSingleSelection(f.column)};x(o1),m(null)},{layerProps:l1,renderLayer:I}=im({isOpen:M,auto:!0,placement:"bottom-end",possiblePlacements:["bottom-end","bottom-center","bottom-start"],triggerOffset:0,onOutsideClick:()=>m(null),trigger:{getBounds:()=>({left:f?.bounds.x??0,top:f?.bounds.y??0,width:f?.bounds.width??0,height:f?.bounds.height??0,right:(f?.bounds.x??0)+(f?.bounds.width??0),bottom:(f?.bounds.y??0)+(f?.bounds.height??0)})}}),Q=(0,p1.useCallback)((o1,U)=>{u(B1=>({...B1,[o1.title]:U}))},[]),h1=(0,p1.useCallback)((o1,U)=>{let{summary:B1,id:u1,type:C1}=p[o1];B1||m({column:o1,bounds:U,columnKey:u1,columnType:C1})},[]),$=(0,p1.useCallback)((o1,{bounds:U})=>{let{id:B1,type:u1}=p[o1];m({column:o1,bounds:U,columnKey:B1,columnType:u1})},[]),d1=(0,p1.useCallback)(o1=>{let[U,B1]=o1.location;B1===-1&&U===-1&&o1.kind==="header"?E([...Array.from({length:O1},(u1,C1)=>C1)]):U===-1&&o1.kind==="cell"?E([B1]):E(null)},[O1]),U1=(0,p1.useCallback)(o1=>S?.includes(o1)?{bgCell:lm.bgHeaderHovered}:null,[S]),F1=(0,p1.useCallback)(({x:o1,y:U,width:B1,height:u1})=>{let C1=[],ot=v.columns.length,et=B1>=ot||o1+B1>=ot?0:V,Z1=[...Array.from({length:u1},(xt,gt)=>gt+U)],Ht=[...Array.from({length:B1+et},(xt,gt)=>gt+o1)];return Z1.forEach(xt=>{let gt=[];Ht.forEach(Bt=>{gt.push(lt([Bt,xt]))}),C1.push(gt)}),C1},[V,lt]);return(0,p1.useEffect)(()=>{y.rows?.items.length>0?R(1):R(0)},[y]),(0,p1.useEffect)(()=>{t.handleEvent("update_content",o1=>{g(o1)})},[]),(0,p1.useEffect)(()=>{let o1=v.order?.direction==="asc"?"arrowUp":"arrowDown",U=p.map(B1=>({...B1,overlayIcon:B1.id===v.order?.key?o1:null}));z(U)},[v.order?.direction,v.order?.key]),(0,p1.useEffect)(()=>{let o1=p.map(U=>({...U,width:w[U.title]}));z(o1)},[w]),(0,p1.useEffect)(()=>{let o1=f?.columnKey,U={bgHeader:"#F0F5F9"},B1=p.map(u1=>({...u1,themeOverride:u1.id===o1?U:null}));z(B1),L(!!f)},[f]),p1.default.createElement("div",{className:"app"},p1.default.createElement("div",{className:"navigation"},p1.default.createElement("div",{className:"navigation__info"},p1.default.createElement("h2",{className:"navigation__name"},a.name),p1.default.createElement("span",{className:"navigation__details"},k||"?"," ",k===1?"entry":"entries"),k<a.content.total_rows),p1.default.createElement("div",{className:"navigation__space"}),i&&p1.default.createElement(C_,{onRefetch:()=>t.pushEvent("refetch")}),p1.default.createElement(B_,{toggleSearch:b1}),p1.default.createElement(S_,{limit:v.limit,totalRows:k,onChange:o1=>t.pushEvent("limit",{limit:o1})}),T&&p1.default.createElement(A_,{page:v.page,maxPage:v.max_page,onPrev:q,onNext:N})),l&&p1.default.createElement(Ez,{className:"table-container",theme:lm,getCellContent:lt,columns:p,rows:O1,width:"100%",height:f1,rowHeight:44,headerHeight:a1,drawHeader:T1,verticalBorder:!1,rowMarkers:"clickable-number",rowMarkerWidth:32,onHeaderMenuClick:h1,onHeaderClicked:$,showSearch:s,getCellsForSelection:F1,onSearchClose:b1,headerIcons:L_,overscrollX:100,isDraggable:!1,smoothScrollX:!0,smoothScrollY:!0,onColumnResize:Q,columnSelect:"none",gridSelection:y,onGridSelectionChange:o1=>x(o1),rowMarkerStartIndex:c1,minColumnWidth:q1,maxColumnAutoWidth:G1,fillHandle:!0,onItemHovered:d1,getRowThemeOverride:U1}),M&&I(p1.default.createElement(F_,{layerProps:l1,menu:f,orderBy:K1,selectAllCurrent:s1,hasSorting:h})),!l&&p1.default.createElement("p",{className:"no-data"},"No data"),p1.default.createElement("div",{id:"portal"}))}function C_({onRefetch:t}){return p1.default.createElement("button",{className:"icon-button","aria-label":"refresh",onClick:t},p1.default.createElement(Nz,null))}function B_({toggleSearch:t}){return p1.default.createElement("span",{className:"tooltip right","data-tooltip":"Current page search"},p1.default.createElement("button",{className:"icon-button search","aria-label":"search",onClick:t},p1.default.createElement($z,null)))}function S_({limit:t,totalRows:a,onChange:e}){return p1.default.createElement("div",null,p1.default.createElement("form",null,p1.default.createElement("label",{className:"input-label"},"Show"),p1.default.createElement("select",{className:"input",value:t,onChange:r=>e(parseInt(r.target.value))},p1.default.createElement("option",{value:"10"},"10"),p1.default.createElement("option",{value:"20"},"20"),p1.default.createElement("option",{value:"50"},"50"),p1.default.createElement("option",{value:"100"},"100"),p1.default.createElement("option",{value:a},"All"))))}function A_({page:t,maxPage:a,onPrev:e,onNext:r}){return p1.default.createElement("div",{className:"pagination"},p1.default.createElement("button",{className:"pagination__button",onClick:e,disabled:t===1},p1.default.createElement(Oz,null),p1.default.createElement("span",null,"Prev")),p1.default.createElement("div",{className:"pagination__info"},p1.default.createElement("span",null,t," of ",a||"?")),p1.default.createElement("button",{className:"pagination__button",onClick:r,disabled:t===a},p1.default.createElement("span",null,"Next"),p1.default.createElement(Dz,null)))}function F_({layerProps:t,selectAllCurrent:a,hasSorting:e,orderBy:r}){return p1.default.createElement("div",{className:"header-menu",...t},p1.default.createElement("button",{className:"header-menu-item button",onClick:a},"Select this column"),e&&p1.default.createElement(p1.default.Fragment,null,p1.default.createElement("div",{className:"header-menu-item",onClick:()=>r("asc")},p1.default.createElement(Pz,null),p1.default.createElement("span",null,"Sort: ascending")),p1.default.createElement("div",{className:"header-menu-item",onClick:()=>r("desc")},p1.default.createElement(Iz,null),p1.default.createElement("span",null,"Sort: descending")),p1.default.createElement("div",{className:"header-menu-item",onClick:()=>r("none")},p1.default.createElement(Tz,null),p1.default.createElement("span",null,"Sort: none"))))}export{DO as init};
+  </svg>`},V_={text:He.HeaderString,number:He.HeaderNumber,uri:He.HeaderUri,date:He.HeaderDate},R_={text:t1.Text,number:t1.Number,uri:t1.Uri,date:t1.Text},lm={fontFamily:"JetBrains Mono",bgHeader:"white",textDark:"#61758a",textHeader:"#304254",headerFontStyle:"bold 14px",baseFontStyle:"14px",borderColor:"#E1E8F0",horizontalBorderColor:"#E1E8F0",accentColor:"#3E64FF",accentLight:"#ECF0FF",bgHeaderHovered:"#F0F5F9",bgHeaderHasFocus:"#E1E8F0",bgSearchResult:"#FFF7EC",headerIconSize:22};function DO(t,a){t.importCSS("main.css"),t.importCSS("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"),t.importCSS("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"),(0,om.createRoot)(t.root).render(p1.default.createElement(y_,{ctx:t,data:a}))}function y_({ctx:t,data:a}){let e=[],r=[],n=a.content.columns.map(o1=>{let U=o1.summary,B1=o1.label,u1=o1.key;return r.push({[B1]:250}),U&&e.push(U.keys.length),{title:B1,id:u1,type:o1.type,icon:V_[o1.type]||He.HeaderString,hasMenu:!0,summary:U}}),i=a.features.includes("refetch"),l=a.content.columns.length!==0,o=e.length>0,h=a.features.includes("sorting"),c={rows:Mt.empty(),columns:Mt.empty()},[v,g]=(0,p1.useState)(a.content),[s,d]=(0,p1.useState)(!1),[p,z]=(0,p1.useState)(n),[w,u]=(0,p1.useState)(r),[f,m]=(0,p1.useState)(null),[M,L]=(0,p1.useState)(!1),[y,x]=(0,p1.useState)(c),[V,R]=(0,p1.useState)(0),[S,E]=(0,p1.useState)(null),k=v.total_rows,C=l&&k>0,T=a.features.includes("pagination")&&(k===null||k>0),D=v.limit===k,J=44,j=o&&C?Math.max(...e):0,a1=J+j*22,i1=h?140:70,v1=440+a1,H1=k&&k<(h?3:2)&&f?i1+a1:null,f1=k>=10&&D?v1:H1,c1=(v.page-1)*v.limit+1,q1=o?150:50,G1=a.content.columns.length===1?800:350,O1=v.page_length,T1=(0,p1.useCallback)(o1=>{let{ctx:U,theme:B1,rect:u1,column:C1,menuBounds:ot,isHovered:et,isSelected:Z1,spriteManager:Ht}=o1;if(C1.sourceIndex===0)return!0;if(!C)return!1;U.rect(u1.x,u1.y,u1.width,u1.height);let xt=10,gt=19,Bt=Z1?B1.textHeaderSelected:B1.textHeader,vt=Z1?B1.accentLight:B1.textDark,tt=C1.hasMenu===!0&&et,_t=!!C1.summary,kt=35,W0=u1.width-kt,k2=u1.width-kt*.7,l2=W0/u1.width,qt=k2/u1.width,dt=U.createLinearGradient(u1.x,0,u1.x+u1.width,0),rt=sr(Bt,0),ft=_a(U,`${B1.headerFontStyle} ${B1.fontFamily}`);if(dt.addColorStop(0,Bt),dt.addColorStop(l2,Bt),dt.addColorStop(qt,rt),dt.addColorStop(1,rt),U.fillStyle=tt?dt:Bt,C1.icon){let St=Z1?"selected":C1.style==="highlight"?"special":"normal",Z0=B1.headerIconSize;Ht.drawSprite(C1.icon,St,U,u1.x+xt,u1.y+xt,Z0,B1),C1.overlayIcon&&Ht.drawSprite(C1.overlayIcon,Z1?"selected":"special",U,u1.x+xt+gt/2,u1.y+xt+gt/2,gt,B1)}if(U.fillText(C1.title,ot.x-u1.width+B1.headerIconSize*2.5+14,_t?u1.y+xt+B1.headerIconSize/2+ft:ot.y+ot.height/2+ft),_t){let St=v.columns[C1.sourceIndex-1].summary,Z0=Object.fromEntries(St.keys.map((E2,fa)=>[E2,St.values[fa]])),e0=13,M0=e0+xt,J2=`${e0}px ${B1.fontFamily}`,b2=`bold ${J2}`;U.fillStyle=vt,Object.entries(Z0).forEach(([E2,fa],ta)=>{U.font=b2,U.fillText(`${E2}:`,u1.x+M0/2,u1.y+M0*(ta+1)+M0),U.font=J2,U.fillText(fa,u1.x+U.measureText(E2).width+M0,u1.y+M0*(ta+1)+M0)})}if(tt){U.fillStyle=dt;let St=ot.x+ot.width/2-xt*1.5,Z0=B1.headerIconSize/2-2,e0=new Path2D("M12 16l-6-6h12z");U.translate(St,Z0),U.fill(e0)}return!0},[v]),lt=(0,p1.useCallback)(([o1,U])=>{let B1=R_[v.columns[o1].type]||t1.Text,C1=v.data_orientation==="columns"?v.data[o1][U]:v.data[U][o1];return{kind:B1,data:C1,displayData:C1,allowOverlay:!0,allowWrapping:!1,readonly:!0}},[v]),b1=()=>{d(!s)},K1=o1=>{let U=o1!=="none"?f.columnKey:null;t.pushEvent("order_by",{key:U,direction:o1??"asc"}),m(null)},q=()=>{t.pushEvent("show_page",{page:v.page-1}),x({...c,columns:y.columns})},N=()=>{t.pushEvent("show_page",{page:v.page+1}),x({...c,columns:y.columns})},s1=()=>{let o1={...c,columns:Mt.fromSingleSelection(f.column)};x(o1),m(null)},{layerProps:l1,renderLayer:I}=im({isOpen:M,auto:!0,placement:"bottom-end",possiblePlacements:["bottom-end","bottom-center","bottom-start"],triggerOffset:0,onOutsideClick:()=>m(null),trigger:{getBounds:()=>({left:f?.bounds.x??0,top:f?.bounds.y??0,width:f?.bounds.width??0,height:f?.bounds.height??0,right:(f?.bounds.x??0)+(f?.bounds.width??0),bottom:(f?.bounds.y??0)+(f?.bounds.height??0)})}}),Q=(0,p1.useCallback)((o1,U)=>{u(B1=>({...B1,[o1.title]:U}))},[]),h1=(0,p1.useCallback)((o1,U)=>{let{summary:B1,id:u1,type:C1}=p[o1];B1||m({column:o1,bounds:U,columnKey:u1,columnType:C1})},[]),$=(0,p1.useCallback)((o1,{bounds:U})=>{let{id:B1,type:u1}=p[o1];m({column:o1,bounds:U,columnKey:B1,columnType:u1})},[]),d1=(0,p1.useCallback)(o1=>{let[U,B1]=o1.location;B1===-1&&U===-1&&o1.kind==="header"?E([...Array.from({length:O1},(u1,C1)=>C1)]):U===-1&&o1.kind==="cell"?E([B1]):E(null)},[O1]),U1=(0,p1.useCallback)(o1=>S?.includes(o1)?{bgCell:lm.bgHeaderHovered}:null,[S]),F1=(0,p1.useCallback)(({x:o1,y:U,width:B1,height:u1})=>{let C1=[],ot=v.columns.length,et=B1>=ot||o1+B1>=ot?0:V,Z1=[...Array.from({length:u1},(xt,gt)=>gt+U)],Ht=[...Array.from({length:B1+et},(xt,gt)=>gt+o1)];return Z1.forEach(xt=>{let gt=[];Ht.forEach(Bt=>{gt.push(lt([Bt,xt]))}),C1.push(gt)}),C1},[V,lt]);return(0,p1.useEffect)(()=>{y.rows?.items.length>0?R(1):R(0)},[y]),(0,p1.useEffect)(()=>{t.handleEvent("update_content",o1=>{g(o1)})},[]),(0,p1.useEffect)(()=>{let o1=v.order?.direction==="asc"?"arrowUp":"arrowDown",U=p.map(B1=>({...B1,overlayIcon:B1.id===v.order?.key?o1:null}));z(U)},[v.order?.direction,v.order?.key]),(0,p1.useEffect)(()=>{let o1=p.map(U=>({...U,width:w[U.title]}));z(o1)},[w]),(0,p1.useEffect)(()=>{let o1=f?.columnKey,U={bgHeader:"#F0F5F9"},B1=p.map(u1=>({...u1,themeOverride:u1.id===o1?U:null}));z(B1),L(!!f)},[f]),p1.default.createElement("div",{className:"app"},p1.default.createElement("div",{className:"navigation"},p1.default.createElement("div",{className:"navigation__info"},p1.default.createElement("h2",{className:"navigation__name"},a.name),p1.default.createElement("span",{className:"navigation__details"},k||"?"," ",k===1?"entry":"entries"),k<a.content.total_rows),p1.default.createElement("div",{className:"navigation__space"}),i&&p1.default.createElement(C_,{onRefetch:()=>t.pushEvent("refetch")}),p1.default.createElement(B_,{toggleSearch:b1}),p1.default.createElement(S_,{limit:v.limit,totalRows:k,onChange:o1=>t.pushEvent("limit",{limit:o1})}),T&&p1.default.createElement(A_,{page:v.page,maxPage:v.max_page,onPrev:q,onNext:N,rows:O1})),l&&p1.default.createElement(Ez,{className:"table-container",theme:lm,getCellContent:lt,columns:p,rows:O1,width:"100%",height:f1,rowHeight:44,headerHeight:a1,drawHeader:T1,verticalBorder:!1,rowMarkers:"clickable-number",rowMarkerWidth:32,onHeaderMenuClick:h1,onHeaderClicked:$,showSearch:s,getCellsForSelection:F1,onSearchClose:b1,headerIcons:L_,overscrollX:100,isDraggable:!1,smoothScrollX:!0,smoothScrollY:!0,onColumnResize:Q,columnSelect:"none",gridSelection:y,onGridSelectionChange:o1=>x(o1),rowMarkerStartIndex:c1,minColumnWidth:q1,maxColumnAutoWidth:G1,fillHandle:!0,onItemHovered:d1,getRowThemeOverride:U1}),M&&I(p1.default.createElement(F_,{layerProps:l1,menu:f,orderBy:K1,selectAllCurrent:s1,hasSorting:h})),!l&&p1.default.createElement("p",{className:"no-data"},"No data"),p1.default.createElement("div",{id:"portal"}))}function C_({onRefetch:t}){return p1.default.createElement("button",{className:"icon-button","aria-label":"refresh",onClick:t},p1.default.createElement(Nz,null))}function B_({toggleSearch:t}){return p1.default.createElement("span",{className:"tooltip right","data-tooltip":"Current page search"},p1.default.createElement("button",{className:"icon-button search","aria-label":"search",onClick:t},p1.default.createElement($z,null)))}function S_({limit:t,totalRows:a,onChange:e}){return p1.default.createElement("div",null,p1.default.createElement("form",null,p1.default.createElement("label",{className:"input-label"},"Show"),p1.default.createElement("select",{className:"input",value:t,onChange:r=>e(parseInt(r.target.value))},p1.default.createElement("option",{value:"10"},"10"),p1.default.createElement("option",{value:"20"},"20"),p1.default.createElement("option",{value:"50"},"50"),p1.default.createElement("option",{value:"100"},"100"),a?p1.default.createElement("option",{value:a},"All"):null)))}function A_({page:t,maxPage:a,onPrev:e,onNext:r,rows:n}){return p1.default.createElement("div",{className:"pagination"},p1.default.createElement("button",{className:"pagination__button",onClick:e,disabled:t===1},p1.default.createElement(Oz,null),p1.default.createElement("span",null,"Prev")),p1.default.createElement("div",{className:"pagination__info"},p1.default.createElement("span",null,t," of ",a||"?")),p1.default.createElement("button",{className:"pagination__button",onClick:r,disabled:t===a||n===0},p1.default.createElement("span",null,"Next"),p1.default.createElement(Dz,null)))}function F_({layerProps:t,selectAllCurrent:a,hasSorting:e,orderBy:r}){return p1.default.createElement("div",{className:"header-menu",...t},p1.default.createElement("button",{className:"header-menu-item button",onClick:a},"Select this column"),e&&p1.default.createElement(p1.default.Fragment,null,p1.default.createElement("div",{className:"header-menu-item",onClick:()=>r("asc")},p1.default.createElement(Pz,null),p1.default.createElement("span",null,"Sort: ascending")),p1.default.createElement("div",{className:"header-menu-item",onClick:()=>r("desc")},p1.default.createElement(Iz,null),p1.default.createElement("span",null,"Sort: descending")),p1.default.createElement("div",{className:"header-menu-item",onClick:()=>r("none")},p1.default.createElement(Tz,null),p1.default.createElement("span",null,"Sort: none"))))}export{DO as init};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
diff --git a/lib/kino/table.ex b/lib/kino/table.ex
index 63ca60fe..8077103f 100644
--- a/lib/kino/table.ex
+++ b/lib/kino/table.ex
@@ -105,7 +105,8 @@ defmodule Kino.Table do
   end
 
   def handle_event("limit", %{"limit" => limit}, ctx) do
-    max_page = ceil(ctx.assigns.content.total_rows / limit)
+    total_rows = ctx.assigns.content.total_rows
+    max_page = if total_rows, do: ceil(total_rows / limit)
     ctx = if ctx.assigns.content.page > max_page, do: assign(ctx, page: max_page), else: ctx
     {:noreply, ctx |> assign(limit: limit) |> broadcast_update()}
   end