<cd-table [data]="data"
          [columns]="columns"
          columnMode="flex"
          [toolHeader]="false"
          [autoReload]="false"
          [autoSave]="false"
          [footer]="false"
          size="xs"
          [layer]="0"
          [limit]="0">
</cd-table>
<ng-template #cellScopeCheckboxTpl
             let-column="data.column"
             let-row="data.row"
             let-value="data.value">
  <div class="m-2">
    <cds-checkbox id="scope_{{ row.scope }}"
                  [checked]="isRowChecked(row.scope)"
                  [disabled]="isDisabled"
                  (checkedChange)="onClickCellCheckbox(row.scope, column.prop, $event)"
                  i18n>
    <span class="datatable-permissions-scope-cell-label custom-control-label"
          for="scope_{{ row.scope }}">{{ value }}</span>
    </cds-checkbox>
  </div>
</ng-template>
<ng-template #cellPermissionCheckboxTpl
             let-column="data.column"
             let-row="data.row"
             let-value="data.value">
  <div class="m-2">
    <cds-checkbox [id]="row.scope + '-' + column.prop"
                  [checked]="value"
                  [disabled]="isDisabled"
                  (checkedChange)="onClickCellCheckbox(row.scope, column.prop, $event)"
                  i18n>
    <span class="custom-control-label"
          [for]="row.scope + '-' + column.prop"></span>
    </cds-checkbox>
  </div>
</ng-template>
<ng-template #headerPermissionCheckboxTpl
             let-column="data">
  <div class="m-2">
    <cds-checkbox id="header_{{ column.prop }}"
                  [disabled]="isDisabled"
                  [checked]="isHeaderChecked(column.prop)"
                  (checkedChange)="onClickHeaderCheckbox(column.prop, $event)"
                  i18n>
    <span class="datatable-permissions-header-cell-label custom-control-label"
          for="header_{{ column.prop }}">{{ column.name }}</span>
    </cds-checkbox>
  </div>
</ng-template>
