🐞 - Hydration error while configuring Table component

[tsironis13]

Code Example URL

https://stackblitz.com/

Description

@Component({
  selector: 'nx-suite-ui-table',
  standalone: true,
  imports: [
    AsyncPipe,
    NgTemplateOutlet,
    TuiTablePagination,
    TuiLet,
    TuiReorder,
    TuiTable,
    ToStringPipe,
    FormsModule,
    NgForOf,
    NgIf,
    ReactiveFormsModule,
    TuiButton,
    TuiChevron,
    TuiDropdown,
    TuiInputModule,
    TuiInputNumberModule,
    TuiLoader,
    TuiTextfieldControllerModule,
  ],
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NxSuiteUiTableComponent<T> implements TableComponent<T> {
  public readonly size = input.required<TableSize>();
  public readonly columns = input.required<TableColumnType<T>[]>();
  public readonly data = input.required<T[]>();
  public readonly contextMenu = input<any>();

  protected readonly sorter$ = new BehaviorSubject<any>('name');

  protected columns1 = ['id', 'name', 'description', 't'];

  protected readonly mappedColumns = computed(() =>
    this.columns().map((i) => i.field)
  );

  protected page = 3;
  protected size1 = 10;

  protected onPagination({ page, size }: TuiTablePaginationEvent): void {
    this.page = page;
    this.size1 = size;
  }
}

I am getting the following error with the defined structure:

I am using AnalogJS with SSR enabled.

Taiga UI version

4.7.0

Browser Used

Chrome

OS Used

Windows

[splincode]

Could you provide mini github repo? I can't reproduce on here https://github.com/taiga-family/taiga-playground

[tsironis13]

This is the repo you could use: https://github.com/tsironis13/nx-suite After installing npm dependencies, run npx nx serve eshop-admin and navigate to /categories. The error will be shown on the console.

Στις Δευ 7 Οκτ 2024 στις 1:45 μ.μ., ο/η Maksim Ivanov < @.***> έγραψε:

Could you provide mini github repo? I can't reproduce on here https://github.com/taiga-family/taiga-playground

— Reply to this email directly, view it on GitHub https://github.com/taiga-family/taiga-ui/issues/9278#issuecomment-2396569299, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZWBZYMMPMS6QGFSKVRDFTZ2JQ5TAVCNFSM6AAAAABPDSL4R2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOJWGU3DSMRZHE . You are receiving this because you authored the thread.Message ID: @.***>