@fluid-topics/ft-filterable-table 1.3.49 → 1.3.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -36,11 +36,11 @@ class FtFilterableTable extends FtLitElement {
|
|
|
36
36
|
this.sort = sort;
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
|
-
|
|
39
|
+
const data = this.sortData(this.filterData());
|
|
40
40
|
return html `
|
|
41
41
|
<style>
|
|
42
42
|
.table {
|
|
43
|
-
grid-template-columns: ${this.columns.map(column => { var _a; return (_a = column.gridTemplateColumn) !== null && _a !== void 0 ? _a : "minmax(min-content, auto)"; }).join(" ")};
|
|
43
|
+
grid-template-columns: ${this.columns.map((column) => { var _a; return (_a = column.gridTemplateColumn) !== null && _a !== void 0 ? _a : "minmax(min-content, auto)"; }).join(" ")};
|
|
44
44
|
}
|
|
45
45
|
</style>
|
|
46
46
|
<div class="table">
|
|
@@ -76,7 +76,7 @@ class FtFilterableTable extends FtLitElement {
|
|
|
76
76
|
if (this.currentSort && !this.disableDataManipulation) {
|
|
77
77
|
const column = this.columns[this.currentSort.column];
|
|
78
78
|
const ascComparator = (_a = column.comparator) !== null && _a !== void 0 ? _a : DEFAULT_COMPARATOR;
|
|
79
|
-
const comparator = this.currentSort.order === "asc" ? ascComparator : (
|
|
79
|
+
const comparator = this.currentSort.order === "asc" ? ascComparator : (a, b) => -ascComparator(a, b);
|
|
80
80
|
return [...data].sort((a, b) => comparator(this.getValue(column, a), this.getValue(column, b)));
|
|
81
81
|
}
|
|
82
82
|
return data;
|
|
@@ -95,14 +95,14 @@ class FtFilterableTable extends FtLitElement {
|
|
|
95
95
|
this.filterOptions = [];
|
|
96
96
|
const data = this.data;
|
|
97
97
|
const columns = this.columns;
|
|
98
|
-
for (
|
|
98
|
+
for (const index in columns) {
|
|
99
99
|
const column = columns[index];
|
|
100
100
|
const filterType = (_a = column.filter) !== null && _a !== void 0 ? _a : "text";
|
|
101
101
|
if (filterType === "text" || filterType === "select") {
|
|
102
102
|
this.filterOptions[index] = ((_b = column.options) !== null && _b !== void 0 ? _b : [...new Set(data.map((row) => this.getValue(column, row)))])
|
|
103
103
|
.sort((_c = column.comparator) !== null && _c !== void 0 ? _c : DEFAULT_COMPARATOR);
|
|
104
104
|
if (filterType === "text") {
|
|
105
|
-
this.filterOptions[index] = this.filterOptions[index].map(value => this.stringifyValue(column, value, 0));
|
|
105
|
+
this.filterOptions[index] = this.filterOptions[index].map((value) => this.stringifyValue(column, value, 0));
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
}
|
|
@@ -111,7 +111,7 @@ class FtFilterableTable extends FtLitElement {
|
|
|
111
111
|
renderHeader(column, index) {
|
|
112
112
|
const classes = {
|
|
113
113
|
"header-cell": true,
|
|
114
|
-
"header-cell--sticky": this.stickyHeaders
|
|
114
|
+
"header-cell--sticky": this.stickyHeaders,
|
|
115
115
|
};
|
|
116
116
|
return html `
|
|
117
117
|
<div class="${classMap(classes)}"
|
|
@@ -140,7 +140,7 @@ class FtFilterableTable extends FtLitElement {
|
|
|
140
140
|
const defaultSort = (_a = column.defaultSortOrder) !== null && _a !== void 0 ? _a : "asc";
|
|
141
141
|
this.currentSort = {
|
|
142
142
|
column: index,
|
|
143
|
-
order: isSorted && ((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.order) === defaultSort ? this.getOppositeSortOrder(defaultSort) : defaultSort
|
|
143
|
+
order: isSorted && ((_b = this.currentSort) === null || _b === void 0 ? void 0 : _b.order) === defaultSort ? this.getOppositeSortOrder(defaultSort) : defaultSort,
|
|
144
144
|
};
|
|
145
145
|
this.dispatchChangeEvent();
|
|
146
146
|
};
|
|
@@ -172,10 +172,10 @@ class FtFilterableTable extends FtLitElement {
|
|
|
172
172
|
filters: this.filters
|
|
173
173
|
.map((f, i) => ({
|
|
174
174
|
column: i,
|
|
175
|
-
value: f.value
|
|
175
|
+
value: f.value,
|
|
176
176
|
}))
|
|
177
|
-
.filter(f => f.value != undefined),
|
|
178
|
-
sort: this.currentSort
|
|
177
|
+
.filter((f) => f.value != undefined),
|
|
178
|
+
sort: this.currentSort,
|
|
179
179
|
}));
|
|
180
180
|
}
|
|
181
181
|
renderColumnFilter(column, index) {
|
|
@@ -192,10 +192,10 @@ class FtFilterableTable extends FtLitElement {
|
|
|
192
192
|
<div class="column-filter" part="${this.columnPart("filter-container", index)}">
|
|
193
193
|
<ft-text-field
|
|
194
194
|
label="Search ${(_c = column.titleText) !== null && _c !== void 0 ? _c : column.title}"
|
|
195
|
-
@live-change
|
|
195
|
+
@live-change=${onChange}
|
|
196
196
|
part="${this.columnPart("filter", index)}"
|
|
197
197
|
>
|
|
198
|
-
${repeat(options, option => html `
|
|
198
|
+
${repeat(options, (option) => html `
|
|
199
199
|
<ft-text-field-suggestion>${option}</ft-text-field-suggestion>
|
|
200
200
|
`)}
|
|
201
201
|
</ft-text-field>
|
|
@@ -209,7 +209,7 @@ class FtFilterableTable extends FtLitElement {
|
|
|
209
209
|
@change=${onChange}
|
|
210
210
|
part="${this.columnPart("filter", index)}">
|
|
211
211
|
<ft-select-option></ft-select-option>
|
|
212
|
-
${repeat(options, option => html `
|
|
212
|
+
${repeat(options, (option) => html `
|
|
213
213
|
<ft-select-option .value=${option} label="${this.stringifyValue(column, option, 0)}"></ft-select-option>
|
|
214
214
|
`)}
|
|
215
215
|
</ft-select>
|