@fluid-topics/ft-table 1.2.42 → 1.2.44

package/build/ftds-table.d.ts

@@ -14,6 +14,7 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     currentSort?: Sort;
     ariaLabel: string | null;
     clickableRows: boolean;
+    highlightedRowIndex: number;
     private activeRowIndex;
     private rows?;
     static DEFAULT_RENDER: (v: any) => TemplateResult<1>;
@@ -23,7 +24,6 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     protected renderHeader(column: ColumnConfiguration<T>, index: number): TemplateResult<1>;
     protected renderHeaderRow(): TemplateResult<1>;
     protected renderRow(row: T, rowIndex: number): TemplateResult<1>;
-    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): TemplateResult<1> | typeof nothing;

package/build/ftds-table.js

@@ -14,6 +14,7 @@ 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 { styleMap } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
 import { cactusSvg } from "./cactus";
@@ -26,6 +27,7 @@ class FtdsTable extends FtLitElement {
         this.disableDataManipulation = false;
         this.ariaLabel = null;
         this.clickableRows = false;
+        this.highlightedRowIndex = -1;
         this.activeRowIndex = -1;
     }
     focusRow(rowIndex) {
@@ -34,18 +36,23 @@ class FtdsTable extends FtLitElement {
         }
     }
     render() {
+        var _a;
         let data = this.sortData(this.data);
         return html `
-            <style>
-                .table {
-                    grid-template-columns: ${this.columns.map(column => { var _a; return (_a = column.gridTemplateColumn) !== null && _a !== void 0 ? _a : "minmax(min-content, auto)"; }).join(" ")};
-                }
-            </style>
-            ${this.renderTable(data)}
+            <table class="table"
+                   role="table"
+                   aria-label=${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}
+            >
+                ${this.renderHeaderRow()}
+                <tbody>
+                ${data.length > 0 ? html `
+                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}` : this.renderEmptyStateTable()}
+                </tbody>
+            </table>
         `;
     }
     renderHeader(column, index) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const headerCellClasses = {
             "header-cell": true,
             "header-cell--sticky": this.stickyHeaders
@@ -54,9 +61,10 @@ class FtdsTable extends FtLitElement {
             "column-title-container": true,
             ["column-title-container--text-align-" + column.textAlign]: true
         };
+        const styles = (_b = (_a = column.styles) === null || _a === void 0 ? void 0 : _a.headerCell) !== null && _b !== void 0 ? _b : {};
         let ariaSort;
-        if ((_a = column.sortable) !== null && _a !== void 0 ? _a : true) {
-            if (((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.column) === index) {
+        if ((_c = column.sortable) !== null && _c !== void 0 ? _c : true) {
+            if (((_d = this.currentSort) === null || _d === void 0 ? void 0 : _d.column) === index) {
                 ariaSort = this.currentSort.order === "asc" ? "ascending" : "descending";
             }
             else {
@@ -64,7 +72,7 @@ class FtdsTable extends FtLitElement {
             }
         }
         return html `
-            <th class="${classMap(headerCellClasses)}" role="columnheader" scope="col" aria-sort=${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}
+            <th class="${classMap(headerCellClasses)}" style="${styleMap(styles)}" role="columnheader" scope="col" aria-sort=${ariaSort !== null && ariaSort !== void 0 ? ariaSort : nothing}
                 part="${this.columnPart("header-cell", index)}">
                 <div class="${classMap(columnTitleContainerClasses)}"
                      part="${this.columnPart("title-container", index)}">
@@ -96,7 +104,8 @@ class FtdsTable extends FtLitElement {
         const classes = {
             "row": true,
             "row--clickable": this.clickableRows,
-            "row--active": rowIndex === this.activeRowIndex
+            "row--active": rowIndex === this.activeRowIndex,
+            "row--highlighted": rowIndex === this.highlightedRowIndex
         };
         return html `
             <tr class="${classMap(classes)}" role="row" tabindex=${this.clickableRows ? "0" : nothing}
@@ -111,21 +120,6 @@ class FtdsTable extends FtLitElement {
             </tr>
         `;
     }
-    renderTable(data) {
-        var _a;
-        return html `
-            <table class="table"
-                   role="table"
-                   aria-label=${(_a = this.ariaLabel) !== null && _a !== void 0 ? _a : nothing}
-            >
-                ${this.renderHeaderRow()}
-                <tbody>
-                ${data.length > 0 ? html `
-                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}` : this.renderEmptyStateTable()}
-                </tbody>
-            </table>
-        `;
-    }
     renderSortButton(sortIcon, label, sort, index) {
         return html `
             <ftds-button
@@ -156,7 +150,7 @@ class FtdsTable extends FtLitElement {
         `;
     }
     renderColumnSort(column, index) {
-        var _a, _b;
+        var _a, _b, _c;
         const isSorted = ((_a = this.currentSort) === null || _a === void 0 ? void 0 : _a.column) === index;
         const sortIcon = this.getSortIcon(isSorted);
         const sort = () => {
@@ -169,8 +163,9 @@ class FtdsTable extends FtLitElement {
             this.dispatchChangeEvent();
         };
         const sortOrderText = this.getSortOrderText(isSorted, column);
-        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;
+        const titleText = (_b = column.titleText) !== null && _b !== void 0 ? _b : column.title;
+        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;
@@ -271,6 +266,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtdsTable.prototype, "clickableRows", void 0);
+__decorate([
+    property({ type: Number })
+], FtdsTable.prototype, "highlightedRowIndex", void 0);
 __decorate([
     property({ type: Number })
 ], FtdsTable.prototype, "activeRowIndex", void 0);

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

@@ -7,14 +7,20 @@ export declare enum FtColumnAlignment {
 }
 export interface ColumnConfiguration<T> {
     title: string | TemplateResult;
+    titleText: string;
     getter: string | Getter<T>;
     render?: (value: any, index: number) => string | TemplateResult;
+    styles: FtColumnStyles;
     sortable?: boolean;
     defaultSortOrder?: "asc" | "desc";
     comparator?: (a: any, b: any) => number;
-    gridTemplateColumn?: string;
     textAlign?: FtColumnAlignment;
 }
+export interface FtColumnStyles {
+    headerCell: {
+        [key: string]: any;
+    };
+}
 export interface EmptyStateConfiguration {
     noImage: boolean;
     content: string | TemplateResult;

package/build/ftds-table.styles.js

@@ -32,8 +32,10 @@ export const designSystemStyles = css `
 
     .row.row--clickable:hover {
         background-color: ${table.dataRowClickableHoverBackgroundColor};
+        cursor: pointer;
     }
 
+    .row.row--highlighted,
     .row.row--clickable:focus-within {
         background-color: ${table.dataRowClickableFocusBackgroundColor};
         outline: 1px solid ${table.dataRowClickableFocusBorderColor};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-table",
-  "version": "1.2.42",
+  "version": "1.2.44",
   "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.42",
-    "@fluid-topics/ft-typography": "1.2.42",
-    "@fluid-topics/ft-wc-utils": "1.2.42",
+    "@fluid-topics/ft-button": "1.2.44",
+    "@fluid-topics/ft-typography": "1.2.44",
+    "@fluid-topics/ft-wc-utils": "1.2.44",
     "lit": "3.1.0"
   },
-  "gitHead": "072e48eee7ad88adbaf13ada77bcda7fdd2baab4"
+  "gitHead": "9cbc1788339e7a5d3d4dc94c36ec5a28f31dba6c"
 }