
    <div class="components-table-demo-control-bar">
      <form nz-form nzLayout="inline" [formGroup]="settingForm">
        @for (item of listOfSwitch; track item) {
          <nz-form-item>
            <nz-form-label>{{ item.name }}</nz-form-label>
            <nz-form-control>
              <nz-switch [formControlName]="item.formControlName"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        }
        @for (radio of listOfRadio; track radio) {
          <nz-form-item>
            <nz-form-label>{{ radio.name }}</nz-form-label>
            <nz-form-control>
              <nz-radio-group [formControlName]="radio.formControlName">
                @for (o of radio.listOfOption; track o) {
                  <label nz-radio-button [nzValue]="o.value">{{ o.label }}</label>
                }
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        }
      </form>
    </div>
    <nz-table
      #dynamicTable
      [nzScroll]="{ x: scrollX, y: scrollY }"
      [nzData]="listOfData"
      [nzTableLayout]="settingValue.tableLayout"
      [nzBordered]="settingValue.bordered"
      [nzSimple]="settingValue.simple"
      [nzLoading]="settingValue.loading"
      [nzPaginationType]="settingValue.paginationType"
      [nzPaginationPosition]="settingValue.position"
      [nzShowSizeChanger]="settingValue.sizeChanger"
      [nzFrontPagination]="settingValue.pagination"
      [nzShowPagination]="settingValue.pagination"
      [nzFooter]="settingValue.footer ? 'Here is Footer' : null"
      [nzTitle]="settingValue.title ? 'Here is Title' : null"
      [nzSize]="settingValue.size"
      (nzCurrentPageDataChange)="currentPageDataChange($event)"
    >
      <thead>
        @if (settingValue.header) {
          <tr>
            @if (settingValue.expandable) {
              <th nzWidth="40px" [nzLeft]="fixedColumn"></th>
            }
            @if (settingValue.checkbox) {
              <th
                nzWidth="60px"
                [(nzChecked)]="allChecked"
                [nzLeft]="fixedColumn"
                [nzIndeterminate]="indeterminate"
                (nzCheckedChange)="checkAll($event)"
              ></th>
            }
            <th [nzLeft]="fixedColumn">Name</th>
            <th>Age</th>
            <th>Address</th>
            <th [nzRight]="fixedColumn">Action</th>
          </tr>
        }
      </thead>
      <tbody>
        @for (data of dynamicTable.data; track data) {
          <tr>
            @if (settingValue.expandable) {
              <td [nzLeft]="fixedColumn" [(nzExpand)]="data.expand"></td>
            }
            @if (settingValue.checkbox) {
              <td [nzLeft]="fixedColumn" [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()"></td>
            }
            <td [nzLeft]="fixedColumn">{{ data.name }}</td>
            <td>{{ data.age }}</td>
            <td [nzEllipsis]="settingValue.ellipsis">{{ data.address }}</td>
            <td [nzRight]="fixedColumn" [nzEllipsis]="settingValue.ellipsis">
              <a href="#">Delete</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a href="#">More action</a>
            </td>
          </tr>
          @if (settingValue.expandable) {
            <tr [nzExpand]="data.expand">
              <span>{{ data.description }}</span>
            </tr>
          }
        }
      </tbody>
    </nz-table>
  