26.2.2

26.2.2 (2026-08-26)

Bug Fixes

• header: handle drag end without movement (4292290), closes #790

27.0.3

27.0.3 (2026-08-25)

Bug Fixes

• body: move arrow-key focus between grouped rows (19c0f3f)
• body: preserve focus during virtual keyboard navigation (8802273)
• body: preserve original cell index in keyboard navigation (9f50297)
• header: handle drag end without movement (87e4531), closes #790
• restore partial typing for all NgxDatatableConfig fields (8f82f90)

Performance Improvements

• datatable: measure initial dimensions without debounce (e77cd65)

27.0.2

27.0.2 (2026-08-11)

Bug Fixes

• add loading indicator aria label (4b53146)
• add proper ARIA roles to datatable table structure (efd4b36)

27.0.1

27.0.1 (2026-08-06)

Bug Fixes

• support full-height empty content (a6ef5b7), closes #691

27.0.0

27.0.0 (2026-07-24)

Features

• datatable-row-ref can optionally replicate column widths on clone (387759d)
• update to Angular 22 (e009477)

Bug Fixes

• header: add missing aria-sort (af960f7)

BREAKING CHANGES

• Angular 22+ is required.
  Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=29.0-21.0

• The DatatableComponent (select) output has been removed.

  Use (selectedChange) with the selected array, or two-way [(selected)] binding instead.

  Before:

  <ngx-datatable [selected]="mySelection" (select)="onSelect($event)"></ngx-datatable>

  After:

  <ngx-datatable [selected]="mySelection" (selectedChange)="onSelect({selected: $event})"></ngx-datatable>
  <!-- or -->
  <ngx-datatable [(selected)]="mySelection"></ngx-datatable>

• The DatatableComponent (sort) output has been removed. Use (sortsChange) or two-way [(sorts)] binding instead.
  For server-side paging, subscribe to (page) and read PageEvent.sorts; page emits for both page and sort changes.

  Before:

  <ngx-datatable [sorts]="mySorts" (sort)="onSort($event)"></ngx-datatable>

  After:

  <ngx-datatable [sorts]="mySorts" (sortsChange)="onSort({sorts: $event})"></ngx-datatable>
  <!-- or -->
  <ngx-datatable [(sorts)]="mySorts"></ngx-datatable>

• All content of the header and body now reside in one single CSS grid.

  This can affect drag/drop interactions build around datatable-row-def using @angular/cdk
  or other solutions that depend on cloneNode to create drag previews.

  Enable preserveColumnWidthsOnClone on datatable-row-def to automatically copy the current
  column sizes into the cloned row, making independent of the table CSS grid.

• Columns are held at their configured width and no longer
  grow to fit cell content: overflowing content is clipped rather than widening
  the column (and pushing later columns) as it did before. Give columns that
  need more room an explicit width/minWidth (e.g. narrow checkbox columns).

• The class horizontal-overflow is now applied on the ngx-datatable element.
  It was previously applied seperately within the header and boy.

  The class indicates that a horizontal scrollbar is visible.

• The header is now a sticky element inside the single css-grid
  scroll container, so body rows scroll underneath it. A non-transparent
  background-color is therefore required on the datatable-header; otherwise the
  scrolling content shows through and overflows the header. The bundled material
  and bootstrap themes now set this automatically, but custom themes must add a
  background-color to .datatable-header.

• The DatatableComponent (select) output has been removed.

  Use (selectedChange) with the selected array, or two-way [(selected)] binding instead.

  Before:

  <ngx-datatable [selected]="mySelection" (select)="onSelect($event)"></ngx-datatable>

  After:

  <ngx-datatable [selected]="mySelection" (selectedChange)="onSelect({selected: $event})"></ngx-datatable>
  <!-- or -->
  <ngx-datatable [(selected)]="mySelection"></ngx-datatable>

• The DatatableComponent (sort) output has been removed. Use (sortsChange) or two-way [(sorts)] binding instead.
  For server-side paging, subscribe to (page) and read PageEvent.sorts; page emits for both page and sort changes.

  Before:

  <ngx-datatable [sorts]="mySorts" (sort)="onSort($event)"></ngx-datatable>

  After:

  <ngx-datatable [sorts]="mySorts" (sortsChange)="onSort({sorts: $event})"></ngx-datatable>
  <!-- or -->
  <ngx-datatable [(sorts)]="mySorts"></ngx-datatable>

• All content of the header and body now reside in one single CSS grid.

  This can affect drag/drop interactions build around datatable-row-def using @angular/cdk
  or other solutions that depend on cloneNode to create drag previews.

  Enable preserveColumnWidthsOnClone on datatable-row-def to automatically copy the current
  column sizes into the cloned row, making independent of the table CSS grid.

• Columns are held at their configured width and no longer
  grow to fit cell content: overflowing content is clipped rather than widening
  the column (and pushing later columns) as it did before. Give columns that
  need more room an explicit width/minWidth (e.g. narrow checkbox columns).

• The class horizontal-overflow is now applied on the ngx-datatable element.
  It was previously applied seperately within the header and boy.

  The class indicates that a horizontal scrollbar is visible.

• The header is now a sticky element inside the single css-grid
  scroll container, so body rows scroll underneath it. A non-transparent
  background-color is therefore required on the datatable-header; otherwise the
  scrolling content shows through and overflows the header. The bundled material
  and bootstrap themes now set this automatically, but custom themes must add a
  background-color to .datatable-header.

DEPRECATIONS

• DatatableComponent.recalculate, recalculateDims and
  onWindowResize are now no-ops and should no longer be called. The table
  re-measures itself automatically whenever its size changes, so manual
  triggering is no longer needed.
• DatatableComponent.recalculate, recalculateDims and
  onWindowResize are now no-ops and should no longer be called. The table
  re-measures itself automatically whenever its size changes, so manual
  triggering is no longer needed.

26.2.1

26.2.1 (2026-06-19)

Bug Fixes

• e2e: bump @playwright/test to 1.61.0 to match CI docker image (e7ea3e0)
• e2e: remove caret from @playwright/test version in package-lock.json (5cd5d18)
• header: allow sorting on mobile devices with reorderable enabled (c1e1b22), closes #692

26.2.0

26.2.0 (2026-06-10)

Features

• summary: add DatatableSummaryRowDirective for custom templates (4c08d79)

Bug Fixes

• ensure custom sort icons are applied (008b011)

26.1.0

26.1.0 (2026-05-27)

Features

• client side scrolling (d46c8ae), closes #635
• support skipping deep change detection for rows (d3302c6)

Bug Fixes

• compute correct level when child precedes parent in tree rows (5b8a569)
• fill viewport with ghost loader rows on initial load (1cf26f5)
• keep custom column properties (fada629)
• keep prior selection when shift-clicking after ctrl-click (d9b0c33), closes #582
• wait for DOM updates before scrolling to expanded tree row (b4389af)

26.0.0

26.0.0 (2026-03-17)

Features

• replace scss @import with @use (14073de)
• update to Angular 21 (70c50a3)

Bug Fixes

• always maintain proportional column sizes (d69957c), closes #617
• detect tree changes after treeAction emit (6645fb0)
• do not announce non‑draggable headers as clickable (55f6021), closes #583
• gracefully ignore non-sortable rows when sorting (b6dfdcf), closes #578 #611
• only use trackByProp on row level with strict type (9bdf3f2)
• sync header and body horizontal scroll via direct DOM scrollLeft (54a4132)

BREAKING CHANGES

• DatatableComponent.trackByProp input now enforce strict type check as key of row.

  Before:

  // Even though name is not a valid prop on rows it is allowed to be used with trackByProp.

  <ngx-datatable
   trackByProp="'name'"
   [rows]="[{id: 1}, {id: 2}]"
  >
  

  After:
  Typescript would give compilation error as name is not known property in rows.

• Renamed SCSS variables:

  • $disable-row-text-color to $datatable-disable-row-text-color
  • $datatble-ghost-cell-animation-duration to $datatable-ghost-cell-animation-duration

  This only affects the material and bootstrap theme.

• Angular 21+ is required.
  Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=19.0-20.0;;

25.0.0

25.0.0 (2025-12-02)

Features

• convert selected to signal model with two-way binding (85ed2ae)
• convert sorts to signal model with two-way binding (e2f4928)
• update to Angular 20 (327e91b)

Bug Fixes

• always apply role="row" on summary row (59f9b09)
• column compareFn should not use sort direction (208ac4a)
• use actual buttons in pager (8ad98e9)
• use existing row and cell class styles on ghost rows (a2cfbdd)

BREAKING CHANGES

• The table no longer calls TableColumn.compareFn
  with the sort direction.
  The table already applies the proper direction.
  This change only removes the parameter, the sorting itself remains unchanged.

  Any usages of the direction in custom compareFn must be removed.
  Implementations which use this property can always return the value for direction='desc',
  to achieve the same result as before.

• Angular 20+ is required.
  Follow the Angular update guide to update your app: https://angular.dev/update-guide?v=19.0-20.0;

• The pager component now uses buttons instead of anchors.
  We did this change to properly reflect the nature of those buttons,
  which have never been anchors in terms of behavior.

  This change affects custom themes. Please adjust them accordingly:

  // Before
  .datatable-pager li a {
    // styling
  }
  
  // After
  .datatable-pager .page-button {
    // Override default button styles
    border: 0;
    background none;
    // previous styling
  }

• The selected input no longer mutates the original array
  passed to the component. Applications that rely on the array being updated
  in place must switch to two-way binding with [(selected)] to maintain
  reactivity.

• Ghost loader rows will now always use the existing datatable-body-row and datatable-body-cell classes for styling.

  This change ensures consistent styling between regular rows and ghost loader rows, improving visual consistency across the table. Previously, ghost loaders did not always apply these row styles, which caused ghost rows to not have the correct height, cell padding, and bottom border.

  To override or customize ghost loader styles, use the ghost-element and ghost-cell classes.

• Several fields and methods are removed from the public API.
  Those fields were never intended to be exposed.

• Previously, the groupedRows input was updated by the datatable,
  when groupRowsBy was used. This behavior was dropped. groupedRows will only contain
  application provided values. The table calculates internal the actual groupedRows
  without exposing them.

• @siemens/ngx-datatable no longer contains an index.scss and index.css.
  Those files were empty, and its usages can be removed without further changes.

• Migration to Angular signal inputs/outputs.

  All components now use Angular’s input(), model(), and output() functions
  instead of the @Input/@Output decorators. Consider the following
  implications for your code:

  Template bindings: No changes required! Continue using [inputName] and
  (outputName) in templates as before.

  Programmatic access: Use template binding whenever possible. If not
  possible, understand that setting input values programmatically is only
  possible for model() inputs. Reading input values programmatically also
  requires adjustments for the signal API:

  class Component {
    @ViewChild(DatatableComponent) private datatableComponent!: DatatableComponent;
    myFunction(): void {
      // Before
      const value = this.datatableComponent.rows;
      // After
      const value = this.datatableComponent.rows();
    }
  }

  If programmatically subscribing to outputs is needed, read the following guide:
  https://angular.dev/guide/components/outputs#subscribing-to-outputs-programmatically

DEPRECATIONS

• The DatatableComponent.sort output is deprecated; use (sortsChange) or two-way binding instead.

  Before:

  <ngx-datatable [sorts]="mySorts" (sort)="onSort($event)"></ngx-datatable>

  After:

  <ngx-datatable [sorts]="mySorts" (sortsChange)="onSort({sorts: $event})"></ngx-datatable>
  <!-- or -->
  <ngx-datatable [(sorts)]="mySorts"></ngx-datatable>

• The DatatableComponent.select output is deprecated; use (selectedChange)
  or two-way binding instead .

  Before:

  <ngx-datatable [selected]="mySelection" (select)="onSelect($event)"></ngx-datatable>

  After:

  <ngx-datatable [(selected)]="mySelection" (selectedChange)="onSelect({selected: $event})"></ngx-datatable>
  <!-- or -->
  <ngx-datatable [(selected)]="mySelection"></ngx-datatable>