@kubex/zinc 1.1.65 → 1.1.67

package/dist/custom-elements.json

@@ -7860,6 +7860,10 @@
             {
               "description": "Slot for custom empty state.",
               "name": "empty-state"
+            },
+            {
+              "description": "Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.",
+              "name": "no-results"
             }
           ],
           "members": [
@@ -8132,6 +8136,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_lastLoadHadRows",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_lastTableContent",
@@ -8204,7 +8217,7 @@
               "kind": "field",
               "name": "hasSlotController",
               "privacy": "private",
-              "default": "new HasSlotController( this, '[default]', ActionSlots.search.valueOf(), ActionSlots.delete.valueOf(), ActionSlots.modify.valueOf(), ActionSlots.create.valueOf(), ActionSlots.filter.valueOf(), ActionSlots.sort.valueOf(), ActionSlots.inputs.valueOf(), 'empty-state' )"
+              "default": "new HasSlotController( this, '[default]', ActionSlots.search.valueOf(), ActionSlots.delete.valueOf(), ActionSlots.modify.valueOf(), ActionSlots.create.valueOf(), ActionSlots.filter.valueOf(), ActionSlots.sort.valueOf(), ActionSlots.inputs.valueOf(), 'empty-state', 'no-results' )"
             },
             {
               "kind": "field",
@@ -8985,7 +8998,7 @@
           "tagNameWithoutPrefix": "data-table",
           "tagName": "zn-data-table",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-alert\n * @dependency zn-button\n * @dependency zn-empty-state\n * @dependency zn-chip\n * @dependency zn-hover-container\n * @dependency zn-dropdown\n * @dependency zn-menu\n * @dependency zn-menu-item\n * @dependency zn-button-group\n * @dependency zn-confirm\n * @dependency zn-skeleton\n * @dependency zn-data-table-search\n *\n * @slot - The default slot.\n * @slot search - Slot for search component.\n * @slot sort - Slot for sort component.\n * @slot filter - Slot for filter component.\n * @slot filter-top - Slot for top-level filter component.\n * @slot delete-action - Slot for delete action button.\n * @slot modify-action - Slot for modify action button.\n * @slot create-action - Slot for create action button.\n * @slot inputs - Slot for additional input controls.\n * @slot empty-state - Slot for custom empty state.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
+          "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-alert\n * @dependency zn-button\n * @dependency zn-empty-state\n * @dependency zn-chip\n * @dependency zn-hover-container\n * @dependency zn-dropdown\n * @dependency zn-menu\n * @dependency zn-menu-item\n * @dependency zn-button-group\n * @dependency zn-confirm\n * @dependency zn-skeleton\n * @dependency zn-data-table-search\n *\n * @slot - The default slot.\n * @slot search - Slot for search component.\n * @slot sort - Slot for sort component.\n * @slot filter - Slot for filter component.\n * @slot filter-top - Slot for top-level filter component.\n * @slot delete-action - Slot for delete action button.\n * @slot modify-action - Slot for modify action button.\n * @slot create-action - Slot for create action button.\n * @slot inputs - Slot for additional input controls.\n * @slot empty-state - Slot for custom empty state.\n * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
           "documentation": "https://zinc.style/components/data-table",
           "status": "experimental",
           "since": "1.0",
@@ -42301,7 +42314,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.65",
+    "version": "1.1.67",
     "author": "",
     "license": "MIT"
   }

package/dist/vscode.html-custom-data.json

@@ -1079,7 +1079,7 @@
     },
     {
       "name": "zn-data-table",
-      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
       "attributes": [
         { "name": "data-uri", "values": [] },
         { "name": "data", "values": [{ "name": "Row[]" }, { "name": "Row" }] },

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.65",
+  "version": "1.1.67",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2411,7 +2411,7 @@
         },
         {
           "name": "zn-data-table",
-          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component.\n- **sort** - Slot for sort component.\n- **filter** - Slot for filter component.\n- **filter-top** - Slot for top-level filter component.\n- **delete-action** - Slot for delete action button.\n- **modify-action** - Slot for modify action button.\n- **create-action** - Slot for create action button.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "data-uri", "value": { "type": "string" } },
@@ -2523,6 +2523,10 @@
             {
               "name": "empty-state",
               "description": "Slot for custom empty state."
+            },
+            {
+              "name": "no-results",
+              "description": "Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows."
             }
           ],
           "events": [],

package/dist/zn.d.ts

@@ -3526,6 +3526,7 @@ declare module "components/data-table/data-table.component" {
      * @slot create-action - Slot for create action button.
      * @slot inputs - Slot for additional input controls.
      * @slot empty-state - Slot for custom empty state.
+     * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.
      *
      * @csspart base - The component's base wrapper.
      *
@@ -3578,6 +3579,7 @@ declare module "components/data-table/data-table.component" {
         selectAllButton: ZnButton;
         private _initialLoad;
         private _hasLoadedData;
+        private _lastLoadHadRows;
         private _lastTableContent;
         private readonly resizeObserver;
         private page;

package/dist/zn.min.js

@@ -653,23 +653,31 @@ import{a as Cn,b as i_,c as sr,d as c,e as F}from"./chunks/zn.UBLZO6CI.js";var Q
       <div class="table__collum--datetime">
         <span><strong>${o.slice(0,10)}</strong></span>
         <zn-style size="s" muted>${o.slice(11)}</zn-style>
-      </div>`})},yt=class extends C{constructor(){super(...arguments);this.data=[];this.sortDirection="asc";this.localSort=!1;this.filter="";this.search="";this.key="id";this.headers={};this.displayTemplates={};this.hiddenHeaders="{}";this.hiddenColumns="{}";this.unsortableHeaders="{}";this.unsortable=!1;this.standalone=!1;this.emptyStateIcon="data_alert";this.filters=[];this.method="POST";this.noInitialLoad=!1;this.groupBy="";this.groups="";this.itemsPerPage=Hh;this._initialLoad=!0;this._hasLoadedData=!1;this._lastTableContent=u``;this.resizeObserver=new Jt(this,{target:null,callback:()=>{this.tableContainer&&this.tableContainer.scrollIntoView({behavior:"smooth",block:"nearest"})}});this.page=Xb;this._rows=[];this.numberOfRowsSelected=0;this.selectedRows=[];this.hasSlotController=new Q(this,"[default]","search".valueOf(),"delete-action".valueOf(),"modify-action".valueOf(),"create-action".valueOf(),"filter".valueOf(),"sort".valueOf(),"inputs".valueOf(),"empty-state");this._dataTask=new al(this,{task:async([t,r],{signal:n})=>{if(t===void 0||this.noInitialLoad&&this._initialLoad)return{rows:[],page:1,perPage:this.itemsPerPage,total:0};this.groupBy&&(this.itemsPerPage=1e3);let a={page:this.page,perPage:this.itemsPerPage,sortColumn:this.sortColumn,sortDirection:this.sortDirection,filter:this.filter,search:this.search},s=this.hasSlotController.getSlots("inputs".valueOf()),l={};s&&(s.forEach(h=>{if(["zn-input","zn-select","zn-query-builder","zn-multiselect","zn-params-select","zn-datepicker","input","select","textarea"].includes(h.tagName.toLowerCase())){let f=h.value||h.getAttribute("value"),b=h.name||h.getAttribute("name");b&&(l[b]=f)}}),Object.assign(a,l)),r&&typeof r=="object"&&Object.assign(a,r);let d=await fetch(t,{method:this.method,headers:{"x-kx-fetch-style":"zn-data-table"},signal:n,credentials:"same-origin",body:this.method==="POST"?JSON.stringify(a):void 0});if(!d.ok)throw new Error(d.statusText);return d.json()},args:()=>[this.dataUri,this.requestParams]});this.rowHasActions=!1;this._expandedRows=new Set;this._hiddenCells=new Map;this._formatTemplates=Qk;this.requestParams={};this.filterChangeListener=t=>{t.target instanceof Lh&&(this.filter=t.target.value,this._dataTask.run().then(r=>r))};this.searchChangeListener=t=>{let r=t.target;if(r&&r.tagName==="ZN-DATA-TABLE-SEARCH"){if(this.search=r.value,t.detail){let{formData:n,searchUri:a}=t.detail;if(n&&typeof n=="object"&&(this.requestParams={...this.requestParams,...n}),a){let s=this.dataUri;this.dataUri=a,this._dataTask.run().then(()=>{this.dataUri=s});return}}this._dataTask.run().then(n=>n)}}}refresh(){this._initialLoad=!1,this._dataTask.run().then(t=>t)}render(){let t=u``;if(this.noInitialLoad&&this._initialLoad)t=u`
-        <slot name="empty-state"></slot>`;else if(this.dataUri)t=this._dataTask.render({pending:()=>this._initialLoad||!this._hasLoadedData?u`
+      </div>`})},yt=class extends C{constructor(){super(...arguments);this.data=[];this.sortDirection="asc";this.localSort=!1;this.filter="";this.search="";this.key="id";this.headers={};this.displayTemplates={};this.hiddenHeaders="{}";this.hiddenColumns="{}";this.unsortableHeaders="{}";this.unsortable=!1;this.standalone=!1;this.emptyStateIcon="data_alert";this.filters=[];this.method="POST";this.noInitialLoad=!1;this.groupBy="";this.groups="";this.itemsPerPage=Hh;this._initialLoad=!0;this._hasLoadedData=!1;this._lastLoadHadRows=!1;this._lastTableContent=u``;this.resizeObserver=new Jt(this,{target:null,callback:()=>{this.tableContainer&&this.tableContainer.scrollIntoView({behavior:"smooth",block:"nearest"})}});this.page=Xb;this._rows=[];this.numberOfRowsSelected=0;this.selectedRows=[];this.hasSlotController=new Q(this,"[default]","search".valueOf(),"delete-action".valueOf(),"modify-action".valueOf(),"create-action".valueOf(),"filter".valueOf(),"sort".valueOf(),"inputs".valueOf(),"empty-state","no-results");this._dataTask=new al(this,{task:async([t,r],{signal:n})=>{if(t===void 0||this.noInitialLoad&&this._initialLoad)return{rows:[],page:1,perPage:this.itemsPerPage,total:0};this.groupBy&&(this.itemsPerPage=1e3);let a={page:this.page,perPage:this.itemsPerPage,sortColumn:this.sortColumn,sortDirection:this.sortDirection,filter:this.filter,search:this.search},s=this.hasSlotController.getSlots("inputs".valueOf()),l={};s&&(s.forEach(h=>{if(["zn-input","zn-select","zn-query-builder","zn-multiselect","zn-params-select","zn-datepicker","input","select","textarea"].includes(h.tagName.toLowerCase())){let f=h.value||h.getAttribute("value"),b=h.name||h.getAttribute("name");b&&(l[b]=f)}}),Object.assign(a,l)),r&&typeof r=="object"&&Object.assign(a,r);let d=await fetch(t,{method:this.method,headers:{"x-kx-fetch-style":"zn-data-table"},signal:n,credentials:"same-origin",body:this.method==="POST"?JSON.stringify(a):void 0});if(!d.ok)throw new Error(d.statusText);return d.json()},args:()=>[this.dataUri,this.requestParams]});this.rowHasActions=!1;this._expandedRows=new Set;this._hiddenCells=new Map;this._formatTemplates=Qk;this.requestParams={};this.filterChangeListener=t=>{t.target instanceof Lh&&(this.filter=t.target.value,this._dataTask.run().then(r=>r))};this.searchChangeListener=t=>{let r=t.target;if(r&&r.tagName==="ZN-DATA-TABLE-SEARCH"){if(this.search=r.value,t.detail){let{formData:n,searchUri:a}=t.detail;if(n&&typeof n=="object"&&(this.requestParams={...this.requestParams,...n}),a){let s=this.dataUri;this.dataUri=a,this._dataTask.run().then(()=>{this.dataUri=s});return}}this._dataTask.run().then(n=>n)}}}refresh(){this._initialLoad=!1,this._dataTask.run().then(t=>t)}render(){let t=u``;if(this.noInitialLoad&&this._initialLoad)t=u`
+        <slot name="empty-state"></slot>`;else if(this.dataUri)t=this._dataTask.render({pending:()=>this._initialLoad||!this._hasLoadedData||!this._lastLoadHadRows?u`
               <div>${this.loadingTable()}</div>`:u`
-            <div class="reduced-opacity">${this._lastTableContent}</div>`,complete:a=>(this._initialLoad=!1,this._hasLoadedData=!0,this._lastTableContent=u`
+            <div class="reduced-opacity">${this._lastTableContent}</div>`,complete:a=>(this._initialLoad=!1,this._hasLoadedData=!0,this._lastLoadHadRows=(a?.rows?.length??0)>0,this._lastTableContent=u`
             <div>${this.renderTable(a)}</div>`,this._lastTableContent),error:a=>{if(a instanceof Error){if(a.name==="SyntaxError")return console.debug(a.message),u`
                 <zn-sp>
                   <zn-alert level="error">Unable to load data</zn-alert>
                 </zn-sp>`;if(a.message==="Not Found")return this.emptyState()}return u`
-            <div>${a}</div>`}});else if(Array.isArray(this.data)?this.data.length>0:this.data){let a=Array.isArray(this.data)?this.data:[this.data],s={rows:a,perPage:a.length,total:a.length,page:1};this._initialLoad=!1,this._hasLoadedData=!0,this._lastTableContent=u`
-            <div>${this.renderTable(s)}</div>`,t=this._lastTableContent}let r=this.hasSlotController.test("delete-action".valueOf())||this.hasSlotController.test("modify-action".valueOf())||this.hasSlotController.test("create-action".valueOf())||this.hasSlotController.test("sort".valueOf())||this.hasSlotController.test("filter".valueOf())||this.hasSlotController.test("filter-top".valueOf())||this.hasSlotController.test("search".valueOf()),n=this.hasSlotController.test("inputs".valueOf());return u`
+            <div>${a}</div>`}});else if(Array.isArray(this.data)?this.data.length>0:this.data){let a=Array.isArray(this.data)?this.data:[this.data],s={rows:a,perPage:a.length,total:a.length,page:1};this._initialLoad=!1,this._hasLoadedData=!0,this._lastLoadHadRows=a.length>0,this._lastTableContent=u`
+        <div>${this.renderTable(s)}</div>`,t=this._lastTableContent}let r=this.hasSlotController.test("delete-action".valueOf())||this.hasSlotController.test("modify-action".valueOf())||this.hasSlotController.test("create-action".valueOf())||this.hasSlotController.test("sort".valueOf())||this.hasSlotController.test("filter".valueOf())||this.hasSlotController.test("filter-top".valueOf())||this.hasSlotController.test("search".valueOf()),n=this.hasSlotController.test("inputs".valueOf());return u`
       <div class="table-container" ${Fa(a=>this.tableContainer=a)}>
         ${n?u`
           <slot name="${"inputs".valueOf()}" style="display: none"></slot>`:null}
         ${r?this.getTableHeader():u``}
         ${t}
       </div>
-    `}connectedCallback(){super.connectedCallback(),this.addEventListener("zn-filter-change",this.filterChangeListener),this.addEventListener("zn-search-change",this.searchChangeListener)}getTemplate(t){return this.displayTemplates[t]??this._formatTemplates[t]}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("zn-filter-change",this.filterChangeListener),this.removeEventListener("zn-search-change",this.searchChangeListener)}emptyState(){return this.hasSlotController.test("empty-state")?u`
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("zn-filter-change",this.filterChangeListener),this.addEventListener("zn-search-change",this.searchChangeListener)}getTemplate(t){return this.displayTemplates[t]??this._formatTemplates[t]}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("zn-filter-change",this.filterChangeListener),this.removeEventListener("zn-search-change",this.searchChangeListener)}emptyState(){return this.noInitialLoad&&!this._initialLoad?this.hasSlotController.test("no-results")?u`
+          <div class="table--empty">
+            <slot name="no-results"></slot>
+          </div>`:u`
+        <div class="table--empty">
+          <zn-empty-state caption="No Results Found" icon="search">
+            <p>Nothing matched your search. Try adjusting your filters.</p>
+          </zn-empty-state>
+        </div>`:this.hasSlotController.test("empty-state")?u`
         <div class="table--empty">
           <slot name="empty-state"></slot>
         </div>`:u`
@@ -691,7 +699,8 @@ import{a as Cn,b as i_,c as sr,d as c,e as F}from"./chunks/zn.UBLZO6CI.js";var Q
       <zn-alert level="${t.level??"error"}"
                 icon="${H(t.icon)}"
                 size="small"
-                center>${t.text}</zn-alert>`}humanize(t){return t.charAt(0).toUpperCase()+t.slice(1)}renderTableData(t,r){let n=Object.values(this.headers).filter(h=>h.hideHeader||h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:!h.secondary);this._secondaryHeaders=Object.values(this.headers).filter(h=>h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:h.secondary===!0),this.rowHasActions=this._rows.some(h=>h.actions&&h.actions.length>0);let a=new Set(this._secondaryHeaders.map(h=>h.key));this._hiddenCells.clear();let s=new Map;this._rows.forEach(h=>{let m=Array.isArray(h.cells)?h.cells:[],f=[],b=m.filter(g=>a.has(g.column));this._hiddenCells.set(h.id,b),n.forEach(g=>{let v=m.find(x=>x.column===g.key);v?f.push(v):f.push({text:"",column:g.key})}),s.set(h.id,f)});let l=this.hasHiddenColumns(),d=n.length+(this.rowHasActions?1:0)+(l?1:0);return u`
+                center>${t.text}
+      </zn-alert>`}humanize(t){return t.charAt(0).toUpperCase()+t.slice(1)}renderTableData(t,r){let n=Object.values(this.headers).filter(h=>h.hideHeader||h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:!h.secondary);this._secondaryHeaders=Object.values(this.headers).filter(h=>h.hideColumn||Object.values(this.hiddenColumns).includes(h.key)?!1:h.secondary===!0),this.rowHasActions=this._rows.some(h=>h.actions&&h.actions.length>0);let a=new Set(this._secondaryHeaders.map(h=>h.key));this._hiddenCells.clear();let s=new Map;this._rows.forEach(h=>{let m=Array.isArray(h.cells)?h.cells:[],f=[],b=m.filter(g=>a.has(g.column));this._hiddenCells.set(h.id,b),n.forEach(g=>{let v=m.find(x=>x.column===g.key);v?f.push(v):f.push({text:"",column:g.key})}),s.set(h.id,f)});let l=this.hasHiddenColumns(),d=n.length+(this.rowHasActions?1:0)+(l?1:0);return u`
       <div style="overflow-x: auto">
         <table class="${D({table:!0,"table--standalone":this.standalone,"with-hover":!this.unsortable&&!this.hideCheckboxes})}">
           <thead>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.65",
+  "version": "1.1.67",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/data-table/data-table.component.ts

@@ -111,8 +111,8 @@ interface HeaderConfig {
   hideColumn?: boolean;
   secondary?: boolean;
   type?: string;
-  cellTemplate ?: Cell;
-  ifEmpty ?:Cell;
+  cellTemplate?: Cell;
+  ifEmpty?: Cell;
 }
 
 type DisplayTemplate = (cell: Cell, row: Row, header: HeaderConfig) =>
@@ -178,6 +178,7 @@ type AllowedInputElement =
  * @slot create-action - Slot for create action button.
  * @slot inputs - Slot for additional input controls.
  * @slot empty-state - Slot for custom empty state.
+ * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.
  *
  * @csspart base - The component's base wrapper.
  *
@@ -250,12 +251,13 @@ export default class ZnDataTable extends ZincElement {
 
   @property() groups = '';
 
-  @property({attribute: 'per-page-size', type:Number}) itemsPerPage:number = DEFAULT_PER_PAGE;
+  @property({attribute: 'per-page-size', type: Number}) itemsPerPage: number = DEFAULT_PER_PAGE;
   @query('#select-all-rows') selectAllButton: ZnButton;
 
   // Data Table Properties
   private _initialLoad = true;
   private _hasLoadedData = false;
+  private _lastLoadHadRows = false;
   private _lastTableContent: TemplateResult = html``;
 
   private readonly resizeObserver = new ResizeController(this, {
@@ -287,7 +289,8 @@ export default class ZnDataTable extends ZincElement {
     ActionSlots.filter.valueOf(),
     ActionSlots.sort.valueOf(),
     ActionSlots.inputs.valueOf(),
-    'empty-state'
+    'empty-state',
+    'no-results'
   );
 
   private _dataTask = new Task(this, {
@@ -375,8 +378,10 @@ export default class ZnDataTable extends ZincElement {
       tableBody = this._dataTask.render({
         pending: () => {
           // Show the skeleton until data has rendered at least once, so the
-          // first fetch on a no-initial-load table doesn't render blank space
-          if (this._initialLoad || !this._hasLoadedData) {
+          // first fetch on a no-initial-load table doesn't render blank space.
+          // Also show it when the last load had no rows - a reduced-opacity
+          // empty state gives no visible indication that a search is running
+          if (this._initialLoad || !this._hasLoadedData || !this._lastLoadHadRows) {
             return html`
               <div>${this.loadingTable()}</div>`;
           }
@@ -386,6 +391,7 @@ export default class ZnDataTable extends ZincElement {
         complete: (data) => {
           this._initialLoad = false;
           this._hasLoadedData = true;
+          this._lastLoadHadRows = ((data as Response)?.rows?.length ?? 0) > 0;
           this._lastTableContent = html`
             <div>${this.renderTable(data as Response)}</div>`;
           return this._lastTableContent;
@@ -416,8 +422,9 @@ export default class ZnDataTable extends ZincElement {
       };
       this._initialLoad = false;
       this._hasLoadedData = true;
+      this._lastLoadHadRows = rows.length > 0;
       this._lastTableContent = html`
-            <div>${this.renderTable(response)}</div>`;
+        <div>${this.renderTable(response)}</div>`;
       tableBody = this._lastTableContent;
     }
 
@@ -496,6 +503,22 @@ export default class ZnDataTable extends ZincElement {
   }
 
   emptyState() {
+    if (this.noInitialLoad && !this._initialLoad) {
+      if (this.hasSlotController.test('no-results')) {
+        return html`
+          <div class="table--empty">
+            <slot name="no-results"></slot>
+          </div>`;
+      }
+
+      return html`
+        <div class="table--empty">
+          <zn-empty-state caption="No Results Found" icon="search">
+            <p>Nothing matched your search. Try adjusting your filters.</p>
+          </zn-empty-state>
+        </div>`;
+    }
+
     if (this.hasSlotController.test('empty-state')) {
       return html`
         <div class="table--empty">
@@ -605,7 +628,8 @@ export default class ZnDataTable extends ZincElement {
       <zn-alert level="${error.level ?? 'error'}"
                 icon="${ifDefined(error.icon)}"
                 size="small"
-                center>${error.text}</zn-alert>`;
+                center>${error.text}
+      </zn-alert>`;
   }
 
   public humanize(str: string) {
@@ -996,7 +1020,7 @@ export default class ZnDataTable extends ZincElement {
   renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement {
     const fn = (header?.type ? this.getTemplate(header.type) : undefined);
 
-    if((!data.text && !data.iconSrc) && header?.ifEmpty !== undefined) {
+    if ((!data.text && !data.iconSrc) && header?.ifEmpty !== undefined) {
       const header2 = {...header, type: undefined, render: undefined, renderTemplate: undefined};
       return this.renderCell({...data, ...header.ifEmpty}, row, header2)
     }
@@ -1006,11 +1030,11 @@ export default class ZnDataTable extends ZincElement {
       return typeof out === 'string' ? html`${unsafeHTML(out)}` : out;
     }
 
-    if(!data || typeof data !== 'object') {
+    if (!data || typeof data !== 'object') {
       return data;
     }
 
-    if(header?.cellTemplate !== undefined) {
+    if (header?.cellTemplate !== undefined) {
       data = {...header.cellTemplate, ...data}
     }
 

package/src/components/data-table/data-table.test.ts

@@ -49,6 +49,76 @@ describe('<zn-data-table>', () => {
     }
   });
 
+  it('shows the loading skeleton on reload when the previous load returned no rows', async () => {
+    const originalFetch = window.fetch;
+    const emptyResponse = () => new Response(JSON.stringify({rows: [], page: 1, perPage: 10, total: 0}),
+      {status: 200, headers: {'Content-Type': 'application/json'}});
+    window.fetch = () => Promise.resolve(emptyResponse());
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" headers='{"name": {"key": "name", "label": "Name"}}'></zn-data-table>`);
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-empty-state'));
+
+      let release: (value: Response) => void;
+      window.fetch = () => new Promise<Response>(resolve => (release = resolve));
+      el.refresh();
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-skeleton'));
+      expect(el.shadowRoot!.querySelector('zn-skeleton')).to.exist;
+
+      release!(emptyResponse());
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-empty-state'));
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  it('shows the empty-state slot before any load on a no-initial-load table, then a no-results state after an empty search', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({rows: [], page: 1, perPage: 10, total: 0}),
+      {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" no-initial-load headers='{"name": {"key": "name", "label": "Name"}}'>
+          <div slot="empty-state" id="filters-prompt">No Filters Selected</div>
+        </zn-data-table>`);
+
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.exist;
+
+      el.refresh();
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-empty-state'));
+
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.not.exist;
+      const emptyState = el.shadowRoot!.querySelector('zn-empty-state')!;
+      expect(emptyState.getAttribute('caption')).to.equal('No Results Found');
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
+  it('prefers the no-results slot after an empty search on a no-initial-load table', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({rows: [], page: 1, perPage: 10, total: 0}),
+      {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" no-initial-load headers='{"name": {"key": "name", "label": "Name"}}'>
+          <div slot="empty-state">No Filters Selected</div>
+          <div slot="no-results">No Customers Found</div>
+        </zn-data-table>`);
+
+      el.refresh();
+      await waitUntil(() => el.shadowRoot?.querySelector('slot[name="no-results"]'));
+
+      expect(el.shadowRoot!.querySelector('slot[name="no-results"]')).to.exist;
+      expect(el.shadowRoot!.querySelector('slot[name="empty-state"]')).to.not.exist;
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
   it('exposes displayTemplates as an object property', async () => {
     const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
     const templates = (el as unknown as {displayTemplates: Record<string, unknown>}).displayTemplates;