<mat-toolbar class="simple-toolbar">
    <span>Example dynamic changes</span>

    <mat-checkbox
        class="regenerate"
        [ngModelOptions]="{standalone: true}"
        [(ngModel)]="regenerate"
    >
        Auto regenerate (15sec)
    </mat-checkbox>
</mat-toolbar>

<style>
    .example-full-width {
        padding: 5px;
    }
</style>

<ngx-table-builder
    #table
    [row-height]="40"
    [source]="data"
    [vertical-border]="false"
>
    <ngx-column
        important-template
        key="active"
        sticky
        vertical-line
        width="60"
    >
        <ng-template ngx-th />
        <ng-template
            let-row
            ngx-td
            row
        >
            <div [@.disabled]="true">
                <mat-checkbox
                    [checked]="$any(row)?.active"
                    (change)="updateRow(row, 'active', $event.checked)"
                />
            </div>
        </ng-template>
    </ngx-column>

    <ngx-column
        important-template
        key="cost"
    >
        <ng-template
            let-row
            ngx-td
            row
        >
            <span [class.cost-disable]="!$any(row)?.active">{{ $any(row)?.cost | currency }}</span>
        </ng-template>
    </ngx-column>

    <ngx-column
        *ngFor="let key of table.modelColumnKeys"
        [key]="key"
    >
        <ng-container *ngIf="key === 'symbol'; else other">
            <ng-template
                let-symbol
                ngx-td
            >
                {{ symbol }}
            </ng-template>
        </ng-container>

        <ng-template
            #other
            let-cell
            ngx-td
            [nowrap]="false"
        >
            {{ cell }}
        </ng-template>
    </ngx-column>

    <ngx-column
        custom-key
        important-template
        key="symbol-edit"
        sticky-end
        vertical-line
    >
        <ng-template
            let-row
            ngx-td
            row
        >
            <mat-form-field class="example-full-width">
                <div [@.disabled]="true">
                    <input
                        matInput
                        placeholder="Editable field"
                        [ngModel]="$any(row)?.symbol"
                        (ngModelChange)="asyncRow(row, 'symbol', $event)"
                    />
                </div>
            </mat-form-field>
        </ng-template>
    </ngx-column>
</ngx-table-builder>
