fix(platform): table filter enhancement

libs/core/toolbar/toolbar.component.scss

@@ -4,6 +4,9 @@
     flex-shrink: 0;
 }
 
+.fd-toolbar--no-shrink > * {
+    flex-shrink: 1;
+}
 fdk-dynamic-portal {
     &:not(:last-of-type) {
         [fd-toolbar-item] {

libs/core/toolbar/toolbar.component.ts

@@ -121,6 +121,10 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
     @Input()
     fdType: ToolbarType = 'solid';
 
+    /** Determines if toolbar should be shrunk */
+    @Input()
+    noShrink = false;
+
     /** The title for the toolbar. */
     @Input()
     title: string;
@@ -247,6 +251,7 @@ export class ToolbarComponent implements AfterViewInit, AfterViewChecked, CssCla
     buildComponentCssClass(): string[] {
         return [
             'fd-toolbar',
+            `${this.noShrink ? 'fd-toolbar--no-shrink' : ''}`,
             `fd-toolbar--${this.fdType}`,
             `${this.active && this.fdType === 'info' ? 'fd-toolbar--active' : ''}`,
             `${this.title || this.titleComponent ? 'fd-toolbar--title' : ''}`,

libs/platform/table-helpers/interfaces/collection-filter.interface.ts

@@ -16,6 +16,7 @@ export interface BaseCollectionFilter<T> {
     value2?: Nullable<T>;
     exclude?: boolean;
     strategy?: FilterStrategy;
+    fieldName?: string;
 }
 export interface CollectionStringFilter extends BaseCollectionFilter<string> {
     strategy: FilterStringStrategy;

libs/platform/table-helpers/services/table.service.spec.ts

@@ -72,7 +72,7 @@ describe('TableServiceService', () => {
         const setTableStateSpy = jest.spyOn(service, 'setTableState');
         const filterChangeSpy = jest.spyOn(service.filterChange$, 'next');
         const newFilterBy: CollectionStringFilter[] = [
-            { field: 'name', value: 'Product name', strategy: FILTER_STRING_STRATEGY.CONTAINS }
+            { field: 'name', value: 'Product name', fieldName: 'name', strategy: FILTER_STRING_STRATEGY.CONTAINS }
         ];
         const newState: TableState = { ...DEFAULT_TABLE_STATE, filterBy: newFilterBy };
         const event: FilterChange = { current: newFilterBy, previous: DEFAULT_TABLE_STATE.filterBy };

libs/platform/table-helpers/services/table.service.ts

@@ -6,6 +6,7 @@ import { skip } from 'rxjs/operators';
 import { DEFAULT_TABLE_STATE } from '../constants';
 
 import { toSignal } from '@angular/core/rxjs-interop';
+import { Nullable } from '@fundamental-ngx/cdk/utils';
 import { CollectionFilter, CollectionGroup, CollectionPage, CollectionSort, TableState } from '../interfaces';
 import {
     ColumnsChange,
@@ -188,7 +189,12 @@ export class TableService {
         const prevState = this.getTableState();
         const prevFilterRules = (prevState && prevState.filterBy) || [];
 
-        const newFilterRules: CollectionFilter[] = filterRules ? [...filterRules] : [];
+        const newFilterRules: CollectionFilter[] = filterRules
+            ? filterRules.map((rule) => ({
+                  ...rule,
+                  fieldName: this._getFieldName(rule.field, rule.fieldName)
+              }))
+            : [];
         const state: TableState = { ...prevState, filterBy: newFilterRules };
 
         if (!equal(prevFilterRules, state.filterBy)) {
@@ -209,9 +215,11 @@ export class TableService {
 
         const newFilterRules: CollectionFilter[] = [
             ...prevFilterRules.filter((existing) => !rulesToAdd.find(({ field }) => field === existing.field)),
-            ...rulesToAdd
+            ...rulesToAdd.map((rule) => ({
+                ...rule,
+                fieldName: this._getFieldName(rule.field, rule.fieldName)
+            }))
         ];
-
         const state: TableState = { ...prevState, filterBy: newFilterRules };
 
         if (!equal(prevFilterRules, state.filterBy)) {
@@ -426,10 +434,13 @@ export class TableService {
      * @param state Table state.
      */
     buildFilterRulesMap(state = this.getTableState()): void {
-        const prevState = this.getTableState();
-        const evt = { current: state.filterBy, previous: prevState.filterBy };
+        const filterRulesWithFieldNames = state.filterBy.map((rule) => ({
+            ...rule,
+            fieldName: this._getFieldName(rule.field, rule.fieldName)
+        }));
+
         this.filterRules$.set(
-            state.filterBy.reduce((hash, rule) => {
+            filterRulesWithFieldNames.reduce((hash, rule) => {
                 const key = rule.field;
                 if (!hash.has(key)) {
                     hash.set(key, []);
@@ -438,6 +449,8 @@ export class TableService {
                 return hash;
             }, new Map<string, CollectionFilter[]>())
         );
+
+        const evt = { current: filterRulesWithFieldNames, previous: state.filterBy };
         this.stateChange$.next({ type: 'filter', state: evt });
     }
 
@@ -468,6 +481,12 @@ export class TableService {
         this.buildSortRulesMap();
         this.buildFilterRulesMap();
     }
+
+    /** @hidden */
+    private _getFieldName(field: string, fieldName: Nullable<string>): string {
+        const column = this.tableColumns$.getValue().find((col) => col.key === field);
+        return column ? column.name : fieldName ?? field;
+    }
 }
 
 /** @hidden */

libs/platform/table/components/table-toolbar/table-toolbar.component.html

@@ -160,6 +160,7 @@
     </fd-toolbar>
     @if (appliedFilters().length) {
         <fd-toolbar
+            [noShrink]="true"
             fdType="info"
             [active]="true"
             [titleId]="tableToolbarTitleId"
@@ -168,12 +169,7 @@
         >
             <label fd-toolbar-label>
                 {{ 'platformTable.filteredBy' | fdTranslate }}:
-                @for (filter of appliedFilters(); track filter.columnName; let i = $index) {
-                    {{ filter.columnName }} ({{ filter.params }})
-                    @if (i < appliedFilters().length - 1) {
-                        ,
-                    }
-                }
+                {{ _formatAppliedFilters(appliedFilters()) }}
             </label>
             <fd-toolbar-spacer></fd-toolbar-spacer>
             <button

libs/platform/table/components/table-toolbar/table-toolbar.component.ts

@@ -225,6 +225,16 @@ export class TableToolbarComponent implements TableToolbarInterface {
         this._table.cancelEditing();
     }
 
+    /** @hidden */
+    _formatAppliedFilters(appliedFilters: { columnName: string; params: string }[]): string {
+        return appliedFilters
+            .map((filter, index) => {
+                const separator = index < appliedFilters.length - 1 ? ', ' : '';
+                return `${filter.columnName} (${filter.params})${separator}`;
+            })
+            .join('');
+    }
+
     /** @hidden */
     _expandAll(): void {
         this._table.expandAll();

libs/platform/table/components/table-view-settings-dialog/filtering/filter-step.component.ts

@@ -55,6 +55,10 @@ export class FilterStepComponent implements FiltersViewStep {
     @Input()
     columnKey: string;
 
+    /** Column name to display in the filter */
+    @Input()
+    columnName: string;
+
     /** Table's content density to be used */
     @Input()
     contentDensity: ContentDensity;
@@ -91,6 +95,7 @@ export class FilterStepComponent implements FiltersViewStep {
     _onFilterValueChange(filterValue: any): void {
         const filterBy: CollectionFilter = this._filterBy || {
             field: this.columnKey,
+            fieldName: this.columnName,
             value: null,
             strategy: FILTER_STRATEGY.EQ,
             exclude: false

libs/platform/table/components/table-view-settings-dialog/filtering/filters.component.html

@@ -44,6 +44,7 @@
 } @else if (activeStep === ACTIVE_STEP.FILTER) {
     <fdp-filter-step
         [columnKey]="activeFilterColumnKey!"
+        [columnName]="activeFilter!.label"
         [filter]="activeFilter!"
         [filterBy]="filterBy"
         (back)="goToFilters()"

libs/platform/table/table.component.ts

@@ -1862,7 +1862,7 @@ export class TableComponent<T = any>
     /** @hidden */
     private _setAppliedFilterNames(filters: CollectionFilter[]): void {
         const formattedFilters = filters.map((f) => ({
-            columnName: this._formatColumnName(f.field),
+            columnName: this._formatColumnName(f.fieldName || ''),
             params: this._formatParams(f.value)
         }));
 
@@ -1875,6 +1875,11 @@ export class TableComponent<T = any>
             return String(value); // Handle non-object values
         }
 
+        // handle array
+        if (Array.isArray(value)) {
+            return value.map((val) => this._formatParams(val)).join(', ');
+        }
+
         return Object.entries(value)
             .map(([key, val]) => `${key}: ${this._formatParams(val)}`) // Recursive call for nested objects
             .join(', ');

libs/platform/table/tests/table.component-host.spec.ts

@@ -488,7 +488,7 @@ describe('TableComponent Host', () => {
         describe('data source', () => {
             it('fetch should be triggered when call table.filter()', () => {
                 const filterBy: CollectionFilter[] = [
-                    { field: 'status', value: 'valid', strategy: 'equalTo', exclude: false }
+                    { field: 'status', value: 'valid', strategy: 'equalTo', fieldName: 'status', exclude: false }
                 ];
 
                 tableComponent.filter(filterBy);