issue-189 f-table-schema: no-data slot added to customise message whe…

…n there are 0 rows

packages/flow-table/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.0.7] - 2023-11-20
+
+### Improvements
+
+- `f-table-schema` : `slot="no-data"` support added to customize message when there are 0 rows.
+
 ## [2.0.6] - 2023-11-08
 
 ### Improvements

packages/flow-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-table",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

packages/flow-table/src/components/f-table-schema/f-table-schema.ts

@@ -361,6 +361,21 @@ export class FTableSchema extends FRoot {
 		this.searchScope = event.detail.scope;
 		this.searchTerm = event.detail.value;
 	}
+	get noDataTemplate() {
+		if (this.data.rows.length === 0 && this.data.header) {
+			return html`<f-div
+				style="grid-column-start:1;grid-column-end:${Object.keys(this.data.header).length + 1};"
+			>
+				<slot name="no-data">
+					<f-div padding="small" state="secondary" align="middle-center" width="100%">
+						<f-text inline>No data to display</f-text>
+					</f-div>
+				</slot>
+			</f-div>`;
+		}
+
+		return nothing;
+	}
 
 	render() {
 		this.nextEmitted = false;
@@ -390,7 +405,7 @@ export class FTableSchema extends FRoot {
 					.highlightSelected=${this.highlightSelected}
 					.highlightHover=${this.highlightHover}
 				>
-					${this.header} ${this.rowsHtml}
+					${this.header} ${this.rowsHtml} ${this.noDataTemplate}
 				</f-table>
 				<f-div class="load-more" style="display:none" align="middle-left" padding="medium none">
 					<f-button @click=${this.paginate} label="load more" category="outline"></f-button>

stories/flow-table/f-table-schema.stories.ts

@@ -505,3 +505,26 @@ export const Next = {
 
 	name: "@next"
 };
+export const NoData = {
+	render: () => {
+		const data = getFakeUsers(0, 5);
+		const fieldRef = createRef();
+
+		const handleEvent = (event: CustomEvent) => {
+			if (fieldRef.value) {
+				fieldRef.value.textContent = JSON.stringify(event.detail, undefined, 2);
+			}
+		};
+
+		return html`<f-div direction="column" padding="small" gap="large" height="50%">
+			<f-text>slot='no-data' is used to customize message when there are 0 rows to display</f-text>
+			<f-table-schema .data=${data} .showSearchBar=${false}>
+				<f-div slot="no-data" state="warning" variant="curved" width="100%" padding="medium">
+					<f-text state="warning">This is my custom no data meesage</f-text>
+				</f-div>
+			</f-table-schema>
+		</f-div> `;
+	},
+
+	name: "slot='no-data'"
+};