[BUG]: Column Content Project Broken When Using Wrapper Component

[jdgme]

Current Behavior

For many years we have been using a wrapper component for ngx-datatable, setting up common styling and additional controls so they don't need to be repeated on every instance of ngx-datatable. I am currently upgrading a project from Angular 19.2.12 to Angular 21.0.9 and the content projection of the wrappers HTML created columns in the wrapper component's parent (where the data and parameters of the datatable are specified) into ngx-datatable has ceased working.

If I directly use ngx-datatable without the wrapper, the rows display as expected (obviously without the custom work we have done around the datatable). I am unable to provide the full wrapper or the full parent for proprietary reasons.

Expected Behavior

HTML specified ngx-datatable-column tags in the wrapper component's parent are used by ngx-datatable to define columns within ngx-datatable.

Reproduction of the Issue

Parent File

<datatable-wrapper
  #datatableWrapper
  [cssClass]="'activePeople'"
  [messages]="messages"
  [columnMode]="'flex'"
  [rows]="rows"
  [headerHeight]="40"
  [footerHeight]="40"
  [rowHeight]="40"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [rowIdentity]="getRowId"
  [selected]="selected"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  [sorts]="[{ dir: 'asc', prop: 'personId' }]"
  (activate)="onActivate($event)"
  (select)="onSelect($event)"
>
  <ngx-datatable-column
    name="Name"
    prop="nameProp"
    [draggable]="false"
    [flexGrow]="3"
    [resizeable]="true"
  ></ngx-datatable-column>
...
</datatable-wrapper>

Wrapper File

<ngx-datatable
  #datatable
  [ngClass]="getNgxDatatableClasses()"
  [targetMarkerTemplate]="targetMarkerTemplate"
  [rows]="rows"
  [groupRowsBy]="groupRowsBy"
  [groupedRows]="groupedRows"
  [columns]="columns"
  [(selected)]="selected"
  [scrollbarV]="scrollbarV"
  [scrollbarH]="scrollbarH"
  [rowHeight]="rowHeight"
  [columnMode]="columnMode"
  [headerHeight]="headerHeight"
  [footerHeight]="footerHeight"
  [externalPaging]="externalPaging"
  [externalSorting]="externalSorting"
  [limit]="limit"
  [count]="count"
  [offset]="offset"
  [selectionType]="selectionType"
  [reorderable]="reorderable"
  [swapColumns]="swapColumns"
  [sortType]="sortType"
  [(sorts)]="sorts"
  [cssClasses]="cssClasses"
  [messages]="messages"
  [rowIdentity]="rowIdentity"
  [rowClass]="rowClass"
  [selectCheck]="selectCheck"
  [displayCheck]="displayCheck"
  [groupExpansionDefault]="groupExpansionDefault"
  [trackByProp]="trackByProp"
  [selectAllRowsOnPage]="selectAllRowsOnPage"
  [virtualization]="virtualization"
  [treeFromRelation]="treeFromRelation"
  [treeToRelation]="treeToRelation"
  [summaryRow]="summaryRow"
  [summaryHeight]="summaryHeight"
  [summaryPosition]="summaryPosition"
  (scroll)="onScroll($event)"
  (activate)="onActivate($event)"
  (page)="onPage($event)"
  (reorder)="onReorder($event)"
  (resize)="onResize($event)"
  (tableContextmenu)="onTableContextmenu($event)"
  (treeAction)="onTreeAction($event)"
></ngx-datatable>

Version

26.0.0

What browsers are you seeing the problem on?

Chrome

[spike-rabbit]

Sorry for the long response time, I was on vacation the last weeks.

I am not sure if I understood your problem correctly. If you calculated the columns property in your datatable-wrapper using contentChildren then you need to call column on the datatable directive (this is new).

Before:

columnDirectives = contentChildren(DataTableColumnDirective);

columns = computed(() => columnDirectives());

After:

columnDirectives = contentChildren(DataTableColumnDirective);

columns = computed(() => columnDirectives().map(cd => cd.column());