<mat-toolbar class="simple-toolbar">
    <span>Example table in tabs</span>
</mat-toolbar>

<mat-tab-group>
    <mat-tab label="Tab 1">
        <ngx-table-builder
            #table
            [source]="data"
            [vertical-border]="false"
        >
            <ngx-column
                custom-key
                key="action-start"
                sticky
                vertical-line
                width="100"
            >
                <ng-template ngx-th />
                <ng-template
                    let-row
                    ngx-td
                    row
                >
                    <button
                        color="primary"
                        mat-button
                        (click)="alert(row)"
                    >
                        show (A)
                    </button>
                </ng-template>
            </ngx-column>

            <ngx-column
                *ngFor="let key of table.modelColumnKeys"
                [key]="key"
            >
                <ng-template ngx-th>{{ key }}</ng-template>
                <ng-template
                    let-cell
                    ngx-td
                >
                    {{ cell }}
                </ng-template>
            </ngx-column>

            <ngx-column
                custom-key
                key="action-end"
                sticky-end
                vertical-line
                width="100"
            >
                <ng-template ngx-th />
                <ng-template
                    let-row
                    ngx-td
                    row
                >
                    <button
                        color="primary"
                        mat-button
                        (click)="alert(row)"
                    >
                        show (B)
                    </button>
                </ng-template>
            </ngx-column>
        </ngx-table-builder>
    </mat-tab>
    <mat-tab label="Tab 2">
        <ngx-table-builder
            #table
            [source]="data"
            [vertical-border]="false"
        >
            <ngx-column
                *ngFor="let key of table.modelColumnKeys"
                [key]="key"
            >
                <ng-template ngx-th>{{ key }}</ng-template>
                <ng-template
                    let-cell
                    ngx-td
                >
                    {{ cell }}
                </ng-template>
            </ngx-column>

            <ngx-column
                custom-key
                key="edit"
                sticky-end
                vertical-line
                width="80"
            >
                <ng-template ngx-th />
                <ng-template
                    let-row
                    ngx-td
                    row
                >
                    <button
                        color="primary"
                        mat-button
                        (click)="alert(row)"
                    >
                        show
                    </button>
                </ng-template>
            </ngx-column>
        </ngx-table-builder>
    </mat-tab>
    <mat-tab label="Tab 3">
        <ngx-table-builder
            [source]="data"
            [vertical-border]="false"
        >
            <ngx-column key="id">
                <ng-template ngx-th>{{ 'ID' }}</ng-template>
                <ng-template
                    let-id
                    ngx-td
                >
                    {{ id }}
                </ng-template>
            </ngx-column>

            <ngx-column key="name">
                <ng-template ngx-th>{{ 'NAME' }}</ng-template>
                <ng-template
                    let-name
                    ngx-td
                >
                    {{ name }}
                </ng-template>
            </ngx-column>

            <ngx-column key="description">
                <ng-template ngx-th>{{ 'DESCRIPTION' }}</ng-template>
                <ng-template
                    let-description
                    ngx-td
                >
                    {{ description }}
                </ng-template>
            </ngx-column>

            <ngx-column
                custom-key
                key="edit"
                vertical-line
                width="200"
            >
                <ng-template ngx-th />
                <ng-template
                    let-row
                    ngx-td
                    row
                >
                    <div class="table-edit-property__right-column">
                        <button
                            color="primary"
                            mat-button
                            (click)="alert(row)"
                        >
                            show
                        </button>
                    </div>
                </ng-template>
            </ngx-column>
        </ngx-table-builder>
    </mat-tab>
    <mat-tab label="Tab 4">
        <ngx-table-builder
            #table
            [source]="data"
            [vertical-border]="false"
        >
            <ngx-column
                custom-key
                key="action"
                sticky
                vertical-line
                width="80"
            >
                <ng-template ngx-th />
                <ng-template
                    let-row
                    ngx-td
                    row
                >
                    <button
                        color="primary"
                        mat-button
                        (click)="alert(row)"
                    >
                        show
                    </button>
                </ng-template>
            </ngx-column>

            <ngx-column
                *ngFor="let key of table.modelColumnKeys"
                [key]="key"
            >
                <ng-template ngx-th>{{ key }}</ng-template>
                <ng-template
                    let-cell
                    ngx-td
                >
                    {{ cell }}
                </ng-template>
            </ngx-column>
        </ngx-table-builder>
    </mat-tab>
</mat-tab-group>
