inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
This commit is contained in:
Bartosz Sekuła
2022-05-10 19:09:26 +02:00
committed by GitHub
parent 3a5daf960c
commit 7629797408
25 changed files with 862 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/core/components/datatable.component.md
View File

@@ -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>