<!-- Buttons to play with features -->
<div class="buttons">
    <button nxButton="small" (click)="clearSelection()">Clear Selection</button>
    <button nxButton="small" (click)="toggleDense()">
        Toggle dense ({{ dense ? "on" : "off" }})
    </button>
    <button nxButton="small" (click)="toggleZebra()">
        Toggle zebra ({{ zebra ? "on" : "off" }})
    </button>
    <button nxButton="small" (click)="toggleCheckboxSelection()">
        Checkbox selection
    </button>
    <button nxButton="small" (click)="toggleGroup()">
        Toggle group header
    </button>
    <button nxButton="small" (click)="toggleFloatingFilter()">
        Toggle floating filter
    </button>
</div>
<!-- AG Grid Angular Component -->
<ag-grid-angular
    style="width: 100%; height: 100%"
    class="ag-theme-alpine ag-theme-aquila ag-theme-allianz-icons"
    [class.ag-theme-aquila-dense]="dense"
    [class.ag-theme-aquila-zebra]="zebra"
    [columnDefs]="columnsWithGroup"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData$ | async"
    (gridReady)="onGridReady($event)"
    [pagination]="true"
    rowSelection="multiple"
></ag-grid-angular>
