<c-container [formGroup]="screenFormGroup" novalidate [magic]="mgc.TodoListList">
    <div #tableContainer id="table-container.1">
        <mat-table #table [dataSource]="dataSource" matSort matSortDisableClear (matSortChange)="tableService.sortData($event)" [magic]="mgc.TTodoList">
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{ 'selected': selection.isSelected(row)}" [magicRow]="row?.rowId" (click)="row? tableService.selectRow(row.rowId) : null"></mat-row>
            <ng-container [magic]="mgc.TC_ToDo" [matColumnDef]="mgc.TC_ToDo">
                <mat-header-cell *matHeaderCellDef>
                    {{ mg.getText(mgc.TC_ToDo) }}
                </mat-header-cell>
                <mat-cell *matCellDef="let row" magicMark="magicTableRowContainer">
                    <c-container #matCell [formGroup]="mg.getFormGroupByRow(row.rowId)" *ngIf="mg.ifRowCreated(row)">
                        <label [magic]="mgc.MToDo_ToDo" [rowId]="row.rowId">{{ mg.getValue(mgc.MToDo_ToDo, row.rowId) }}</label>
                    </c-container>
                </mat-cell>
            </ng-container>
            <ng-container [magic]="mgc.Column134217735" [matColumnDef]="mgc.Column134217735">
                <mat-header-cell *matHeaderCellDef>
                    {{ mg.getText(mgc.Column134217735) }}
                </mat-header-cell>
                <mat-cell *matCellDef="let row" magicMark="magicTableRowContainer">
                    <c-container #matCell [formGroup]="mg.getFormGroupByRow(row.rowId)" *ngIf="mg.ifRowCreated(row)">
                        <button [magic]="mgc.BtnEdit" [rowId]="row.rowId" mat-raised-button color="primary" icon-start name="edit">
                            <mat-icon>edit</mat-icon>
                            {{ mg.getValue(mgc.BtnEdit,row.rowId) }}</button>
                    </c-container>
                </mat-cell>
            </ng-container>
            <ng-container [magic]="mgc.Column134217737" [matColumnDef]="mgc.Column134217737">
                <mat-header-cell *matHeaderCellDef>
                    {{ mg.getText(mgc.Column134217737) }}
                </mat-header-cell>
                <mat-cell *matCellDef="let row" magicMark="magicTableRowContainer">
                    <c-container #matCell [formGroup]="mg.getFormGroupByRow(row.rowId)" *ngIf="mg.ifRowCreated(row)">
                        <button [magic]="mgc.BtnDelete" [rowId]="row.rowId" mat-raised-button color="warn" icon-start name="delete">
                            <mat-icon>delete</mat-icon>
                            {{ mg.getValue(mgc.BtnDelete,row.rowId) }}</button>
                    </c-container>
                </mat-cell>
            </ng-container>
        </mat-table>
        <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" (page)="tableService.mgOnPaginateChange($event)"></mat-paginator>
    </div>
</c-container>