@fluid-topics/ft-filterable-table 0.3.43 → 0.3.46

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

@@ -22,6 +22,7 @@ export declare class FtFilterableTable<T extends Record<string, any>> extends Ft
     private renderHeader;
     private renderColumnSort;
     private renderColumnFilter;
+    private columnPart;
     private renderCell;
     private getValue;
     private getValueAsString;

package/build/ft-filterable-table.js

@@ -49,33 +49,26 @@ export class FtFilterableTable extends FtLitElement {
                 ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => html `
                             <div class="row"
                                  @click=${() => this.dispatchEvent(new RowClickEvent(row))}>
-                                ${repeat(this.columns, (_, columnIndex) => "cell-" + rowIndex + " " + columnIndex, (column) => this.renderCell(column, row, rowIndex))}
+                                ${repeat(this.columns, (_, columnIndex) => "cell-" + columnIndex + "-" + rowIndex, (column, columnIndex) => this.renderCell(column, columnIndex, row, rowIndex))}
                             </div>
                         `)}
             </div>
         `;
     }
     filterData() {
-        let data = [...this.data];
-        this.filters.forEach((filter, columnIndex) => {
+        return this.filters.reduce((data, filter, columnIndex) => {
             var _a;
             const column = this.columns[columnIndex];
-            if (filter) {
+            if (filter && filter.value) {
                 switch ((_a = column.filter) !== null && _a !== void 0 ? _a : "text") {
                     case "text":
-                        if (filter.value) {
-                            data = data.filter((row) => this.getValueAsString(column, row, columnIndex).toLowerCase().includes(filter.value.toLowerCase()));
-                        }
-                        break;
+                        return data.filter((row) => this.getValueAsString(column, row, columnIndex).toLowerCase().includes(filter.value.toLowerCase()));
                     case "select":
-                        if (filter.value) {
-                            data = data.filter((row) => this.getValueAsString(column, row, columnIndex) === filter.value);
-                        }
-                        break;
+                        return data.filter((row) => this.getValueAsString(column, row, columnIndex) === filter.value);
                 }
             }
-        });
-        return data;
+            return data;
+        }, this.data);
     }
     sortData(data) {
         var _a;
@@ -115,9 +108,13 @@ export class FtFilterableTable extends FtLitElement {
             "header-cell--sticky": this.stickyHeaders
         };
         return html `
-            <div class="${classMap(classes)}">
+            <div class="${classMap(classes)}"
+                 part="${this.columnPart("header-cell", index)}">
                 <div class="column-title-container">
-                    <span class="column-title">${column.title}</span>
+                    <span class="column-title"
+                          part="${this.columnPart("title", index)}">
+                        ${column.title}
+                    </span>
                     ${this.renderColumnSort(column, index)}
                 </div>
                 ${this.renderColumnFilter(column, index)}
@@ -156,6 +153,7 @@ export class FtFilterableTable extends FtLitElement {
                     icon="${sortIcon}"
                     label="Sort ${column.title}"
                     @click=${sort}
+                    part="${this.columnPart("sort-button", index)}"
             ></ft-button>
         `;
     }
@@ -168,18 +166,21 @@ export class FtFilterableTable extends FtLitElement {
         switch ((_a = column.filter) !== null && _a !== void 0 ? _a : "text") {
             case "text":
                 return html `
-                    <div class="column-filter">
+                    <div class="column-filter" part="${this.columnPart("filter-container", index)}">
                         <ft-text-field
                                 label="Search ${column.title}"
                                 @live-change="${onChange}"
+                                part="${this.columnPart("filter", index)}"
                         ></ft-text-field>
                     </div>
                 `;
             case "select":
                 const values = (_b = this.selectData[index]) !== null && _b !== void 0 ? _b : [];
                 return values.length ? html `
-                    <div class="column-filter">
-                        <ft-select label="Filter ${column.title}" @change=${onChange}>
+                    <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>
@@ -192,7 +193,10 @@ export class FtFilterableTable extends FtLitElement {
         }
         return nothing;
     }
-    renderCell(column, row, rowIndex) {
+    columnPart(prefix, index) {
+        return `${prefix} ${prefix}-column-${index}`;
+    }
+    renderCell(column, columnIndex, row, rowIndex) {
         var _a;
         const renderer = (_a = column.render) !== null && _a !== void 0 ? _a : DEFAULT_RENDER;
         const render = (value) => {
@@ -200,7 +204,10 @@ export class FtFilterableTable extends FtLitElement {
             return typeof rendered === "string" ? unsafeHTML(rendered) : rendered;
         };
         return html `
-            <div class="cell">${render(this.getValue(column, row))}</div>
+            <div class="cell"
+                 part="${this.columnPart("cell", columnIndex)} cell-row-${rowIndex} cell-column-${columnIndex}-row-${rowIndex}">
+                ${render(this.getValue(column, row))}
+            </div>
         `;
     }
     getValue(column, row) {

package/build/ft-filterable-table.light.js

@@ -1211,14 +1211,18 @@ const H=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===H)return null==t?void 0:t
                 ${s.repeat(t,((t,e)=>"row-"+e),((t,e)=>i.html`
                             <div class="row"
                                  @click=${()=>this.dispatchEvent(new ii(t))}>
-                                ${s.repeat(this.columns,((t,i)=>"cell-"+e+" "+i),(i=>this.renderCell(i,t,e)))}
+                                ${s.repeat(this.columns,((t,i)=>"cell-"+i+"-"+e),((i,o)=>this.renderCell(i,o,t,e)))}
                             </div>
                         `))}
             </div>
-        `}filterData(){let t=[...this.data];return this.filters.forEach(((e,i)=>{var o;const s=this.columns[i];if(e)switch(null!==(o=s.filter)&&void 0!==o?o:"text"){case"text":e.value&&(t=t.filter((t=>this.getValueAsString(s,t,i).toLowerCase().includes(e.value.toLowerCase()))));break;case"select":e.value&&(t=t.filter((t=>this.getValueAsString(s,t,i)===e.value)))}})),t}sortData(t){var e;if(this.currentSort){const i=this.columns[this.currentSort.column],o=null!==(e=i.comparator)&&void 0!==e?e:ri,s="asc"===this.currentSort.order?o:(t,e)=>-o(t,e);return t.sort(((t,e)=>s(this.getValue(i,t),this.getValue(i,e))))}return t}update(t){super.update(t),t.has("sort")&&(this.currentSort=this.sort),(t.has("data")||t.has("columns"))&&this.updateSelectData()}updateSelectData(){this.selectData=[];const t=this.data,e=this.columns;for(let i in e){const o=e[i];"select"===o.filter&&(this.selectData[i]=[...new Set(t.map(((t,e)=>this.getValueAsString(o,t,e))))].sort(((t,e)=>t.localeCompare(e))))}this.requestUpdate()}renderHeader(t,e){const o={"header-cell":!0,"header-cell--sticky":this.stickyHeaders};return i.html`
-            <div class="${l.classMap(o)}">
+        `}filterData(){return this.filters.reduce(((t,e,i)=>{var o;const s=this.columns[i];if(e&&e.value)switch(null!==(o=s.filter)&&void 0!==o?o:"text"){case"text":return t.filter((t=>this.getValueAsString(s,t,i).toLowerCase().includes(e.value.toLowerCase())));case"select":return t.filter((t=>this.getValueAsString(s,t,i)===e.value))}return t}),this.data)}sortData(t){var e;if(this.currentSort){const i=this.columns[this.currentSort.column],o=null!==(e=i.comparator)&&void 0!==e?e:ri,s="asc"===this.currentSort.order?o:(t,e)=>-o(t,e);return t.sort(((t,e)=>s(this.getValue(i,t),this.getValue(i,e))))}return t}update(t){super.update(t),t.has("sort")&&(this.currentSort=this.sort),(t.has("data")||t.has("columns"))&&this.updateSelectData()}updateSelectData(){this.selectData=[];const t=this.data,e=this.columns;for(let i in e){const o=e[i];"select"===o.filter&&(this.selectData[i]=[...new Set(t.map(((t,e)=>this.getValueAsString(o,t,e))))].sort(((t,e)=>t.localeCompare(e))))}this.requestUpdate()}renderHeader(t,e){const o={"header-cell":!0,"header-cell--sticky":this.stickyHeaders};return i.html`
+            <div class="${l.classMap(o)}"
+                 part="${this.columnPart("header-cell",e)}">
                 <div class="column-title-container">
-                    <span class="column-title">${t.title}</span>
+                    <span class="column-title"
+                          part="${this.columnPart("title",e)}">
+                        ${t.title}
+                    </span>
                     ${this.renderColumnSort(t,e)}
                 </div>
                 ${this.renderColumnFilter(t,e)}
@@ -1231,23 +1235,30 @@ const H=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===H)return null==t?void 0:t
                     icon="${n}"
                     label="Sort ${t.title}"
                     @click=${()=>{var t;s?"asc"===(null===(t=this.currentSort)||void 0===t?void 0:t.order)?this.currentSort={column:e,order:"desc"}:this.currentSort=void 0:this.currentSort={column:e,order:"asc"}}}
+                    part="${this.columnPart("sort-button",e)}"
             ></ft-button>
         `}renderColumnFilter(t,e){var o,s;const n=t=>{this.filters[e]={value:t.detail},this.requestUpdate()};switch(null!==(o=t.filter)&&void 0!==o?o:"text"){case"text":return i.html`
-                    <div class="column-filter">
+                    <div class="column-filter" part="${this.columnPart("filter-container",e)}">
                         <ft-text-field
                                 label="Search ${t.title}"
                                 @live-change="${n}"
+                                part="${this.columnPart("filter",e)}"
                         ></ft-text-field>
                     </div>
                 `;case"select":const o=null!==(s=this.selectData[e])&&void 0!==s?s:[];return o.length?i.html`
-                    <div class="column-filter">
-                        <ft-select label="Filter ${t.title}" @change=${n}>
+                    <div class="column-filter" part="${this.columnPart("filter-container",e)}">
+                        <ft-select label="Filter ${t.title}"
+                                   @change=${n}
+                                   part="${this.columnPart("filter",e)}">
                             <ft-select-option></ft-select-option>
                             ${o.map((t=>i.html`
                                 <ft-select-option value="${t}" label="${t}"></ft-select-option>
                             `))}
                         </ft-select>
                     </div>
-                `:i.nothing}return i.nothing}renderCell(t,e,o){var s;const l=null!==(s=t.render)&&void 0!==s?s:li;return i.html`
-            <div class="cell">${(t=>{const e=l(t,o);return"string"==typeof e?n.unsafeHTML(e):e})(this.getValue(t,e))}</div>
+                `:i.nothing}return i.nothing}columnPart(t,e){return`${t} ${t}-column-${e}`}renderCell(t,e,o,s){var l;const r=null!==(l=t.render)&&void 0!==l?l:li;return i.html`
+            <div class="cell"
+                 part="${this.columnPart("cell",e)} cell-row-${s} cell-column-${e}-row-${s}">
+                ${(t=>{const e=r(t,s);return"string"==typeof e?n.unsafeHTML(e):e})(this.getValue(t,o))}
+            </div>
         `}getValue(t,e){return"string"==typeof t.getter?e[t.getter]:t.getter(e)}getValueAsString(t,e,i){const o=this.getValue(t,e);return"function"==typeof t.stringify?t.stringify(o,i):(t=>""+t)(o)}}ai.styles=si,ni([o.property({attribute:!1})],ai.prototype,"data",void 0),ni([o.property({attribute:!1})],ai.prototype,"columns",void 0),ni([o.property({attribute:!1})],ai.prototype,"sort",void 0),ni([o.property()],ai.prototype,"stickyHeaders",void 0),ni([o.state()],ai.prototype,"currentSort",void 0),e.customElement("ft-filterable-table")(ai),t.FtFilterableTable=ai,t.FtFilterableTableCssVariables=oi,t.RowClickEvent=ii,t.styles=si,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML,ftGlobals.litClassMap);

package/build/ft-filterable-table.min.js

@@ -1324,14 +1324,18 @@ class Lt extends Mt{constructor(t){if(super(t),this.it=G,t.type!==Rt)throw Error
                 ${Tt(t,((t,e)=>"row-"+e),((t,e)=>X`
                             <div class="row"
                                  @click=${()=>this.dispatchEvent(new oo(t))}>
-                                ${Tt(this.columns,((t,i)=>"cell-"+e+" "+i),(i=>this.renderCell(i,t,e)))}
+                                ${Tt(this.columns,((t,i)=>"cell-"+i+"-"+e),((i,o)=>this.renderCell(i,o,t,e)))}
                             </div>
                         `))}
             </div>
-        `}filterData(){let t=[...this.data];return this.filters.forEach(((e,i)=>{var o;const n=this.columns[i];if(e)switch(null!==(o=n.filter)&&void 0!==o?o:"text"){case"text":e.value&&(t=t.filter((t=>this.getValueAsString(n,t,i).toLowerCase().includes(e.value.toLowerCase()))));break;case"select":e.value&&(t=t.filter((t=>this.getValueAsString(n,t,i)===e.value)))}})),t}sortData(t){var e;if(this.currentSort){const i=this.columns[this.currentSort.column],o=null!==(e=i.comparator)&&void 0!==e?e:ao,n="asc"===this.currentSort.order?o:(t,e)=>-o(t,e);return t.sort(((t,e)=>n(this.getValue(i,t),this.getValue(i,e))))}return t}update(t){super.update(t),t.has("sort")&&(this.currentSort=this.sort),(t.has("data")||t.has("columns"))&&this.updateSelectData()}updateSelectData(){this.selectData=[];const t=this.data,e=this.columns;for(let i in e){const o=e[i];"select"===o.filter&&(this.selectData[i]=[...new Set(t.map(((t,e)=>this.getValueAsString(o,t,e))))].sort(((t,e)=>t.localeCompare(e))))}this.requestUpdate()}renderHeader(t,e){const i={"header-cell":!0,"header-cell--sticky":this.stickyHeaders};return X`
-            <div class="${_t(i)}">
+        `}filterData(){return this.filters.reduce(((t,e,i)=>{var o;const n=this.columns[i];if(e&&e.value)switch(null!==(o=n.filter)&&void 0!==o?o:"text"){case"text":return t.filter((t=>this.getValueAsString(n,t,i).toLowerCase().includes(e.value.toLowerCase())));case"select":return t.filter((t=>this.getValueAsString(n,t,i)===e.value))}return t}),this.data)}sortData(t){var e;if(this.currentSort){const i=this.columns[this.currentSort.column],o=null!==(e=i.comparator)&&void 0!==e?e:ao,n="asc"===this.currentSort.order?o:(t,e)=>-o(t,e);return t.sort(((t,e)=>n(this.getValue(i,t),this.getValue(i,e))))}return t}update(t){super.update(t),t.has("sort")&&(this.currentSort=this.sort),(t.has("data")||t.has("columns"))&&this.updateSelectData()}updateSelectData(){this.selectData=[];const t=this.data,e=this.columns;for(let i in e){const o=e[i];"select"===o.filter&&(this.selectData[i]=[...new Set(t.map(((t,e)=>this.getValueAsString(o,t,e))))].sort(((t,e)=>t.localeCompare(e))))}this.requestUpdate()}renderHeader(t,e){const i={"header-cell":!0,"header-cell--sticky":this.stickyHeaders};return X`
+            <div class="${_t(i)}"
+                 part="${this.columnPart("header-cell",e)}">
                 <div class="column-title-container">
-                    <span class="column-title">${t.title}</span>
+                    <span class="column-title"
+                          part="${this.columnPart("title",e)}">
+                        ${t.title}
+                    </span>
                     ${this.renderColumnSort(t,e)}
                 </div>
                 ${this.renderColumnFilter(t,e)}
@@ -1344,23 +1348,30 @@ class Lt extends Mt{constructor(t){if(super(t),this.it=G,t.type!==Rt)throw Error
                     icon="${n}"
                     label="Sort ${t.title}"
                     @click=${()=>{var t;o?"asc"===(null===(t=this.currentSort)||void 0===t?void 0:t.order)?this.currentSort={column:e,order:"desc"}:this.currentSort=void 0:this.currentSort={column:e,order:"asc"}}}
+                    part="${this.columnPart("sort-button",e)}"
             ></ft-button>
         `}renderColumnFilter(t,e){var i,o;const n=t=>{this.filters[e]={value:t.detail},this.requestUpdate()};switch(null!==(i=t.filter)&&void 0!==i?i:"text"){case"text":return X`
-                    <div class="column-filter">
+                    <div class="column-filter" part="${this.columnPart("filter-container",e)}">
                         <ft-text-field
                                 label="Search ${t.title}"
                                 @live-change="${n}"
+                                part="${this.columnPart("filter",e)}"
                         ></ft-text-field>
                     </div>
                 `;case"select":const i=null!==(o=this.selectData[e])&&void 0!==o?o:[];return i.length?X`
-                    <div class="column-filter">
-                        <ft-select label="Filter ${t.title}" @change=${n}>
+                    <div class="column-filter" part="${this.columnPart("filter-container",e)}">
+                        <ft-select label="Filter ${t.title}"
+                                   @change=${n}
+                                   part="${this.columnPart("filter",e)}">
                             <ft-select-option></ft-select-option>
                             ${i.map((t=>X`
                                 <ft-select-option value="${t}" label="${t}"></ft-select-option>
                             `))}
                         </ft-select>
                     </div>
-                `:G}return G}renderCell(t,e,i){var o;const n=null!==(o=t.render)&&void 0!==o?o:lo;return X`
-            <div class="cell">${(t=>{const e=n(t,i);return"string"==typeof e?Pt(e):e})(this.getValue(t,e))}</div>
+                `:G}return G}columnPart(t,e){return`${t} ${t}-column-${e}`}renderCell(t,e,i,o){var n;const s=null!==(n=t.render)&&void 0!==n?n:lo;return X`
+            <div class="cell"
+                 part="${this.columnPart("cell",e)} cell-row-${o} cell-column-${e}-row-${o}">
+                ${(t=>{const e=s(t,o);return"string"==typeof e?Pt(e):e})(this.getValue(t,i))}
+            </div>
         `}getValue(t,e){return"string"==typeof t.getter?e[t.getter]:t.getter(e)}getValueAsString(t,e,i){const o=this.getValue(t,e);return"function"==typeof t.stringify?t.stringify(o,i):(t=>""+t)(o)}}po.styles=so,ro([o({attribute:!1})],po.prototype,"data",void 0),ro([o({attribute:!1})],po.prototype,"columns",void 0),ro([o({attribute:!1})],po.prototype,"sort",void 0),ro([o()],po.prototype,"stickyHeaders",void 0),ro([n()],po.prototype,"currentSort",void 0),d("ft-filterable-table")(po),t.FtFilterableTable=po,t.FtFilterableTableCssVariables=no,t.RowClickEvent=oo,t.styles=so,Object.defineProperty(t,"i",{value:!0})}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filterable-table",
-  "version": "0.3.43",
+  "version": "0.3.46",
   "description": "A dynamic table with filters",
   "keywords": [
     "Lit"
@@ -22,11 +22,11 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@fluid-topics/ft-button": "0.3.43",
-    "@fluid-topics/ft-select": "0.3.43",
-    "@fluid-topics/ft-text-field": "0.3.43",
-    "@fluid-topics/ft-wc-utils": "0.3.43",
+    "@fluid-topics/ft-button": "0.3.46",
+    "@fluid-topics/ft-select": "0.3.46",
+    "@fluid-topics/ft-text-field": "0.3.46",
+    "@fluid-topics/ft-wc-utils": "0.3.46",
     "lit": "2.2.8"
   },
-  "gitHead": "42962910ff06ebfa42e961d1567ee771c517ccb7"
+  "gitHead": "de9703e114f8104f705c56d7793f03bfb5faae06"
 }