Angular – A’dan Z’ye Smart Table Component Kullanımı

Merhaba,

Bu içeriğimizde Angular uygulamalarında akıllı tablo yapısı olan Smart Table componentini a’dan z’ye tüm özellikleriyle ele alacak ve nasıl kullanıldığını inceleyeceğiz. İlgilenenler bilir ki, Angular mimarisinde kullanılmak üzere inşa edilmiş birden fazla tablo componenti mevcuttur. Kimi sadece veri listeleme özelliğine sahipken, bir diğeri dahili CRUD işlemlerini barındırmakta yahut tek bir tipte fonksiyonelliğe sahip olmaktadır. Lakin birçoğu yazılımcının detaylara müdahale etmesine izin vermemekte yahut ileri düzey tablo işlevselliklerinde senaryoya beklenen esneklikte eşlik edememektedir.

Smart Table componenti, Angular mimarisinde tablo araçlarından etkili, esnek ve kullanışlı özellik sergileyen componentlerden biridir. Dahili olarak bünyesinde barındırdığı CRUD işlemlerine ek olarak custom(özel) yapılanmaları desteklemekte, yazılımcıya ihtiyaca dönük özelleştirilmiş kolonlar oluşturmasına müsade etmekte ve tüm bunların yanında kolonlara bağlı eventlar tanımlanmasını, filtreler uygulamasını, sayfalama yapılmasını vs. desteklemektedir.

Şimdi hiç vakit kaybetmeden örnek bir Angular uygulaması üzerinden Smart Table componentini incelemeye başlayalım.

Uygulama Alt Yapısını Hazırlama

İlk olarak inceleme sahasını hazırlayabilmek için Angular projesi oluşturalım. Ardından konumuz bir table yapısı olacağından dolayı ihtiyaç duyacağımız veri kaynağı için aşağıdaki modeli, o modelden oluşacak koleksiyon yapısını ve o koleksiyon yapısını kullanabilmemizi sağlayacak olan servisi oluşturalım.

export class Ogrenci {
     id: number;
     adi: string;
     soyAdi: string;
     sinif: number;
     cinsiyet: boolean;
}

export const ogrenciler: Ogrenci[] = [];

import { Injectable } from '@angular/core';
import { Ogrenci } from '../entities/ogrenci';
import { ogrenciler } from "../entities/ogrenci";
@Injectable({
  providedIn: 'root'
})
export class OkulService {
  constructor() { }
  add(ogrenci: Ogrenci) {
    ogrenciler.push(ogrenci);
  }

  remove(ogrenci: Ogrenci) {
    let index = ogrenciler.indexOf(ogrenci);
    ogrenciler.slice(index, 1);
  };

  get(): Ogrenci[] {
    return ogrenciler;
  }
}

Uygulamaya Smart Table Component Entegrasyonu ve Temel Ayarlar

Smart Table componentini uygulamaya entegre edebilmek için aşağıdaki komutun çalıştırılması yeterlidir.

npm install --save ng2-smart-table

Uygulamaya entegre edilen Smart Table componentini, uygulamamızın ana modülü olan “app.module.ts” dosyasına aşağıdaki gibi import ederek kullanılabilir hale getirelim.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Ng2SmartTableModule } from 'ng2-smart-table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Ng2SmartTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bu işlemden sonra Smart Table componenti uygulamamıza entegre edilmiş ve kullanıma hazır bir vaziyettedir diyebiliriz.

Componentimizi örneklendirmek için varsayılan olarak gelen ve uygulamanın ana componenti olan “AppComponent” bizler için yeterli olacaktır.

Temel Smart Table HTML Kodları

--- app.component.html ---
<ng2-smart-table [settings]="settings" [ source]="data"></ng2-smart-table>

Smart Table, yukarıda olduğu gibi “ng2-smart-table” html etiketi üzerinden çalışmaktadır. Bu yapı üzerinde görüldüğü üzere “[settings]” ve “[ source]” alanları mevcuttur. “[settings]”, basılacak Smart Table’ın genel ayarlarını barındıran bir özellikken; “[ source]” ise bu tablonun listeleyeceği veriyi temsil etmektedir.

  settings = {
    columns: {
      adi: {
        title: 'Adı'
      },
      soyAdi: {
        title: 'Soyadı'
      },
      sinif: {
        title: 'Sınıf'
      },
      cinsiyet: {
        title: 'Cinsiyet'
      }
    }
  };

import { Component, OnInit } from '@angular/core';
import { OkulService } from './services/okul.service';
import { Ogrenci } from './entities/ogrenci';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private okulService: OkulService) { }
  settings = {
    columns: {
      adi: {
        title: 'Adı'
      },
      soyAdi: {
        title: 'Soyadı'
      },
      sinif: {
        title: 'Sınıf'
      },
      cinsiyet: {
        title: 'Cinsiyet'
      }
    }
  };

  data: Ogrenci[];
  ngOnInit(): void {
    this.okulService.add({
      id: 1,
      adi: 'Gençay',
      soyAdi: 'Yıldız',
      cinsiyet: true,
      sinif: 4
    });
    this.okulService.add({
      id: 2,
      adi: 'Nevin',
      soyAdi: 'Yıldız',
      cinsiyet: false,
      sinif: 3
    });
    this.okulService.add({
      id: 3,
      adi: 'Olcay',
      soyAdi: 'Güdek',
      cinsiyet: true,
      sinif: 5
    });
    this.okulService.add({
      id: 4,
      adi: 'Hakan',
      soyAdi: 'Sabuncu',
      cinsiyet: true,
      sinif: 2
    });
    this.okulService.add({
      id: 5,
      adi: 'Leyla',
      soyAdi: 'Songül',
      cinsiyet: false,
      sinif: 3
    });
    this.data = this.okulService.get();
  }
}

Yukarıda görüldüğü üzere birkaç veri ekleyerek “data” ve “settings” değişkenlerimizi oluşturuyoruz.
Şimdi bu noktaya kadar temel Smart Table alt yapısını atmış bulunmaktayız. Neler yaptığımızı görebilmek için “ng serve” komutu ile projemizi yayına alalım.

Projemizi yayına almak isterken yukarıdaki ekran görüntüsünde görüldüğü üzere bir hatayla karşılaştık.
Hatamızın metinsel hali aşağıdaki gibidir;

ERROR in ./node_modules/ng2-smart-table/components/cell/cell.module.js
Module not found: Error: Can’t resolve ‘ng2-completer’ in ‘C:\Users\mebitech\Desktop\SmartTable\smartTable\node_modules\ng2-smart-table\components\cell’ERROR in ./node_modules/ng2-smart-table/components/cell/cell-editors/completer-editor.component.js
Module not found: Error: Can’t resolve ‘ng2-completer’ in ‘C:\Users\mebitech\Desktop\SmartTable\smartTable\node_modules\ng2-smart-table\components\cell\cell-editors’
ERROR in ./node_modules/ng2-smart-table/components/filter/filter.module.js
Module not found: Error: Can’t resolve ‘ng2-completer’ in ‘C:\Users\mebitech\Desktop\SmartTable\smartTable\node_modules\ng2-smart-table\components\filter’
ERROR in ./node_modules/ng2-smart-table/components/filter/filter-types/completer-filter.component.js
Module not found: Error: Can’t resolve ‘ng2-completer’ in ‘C:\Users\mebitech\Desktop\SmartTable\smartTable\node_modules\ng2-smart-table\components\filter\filter-types’

Bu hatadan kurtulabilmek için Ng2 Completer, rxjs ve rxjs-compat paketlerinin projeye entegre edilmesi gerekmektedir.

npm install ng2-completer --save

npm install rxjs

npm i rxjs-compat --save

İlgili entegrasyonlardan sonra uygulamayı yeniden derleyip çalıştırdığımızda hataların ortadan kalktığı görülecektir ve uygulama aşağıdaki gibi bir ekranla bizleri karşılayacaktır.

Yukarıdaki ekran görüntüsünden de anlaşıldığı üzere Smart Table varsayılan olarak “Add New”, “Edit” ve “Delete” aksiyonlarını barındırmakta ve her bir kolona özel filtreleme mekanizmasıyla devreye girmektedir. Ayrıca kolonların headerlarına tıklandığı zaman bir sıralama özelliğide barındırmaktadır.

Genel Ayarları

Smart Table componentinin varsayılan olarak gelen özellikleri üzerinde aşağıdaki gibi değişiklikler gerçekleştirebiliriz.

• actions
  Varsayılan olarak gelen “Add New”, “Edit” ve “Delete” actionları aktif ya da pasif olarak ayarlamamızı sağlayan bir özelliktir. Dolayısıyla bu özelliğin varsayılan değeri de “true” değeridir.

    settings = {
      columns: {
        .
        .
        .
      },
      actions: {
        add: true,
        delete: true,
        edit: true
      }
    };
  

• delete
  Varsayılan olarak gelen “Delete” action’ına özel ayarları yapmamızı sağlayan özelliktir.

    settings = {
      delete: {
        confirmDelete: true,
        deleteButtonContent: 'Sil',
        saveButtonContent: 'Kaydet',
        cancelButtonContent: 'İptal'
      },
      columns: {
        .
        .
        .
      }
    };
  

  Bu yapılandırmada, silme işlemi tetiklendiği anda kullanılacak fonksiyonuda “ng2-smart-table” nesnesine aşağıdaki gibi tanımlayabiliriz.

  <ng2-smart-table [settings]="settings" [ source]="data" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>
  

    onDeleteConfirm(event) {
      alert(`${event.data.adi} ${event.data.soyAdi} siliniyor....`);
    }
  

  

• add
  Varsayılan olarak gelen “Add” action’ına özel ayarları yapmamızı sağlayan özelliktir.

    settings = {
      add: {
        confirmCreate: true,
        createButtonContent: 'Ekle',
        saveButtonContent: 'Kaydet',
        cancelButtonContent: 'İptal'
      },
      columns: {
        .
        .
        .
      }
    };
  

  Özelliğin ilişkilendirileceği fonksiyon için;

  <ng2-smart-table [settings]="settings" [ source]="data" (createConfirm)="onCreateConfirm($event)"></ng2-smart-table>
  

  olayını tanımlamamız yeterlidir.

    onCreateConfirm(event) {
      alert(`${event.newData.adi} ${event.newData.soyAdi} ekleniyor.`);
    }
  

  

• edit
  Varsayılan olarak gelen “Edit” action’ına özel ayarları yapmamızı sağlayan özelliktir.

    settings = {
      edit: {
        confirmSave: true,
        editButtonContent: 'Düzenle',
        saveButtonContent: 'Kaydet',
        cancelButtonContent: 'İptal'
      },
      columns: {
        .
        .
        .
      }
    };
  

  Özelliğin ilişkilendirileceği fonksiyon için;

  <ng2-smart-table [settings]="settings" [ source]="data" (editConfirm)="onSaveConfirm($event)"></ng2-smart-table>
  

  olayını tanımlamamız yeterlidir.

    onSaveConfirm(event) {
      alert(`${event.data.adi} ${event.data.soyAdi} değeri ${event.newData.adi} ${event.newData.soyAdi} olarak güncelleniyor.`);
    }
  

  

• attr
  Render edilecek tabloya class, id vs. gibi attributelar verebilmemizi sağlayan özelliktir.

Kolonlara Farklı Özellikler Verme

Smart Table componentinde, verileri listelerken kolonlar üzerinde filtreleme, sıralama vs. gibi ayarlar yapabilmemizi sağlayan “title”, “type”, “renderComponent”, “filter”, “width” ve “sort” özel alanları mevcuttur.

• title : Kolon adını tutar.
• type : Kolon tipini tutar. İşlevsel olarak özel tasarladığımız (ileri satırlarda göreceğiz) kolonları kullanabilmek için varsayılan değerin dışında “custom” değerini alabilir.
• renderComponent : Özel tasarlanan kolonları render edebilmek için set edebileceğimiz alandır. Bu alanın kullanılabilmesi için “type” alanının “custom” değerini alması gerekmektedir.
• filter : Kolonun filtreleme özelliğini ayarlamaktadır. “true” ya da “false” değeri alır.
• sort : Sıralama özelliğini ayarlamaktadır.
• width : İlgili kolonun genişliğini ayarlamaktadır.
• valuePrepareFunction : İlgili kolondaki her bir satıra ait değer üzerinde işlem yapmamızı sağlayan bir fonksiyondur.

    settings = {
      columns: {
        adi: {
          title: 'Adı',
          valuePrepareFunction: (value) => { return value === "Gençay" ? 'true' : 'false' }
        }
      }
    };
  

  Yukarıdaki kod bloğunu incelerseniz eğer tüm satırlarda değeri “Gençay” olanın yerine “true”, diğerlerinin yerine “false” değeri yazdırılmaktadır.
  

  Ya da,

  Satıra bağlı olan nesneyi ve ilgili hücreleri temsil edecek aşağıdaki gibi bir fonksiyonda tanımlanabilir.

    settings = {
      columns: {
        adi: {
          title: 'Adı',
          valuePrepareFunction: (cell, row) => { return `${row.adi} ${row.soyAdi}`; }
        }
      }
    };
  

  Burada “cell” o anda bulunulan satırdaki değeri getirirken, “row” o satıra bağlı olan nesneyi getirmektedir.
  

Custom Kolon Oluşturma

Smart Table, özel ihtiyaçlarımıza istinaden custom kolonlar oluşturmamızı ve kullanmamızı destekleyen bir özelliğe sahiptir. Yapısal olarak herbir custom kolon birer component özelliği teşkil etmektedir. Şöyle ki;

import { Component, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';
import { Ogrenci } from 'src/app/entities/ogrenci';

@Component({
  selector: 'app-customcolumn',
  template: '<button (click)="ogrenciBilgileri()">Öğrenciyi Göster</button>'
})
export class CustomColumnComponent implements ViewCell {
  value: string | number;
  rowData: Ogrenci;

  constructor() { }
  ogrenciBilgileri() {
    alert(`${this.rowData.adi} ${this.rowData.soyAdi}`);
  }
}

Yukarıdaki kod bloğunu incelerseniz eğer “CustomColumnComponent” adında bir özel kolon oluşturmuş bulunmaktayız. Smart Table’da özel kolonlar “ViewCell” interface’inden türemektedirler. İlgili interface neticesinde implement edilen “value” ve “rowData” değişkenleri ilgili kolona ait satırların verilerine erişmemizi sağlayan değerleri getirmektedirler. “value” hücrede bulunan değeri getirirken, “rowData” ilgili satıra bağlı olan nesneyi getirmektedir. Burada görüldüğü üzere özel kolon özelliği teşkil edecek olan componentimiz bir “button” nesnesi basmaktadır ve butona tıklandığında öğrenci bilgileri getirecek olan fonksiyonu tetiklemektedir.

Oluşturmuş olduğumuz bu custom kolonu kullanabilmek için(ilgili kolonda) “type” özelliğine “custom” değerini vermeli ve “renderComponent” özelliğine bu componentimizi set etmeliyiz.

  settings = {
    columns: {
      adi: {
        title: 'Adı',
        filter: false
      },
      id: {
        title: "İşlemler",
        type: "custom",
        filter: false,
        renderComponent: CustomColumnComponent
      }
    }
  };

Bu işlem neticesinde artık bu kolon özel olarak tasarladığımız kolon tipinden olacaktır. Lakin uygulamayı derleyip çalıştırdığımızda hata ile karşılaşacağız. Nihayetinde bu yaptığımız çalışma her ne kadar bir custom column uygulaması olsada en nihayetinde bir component oluşturmuş bulunmaktayız ve bu componenti ana modülümüzde ilgili birimlere bildirmek mecburiyetindeyiz.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { CustomColumnComponent } from './customColumns/customcolumn/custom.column.component';

@NgModule({
  declarations: [
    AppComponent,
    CustomColumnComponent
  ],
  imports: [
    BrowserModule,
    Ng2SmartTableModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [CustomColumnComponent]
})
export class AppModule { }

Görüldüğü üzere custom column olarak tasarladığımız componenti, uygulamaya ana modüldeki “declarations” alanından dahil ettik. Lakin burada dikkat ederseniz özel kolonumuz ekstradan “entryComponents” isimli bir alanada dahil edilmiş bulunmaktadır. Smart Table componentinde tasarlanan custom column componentleri “entryComponents” alanına dahil edilmek mecburiyetindedir. Aksi taktirde uygulamadan hata alınacaktır.

Tüm bu işlemler neticesinde uygulamayı derleyip çalıştırdığımızda aşağıdaki ekran görüntüsünde olduğu gibi bir sonuçla karşılacaşacağız.

Custom Kolonlarda Event Oluşturma

Oluşturulan özel kolonlarda gerçekleştirilen tüm actionları takip edebilmek yahut işlevsel olarak olay tetikleyebilmek için aşağıdaki gibi event oluşturabiliriz.

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';
import { Ogrenci } from 'src/app/entities/ogrenci';

@Component({
  selector: 'app-customcolumn',
  template: '<button (click)="ogrenciBilgileri()">Öğrenciyi Göster</button>'
})
export class CustomColumnComponent implements ViewCell {
  value: string | number;
  rowData: Ogrenci;

  constructor() { }

  @Output() event: EventEmitter<any> = new EventEmitter<any>();
  @Output() event2: EventEmitter<any> = new EventEmitter<any>();
  ogrenciBilgileri() {
    this.event.emit({ rowData: this.rowData, action: "1. Olay" });
    this.event2.emit({ rowData: this.rowData, action: "2. Olay" });
  }
}

Görüldüğü üzere, @Output olarak tanımlanan “EventEmitter” nesnesi ilgili fonksiyon tetiklendiğinde emit edilmekte ve olay tetiklenmektedir.

Bu tetiklenen olayı karşılayabilmek için ilgili özel kolonda;

  settings = {
    columns: {
      adi: {
        title: 'Adı',
        filter: false
      },
      id: {
        title: "İşlemler",
        type: "custom",
        filter: false,
        renderComponent: CustomColumnComponent,
        onComponentInitFunction: (instance) => {
          instance.event.subscribe(x => {
            const actionData = x.rowData as Ogrenci;
            alert(`${actionData.adi} ${actionData.soyAdi} | action -> ${x.action}`);
          });
          instance.event2.subscribe(x => {
            const actionData = x.rowData as Ogrenci;
            alert(`${actionData.adi} ${actionData.soyAdi} | action -> ${x.action}`);
          });
        }
      }
    }
  };

çalışmasını yapmamız yeterlidir.

“onComponentInitFunction” alanına tanımlanan fonksiyon, özel olarak tasarlanan kolonlarda tanımlanan eventlara abone olmakta ve “instance” parametresiyle herhangi bir tetikleme söz konusu olursa yakalamaktadır.

LocalDataSource Nesnesi

LocalDataSource nesnesi, Smart Table componentinde veri kaynağı ile component arasındaki ilişkiyi daha detaylı yönetmemizi sağlayan bir veri kontrol nesnesidir. Kullanımı aşağıdaki gibidir;

import { Component, OnInit } from '@angular/core';
import { OkulService } from './services/okul.service';
import { Ogrenci, ogrenciler } from './entities/ogrenci';
import { LocalDataSource } from 'ng2-smart-table';
import { CustomColumnComponent } from './customColumns/customcolumn/custom.column.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private okulService: OkulService) { }

  settings = {
    columns: {
      adi: {
        title: 'Adı'
      },
      soyAdi: {
        title: "Soyadı"
      },
      sinif: {
        title: "Sınıf"
      },
      cinsiyet: {
        title: "Cinsiyet",
        valuePrepareFunction: (value) => value === true ? "Erkek" : "Kadın"
      }
    },
    actions: {
      add: false,
      delete: false,
      edit: false
    }
  };

  guncelle() {
    debugger;
    this.okulService.add({
      id: 6,
      adi: 'Muiddin',
      soyAdi: 'İmpatrino',
      cinsiyet: true,
      sinif: 7
    });
    this.okulService.add({
      id: 7,
      adi: 'Miss',
      soyAdi: 'Merple',
      cinsiyet: false,
      sinif: 8
    });
    this.source.load(this.okulService.get());
  }

  source: LocalDataSource = new LocalDataSource(this.okulService.get());

  ngOnInit(): void {
    this.okulService.add({
      id: 1,
      adi: 'Gençay',
      soyAdi: 'Yıldız',
      cinsiyet: true,
      sinif: 4
    });
    this.okulService.add({
      id: 2,
      adi: 'Nevin',
      soyAdi: 'Yıldız',
      cinsiyet: false,
      sinif: 3
    });
    this.okulService.add({
      id: 3,
      adi: 'Olcay',
      soyAdi: 'Güdek',
      cinsiyet: true,
      sinif: 5
    });
    this.okulService.add({
      id: 4,
      adi: 'Hakan',
      soyAdi: 'Sabuncu',
      cinsiyet: true,
      sinif: 2
    });
    this.okulService.add({
      id: 5,
      adi: 'Leyla',
      soyAdi: 'Songül',
      cinsiyet: false,
      sinif: 3
    });
  }
}

<ng2-smart-table [settings]="settings" ="source"></ng2-smart-table>

<button (click)="guncelle()">Güncelle</button>

Veri kaynağı üzerinde olan tüm değişiklikleri “load” metodu ile listeye anında yansıtma imkanı mevcuttur.

Evet… Yazıp anlatması, okuyup anlaması zor olan bir uğraş neticesine gelmiş bulunmaktayız. Angular uygulamalarında tablo işlemlerinde bizlere eşlik eden bu çok fonksiyonlu componentin tüm özelliklerini ve kullanım şeklini a’dan z’ye sizlere eksiksiz anlatmaya çalıştım.

Zahmet edip, okuduğunuz için teşekkür ederim.

İlgilenenlerin faydalanması dileğiyle…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…