@fluid-topics/ftds-table 2.1.24 → 2.2.1

package/build/ftds-table.d.ts

@@ -19,6 +19,7 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     highlightedRowIndex: number;
     private activeRowIndex;
     private rows?;
+    get isEmptyState(): boolean;
     static DEFAULT_RENDER: (v: any) => TemplateResult<1>;
     static DEFAULT_COMPARATOR: (a: any, b: any) => number;
     focusRow(rowIndex: number): void;
@@ -30,11 +31,11 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     protected renderSortButton(sortIcon: FtdsIcons, 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>;
-    private renderEmptyStateTable;
     protected getSortIcon(isSorted: boolean | undefined): FtdsIcons;
     protected update(props: PropertyValues): void;
     protected columnPart(prefix: string, index: number): string;
     protected getValue(column: ColumnConfiguration<T>, row: T): any;
+    private renderEmptyStateTable;
     private sortData;
     private getOppositeSortOrder;
     private getSortOrderText;

package/build/ftds-table.js

@@ -31,6 +31,9 @@ export class FtdsTable extends FtLitElement {
         this.highlightedRowIndex = -1;
         this.activeRowIndex = -1;
     }
+    get isEmptyState() {
+        return this.data.length === 0;
+    }
     focusRow(rowIndex) {
         if (this.rows) {
             this.rows[rowIndex].focus();
@@ -46,8 +49,8 @@ export class FtdsTable extends FtLitElement {
             >
                 ${this.renderHeaderRow()}
                 <tbody>
-                ${data.length > 0 ? html `
-                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}` : this.renderEmptyStateTable()}
+                ${this.isEmptyState ? this.renderEmptyStateTable() : html `
+                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}`}
                 </tbody>
             </table>
         `;
@@ -115,6 +118,7 @@ export class FtdsTable extends FtLitElement {
             "row--clickable": this.clickableRows,
             "row--active": rowIndex === this.activeRowIndex,
             "row--highlighted": rowIndex === this.highlightedRowIndex,
+            "row--has-content": !this.isEmptyState,
         };
         return html `
             <tr class="${classMap(classes)}" role="row" tabindex="${this.clickableRows ? "0" : nothing}"
@@ -177,19 +181,6 @@ export class FtdsTable extends FtLitElement {
         const label = `Sort ${titleText} in ${sortOrderText} order`;
         return ((_c = column.sortable) !== null && _c !== void 0 ? _c : 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}
-                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
-                        ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
-                    </ftds-typography>
-                </td>
-            </tr>
-        `;
-    }
     getSortIcon(isSorted) {
         return isSorted ? (this.currentSort.order === "asc" ? FtdsIcons.SORT_UP : FtdsIcons.SORT_DOWN) : FtdsIcons.SORT;
     }
@@ -205,6 +196,19 @@ export class FtdsTable extends FtLitElement {
     getValue(column, row) {
         return typeof column.getter === "string" ? row[column.getter] : column.getter(row);
     }
+    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}
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
+                        ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
+                    </ftds-typography>
+                </td>
+            </tr>
+        `;
+    }
     sortData(data) {
         var _a, _b;
         if (this.currentSort && !this.disableDataManipulation) {