[AAE-7817] Show hide columns on datatable (#7580)

* [AAE-7817]  Show hide columns for data-table

* Update

* update tests and uses material harness

* added pipes test

* update

* update

* added tests for datatable

* update

* Added documentation

* Fix for drop column header

* lint fix

* fix lint

demo-shell/src/app/components/datatable/datatable.component.html

@@ -39,6 +39,17 @@
             </data-column>
         </data-columns>
         -->
+
+        <adf-main-menu-datatable-template>
+            <ng-template let-mainMenuTrigger>
+                <adf-datatable-column-selector
+                    [columns]="data.getColumns()"
+                    [mainMenuTrigger]="mainMenuTrigger"
+                    (submitColumnsVisibility)="onColumnsVisibilityChange($event)">
+                </adf-datatable-column-selector>
+            </ng-template>
+        </adf-main-menu-datatable-template>
+
     </adf-datatable>
 
     <ng-template #customColumnHeaderTemplate>

demo-shell/src/app/components/datatable/datatable.component.ts

@@ -326,6 +326,10 @@ export class DataTableComponent {
         ];
     }
 
+    onColumnsVisibilityChange(columns: DataColumn[]): void {
+        this.data.setColumns(columns);
+    }
+
     onExecuteRowAction(event: DataRowActionEvent) {
         const args = event.value;
         window.alert(`My custom action: ${args.action.title}`);