npm package: @favio21/ngx-data-table
Description: Modern Angular 18 data table component with filtering, grouping, and sorting capabilities. Built with standalone components and signals.
Latest version: 0.0.1

# 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
```bash
npm install @your-org/ngx-data-table
```

## 📋 Peer Dependencies
```bash
npm install @angular/common @angular/core @angular/cdk @angular/material @angular/forms
```

## 🚀 Usage (Standalone - Recommended)

### Simple Example
```typescript
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
```typescript
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`:
```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]