acy-datatable

Angular 21 ile uyumlu, hafif ve bağımlılığı düşük datatable bileşeni.

Özellikler

• Standalone Angular component (ac-datatable)
• Kolon bazlı sıralama
• Arama / filtreleme
• Sayfalama
• Satır tıklama eventi
• Tip güvenli kolon tanımı

Kurulum

npm install acy-datatable

Kullanım

import { Component } from '@angular/core';
import { DataTableColumn, DataTableComponent } from 'acy-datatable';

interface UserRow {
  id: number;
  name: string;
  email: string;
  status: string;
}

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [DataTableComponent],
  template: `
    <ac-datatable
      [columns]="columns"
      [data]="rows"
      [pageSize]="10"
      (rowClick)="onRowClick($event)"
    />
  `
})
export class UsersComponent {
  rows: UserRow[] = [
    { id: 1, name: 'Ali', email: '[email protected]', status: 'active' },
    { id: 2, name: 'Ayse', email: '[email protected]', status: 'passive' }
  ];

  columns: DataTableColumn<UserRow>[] = [
    { key: 'id', label: 'ID', sortable: true, width: '90px', align: 'right' },
    { key: 'name', label: 'Ad Soyad', sortable: true },
    { key: 'email', label: 'E-posta', sortable: true },
    {
      key: 'status',
      label: 'Durum',
      sortable: true,
      formatter: (value) => (value === 'active' ? 'Aktif' : 'Pasif')
    }
  ];

  onRowClick(row: UserRow): void {
    console.log('Satir secildi:', row);
  }
}

API

Inputs

• columns: DataTableColumn<T>[] (required)
• data: T[]
• searchTerm: string
• pageSize: number (default: 10)
• pageSizeOptions: number[] (default: [10, 25, 50, 100])
• emptyMessage: string (default: Kayıt bulunamadı)
• loading: boolean (default: false)
• showSearch: boolean (default: true)

Outputs

• pageChange: DataTablePageChangeEvent
• sortChange: DataTableSortChangeEvent<T>
• rowClick: T

Geliştirme

npm install
npm run build

Build çıktısı: dist/angular-datatable

Lisans

MIT