diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts
index d898cdb5a9..87ca4ee4fc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts
@@ -15,8 +15,8 @@
 ///
 
 import { Component, Inject, InjectionToken } from '@angular/core';
-import { isDefinedAndNotNull } from '@app/core/utils';
-import { SelectableColumnsPipe } from '@app/shared/pipe/selectable-columns.pipe';
+import { isDefinedAndNotNull } from '@core/utils';
+import { SelectableColumnsPipe } from '@shared/public-api';
 import { DisplayColumn } from '@home/components/widget/lib/table-widget.models';
 
 export const DISPLAY_COLUMNS_PANEL_DATA = new InjectionToken<any>('DisplayColumnsPanelData');
@@ -35,9 +35,9 @@ export class DisplayColumnsPanelComponent {
 
   columns: DisplayColumn[];
 
-  constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData) {
-    const selectableColumnsPipe = new SelectableColumnsPipe();
-    this.columns = selectableColumnsPipe.transform(this.data.columns);
+  constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData,
+              private selectableColumnsPipe:SelectableColumnsPipe ) {
+    this.columns = this.selectableColumnsPipe.transform(this.data.columns);
   }
 
   get allColumnsVisible(): boolean {
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 9fd6e4a71e..619c64cfb1 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -236,6 +236,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
 @NgModule({
   providers: [
     DatePipe,
+    SelectableColumnsPipe,
     MillisecondsToTimeStringPipe,
     EnumToArrayPipe,
     HighlightPipe,