{"id":9858,"date":"2018-11-26T20:47:30","date_gmt":"2018-11-26T20:47:30","guid":{"rendered":"http:\/\/www.gencayyildiz.com\/blog\/?p=9858"},"modified":"2018-11-26T20:47:30","modified_gmt":"2018-11-26T20:47:30","slug":"angular-adan-zye-smart-table-component-kullanimi","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/angular-adan-zye-smart-table-component-kullanimi\/","title":{"rendered":"Angular – A’dan Z’ye Smart Table Component Kullan\u0131m\u0131"},"content":{"rendered":"
<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular uygulamalar\u0131nda ak\u0131ll\u0131 tablo yap\u0131s\u0131 olan Smart Table componentini a’dan z’ye t\u00fcm \u00f6zellikleriyle ele alacak ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 inceleyece\u011fiz. \u0130lgilenenler bilir ki, Angular mimarisinde kullan\u0131lmak \u00fczere in\u015fa edilmi\u015f birden fazla tablo componenti mevcuttur. Kimi sadece veri listeleme \u00f6zelli\u011fine sahipken, bir di\u011feri dahili CRUD i\u015flemlerini bar\u0131nd\u0131rmakta yahut tek bir tipte fonksiyonelli\u011fe sahip olmaktad\u0131r. Lakin bir\u00e7o\u011fu yaz\u0131l\u0131mc\u0131n\u0131n detaylara m\u00fcdahale etmesine izin vermemekte yahut ileri d\u00fczey tablo i\u015flevselliklerinde senaryoya beklenen esneklikte e\u015flik edememektedir.<\/p>\n

Smart Table componenti, Angular mimarisinde tablo ara\u00e7lar\u0131ndan etkili, esnek ve kullan\u0131\u015fl\u0131 \u00f6zellik sergileyen componentlerden biridir. Dahili olarak b\u00fcnyesinde bar\u0131nd\u0131rd\u0131\u011f\u0131 CRUD i\u015flemlerine ek olarak custom(\u00f6zel) yap\u0131lanmalar\u0131 desteklemekte, yaz\u0131l\u0131mc\u0131ya ihtiyaca d\u00f6n\u00fck \u00f6zelle\u015ftirilmi\u015f kolonlar olu\u015fturmas\u0131na m\u00fcsade etmekte ve t\u00fcm bunlar\u0131n yan\u0131nda kolonlara ba\u011fl\u0131 eventlar tan\u0131mlanmas\u0131n\u0131, filtreler uygulamas\u0131n\u0131, sayfalama yap\u0131lmas\u0131n\u0131 vs. desteklemektedir.<\/p>\n

\u015eimdi hi\u00e7 vakit kaybetmeden \u00f6rnek bir Angular uygulamas\u0131 \u00fczerinden Smart Table componentini incelemeye ba\u015flayal\u0131m.<\/p>\n

Uygulama Alt Yap\u0131s\u0131n\u0131 Haz\u0131rlama<\/span><\/h3>\n

\u0130lk olarak inceleme sahas\u0131n\u0131 haz\u0131rlayabilmek i\u00e7in Angular projesi olu\u015ftural\u0131m. Ard\u0131ndan konumuz bir table yap\u0131s\u0131 olaca\u011f\u0131ndan dolay\u0131 ihtiya\u00e7 duyaca\u011f\u0131m\u0131z veri kayna\u011f\u0131 i\u00e7in a\u015fa\u011f\u0131daki modeli, o modelden olu\u015facak koleksiyon yap\u0131s\u0131n\u0131 ve o koleksiyon yap\u0131s\u0131n\u0131 kullanabilmemizi sa\u011flayacak olan servisi olu\u015ftural\u0131m.<\/p>\n\n\n\n\n\n\n
Model<\/strong><\/td>\nKoleksiyon<\/strong><\/td>\n<\/tr>\n
\n
\r\nexport class Ogrenci {\r\n     id: number;\r\n     adi: string;\r\n     soyAdi: string;\r\n     sinif: number;\r\n     cinsiyet: boolean;\r\n}\r\n<\/pre>\n<\/td>\n
\n
\r\nexport const ogrenciler: Ogrenci[] = [];\r\n<\/pre>\n<\/td>\n<\/tr>\n
Service<\/strong><\/td>\n<\/tr>\n
\n
\r\nimport { Injectable } from '@angular\/core';\r\nimport { Ogrenci } from '..\/entities\/ogrenci';\r\nimport { ogrenciler } from "..\/entities\/ogrenci";\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class OkulService {\r\n  constructor() { }\r\n  add(ogrenci: Ogrenci) {\r\n    ogrenciler.push(ogrenci);\r\n  }\r\n\r\n  remove(ogrenci: Ogrenci) {\r\n    let index = ogrenciler.indexOf(ogrenci);\r\n    ogrenciler.slice(index, 1);\r\n  };\r\n\r\n  get(): Ogrenci[] {\r\n    return ogrenciler;\r\n  }\r\n}\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Uygulamaya Smart Table Component Entegrasyonu ve Temel Ayarlar<\/span><\/h3>\n
Smart Table componentini uygulamaya entegre edebilmek i\u00e7in a\u015fa\u011f\u0131daki komutun \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 yeterlidir.<\/p>\n
\r\nnpm install --save ng2-smart-table\r\n<\/pre>\n
\"Angular<\/a><\/p>\n
Uygulamaya entegre edilen Smart Table componentini, uygulamam\u0131z\u0131n ana mod\u00fcl\u00fc olan “app.module.ts” dosyas\u0131na a\u015fa\u011f\u0131daki gibi import ederek kullan\u0131labilir hale getirelim.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppComponent } from '.\/app.component';\r\nimport { Ng2SmartTableModule } from 'ng2-smart-table';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    Ng2SmartTableModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
Bu i\u015flemden sonra Smart Table componenti uygulamam\u0131za entegre edilmi\u015f ve kullan\u0131ma haz\u0131r bir vaziyettedir diyebiliriz.<\/p>\n
Componentimizi \u00f6rneklendirmek i\u00e7in varsay\u0131lan olarak gelen ve uygulaman\u0131n ana componenti olan “AppComponent” bizler i\u00e7in yeterli olacakt\u0131r.<\/p>\n
Temel Smart Table HTML Kodlar\u0131<\/span><\/h4>\n
\r\n--- app.component.html ---\r\n<ng2-smart-table [settings]="settings" [ source]="data"><\/ng2-smart-table>\r\n<\/pre>\n
Smart Table, yukar\u0131da oldu\u011fu gibi “ng2-smart-table” html etiketi \u00fczerinden \u00e7al\u0131\u015fmaktad\u0131r. Bu yap\u0131 \u00fczerinde g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “[settings]” ve “[ source]” alanlar\u0131 mevcuttur. “[settings]”, bas\u0131lacak Smart Table’\u0131n genel ayarlar\u0131n\u0131 bar\u0131nd\u0131ran bir \u00f6zellikken; “[ source]” ise bu tablonun listeleyece\u011fi veriyi temsil etmektedir.<\/p>\n\n\n\n\n\n
Settings<\/strong><\/td>\nSource<\/strong><\/td>\n<\/tr>\n
\nsource alan\u0131na verilen koleksiyon datas\u0131ndaki listelenecek kolonlar\u0131, tabloda ger\u00e7ekle\u015ftirilecek actionlar\u0131 yahut tablonun genel class vs. ayarlar\u0131n\u0131 yapt\u0131\u011f\u0131m\u0131z aland\u0131r. Bizler makalemizin bu noktas\u0131nda sadece kolon ayarlamas\u0131n\u0131 ele alaca\u011f\u0131z. \u0130lerideki sat\u0131rlarda bu alan\u0131 ilgilendiren di\u011fer \u00f6zelliklerede de\u011finece\u011fiz.<\/p>\n
\u00d6rnek kullan\u0131m;<\/p>\n
\r\n  settings = {\r\n    columns: {\r\n      adi: {\r\n        title: 'Ad\u0131'\r\n      },\r\n      soyAdi: {\r\n        title: 'Soyad\u0131'\r\n      },\r\n      sinif: {\r\n        title: 'S\u0131n\u0131f'\r\n      },\r\n      cinsiyet: {\r\n        title: 'Cinsiyet'\r\n      }\r\n    }\r\n  };\r\n<\/pre>\n<\/td>\n
Ba\u011flanan veri k\u00fcmesini, settings alan\u0131ndaki “columns” alan\u0131ndaki de\u011ferlere g\u00f6re tabloya basacakt\u0131r.<\/td>\n<\/tr>\n
\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { OkulService } from '.\/services\/okul.service';\r\nimport { Ogrenci } from '.\/entities\/ogrenci';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n\r\n  constructor(private okulService: OkulService) { }\r\n  settings = {\r\n    columns: {\r\n      adi: {\r\n        title: 'Ad\u0131'\r\n      },\r\n      soyAdi: {\r\n        title: 'Soyad\u0131'\r\n      },\r\n      sinif: {\r\n        title: 'S\u0131n\u0131f'\r\n      },\r\n      cinsiyet: {\r\n        title: 'Cinsiyet'\r\n      }\r\n    }\r\n  };\r\n\r\n  data: Ogrenci[];\r\n  ngOnInit(): void {\r\n    this.okulService.add({\r\n      id: 1,\r\n      adi: 'Gen\u00e7ay',\r\n      soyAdi: 'Y\u0131ld\u0131z',\r\n      cinsiyet: true,\r\n      sinif: 4\r\n    });\r\n    this.okulService.add({\r\n      id: 2,\r\n      adi: 'Nevin',\r\n      soyAdi: 'Y\u0131ld\u0131z',\r\n      cinsiyet: false,\r\n      sinif: 3\r\n    });\r\n    this.okulService.add({\r\n      id: 3,\r\n      adi: 'Olcay',\r\n      soyAdi: 'G\u00fcdek',\r\n      cinsiyet: true,\r\n      sinif: 5\r\n    });\r\n    this.okulService.add({\r\n      id: 4,\r\n      adi: 'Hakan',\r\n      soyAdi: 'Sabuncu',\r\n      cinsiyet: true,\r\n      sinif: 2\r\n    });\r\n    this.okulService.add({\r\n      id: 5,\r\n      adi: 'Leyla',\r\n      soyAdi: 'Song\u00fcl',\r\n      cinsiyet: false,\r\n      sinif: 3\r\n    });\r\n    this.data = this.okulService.get();\r\n  }\r\n}\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Yukar\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere birka\u00e7 veri ekleyerek “data” ve “settings” de\u011fi\u015fkenlerimizi olu\u015fturuyoruz.
\n\u015eimdi bu noktaya kadar temel Smart Table alt yap\u0131s\u0131n\u0131 atm\u0131\u015f bulunmaktay\u0131z. Neler yapt\u0131\u011f\u0131m\u0131z\u0131 g\u00f6rebilmek i\u00e7in “ng serve” komutu ile projemizi yay\u0131na alal\u0131m.
\n\"Angular<\/a><\/p>\n
Projemizi yay\u0131na almak isterken yukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere bir hatayla kar\u015f\u0131la\u015ft\u0131k.
\nHatam\u0131z\u0131n metinsel hali a\u015fa\u011f\u0131daki gibidir;
\n
\nERROR in .\/node_modules\/ng2-smart-table\/components\/cell\/cell.module.js
\nModule 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
\nModule not found: Error: Can’t resolve ‘ng2-completer’ in ‘C:\\Users\\mebitech\\Desktop\\SmartTable\\smartTable\\node_modules\\ng2-smart-table\\components\\cell\\cell-editors’
\nERROR in .\/node_modules\/ng2-smart-table\/components\/filter\/filter.module.js
\nModule not found: Error: Can’t resolve ‘ng2-completer’ in ‘C:\\Users\\mebitech\\Desktop\\SmartTable\\smartTable\\node_modules\\ng2-smart-table\\components\\filter’
\nERROR in .\/node_modules\/ng2-smart-table\/components\/filter\/filter-types\/completer-filter.component.js
\nModule not found: Error: Can’t resolve ‘ng2-completer’ in ‘C:\\Users\\mebitech\\Desktop\\SmartTable\\smartTable\\node_modules\\ng2-smart-table\\components\\filter\\filter-types’
\n<\/span><\/p>\n
Bu hatadan kurtulabilmek i\u00e7in Ng2 Completer, rxjs ve rxjs-compat paketlerinin projeye entegre edilmesi gerekmektedir.<\/p>\n
\r\nnpm install ng2-completer --save\r\n<\/pre>\n
\r\nnpm install rxjs\r\n<\/pre>\n
\r\nnpm i rxjs-compat --save\r\n<\/pre>\n
\u0130lgili entegrasyonlardan sonra uygulamay\u0131 yeniden derleyip \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda hatalar\u0131n ortadan kalkt\u0131\u011f\u0131 g\u00f6r\u00fclecektir ve uygulama a\u015fa\u011f\u0131daki gibi bir ekranla bizleri kar\u015f\u0131layacakt\u0131r.
\n\"Angular<\/a><\/p>\n
Yukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnden de anla\u015f\u0131ld\u0131\u011f\u0131 \u00fczere Smart Table varsay\u0131lan olarak “Add New”, “Edit” ve “Delete” aksiyonlar\u0131n\u0131 bar\u0131nd\u0131rmakta ve her bir kolona \u00f6zel filtreleme mekanizmas\u0131yla devreye girmektedir. Ayr\u0131ca kolonlar\u0131n headerlar\u0131na t\u0131kland\u0131\u011f\u0131 zaman bir s\u0131ralama \u00f6zelli\u011fide bar\u0131nd\u0131rmaktad\u0131r. <\/p>\n
Genel Ayarlar\u0131<\/span><\/h3>\n
Smart Table componentinin varsay\u0131lan olarak gelen \u00f6zellikleri \u00fczerinde a\u015fa\u011f\u0131daki gibi de\u011fi\u015fiklikler ger\u00e7ekle\u015ftirebiliriz.<\/p>\n