Function createTestTable

packages/angular-table/tests/flex-render-table.test.ts:355–473

(
  data: TestData[],
  columns: ColumnDef<TestData, any>[],
  optionsFn?: () => Partial<TableOptions<TestData>>,
)

type TestData = { id: string; title: string }

export function createTestTable(
  data: TestData[],
  columns: ColumnDef<TestData, any>[],
  optionsFn?: () => Partial<TableOptions<TestData>>,
) {
  @Component({
    template: `
      <table>
        <thead data-testid="thead">
          @for (headerGroup of table.getHeaderGroups(); track headerGroup.id) {
            <tr
              data-testid="thead_row"
              [attr.data-testid]="'thead_headergroup_' + headerGroup.id"
            >
              @for (header of headerGroup.headers; track header.id) {
                @if (!header.isPlaceholder) {
                  <th
                    [attr.data-testid]="
                      'thead_headergroup_' + headerGroup.id + '_' + header.id
                    "
                  >
                    <ng-container
                      *flexRender="
                        header.column.columnDef.header;
                        props: header.getContext();
                        let header
                      "
                    >
                      <span [innerHTML]="header"></span>
                    </ng-container>
                  </th>
                }
              }
            </tr>
          }
        </thead>
        <tbody>
          @for (row of table.getRowModel().rows; track row.id) {
            <tr [attr.data-testid]="'row_' + row.id">
              @for (cell of row.getVisibleCells(); track cell.id) {
                <td [attr.data-testid]="'row_' + row.id + '_cell_' + cell.id">
                  <ng-container
                    *flexRender="
                      cell.column.columnDef.cell;
                      props: cell.getContext();
                      let cell
                    "
                  >
                    <span [innerHTML]="cell"></span>
                  </ng-container>
                </td>
              }
            </tr>
          }
        </tbody>
      </table>

      <button (click)="(0)">Trigger CD</button>