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>

24.3.3

24.3.3 (2025-10-31)

Bug Fixes

• always call <ngx-datatable-row-detail [rowHeight]="function"> with correct index (4076829)

24.3.2

24.3.2 (2025-10-24)

Bug Fixes

• headerHeight="auto" should be supported (a22f149), closes #473
• support parallel usage of grouping and details (a4fabd7), closes #147

24.3.1

24.3.1 (2025-10-17)

• Revert "feat(columns): support hidden columns" (de31669)

Bug Fixes

• show the correct number of pages when using row grouping (7d1141c)

24.3.0

24.3.0 (2025-09-29)

Features

• columns: support hidden columns (ea5a410)

Bug Fixes

• column-pinning: hide vertical divider if no horizontal scroll (556e964)
• sort: sort on grouped header column throws errors (dd86662)

24.2.0

24.2.0 (2025-08-21)

Features

• support custom classes for tree toggle icons (117d24e)

Bug Fixes

• pagination: allow space/enter event to paginate (714c5c0), closes #373
• rows are not interactive when using disableRowCheck with grouped rows (c689f09)

24.1.0

24.1.0 (2025-07-16)

Features

• export pager component for reuse in custom footer (d1bd9c0), closes #324

Bug Fixes

• avoid duplicate row identity warnings (8f32d43)
• make pager accessible with keyboard (de21d1b), closes #339
• no error on undefined limit (12522dd), closes #349

Performance Improvements

• optimize DraggableDirective with requestAnimationFrame for smoother updates (5dd8628)

24.0.0

24.0.0 (2025-07-02)

Features

• add aria-labels to row selection checkboxes (ae8c946)
• support using string values in previous enum locations (9033187)

Bug Fixes

• add treeToggleTemplate property in toInternalColumn method to make custom tree template work (97e8529)
• calculate correct column width in flex mode after resize (f6d6cf9), closes #155
• never render a resize handle after the last column (51e3daf)
• prevent column reordering between frozen and non-frozen columns (9c38292), closes #145

DEPRECATIONS

• All constants that replaced the previous enums should no longer be used. Use the plain string value instead.

  Example:

  // Before
  @Component({template: `<ngx-datatable [columnMode]="ColumnMode.Force" />`})
  class MyComponent {
    ColumnMode = ColumnMode;
  }
  
  // After
  @Component({template: `<ngx-datatable [columnMode]="'force'" />`})
  class MyComponent { }

BREAKING CHANGES

• All output properties are now readonly and cannot be reassigned.
• All output properties are now readonly and cannot be reassigned.