diff --git a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html
index 64735a2ffb4..437d513116d 100644
--- a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html
+++ b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.html
@@ -17,14 +17,16 @@
>
+
diff --git a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts
index cad157cd3f8..27809e9fa6e 100644
--- a/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts
+++ b/libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts
@@ -43,6 +43,7 @@ import { delay } from 'rxjs/operators';
]
})
export class AdvancedScrollingExampleComponent {
+ options_demo=['Laptops 1 (Level 1)','Laptops 12 (Level 1)'];
source: TableDataSource;
childSource: ChildTableDataSource;
readonly filterTypeEnum = FilterType;
diff --git a/libs/platform/table-helpers/enums/collection-filter.enum.ts b/libs/platform/table-helpers/enums/collection-filter.enum.ts
index 746ebe0bce7..8a518c5c349 100644
--- a/libs/platform/table-helpers/enums/collection-filter.enum.ts
+++ b/libs/platform/table-helpers/enums/collection-filter.enum.ts
@@ -114,6 +114,7 @@ export const getFilterStrategiesBasedOnDataType = (
dataType: FilterableColumnDataType
): readonly FilterStringStrategy[] | readonly FilterDateStrategy[] => {
switch (dataType) {
+ case FilterableColumnDataType.ARRAY:
case FilterableColumnDataType.STRING:
return FILTER_STRING_STRATEGIES;
case FilterableColumnDataType.NUMBER:
diff --git a/libs/platform/table-helpers/enums/filter-type.enum.ts b/libs/platform/table-helpers/enums/filter-type.enum.ts
index 6033dc4083e..22dc3757935 100644
--- a/libs/platform/table-helpers/enums/filter-type.enum.ts
+++ b/libs/platform/table-helpers/enums/filter-type.enum.ts
@@ -10,5 +10,6 @@ export enum FilterableColumnDataType {
STRING = 'string',
NUMBER = 'number',
BOOLEAN = 'boolean',
- DATE = 'date'
+ DATE = 'date',
+ ARRAY = 'array',
}
diff --git a/libs/platform/table-helpers/table-column.ts b/libs/platform/table-helpers/table-column.ts
index 5384560e59a..b8b6db3b06a 100644
--- a/libs/platform/table-helpers/table-column.ts
+++ b/libs/platform/table-helpers/table-column.ts
@@ -30,6 +30,9 @@ export abstract class TableColumn {
/** Data type the column represents. */
abstract dataType: FilterableColumnDataType;
+ /** Optional Array of available filter values. */
+ abstract filterValuesOptions: string[];
+
/** Width of the column cells. */
abstract width: string;
diff --git a/libs/platform/table/components/table-column/table-column.component.ts b/libs/platform/table/components/table-column/table-column.component.ts
index 136f65ac069..4eaebac996c 100644
--- a/libs/platform/table/components/table-column/table-column.component.ts
+++ b/libs/platform/table/components/table-column/table-column.component.ts
@@ -95,6 +95,10 @@ export class TableColumnComponent extends TableColumn implements OnInit, OnChang
@Input()
dataType: FilterableColumnDataType = FilterableColumnDataType.STRING;
+ /** Array of available filter options */
+ @Input()
+ filterValuesOptions: string[] = [];
+
/** Toggles grouping feature for the column. */
@Input()
groupable = false;
diff --git a/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html b/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html
index 8a18013a78a..c9cd9f65bd9 100644
--- a/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html
+++ b/libs/platform/table/components/table-p13-dialog/filtering/filter-rule.component.html
@@ -85,6 +85,18 @@
{{ 'platformTable.P13FilterBooleanOptionFalse' | fdTranslate }}
+ } @else if (rule.dataType === DATA_TYPE.ARRAY && rule.filterValuesOptions?.length) {
+
+
+ @for (option of rule.filterValuesOptions; track $index) {
+ {{ option }}
+ }
+
} @else {
{
/** Data type */
dataType?: FilterableColumnDataType;
+ /** Available filter Options */
+ filterValuesOptions: string[] = [];
+
/** returns whether filter rule has value */
get hasValue(): boolean {
return this.valueExists(this.value) || this.valueExists(this.value2);
@@ -65,6 +69,9 @@ export class FilterRule {
if (this.strategies.length === 0) {
this.setStrategiesByColumnKey(this.columnKey);
}
+ if (this.filterValuesOptions.length === 0) {
+ this.setFilterValuesOptionsByColumnKey(this.columnKey);
+ }
}
/** @hidden */
@@ -121,6 +128,9 @@ export class FilterRule {
// update data type
this.setDataTypeByColumnKey(columnKey);
+ // update available Filter options
+ this.setFilterValuesOptionsByColumnKey(columnKey);
+
// update available strategies list
this.setStrategiesByColumnKey(columnKey);
}
@@ -132,12 +142,25 @@ export class FilterRule {
if (dataType === this.dataType) {
return;
}
-
this.dataType = dataType;
}
+ /** @hidden */
+ setFilterValuesOptionsByColumnKey(columnKey?: string): void {
+ const filterValuesOptions = this.columns.find((column) => column.key === columnKey)?.filterValuesOptions;
+ if (this.areArraysEqual(filterValuesOptions,this.filterValuesOptions)) {
+ return;
+ }
+ this.filterValuesOptions = filterValuesOptions ? filterValuesOptions : [];
+ }
+
/** @hidden */
private valueExists(value: any): boolean {
return !!value || value === 0 || typeof value === 'boolean';
}
+
+ /** @hidden */
+ private areArraysEqual(arr1: undefined|string[], arr2: undefined|string[]): boolean {
+ return JSON.stringify(arr1) === JSON.stringify(arr2);
+ }
}
diff --git a/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts b/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts
index 900073d539c..192bf6981f1 100644
--- a/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts
+++ b/libs/platform/table/components/table-p13-dialog/table-p13-dialog.component.ts
@@ -166,7 +166,8 @@ export class TableP13DialogComponent implements OnDestroy {
const columns = this._getTableColumns();
const filterBy = state?.filterBy;
const dialogData: FilterDialogData = {
- columns: columns.map(({ label, key, dataType, filterable }) => ({ label, key, dataType, filterable })),
+ // add filterValuesOptions to be sent with the data
+ columns: columns.map(({ label, key, dataType, filterable,filterValuesOptions }) => ({ label, key, dataType, filterable,filterValuesOptions })),
collectionFilter: filterBy
};