NGX Data Table

Modern Angular 18 data table component with filtering, grouping, and sorting capabilities. Built with standalone components and signals.

✨ Features

• 🔍 Advanced filtering with query builder
• 📊 Multi-level grouping with drag & drop
• 🔄 Sorting capabilities
• 🎨 Material Design styling
• ♿ Full accessibility support
• 📱 Responsive design
• ⚡ Standalone components (no NgModules!)
• 🎯 Signals support
• 🔥 Angular 18 optimized

📦 Installation

npm install @your-org/ngx-data-table

📋 Peer Dependencies

npm install @angular/common @angular/core @angular/cdk @angular/material @angular/forms

🚀 Usage (Standalone - Recommended)

Simple Example

import { Component } from '@angular/core';
import { TableComponent, ColumnDefinition } from '@your-org/ngx-data-table';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TableComponent],
  template: `
    <app-table
      [data]="data"
      [columnDefinitions]="columns"
      [sortableColumns]="sortableColumns"
    />
  `
})
export class AppComponent {
  data = [
    { id: 1, name: 'Product 1', price: 100 },
    { id: 2, name: 'Product 2', price: 200 }
  ];

  columns: ColumnDefinition[] = [
    { key: 'id', label: 'ID', icon: 'tag' },
    { key: 'name', label: 'Name', icon: 'label' },
    { key: 'price', label: 'Price', icon: 'attach_money' }
  ];

  sortableColumns = ['id', 'name', 'price'];
}

Complete Example with Filtering and Grouping

import { Component, signal } from '@angular/core';
import {
  TableComponent,
  AdvancedFilterComponent,
  GroupingControlComponent,
  ColumnDefinition,
  FilterField,
  FilterQuery
} from '@your-org/ngx-data-table';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [
    TableComponent,
    AdvancedFilterComponent,
    GroupingControlComponent
  ],
  template: `
    <app-advanced-filter
      [fields]="filterFields()"
      (filterApplied)="onFilterApplied($event)"
      (filterCleared)="onFilterCleared()"
    />

    <app-grouping-control
      [availableColumns]="columns()"
      (groupingChanged)="onGroupingChanged($event)"
    />

    <app-table
      [data]="data()"
      [columnDefinitions]="columns()"
      [sortableColumns]="sortableColumns()"
      [groupBy]="groupBy()"
      [filterQuery]="currentFilter()"
    />
  `
})
export class DemoComponent {
  data = signal([
    { id: 1, name: 'Product 1', category: 'Electronics', price: 299.99 },
    { id: 2, name: 'Product 2', category: 'Books', price: 19.99 }
  ]);

  columns = signal<ColumnDefinition[]>([
    { key: 'id', label: 'ID', icon: 'tag' },
    { key: 'name', label: 'Name', icon: 'label' },
    { key: 'category', label: 'Category', icon: 'category' },
    { key: 'price', label: 'Price', icon: 'attach_money' }
  ]);

  filterFields = signal<FilterField[]>([
    { key: 'name', label: 'Name', type: 'text' },
    { key: 'price', label: 'Price', type: 'number' }
  ]);

  sortableColumns = signal(['id', 'name', 'price']);
  groupBy = signal<string[]>([]);
  currentFilter = signal<FilterQuery | null>(null);

  onGroupingChanged(groups: string[]) {
    this.groupBy.set(groups);
  }

  onFilterApplied(filter: FilterQuery) {
    this.currentFilter.set(filter);
  }

  onFilterCleared() {
    this.currentFilter.set(null);
  }
}

📚 API Documentation

TableComponent

Inputs:

• data: T[] - Array of data items
• columnDefinitions: ColumnDefinition[] - Column configuration
• sortableColumns: string[] - Sortable column keys
• groupBy: string[] - Grouping keys
• config: TableConfig<T> - Advanced configuration
• filterQuery: FilterQuery | null - Filter query

Outputs:

• groupingChanged: string[] - Emits when grouping changes

AdvancedFilterComponent

Inputs:

• fields: FilterField[] - Available filter fields

Outputs:

• filterApplied: FilterQuery - Emits when filter is applied
• filterCleared: void - Emits when filter is cleared

GroupingControlComponent

Inputs:

• availableColumns: ColumnDefinition[] - Available columns

Outputs:

• groupingChanged: string[] - Emits when grouping changes

🎨 Theming

The library uses Angular Material theming. Make sure to include Material theme in your styles.scss:

@use '@angular/material' as mat;

@include mat.core();

$primary: mat.define-palette(mat.$teal-palette);
$accent: mat.define-palette(mat.$amber-palette);

$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
  )
));

@include mat.all-component-themes($theme);

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.

📄 License

MIT © [Your Name]