[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

docs/core/components/data-column.component.md

@@ -53,6 +53,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | key | `string` |  | Data source key. Can be either a column/property key like `title`  or a property path like `createdBy.name`. |
 | sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
 | draggable | `boolean` | false | Toggles drag and drop for header column. |
+| isHidden | `boolean` | false | Hides columns |
 | sortingKey | `string` |  | When using server side sorting the column used by the api call where the sorting will be performed |
 | srTitle | `string` |  | Title to be used for screen readers. |
 | title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |

docs/core/components/datatable.component.md

@@ -257,7 +257,7 @@ You can add [Data column component](data-column.component.md) instances to defin
         <!--Add your custom empty template here-->
         <ng-template>
             <div></div>
-            <span> My custom value </spam>
+            <span> My custom value </span>
         </ng-template>
     </data-column>
 </adf-datatable>
@@ -312,6 +312,27 @@ while the data for the table is loading:
     }
 ```
 
+You can also show main menu for datatable using `<adf-main-menu-datatable-template>`
+
+```html
+<adf-datatable ...>
+   <adf-main-menu-datatable-template>
+        <ng-template let-mainMenuTrigger>
+            <!--Add your custom main menu template here-->
+            <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>
+```
+
+Provided template receives `let-mainMenuTrigger`, so you can programaticaly work with the menu (please see [MatMenuTrigger](https://material.angular.io/components/menu/overview#toggling-the-menu-programmatically)).
+
+For convenience, you can use `<adf-datatable-column-selector>` which will allow you to change column visibility.
+
 \###Styling transcluded content
 
 When adding your custom templates you can style them as you like. However, for an out of the box experience, if you want to apply datatable styles to your column you will need to follow this structure:
@@ -375,6 +396,8 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
 | rowDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataRowEvent`](../../../lib/core/datatable/data/data-row-event.model.ts)`>` | Emitted when the user double-clicks a row. |
 | showRowActionsMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/data-cell.event.ts)`>` | Emitted before the actions menu is displayed for a row. |
 | showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
+| columnOrderChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataColumn`](../../../lib/core/datatable/components/data-cell.event.ts)`>` | Emitted after dragging and dropping column header. |
+
 
 ## Details
 
@@ -440,7 +463,7 @@ Given that DataTable raises bubbling DOM events, you can handle drop behavior fr
     (header-drop)="onDrop($event)"
     (cell-dragover)="onDragOver($event)"
     (cell-drop)="onDrop($event)">
-    
+
     <adf-datatable [data]="data">
     </adf-datatable>
 </div>