@fluid-topics/ft-table 1.2.33 → 1.2.34

package/build/ftds-table.d.ts

@@ -1,15 +1,14 @@
 import { nothing, PropertyValues, TemplateResult } from "lit";
 import "@fluid-topics/ft-button";
 import "@fluid-topics/ft-typography";
-import { FtdsTableProperties, Sort } from "./ftds-table.properties";
-import { ColumnConfiguration } from "./ftds-table.properties";
+import { ColumnConfiguration, EmptyStateConfiguration, FtdsTableProperties, Sort } from "./ftds-table.properties";
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 export declare class FtdsTable<T extends Record<string, any>> extends FtLitElement implements FtdsTableProperties<T> {
-    static DEFAULT_RENDER: (v: any) => TemplateResult<1>;
-    static DEFAULT_COMPARATOR: (a: any, b: any) => number;
+    static styles: import("lit").CSSResult;
     data: Array<T>;
     columns: Array<ColumnConfiguration<T>>;
     sort?: Sort;
+    emptyState?: EmptyStateConfiguration;
     stickyHeaders: boolean;
     disableDataManipulation: boolean;
     currentSort?: Sort;
@@ -17,7 +16,9 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     clickableRows: boolean;
     private activeRowIndex;
     private rows?;
-    static styles: import("lit").CSSResult;
+    static DEFAULT_RENDER: (v: any) => TemplateResult<1>;
+    static DEFAULT_COMPARATOR: (a: any, b: any) => number;
+    focusRow(rowIndex: number): void;
     protected render(): TemplateResult<1>;
     protected renderHeader(column: ColumnConfiguration<T>, index: number): TemplateResult<1>;
     protected renderHeaderRow(): TemplateResult<1>;
@@ -25,18 +26,18 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     protected renderTable(data: T[]): TemplateResult<1>;
     protected renderSortButton(sortIcon: string, label: string, sort: () => void, index: number): TemplateResult<1>;
     protected renderCell(column: ColumnConfiguration<T>, columnIndex: number, row: T, rowIndex: number): TemplateResult<1>;
-    protected renderColumnSort(column: ColumnConfiguration<T>, index: number): typeof nothing | TemplateResult<1>;
+    protected renderColumnSort(column: ColumnConfiguration<T>, index: number): TemplateResult<1> | typeof nothing;
+    private renderEmptyStateTable;
     protected getSortIcon(isSorted: boolean | undefined): string;
-    private sortData;
     protected update(props: PropertyValues): void;
+    protected columnPart(prefix: string, index: number): string;
+    protected getValue(column: ColumnConfiguration<T>, row: T): any;
+    private sortData;
     private getOppositeSortOrder;
     private getSortOrderText;
     private dispatchChangeEvent;
-    protected columnPart(prefix: string, index: number): string;
-    protected getValue(column: ColumnConfiguration<T>, row: T): any;
     private handleRowKeyDown;
     private dispatchRowClickEvent;
     private handleRowMouseDown;
     private handleRowMouseUp;
-    focusRow(rowIndex: number): void;
 }

package/build/ftds-table.js

@@ -8,15 +8,15 @@ import { html, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import "@fluid-topics/ft-button";
 import "@fluid-topics/ft-typography";
-import { FtdsTableChangeEvent } from "./ftds-table.properties";
-import { property } from "lit/decorators.js";
-import { RowClickEvent } from "./ftds-table.properties";
+import { FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsTableChangeEvent, RowClickEvent } from "./ftds-table.properties";
+import { property, queryAll, state } from "lit/decorators.js";
 import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
 import { designSystemStyles } from "./ftds-table.styles";
 import { classMap } from "lit/directives/class-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
-import { queryAll, state } from "lit/decorators.js";
+import { cactusSvg } from "./cactus";
 class FtdsTable extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -28,6 +28,11 @@ class FtdsTable extends FtLitElement {
         this.clickableRows = false;
         this.activeRowIndex = -1;
     }
+    focusRow(rowIndex) {
+        if (this.rows) {
+            this.rows[rowIndex].focus();
+        }
+    }
     render() {
         let data = this.sortData(this.data);
         return html `
@@ -60,9 +65,9 @@ class FtdsTable extends FtLitElement {
         }
         return html `
             <th class="${classMap(headerCellClasses)}" role="columnheader" scope="col" aria-sort=${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}
-                 part="${this.columnPart("header-cell", index)}">
+                part="${this.columnPart("header-cell", index)}">
                 <div class="${classMap(columnTitleContainerClasses)}"
-                 part="${this.columnPart("title-container", index)}">
+                     part="${this.columnPart("title-container", index)}">
                     <span class="column-title"
                           part="${this.columnPart("title", index)}">
                         <ft-typography variant="caption-1-semibold">
@@ -110,12 +115,13 @@ class FtdsTable extends FtLitElement {
         var _a;
         return html `
             <table class="table"
-                 role="table"
-                 aria-label=${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}
+                   role="table"
+                   aria-label=${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}
             >
                 ${this.renderHeaderRow()}
                 <tbody>
-                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}
+                ${data.length > 0 ? html `
+                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}` : this.renderEmptyStateTable()}
                 </tbody>
             </table>
         `;
@@ -144,7 +150,7 @@ class FtdsTable extends FtLitElement {
         };
         return html `
             <td class="${classMap(classes)}" role="cell"
-                 part="${this.columnPart("cell", columnIndex)} cell-row-${rowIndex} cell-column-${columnIndex}-row-${rowIndex}">
+                part="${this.columnPart("cell", columnIndex)} cell-row-${rowIndex} cell-column-${columnIndex}-row-${rowIndex}">
                 <ft-typography variant="caption-1-medium">${render(this.getValue(column, row))}</ft-typography>
             </td>
         `;
@@ -166,9 +172,34 @@ class FtdsTable extends FtLitElement {
         const label = `Sort ${column.title} in ${sortOrderText} order`;
         return ((_b = column.sortable) !== null && _b !== void 0 ? _b : true) ? this.renderSortButton(sortIcon, label, sort, index) : nothing;
     }
+    renderEmptyStateTable() {
+        var _a, _b;
+        return html `
+            <tr class="row" role="row">
+                <td colspan=${this.columns.length} class="cell no-content" role="cell">
+                    ${((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.noImage) ? nothing : cactusSvg}
+                    <ft-typography variant="${FtTypographyVariants.body2medium}">
+                        ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
+                    </ft-typography>
+                </td>
+            </tr>
+        `;
+    }
     getSortIcon(isSorted) {
         return isSorted ? (this.currentSort.order === "asc" ? "sort_up" : "sort_down") : "sort_unsorted";
     }
+    update(props) {
+        super.update(props);
+        if (props.has("sort")) {
+            this.currentSort = this.sort;
+        }
+    }
+    columnPart(prefix, index) {
+        return `${prefix} ${prefix}-column-${index}`;
+    }
+    getValue(column, row) {
+        return typeof column.getter === "string" ? row[column.getter] : column.getter(row);
+    }
     sortData(data) {
         var _a;
         if (this.currentSort && !this.disableDataManipulation) {
@@ -179,12 +210,6 @@ class FtdsTable extends FtLitElement {
         }
         return data;
     }
-    update(props) {
-        super.update(props);
-        if (props.has("sort")) {
-            this.currentSort = this.sort;
-        }
-    }
     getOppositeSortOrder(sortOrder) {
         return sortOrder === "asc" ? "desc" : "asc";
     }
@@ -201,12 +226,6 @@ class FtdsTable extends FtLitElement {
             sort: this.currentSort
         }));
     }
-    columnPart(prefix, index) {
-        return `${prefix} ${prefix}-column-${index}`;
-    }
-    getValue(column, row) {
-        return typeof column.getter === "string" ? row[column.getter] : column.getter(row);
-    }
     handleRowKeyDown(e, row) {
         if (e.key === "Enter" || e.key === " ") {
             this.dispatchRowClickEvent(row);
@@ -221,15 +240,10 @@ class FtdsTable extends FtLitElement {
     handleRowMouseUp() {
         this.activeRowIndex = -1;
     }
-    focusRow(rowIndex) {
-        if (this.rows) {
-            this.rows[rowIndex].focus();
-        }
-    }
 }
+FtdsTable.styles = designSystemStyles;
 FtdsTable.DEFAULT_RENDER = (v) => html `${v}`;
 FtdsTable.DEFAULT_COMPARATOR = (a, b) => a - b;
-FtdsTable.styles = designSystemStyles;
 __decorate([
     jsonProperty([])
 ], FtdsTable.prototype, "data", void 0);
@@ -239,6 +253,9 @@ __decorate([
 __decorate([
     jsonProperty(undefined)
 ], FtdsTable.prototype, "sort", void 0);
+__decorate([
+    jsonProperty([])
+], FtdsTable.prototype, "emptyState", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtdsTable.prototype, "stickyHeaders", void 0);

package/build/ftds-table.properties.d.ts

@@ -15,6 +15,10 @@ export interface ColumnConfiguration<T> {
     gridTemplateColumn?: string;
     textAlign?: FtColumnAlignment;
 }
+export interface EmptyStateConfiguration {
+    noImage: boolean;
+    content: string | TemplateResult;
+}
 export interface Sort {
     column: number;
     order: "asc" | "desc";

package/build/ftds-table.styles.js

@@ -116,7 +116,7 @@ export const designSystemStyles = css `
         position: relative;
     }
 
-    .cell ft-typography {
+    .cell ft-typography :not(.no-content) {
         display: flex;
         column-gap: ${table.dataCellVerticalGap};
     }
@@ -140,4 +140,19 @@ export const designSystemStyles = css `
     .row > .cell:last-of-type {
         border-right: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
     }
+
+    .no-content svg {
+        margin-bottom: 24px;
+    }
+
+    .no-content {
+        width: 100%;
+        text-align: center;
+        padding: 24px;
+    }
+
+    td.no-content > ft-typography {
+        display: flex;
+        justify-content: center;
+    }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-table",
-  "version": "1.2.33",
+  "version": "1.2.34",
   "description": "A dynamic table",
   "keywords": [
     "Lit"
@@ -23,10 +23,10 @@
   },
   "dependencies": {
     "@fluid-topics/design-system-variables": "0.1.92",
-    "@fluid-topics/ft-button": "1.2.33",
-    "@fluid-topics/ft-typography": "1.2.33",
-    "@fluid-topics/ft-wc-utils": "1.2.33",
+    "@fluid-topics/ft-button": "1.2.34",
+    "@fluid-topics/ft-typography": "1.2.34",
+    "@fluid-topics/ft-wc-utils": "1.2.34",
     "lit": "3.1.0"
   },
-  "gitHead": "3ef5016fcb5fb4c18a05c044f178cfd14f13f42c"
+  "gitHead": "692cdd9bc3f926c606d3ac15f9174df5b4ee8499"
 }