ngx-datatable

ngx-datatable is an Angular component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with no external dependencies. The table was designed to be extremely flexible and light; it doesn't make any assumptions about your data or how you: filter, sort or page it.

It was built for modern browsers using TypeScript, CSS3 and HTML5 and Angular >=4.0.0. This is the sister project of the angular-data-table that is designed for Angular 1.x.

Example

Show source

import { Component, inject, signal } from '@angular/core';
import { DatatableComponent, TableColumn } from '@siemens/ngx-datatable';

import { Employee } from '../data.model';
import { DataService } from '../data.service';

@Component({
  selector: 'fluid-row-height-demo',
  imports: [DatatableComponent],
  template: `
    <ngx-datatable
      class="material"
      rowHeight="auto"
      columnMode="force"
      [rowDraggable]="true"
      [rows]="rows()"
      [loadingIndicator]="loadingIndicator()"
      [columns]="columns"
      [headerHeight]="50"
      [footerHeight]="50"
      [reorderable]="reorderable"
      [scrollbarV]="true"
      [virtualization]="false"
    />
  `,
  host: { class: 'datatable-example' }
})
export class FluidRowHeightComponent {
  static readonly exampleTitle = 'Fluid Row Height';
  private dataService = inject(DataService);
  readonly rows = signal<Employee[]>([]);
  readonly loadingIndicator = signal(true);
  reorderable = true;

  columns: TableColumn[] = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company', sortable: false }
  ];

  constructor() {
    this.dataService.load('company.json').subscribe(data => {
      this.rows.set(data);
      setTimeout(() => this.loadingIndicator.set(false), 1500);
    });
  }
}