<mat-toolbar class="simple-toolbar">
    <span>
        Example selection
        <span *ngIf="table.isRendered">({{ table.source?.length }}x{{ table.displayedColumns.length }})</span>
        <span style="margin-left: 5px">Selected: {{ table.selection.selectionModel.size }}</span>
    </span>
    <button
        mat-raised-button
        class="show-simple"
        (click)="showSample()"
    >
        show code sample
    </button>
</mat-toolbar>

<ngx-table-builder
    #table
    enable-selection
    [produce-disable-fn]="disableFn"
    [source]="data"
>
    <ngx-column
        custom-key
        key="selection"
        sticky
        width="55"
    >
        <ng-template ngx-th>
            <mat-checkbox
                [checked]="table.selectionModel.isAll"
                [indeterminate]="table.selectionModel.isIndeterminate"
                (change)="table.selection.toggleAll(data)"
            />
        </ng-template>
        <ng-template
            let-row
            ngx-td
            row
            (onClick)="$event.preventDefault()"
        >
            <!-- eslint-disable @angular-eslint/template/no-call-expression -->
            <mat-checkbox
                [checked]="table.selectionModel.get($any(row).id)"
                (change)="table.selection.toggle(row)"
            />
        </ng-template>
    </ngx-column>

    <ngx-column
        *ngFor="let key of table.modelColumnKeys"
        [key]="key"
    />
</ngx-table-builder>
