@fluid-topics/ft-filterable-table 1.1.45 → 1.1.46

package/build/ft-filterable-table.d.ts

@@ -9,21 +9,24 @@ export declare class FtFilterableTable<T extends Record<string, any>> extends Ft
     columns: Array<ColumnConfiguration<T>>;
     sort?: Sort;
     stickyHeaders: boolean;
+    disableDataManipulation: boolean;
     currentSort?: Sort;
     filters: Array<Filter>;
-    selectData: Array<Array<string>>;
+    filterOptions: Array<Array<any>>;
     static styles: import("lit").CSSResult;
     init(data: Array<T>, columns: Array<ColumnConfiguration<T>>, sort?: Sort): void;
     protected render(): import("lit").TemplateResult<1>;
     private filterData;
     private sortData;
     protected update(props: PropertyValues): void;
-    private updateSelectData;
+    private updateFilterOptions;
     private renderHeader;
     private renderColumnSort;
+    private dispatchChangeEvent;
     private renderColumnFilter;
     private columnPart;
     private renderCell;
     private getValue;
     private getValueAsString;
+    private stringifyValue;
 }

package/build/ft-filterable-table.js

@@ -13,7 +13,7 @@ import "@fluid-topics/ft-select";
 import "@fluid-topics/ft-text-field";
 import "@fluid-topics/ft-button";
 import { classMap } from "lit/directives/class-map.js";
-import { RowClickEvent } from "./ft-filterable-table.properties";
+import { FtFilterableTableChangeEvent, RowClickEvent } from "./ft-filterable-table.properties";
 import { styles } from "./ft-filterable-table.styles";
 const DEFAULT_RENDER = (v) => html `${v}`;
 const DEFAULT_COMPARATOR = (a, b) => a - b;
@@ -26,8 +26,9 @@ class FtFilterableTable extends FtLitElement {
         this.data = [];
         this.columns = [];
         this.stickyHeaders = false;
+        this.disableDataManipulation = false;
         this.filters = [];
-        this.selectData = [];
+        this.filterOptions = [];
     }
     init(data, columns, sort) {
         this.data = data;
@@ -56,7 +57,7 @@ class FtFilterableTable extends FtLitElement {
         `;
     }
     filterData() {
-        return this.filters.reduce((data, filter, columnIndex) => {
+        return this.disableDataManipulation ? this.data : this.filters.reduce((data, filter, columnIndex) => {
             var _a;
             const column = this.columns[columnIndex];
             if (filter && filter.value) {
@@ -64,7 +65,7 @@ class FtFilterableTable extends FtLitElement {
                     case "text":
                         return data.filter((row) => this.getValueAsString(column, row, columnIndex).toLowerCase().includes(filter.value.toLowerCase()));
                     case "select":
-                        return data.filter((row) => this.getValueAsString(column, row, columnIndex) === filter.value);
+                        return data.filter((row) => this.getValue(column, row) === filter.value);
                 }
             }
             return data;
@@ -72,7 +73,7 @@ class FtFilterableTable extends FtLitElement {
     }
     sortData(data) {
         var _a;
-        if (this.currentSort) {
+        if (this.currentSort && !this.disableDataManipulation) {
             const column = this.columns[this.currentSort.column];
             const ascComparator = (_a = column.comparator) !== null && _a !== void 0 ? _a : DEFAULT_COMPARATOR;
             const comparator = this.currentSort.order === "asc" ? ascComparator : ((a, b) => -ascComparator(a, b));
@@ -86,18 +87,23 @@ class FtFilterableTable extends FtLitElement {
             this.currentSort = this.sort;
         }
         if (props.has("data") || props.has("columns")) {
-            this.updateSelectData();
+            this.updateFilterOptions();
         }
     }
-    updateSelectData() {
-        this.selectData = [];
+    updateFilterOptions() {
+        var _a, _b, _c;
+        this.filterOptions = [];
         const data = this.data;
         const columns = this.columns;
         for (let index in columns) {
             const column = columns[index];
-            if (column.filter === "select") {
-                this.selectData[index] = [...new Set(data.map((r, i) => this.getValueAsString(column, r, i)))]
-                    .sort((a, b) => a.localeCompare(b));
+            const filterType = (_a = column.filter) !== null && _a !== void 0 ? _a : "text";
+            if (filterType === "text" || filterType === "select") {
+                this.filterOptions[index] = ((_b = column.options) !== null && _b !== void 0 ? _b : [...new Set(data.map((row) => this.getValue(column, row)))])
+                    .sort((_c = column.comparator) !== null && _c !== void 0 ? _c : DEFAULT_COMPARATOR);
+                if (filterType === "text") {
+                    this.filterOptions[index] = this.filterOptions[index].map(value => this.stringifyValue(column, value, 0));
+                }
             }
         }
         this.requestUpdate();
@@ -127,44 +133,44 @@ class FtFilterableTable extends FtLitElement {
         const sortIcon = isSorted ? (this.currentSort.order === "asc" ? "expand_more" : "expand_less") : "unfold_more";
         const sort = () => {
             var _a;
-            if (isSorted) {
-                if (((_a = this.currentSort) === null || _a === void 0 ? void 0 : _a.order) === "asc") {
-                    this.currentSort = {
-                        column: index,
-                        order: "desc"
-                    };
-                }
-                else {
-                    this.currentSort = undefined;
-                }
-            }
-            else {
-                this.currentSort = {
-                    column: index,
-                    order: "asc"
-                };
-            }
+            this.currentSort = {
+                column: index,
+                order: isSorted && ((_a = this.currentSort) === null || _a === void 0 ? void 0 : _a.order) === "asc" ? "desc" : "asc"
+            };
+            this.dispatchChangeEvent();
         };
-        return html `
+        return ((_a = column.sortable) !== null && _a !== void 0 ? _a : true) ? html `
             <ft-button
                 round
                 dense
-                class="${((_a = column.sortable) !== null && _a !== void 0 ? _a : true) ? "" : "hidden"}"
                 iconVariant="material"
                 icon="${sortIcon}"
                 label="Sort ${column.title}"
                 @click=${sort}
                 part="${this.columnPart("sort-button", index)}"
             ></ft-button>
-        `;
+        ` : nothing;
+    }
+    dispatchChangeEvent() {
+        this.dispatchEvent(new FtFilterableTableChangeEvent({
+            filters: this.filters
+                .map((f, i) => ({
+                column: i,
+                value: f.value
+            }))
+                .filter(f => f.value != undefined),
+            sort: this.currentSort
+        }));
     }
     renderColumnFilter(column, index) {
-        var _a, _b;
+        var _a, _b, _c;
         const onChange = (e) => {
             this.filters[index] = { value: e.detail };
             this.requestUpdate();
+            this.dispatchChangeEvent();
         };
-        switch ((_a = column.filter) !== null && _a !== void 0 ? _a : "text") {
+        const options = (_a = this.filterOptions[index]) !== null && _a !== void 0 ? _a : [];
+        switch ((_b = column.filter) !== null && _b !== void 0 ? _b : "text") {
             case "text":
                 return html `
                     <div class="column-filter" part="${this.columnPart("filter-container", index)}">
@@ -172,25 +178,27 @@ class FtFilterableTable extends FtLitElement {
                             label="Search ${column.title}"
                             @live-change="${onChange}"
                             part="${this.columnPart("filter", index)}"
-                        ></ft-text-field>
+                        >
+                            ${repeat(options, option => html `
+                                    <ft-text-field-suggestion>${option}</ft-text-field-suggestion>
+                                `)}
+                        </ft-text-field>
                     </div>
                 `;
             case "select":
-                const values = (_b = this.selectData[index]) !== null && _b !== void 0 ? _b : [];
+                const values = (_c = this.filterOptions[index]) !== null && _c !== void 0 ? _c : [];
                 return values.length ? html `
                     <div class="column-filter" part="${this.columnPart("filter-container", index)}">
                         <ft-select label="Filter ${column.title}"
                                    @change=${onChange}
                                    part="${this.columnPart("filter", index)}">
                             <ft-select-option></ft-select-option>
-                            ${values.map(v => html `
-                                <ft-select-option value="${v}" label="${v}"></ft-select-option>
-                            `)}
+                            ${repeat(options, option => html `
+                                    <ft-select-option .value=${option} label="${this.stringifyValue(column, option, 0)}"></ft-select-option>
+                                `)}
                         </ft-select>
                     </div>
                 ` : nothing;
-            case "date":
-                break;
         }
         return nothing;
     }
@@ -218,6 +226,9 @@ class FtFilterableTable extends FtLitElement {
         const value = this.getValue(column, row);
         return typeof column.stringify === "function" ? column.stringify(value, index) : DEFAULT_STRINGIFY(value);
     }
+    stringifyValue(column, value, index) {
+        return typeof column.stringify === "function" ? column.stringify(value, index) : DEFAULT_STRINGIFY(value);
+    }
 }
 FtFilterableTable.styles = styles;
 __decorate([
@@ -232,6 +243,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtFilterableTable.prototype, "stickyHeaders", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFilterableTable.prototype, "disableDataManipulation", void 0);
 __decorate([
     state()
 ], FtFilterableTable.prototype, "currentSort", void 0);