{"id":33095,"date":"2025-10-29T12:32:05","date_gmt":"2025-10-29T09:32:05","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/ngxsmk-datatable-v1-7-0-kurumsal-cozumlerde-veri-yonetimi\/"},"modified":"2025-10-29T12:32:05","modified_gmt":"2025-10-29T09:32:05","slug":"ngxsmk-datatable-v1-7-0-kurumsal-cozumlerde-veri-yonetimi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ngxsmk-datatable-v1-7-0-kurumsal-cozumlerde-veri-yonetimi\/","title":{"rendered":"ngxsmk-datatable v1.7.0: Kurumsal \u00c7\u00f6z\u00fcmlerde Veri Y\u00f6netimi"},"content":{"rendered":"

<\/p>\n

Modern kurumsal uygulamalarda verimli ve etkili veri y\u00f6netimi, ba\u015far\u0131n\u0131n temelini olu\u015fturur. B\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015fmak genellikle performans sorunlar\u0131na yol a\u00e7arken, ngxsmk-datatable v1.7.0 Enterprise Edition<\/strong> bu zorluklara g\u00fc\u00e7l\u00fc, esnek ve mobil uyumlu \u00e7\u00f6z\u00fcmler sunarak geli\u015ftiricilerin ve son kullan\u0131c\u0131lar\u0131n hayat\u0131n\u0131 kolayla\u015ft\u0131r\u0131yor. Bu makale, kurumsal projelerinizde veri tablolar\u0131n\u0131 nas\u0131l devrim niteli\u011finde bir seviyeye ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.<\/p>\n

G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, i\u015fletmeler her ge\u00e7en g\u00fcn daha fazla veri \u00fcretmekte ve t\u00fcketmektedir. Bir e-ticaret sitesinin binlerce \u00fcr\u00fcn listesini, bir finansal uygulaman\u0131n milyonlarca i\u015flem kayd\u0131n\u0131 veya bir sa\u011fl\u0131k platformunun detayl\u0131 hasta bilgilerini d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fczde, bu verilerin etkin bir \u015fekilde sunulmas\u0131 ve y\u00f6netilmesi kritik bir ihtiya\u00e7 haline gelmektedir. Ancak bu s\u00fcre\u00e7, \u00f6zellikle Angular gibi modern \u00f6n y\u00fcz \u00e7er\u00e7eveleriyle \u00e7al\u0131\u015f\u0131rken birtak\u0131m \u00f6nemli zorluklar\u0131 beraberinde getirir. \u00d6rne\u011fin, b\u00fcy\u00fck veri setlerini bir web sayfas\u0131nda do\u011frudan g\u00f6r\u00fcnt\u00fclemeye \u00e7al\u0131\u015fmak, uygulaman\u0131n yava\u015flamas\u0131na, hatta tamamen donmas\u0131na neden olabilir. Bu durum, kullan\u0131c\u0131 deneyimini olumsuz etkiledi\u011fi gibi, i\u015f s\u00fcre\u00e7lerinin de aksamas\u0131na yol a\u00e7ar. Geli\u015ftiriciler, sayfaland\u0131rma, s\u0131ralama ve filtreleme gibi temel \u00f6zelliklerin yan\u0131 s\u0131ra, dinamik s\u00fctun y\u00f6netimi, sat\u0131r geni\u015fletme, inline d\u00fczenleme ve geli\u015fmi\u015f d\u0131\u015fa aktarma (Excel, PDF) gibi kurumsal d\u00fczeyde ihtiya\u00e7 duyulan i\u015flevsellikleri s\u0131f\u0131rdan geli\u015ftirmek zorunda kald\u0131klar\u0131nda \u00f6nemli \u00f6l\u00e7\u00fcde zaman ve kaynak harcarlar. Ayr\u0131ca, farkl\u0131 cihaz ve ekran boyutlar\u0131na uyum sa\u011flayabilen, yani mobil uyumlu (responsive) veri tablolar\u0131 olu\u015fturmak da ayr\u0131 bir m\u00fchendislik eforu gerektirir. Eri\u015filebilirlik standartlar\u0131na uygunluk, yani g\u00f6rme engelli veya hareket k\u0131s\u0131tl\u0131l\u0131\u011f\u0131 olan kullan\u0131c\u0131lar i\u00e7in de eri\u015filebilir bir aray\u00fcz sunmak, \u00e7o\u011fu zaman g\u00f6z ard\u0131 edilen ancak yasal ve etik a\u00e7\u0131dan b\u00fcy\u00fck \u00f6nem ta\u015f\u0131yan bir di\u011fer fakt\u00f6rd\u00fcr. Bu \u00e7ok y\u00f6nl\u00fc zorluklar, standart HTML tablolar\u0131n\u0131n veya basit k\u00fct\u00fcphanelerin yetersiz kald\u0131\u011f\u0131 durumlar\u0131 ortaya \u00e7\u0131kar\u0131r. \u0130\u015fte tam bu noktada, ngxsmk-datatable v1.7.0 Enterprise Edition devreye girerek, geli\u015ftiricilere bu karma\u015f\u0131k problemleri \u00e7\u00f6zmede kapsaml\u0131 ve entegre bir \u00e7\u00f6z\u00fcm sunar. Bu s\u00fcr\u00fcm, sadece temel veri g\u00f6r\u00fcnt\u00fcleme i\u015flevlerinin \u00f6tesine ge\u00e7erek, kurumsal d\u00fczeydeki karma\u015f\u0131k veri y\u00f6netimi ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131layacak \u015fekilde tasarlanm\u0131\u015ft\u0131r. Bu sayede, geli\u015ftiriciler altyap\u0131sal detaylarla u\u011fra\u015fmak yerine i\u015f mant\u0131\u011f\u0131na odaklanabilir, son kullan\u0131c\u0131lar ise y\u00fcksek performansl\u0131, sezgisel ve zengin \u00f6zelliklere sahip veri tablolar\u0131yla sorunsuz bir deneyim ya\u015farlar.<\/p>\n

ngxsmk-datatable Nedir ve Temel \u00d6zellikleri Nelerdir?<\/h2>\n

ngxsmk-datatable<\/strong>, Angular uygulamalar\u0131 i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f, g\u00fc\u00e7l\u00fc ve esnek bir veri tablosu (datatable) bile\u015fenidir. Geli\u015ftiricilerin b\u00fcy\u00fck ve karma\u015f\u0131k veri setlerini kullan\u0131c\u0131 dostu bir aray\u00fczle sunmalar\u0131n\u0131 sa\u011flamak amac\u0131yla geli\u015ftirilmi\u015ftir. Temel olarak, bir tablonun sahip olmas\u0131 gereken t\u00fcm standart i\u015flevleri b\u00fcnyesinde bar\u0131nd\u0131r\u0131r ve \u00fczerine kurumsal d\u00fczeyde ihtiya\u00e7 duyulacak bir\u00e7ok ek \u00f6zellik ekler. Bu bile\u015fen, sadece veriyi g\u00f6stermekle kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131n\u0131n verilerle etkile\u015fim kurmas\u0131n\u0131, onlar\u0131 anlamland\u0131rmas\u0131n\u0131 ve \u00fczerinde i\u015flem yapmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Bir veri tablosunun en temel gereksinimlerinden biri olan sayfaland\u0131rma (pagination), ngxsmk-datatable taraf\u0131ndan hem istemci (client-side) hem de sunucu (server-side) taraf\u0131nda etkin bir \u015fekilde desteklenir. Bu, \u00f6zellikle binlerce veya milyonlarca kay\u0131t i\u00e7eren veri setlerinde uygulaman\u0131n performans\u0131n\u0131 korumak i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Kullan\u0131c\u0131lar, veriler aras\u0131nda h\u0131zl\u0131ca gezinmek i\u00e7in sayfalar\u0131 de\u011fi\u015ftirebilir ve her sayfada ka\u00e7 kay\u0131t g\u00f6sterilece\u011fini belirleyebilirler. Veri s\u0131ralama (sorting) \u00f6zelli\u011fi, kullan\u0131c\u0131lar\u0131n tablodaki herhangi bir s\u00fctuna g\u00f6re verileri artan veya azalan d\u00fczende d\u00fczenlemesine olanak tan\u0131r, bu da belirli bilgileri bulmay\u0131 veya trendleri analiz etmeyi kolayla\u015ft\u0131r\u0131r. Filtreleme (filtering) ise, kullan\u0131c\u0131lar\u0131n belirli kriterlere uyan kay\u0131tlar\u0131 h\u0131zla bulmas\u0131n\u0131 sa\u011flar; bu genellikle metin arama kutular\u0131, a\u00e7\u0131l\u0131r listeler veya \u00e7oklu se\u00e7im se\u00e7enekleri arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r. Bu \u00fc\u00e7 temel \u00f6zellik, her t\u00fcrl\u00fc veri tablosu i\u00e7in olmazsa olmazd\u0131r ve ngxsmk-datatable bunlar\u0131 hem kullan\u0131m kolayl\u0131\u011f\u0131 hem de performans optimizasyonu a\u00e7\u0131s\u0131ndan ba\u015far\u0131l\u0131 bir \u015fekilde sunar.<\/p>\n

Peki, “Enterprise Edition” bu temel \u00f6zelliklerin \u00f6tesinde ne gibi bir fark yarat\u0131yor? Enterprise Edition, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k kurumsal uygulamalar\u0131n \u00f6zel ihtiya\u00e7lar\u0131na odaklanm\u0131\u015ft\u0131r. Bu s\u00fcr\u00fcm, temel \u00f6zelliklerin sa\u011flaml\u0131\u011f\u0131n\u0131 korurken, i\u015f s\u00fcre\u00e7lerinin gerektirdi\u011fi daha ileri d\u00fczeyde i\u015flevsellikleri entegre eder. \u00d6rne\u011fin, geli\u015fmi\u015f veri d\u0131\u015fa aktarma se\u00e7enekleri sunar; kullan\u0131c\u0131lar tabloda g\u00f6r\u00fcnt\u00fclenen verileri yaln\u0131zca basit CSV format\u0131nda de\u011fil, ayn\u0131 zamanda daha yap\u0131land\u0131r\u0131lm\u0131\u015f ve profesyonel olan Excel (xlsx) ve PDF formatlar\u0131nda da d\u0131\u015fa aktarabilirler. Bu, raporlama ve veri payla\u015f\u0131m\u0131 s\u00fcre\u00e7leri i\u00e7in paha bi\u00e7ilmezdir. Sat\u0131r gruplama (row grouping) \u00f6zelli\u011fi, benzer verilere sahip sat\u0131rlar\u0131 mant\u0131ksal gruplar alt\u0131nda toplayarak tablonun okunabilirli\u011fini ve analiz yetene\u011fini art\u0131r\u0131r. \u00d6rne\u011fin, bir sat\u0131\u015f raporunda, \u00fcr\u00fcn kategorilerine g\u00f6re sat\u0131\u015flar\u0131 gruplayarak \u00f6zet bilgilere daha kolay ula\u015fabilirsiniz. Sat\u0131r i\u00e7i d\u00fczenleme (inline editing), kullan\u0131c\u0131lar\u0131n tablo verilerini do\u011frudan tablo i\u00e7inde, ayr\u0131 bir form a\u00e7madan de\u011fi\u015ftirmelerine olanak tan\u0131r, bu da veri giri\u015f ve g\u00fcncelleme s\u00fcre\u00e7lerini h\u0131zland\u0131r\u0131r. S\u00fctun sabitleme (column freezing) veya yeniden boyutland\u0131rma (resizing) gibi \u00f6zellikler, geni\u015f tablolarla \u00e7al\u0131\u015f\u0131rken kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Ayr\u0131ca, Enterprise Edition, kapsaml\u0131 \u00f6zelle\u015ftirme se\u00e7enekleri, daha zengin bir API ve geli\u015ftiricilerin kendi i\u015f mant\u0131klar\u0131n\u0131 tabloya kolayca entegre etmelerini sa\u011flayacak geli\u015fmi\u015f olay y\u00f6netimi mekanizmalar\u0131 sunar. Performans konusunda da Enterprise Edition, b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken dahi ak\u0131c\u0131l\u0131\u011f\u0131 ve h\u0131z\u0131 korumak i\u00e7in optimize edilmi\u015f algoritmalar ve sanal kayd\u0131rma (virtual scrolling) gibi teknikler kullan\u0131r. K\u0131sacas\u0131, ngxsmk-datatable temel s\u00fcr\u00fcm ile bir veri tablosundan beklenen her \u015feyi sunarken, Enterprise Edition kurumsal d\u00fczeyde kar\u015f\u0131la\u015f\u0131labilecek en karma\u015f\u0131k veri y\u00f6netimi senaryolar\u0131 i\u00e7in eksiksiz ve g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm paketidir.<\/p>\n

ngxsmk-datatable v1.7.0 Nas\u0131l Kurulur ve Yap\u0131land\u0131r\u0131l\u0131r?<\/h3>\n

ngxsmk-datatable v1.7.0 Enterprise Edition<\/strong>‘\u0131 Angular projenize entegre etmek olduk\u00e7a basit ve standart bir s\u00fcre\u00e7tir. Bu b\u00f6l\u00fcm, ad\u0131m ad\u0131m kurulumu ve temel yap\u0131land\u0131rmay\u0131 anlatarak, ilk veri tablonuzu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 g\u00f6sterecektir. \u00d6ncelikle, projenizin Angular CLI ile olu\u015fturuldu\u011fundan ve temel ba\u011f\u0131ml\u0131l\u0131klar\u0131n y\u00fckl\u00fc oldu\u011fundan emin olmal\u0131s\u0131n\u0131z. E\u011fer hen\u00fcz bir Angular projeniz yoksa, a\u015fa\u011f\u0131daki komutla yeni bir proje olu\u015fturabilirsiniz:<\/p>\n

\nng new my-enterprise-app\ncd my-enterprise-app\n<\/pre>\n
<\/code><\/p>\n
Projeniz haz\u0131r oldu\u011funda, ngxsmk-datatable<\/code> paketini projenize eklemeniz gerekir. Bu i\u015flemi npm veya yarn kullanarak kolayca yapabilirsiniz. Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\nnpm install ngxsmk-datatable-enterprise\n# veya\nyarn add ngxsmk-datatable-enterprise\n<\/pre>\n
<\/code><\/p>\n
Paket y\u00fcklendikten sonra, Angular uygulaman\u0131z\u0131n ana mod\u00fcl\u00fcnde (genellikle app.module.ts<\/code>) SmkDataTableModule<\/code>'\u00fc i\u00e7e aktarman\u0131z ve imports<\/code> dizisine eklemeniz gerekmektedir. Bu ad\u0131m, ngxsmk-datatable bile\u015fenlerinin uygulaman\u0131z genelinde kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\n\/\/ src\/app\/app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { AppComponent } from '.\/app.component';\nimport { SmkDataTableModule } from 'ngxsmk-datatable-enterprise'; \/\/ Enterprise s\u00fcr\u00fcm\u00fcn\u00fc i\u00e7e aktar\u0131n\nimport { CommonModule } from '@angular\/common'; \/\/ Baz\u0131 NgFor vb. direktifler i\u00e7in gerekli olabilir\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    CommonModule, \/\/ E\u011fer kullan\u0131l\u0131yorsa ekleyin\n    SmkDataTableModule \/\/ ngxsmk-datatable mod\u00fcl\u00fcn\u00fc ekleyin\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n<\/pre>\n
<\/code><\/p>\n
Mod\u00fcl\u00fc i\u00e7e aktard\u0131ktan sonra, AppComponent<\/code> (veya veri tablosunu kullanmak istedi\u011finiz herhangi bir bile\u015fende) basit bir veri tablosu olu\u015fturmaya haz\u0131rs\u0131n\u0131z. \u00d6ncelikle, bile\u015feninizin TypeScript dosyas\u0131nda g\u00f6r\u00fcnt\u00fclenecek \u00f6rnek verileri tan\u0131mlayal\u0131m. Bu veriler genellikle bir API'den gelir ancak ba\u015flang\u0131\u00e7 i\u00e7in statik bir dizi kullanabiliriz.<\/p>\n
\n\/\/ src\/app\/app.component.ts\nimport { Component, OnInit } from '@angular\/core';\n\ninterface Product {\n  id: number;\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n}\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit {\n  title = 'ngxsmk-datatable-example';\n  \n  products: Product[] = [];\n  \n  \/\/ Tablo s\u00fctunlar\u0131n\u0131 tan\u0131mlayan yap\u0131land\u0131rma\n  \/\/ Bu yap\u0131land\u0131rma, ngxsmk-datatable bile\u015fenine hangi s\u00fctunlar\u0131n g\u00f6sterilece\u011fini ve nas\u0131l davranaca\u011f\u0131n\u0131 s\u00f6yler.\n  \/\/ Her bir obje, bir s\u00fctunu temsil eder ve 'field', 'header', 'sortable', 'filter' gibi \u00f6zelliklere sahiptir.\n  \/\/ 'field': Veri objesindeki ilgili \u00f6zelli\u011fin anahtar\u0131 (\u00f6rne\u011fin, 'name' alan\u0131 'product.name' de\u011ferini g\u00f6sterecek).\n  \/\/ 'header': S\u00fctun ba\u015fl\u0131\u011f\u0131nda g\u00f6r\u00fcnt\u00fclenecek metin.\n  \/\/ 'sortable': Bu s\u00fctun \u00fczerinden s\u0131ralama yap\u0131labilir mi? (boolean)\n  \/\/ 'filter': Bu s\u00fctun i\u00e7in filtreleme \u00f6zelli\u011fi etkin mi? (boolean)\n  \/\/ 'type': S\u00fctun veri tipi (\u00f6rne\u011fin 'text', 'number', 'date'). Filtreleme ve s\u0131ralama davran\u0131\u015f\u0131n\u0131 etkiler.\n  cols: any[] = [\n    { field: 'id', header: '\u00dcr\u00fcn Kodu', sortable: true, filter: true, type: 'number', width: '80px' },\n    { field: 'name', header: '\u00dcr\u00fcn Ad\u0131', sortable: true, filter: true, type: 'text', width: '250px' },\n    { field: 'category', header: 'Kategori', sortable: true, filter: true, type: 'text', width: '150px' },\n    { field: 'price', header: 'Fiyat', sortable: true, filter: true, type: 'currency', width: '100px' },\n    { field: 'stock', header: 'Stok', sortable: true, filter: true, type: 'number', width: '80px' }\n  ];\n\n  ngOnInit() {\n    this.products = [\n      { id: 1, name: 'Laptop Pro X', category: 'Elektronik', price: 12000, stock: 50 },\n      { id: 2, name: 'Ak\u0131ll\u0131 Saat Alpha', category: 'Aksesuarlar', price: 2500, stock: 120 },\n      { id: 3, name: 'Kablosuz Kulakl\u0131k V3', category: 'Elektronik', price: 1500, stock: 200 },\n      { id: 4, name: 'Ergonomik Klavye', category: 'Bilgisayar', price: 800, stock: 75 },\n      { id: 5, name: 'Optik Mouse Gaming', category: 'Bilgisayar', price: 300, stock: 150 },\n      { id: 6, name: '4K Ultra HD Monit\u00f6r', category: 'Elektronik', price: 4500, stock: 30 },\n      { id: 7, name: 'Webcam Pro 1080p', category: 'Bilgisayar', price: 600, stock: 90 },\n      { id: 8, name: 'Harici Hard Disk 2TB', category: 'Depolama', price: 950, stock: 60 },\n      { id: 9, name: 'Bluetooth Hoparl\u00f6r', category: 'Ses Sistemleri', price: 700, stock: 110 },\n      { id: 10, name: 'Drone Fly X', category: 'Hobi', price: 8000, stock: 15 }\n    ];\n  }\n}\n<\/pre>\n
<\/code><\/p>\n
Son olarak, HTML \u015fablonunuzda <\/code> etiketini kullanarak veri tablosunu olu\u015fturabilirsiniz. Burada, [value]<\/code> girdisine veri dizinizi, [columns]<\/code> girdisine ise s\u00fctun yap\u0131land\u0131rman\u0131z\u0131 ba\u011flars\u0131n\u0131z. Ayr\u0131ca, [paginator]<\/code>, [rows]<\/code>, [sortable]<\/code>, [filterable]<\/code> gibi \u00f6zellikleri de kolayca etkinle\u015ftirebilirsiniz.<\/p>\n
\n\n
\n  
\u00dcr\u00fcn Listesi - ngxsmk-datatable v1.7.0<\/h2>\n\n  \n  \n    [columns]=\"cols\"               \n    [paginator]=\"true\"             \n    [rows]=\"5\"                     \n    [rowsPerPageOptions]=\"[5, 10, 20]\" \n    [sortable]=\"true\"              \n    [filterable]=\"true\"            \n    [globalFilter]=\"true\"          \n    [exportable]=\"true\"            \n    [editable]=\"false\"             \n    selectionMode=\"multiple\"       \n    [resizableColumns]=\"true\"      \n    [reorderableColumns]=\"true\"    \n    [showCurrentPageReport]=\"true\" \n    currentPageReportTemplate=\"Toplam {totalRecords} kay\u0131t i\u00e7inden {first}-{last} g\u00f6steriliyor\"\n    tableStyleClass=\"p-datatable-striped p-datatable-gridlines\" \n    [responsive]=\"true\"            \n  >\n    \n    \n        \n            \n                {{ col.header }}\n                <\/smk-sort-icon>\n            <\/th>\n        <\/tr>\n        \n            \n                <\/smk-column-filter>\n            <\/th>\n        <\/tr>\n    <\/ng-template>\n\n    \n        \n            \n                \n                    {{ rowData[col.field] | currency:'USD':'symbol':'1.2-2' }}\n                <\/span>\n                \n                    {{ rowData[col.field] }}\n                <\/span>\n            <\/td>\n        <\/tr>\n    <\/ng-template>\n\n    \n    \n        \n            \n                Toplam {{ products.length }} \u00fcr\u00fcn bulunmaktad\u0131r.\n            <\/td>\n        <\/tr>\n    <\/ng-template>\n  <\/smk-data-table>\n<\/div>\n<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnek, temel kurulumu ve birka\u00e7 yayg\u0131n \u00f6zelli\u011fi g\u00f6stermektedir. smk-data-table<\/code> bile\u015feni, bir\u00e7ok giri\u015f \u00f6zelli\u011fi (input property) ve olay yay\u0131c\u0131 (event emitter) ile olduk\u00e7a \u00f6zelle\u015ftirilebilir. \u00d6rne\u011fin, [rows]<\/code> ile sayfa ba\u015f\u0131na g\u00f6sterilecek sat\u0131r say\u0131s\u0131n\u0131, [sortable]<\/code> ile s\u0131ralama \u00f6zelli\u011fini, [filterable]<\/code> ile s\u00fctun bazl\u0131 filtrelemeyi ve [globalFilter]<\/code> ile t\u00fcm tablo \u00fczerinde arama yapmay\u0131 etkinle\u015ftirebilirsiniz. Ayr\u0131ca, smkTemplate=\"header\"<\/code> ve smkTemplate=\"body\"<\/code> gibi template direktifleri sayesinde s\u00fctun ba\u015fl\u0131klar\u0131n\u0131 ve sat\u0131r i\u00e7eriklerini tamamen kendi ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u015fekillendirebilirsiniz. Bu sayede, sadece veri g\u00f6stermekle kalmay\u0131p, kullan\u0131c\u0131lar\u0131n\u0131za zengin ve interaktif bir deneyim sunabilirsiniz. Kurulum tamamland\u0131\u011f\u0131nda, uygulaman\u0131z\u0131 ng serve<\/code> komutuyla \u00e7al\u0131\u015ft\u0131rabilir ve yeni entegre etti\u011finiz veri tablosunu taray\u0131c\u0131n\u0131zda g\u00f6rebilirsiniz.<\/p>\n
Geli\u015fmi\u015f Veri Y\u00f6netimi: B\u00fcy\u00fck Veri Setlerinde Performans ve Esneklik Nas\u0131l Sa\u011flan\u0131r?<\/h2>\n
B\u00fcy\u00fck veri setleri ile \u00e7al\u0131\u015fmak, frontend uygulamalar\u0131nda performans darbo\u011fazlar\u0131na yol a\u00e7an en yayg\u0131n senaryolardan biridir. Bir e-ticaret platformunda binlerce \u00fcr\u00fcn veya bir finans uygulamas\u0131nda milyonlarca i\u015flem kayd\u0131n\u0131 ayn\u0131 anda istemci taraf\u0131na \u00e7ekmek ve i\u015flemek, uygulaman\u0131n donmas\u0131na veya \u00e7ok yava\u015f \u00e7al\u0131\u015fmas\u0131na neden olabilir. ngxsmk-datatable v1.7.0 Enterprise Edition, bu t\u00fcr senaryolar i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f geli\u015fmi\u015f veri y\u00f6netimi mekanizmalar\u0131 sunarak performans\u0131 ve esnekli\u011fi art\u0131r\u0131r. Temel olarak, bu, \"sunucu taraf\u0131\" (server-side) i\u015flemlerle sa\u011flan\u0131r. Yani, s\u0131ralama, filtreleme, sayfaland\u0131rma gibi i\u015flemlerin t\u00fcm veriler yerine yaln\u0131zca o an g\u00f6r\u00fcnt\u00fclenmesi gereken veri par\u00e7as\u0131 \u00fczerinde sunucu taraf\u0131ndan yap\u0131lmas\u0131d\u0131r. Bu yakla\u015f\u0131m, sadece mevcut sayfadaki verilerin istemciye g\u00f6nderilmesini sa\u011flayarak a\u011f y\u00fck\u00fcn\u00fc azalt\u0131r ve uygulaman\u0131n bellek t\u00fcketimini d\u00fc\u015f\u00fcr\u00fcr. Bu, \u00f6zellikle d\u00fc\u015f\u00fck bant geni\u015fli\u011fine sahip ba\u011flant\u0131lar i\u00e7in ve mobil cihazlar gibi s\u0131n\u0131rl\u0131 kaynaklara sahip ortamlarda kritik \u00f6neme sahiptir.<\/p>\n
Sunucu Taraf\u0131 Sayfaland\u0131rma, S\u0131ralama ve Filtreleme:<\/strong> Bu, ngxsmk-datatable'\u0131n en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biridir. Geli\u015ftirici, [lazy]=\"true\"<\/code> \u00f6zelli\u011fini kullanarak tablonun tembel y\u00fckleme modunda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayabilir. Bu durumda, tablo sadece o anki sayfa, s\u0131ralama ve filtreleme kriterlerine uygun verileri sunucudan talep eder. Bu i\u015flemi y\u00f6netmek i\u00e7in, onLazyLoad<\/code> olay\u0131 kullan\u0131l\u0131r. Bu olay, tablo durumunda (sayfa de\u011fi\u015fimi, s\u0131ralama, filtreleme) herhangi bir de\u011fi\u015fiklik oldu\u011funda tetiklenir ve mevcut tablo durumunu (sayfa numaras\u0131, sayfa boyutu, s\u0131ralama alan\u0131, s\u0131ralama d\u00fczeni, filtreler) i\u00e7eren bir obje g\u00f6nderir. Geli\u015ftirici, bu objeyi kullanarak sunucu taraf\u0131ndaki API'ye ilgili iste\u011fi g\u00f6nderir ve d\u00f6nen verileri tabloya ba\u011flar. A\u015fa\u011f\u0131da, bu yakla\u015f\u0131m\u0131n nas\u0131l uygulanaca\u011f\u0131na dair bir \u00f6rnek bulunmaktad\u0131r:<\/p>\n
\n\/\/ src\/app\/app.component.ts (bir \u00f6nceki \u00f6rnekten devam)\nimport { Component, OnInit } from '@angular\/core';\nimport { LazyLoadEvent } from 'ngxsmk-datatable-enterprise'; \/\/ LazyLoadEvent tipini i\u00e7e aktar\u0131n\nimport { HttpClient } from '@angular\/common\/http'; \/\/ API \u00e7a\u011fr\u0131lar\u0131 i\u00e7in HttpClient\n\ninterface Product {\n  id: number;\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n}\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit {\n  products: Product[] = [];\n  totalRecords: number = 0; \/\/ Toplam kay\u0131t say\u0131s\u0131 sunucudan gelecek\n  loading: boolean = false; \/\/ Y\u00fckleme durumu\n  \n  cols: any[] = [\n    { field: 'id', header: '\u00dcr\u00fcn Kodu', sortable: true, filter: true, type: 'number' },\n    { field: 'name', header: '\u00dcr\u00fcn Ad\u0131', sortable: true, filter: true, type: 'text' },\n    { field: 'category', header: 'Kategori', sortable: true, filter: true, type: 'text' },\n    { field: 'price', header: 'Fiyat', sortable: true, filter: true, type: 'currency' },\n    { field: 'stock', header: 'Stok', sortable: true, filter: true, type: 'number' }\n  ];\n\n  constructor(private http: HttpClient) {}\n\n  ngOnInit() {\n    \/\/ Uygulama ilk y\u00fcklendi\u011finde varsay\u0131lan bir veri y\u00fcklemesi yapabiliriz\n    \/\/ Veya sadece tablo ilk kez render edildi\u011finde onLazyLoad tetiklenmesini bekleyebiliriz.\n    \/\/ \u0130lk y\u00fckleme i\u00e7in onLazyLoad'\u0131 manuel tetikleyebiliriz.\n    const initialEvent: LazyLoadEvent = {\n        first: 0,\n        rows: 5,\n        sortField: 'id',\n        sortOrder: 1, \/\/ 1 for ascending, -1 for descending\n        filters: {}\n    };\n    this.loadProductsLazy(initialEvent);\n  }\n\n  loadProductsLazy(event: LazyLoadEvent) {\n    this.loading = true;\n\n    \/\/ \u00d6rnek bir API \u00e7a\u011fr\u0131s\u0131. Ger\u00e7ek projede kendi API'nize g\u00f6re uyarlamal\u0131s\u0131n\u0131z.\n    \/\/ event objesi: { first: 0, rows: 10, sortField: 'name', sortOrder: 1, filters: { name: { value: 'Laptop', matchMode: 'contains' } } }\n    const params = {\n      page: (event.first \/ event.rows).toString(),\n      size: event.rows.toString(),\n      sortBy: event.sortField,\n      sortOrder: event.sortOrder === 1 ? 'asc' : 'desc',\n      ...this.buildFilterParams(event.filters) \/\/ Filtreleri API'nizin bekledi\u011fi formata d\u00f6n\u00fc\u015ft\u00fcr\n    };\n\n    \/\/ HttpClient ile API'ye istek g\u00f6nder\n    this.http.get<{ data: Product[], total: number }>('api\/products', { params })\n      .subscribe(response => {\n        this.products = response.data;\n        this.totalRecords = response.total;\n        this.loading = false;\n      }, error => {\n        console.error('Veri y\u00fcklenirken hata olu\u015ftu:', error);\n        this.loading = false;\n      });\n  }\n\n  \/\/ API'nizin filtreleri nas\u0131l bekledi\u011fine ba\u011fl\u0131 olarak bu fonksiyonu \u00f6zelle\u015ftirin\n  private buildFilterParams(filters: { [s: string]: any; }): { [s: string]: string; } {\n    const filterParams: { [s: string]: string; } = {};\n    for (const field in filters) {\n      if (filters.hasOwnProperty(field) && filters[field].value) {\n        filterParams[filter.${field}<\/code>] = filters[field].value;\n        \/\/ API'niz matchMode'u da destekliyorsa ekleyebilirsiniz.\n        \/\/ filterParams[filter.${field}.matchMode<\/code>] = filters[field].matchMode;\n      }\n    }\n    return filterParams;\n  }\n}\n<\/pre>\n
<\/code><\/p>\n
<\/pre>\n
<\/code>
\n<\/p>\n
\n
\u00dcr\u00fcn Listesi - Sunucu Taraf\u0131 Veri Y\u00f6netimi<\/h2>\n
  
\n    [lazy]=\"true\"                  
\n    (onLazyLoad)=\"loadProductsLazy($event)\" 
\n    [sortable]=\"true\"
\n    [filterable]=\"true\"
\n    [globalFilter]=\"true\"
\n    [exportable]=\"true\"
\n    [loading]=\"loading\"            
\n    loadingIcon=\"pi pi-spinner pi-spin\" 
\n    selectionMode=\"multiple\"
\n    [resizableColumns]=\"true\"
\n    [reorderableColumns]=\"true\"
\n    [showCurrentPageReport]=\"true\"
\n    currentPageReportTemplate=\"Toplam {totalRecords} kay\u0131t i\u00e7inden {first}-{last} g\u00f6steriliyor\"
\n    tableStyleClass=\"p-datatable-striped p-datatable-gridlines\"
\n    [responsive]=\"true\"
\n  >
\n    
\n  <\/smk-data-table>\n<\/div>\n
<\/code><\/p>\n
Vaka Analizi: E-ticaret platformunda sipari\u015f listeleme<\/strong><\/p>\n
Bir e-ticaret platformunda y\u00f6neticilerin t\u00fcm sipari\u015fleri listeledi\u011fi bir panel d\u00fc\u015f\u00fcn\u00fcn. G\u00fcnde binlerce sipari\u015fin geldi\u011fi bir senaryoda, bu sipari\u015flerin t\u00fcm detaylar\u0131n\u0131 (sipari\u015f kodu, m\u00fc\u015fteri ad\u0131, sipari\u015f tarihi, toplam tutar, durum vb.) tek bir tabloda istemci taraf\u0131nda y\u00f6netmek imkans\u0131zd\u0131r. \u0130\u015fte burada ngxsmk-datatable'\u0131n sunucu taraf\u0131 veri y\u00f6netimi devreye girer. Y\u00f6netici, sayfaland\u0131rma ile her seferinde yaln\u0131zca 20 sipari\u015f g\u00f6r\u00fcr. \"Sipari\u015f Tarihi\" s\u00fctununa t\u0131klayarak en yeni sipari\u015fleri en \u00fcste getirebilir veya \"M\u00fc\u015fteri Ad\u0131\"na g\u00f6re filtreleme yaparak belirli bir m\u00fc\u015fterinin sipari\u015flerini kolayca bulabilir. T\u00fcm bu i\u015flemler, sunucuya yap\u0131lan hafif API istekleriyle y\u00f6netilir, b\u00f6ylece aray\u00fcz her zaman h\u0131zl\u0131 ve duyarl\u0131 kal\u0131r. Ek olarak, custom templates<\/code> kullanarak \"Durum\" s\u00fctununu renk kodlu rozetlerle (\u00f6rne\u011fin, \"Onayland\u0131\" ye\u015fil, \"\u0130\u015fleniyor\" mavi, \"\u0130ptal Edildi\" k\u0131rm\u0131z\u0131) veya \"Toplam Tutar\" s\u00fctununu para birimi format\u0131nda g\u00f6sterebiliriz, bu da g\u00f6rselle\u015ftirme ve okunabilirlik a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck fayda sa\u011flar. Bu esneklik, geli\u015ftiricilere sadece veriyi sunmakla kalmay\u0131p, ayn\u0131 zamanda onu en anlaml\u0131 ve kullan\u0131\u015fl\u0131 \u015fekilde g\u00f6rselle\u015ftirme g\u00fcc\u00fc verir.<\/p>\n
\n  Uzman \u0130pucu: B\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015f\u0131rken [lazy]=\"true\"<\/code> \u00f6zelli\u011fini kullanmak, frontend uygulaman\u0131z\u0131n performans\u0131n\u0131 radikal bir \u015fekilde art\u0131r\u0131r. Bu yakla\u015f\u0131m, sadece o an g\u00f6r\u00fcnt\u00fclenmesi gereken verilerin sunucu taraf\u0131ndan i\u015flenmesini ve istemciye g\u00f6nderilmesini sa\u011flar, b\u00f6ylece a\u011f y\u00fck\u00fcn\u00fc ve bellek kullan\u0131m\u0131n\u0131 optimize eder. Ayr\u0131ca, sunucu taraf\u0131nda indeksleme ve sorgu optimizasyonlar\u0131 yaparak, veri taban\u0131 performans\u0131n\u0131 da iyile\u015ftirebilirsiniz.\n<\/div>\n
Bu \u015fekilde, ngxsmk-datatable, hem performans hem de esneklik a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck veri setlerinin y\u00f6netimi i\u00e7in kapsaml\u0131 ve kurumsal d\u00fczeyde bir \u00e7\u00f6z\u00fcm sunar. Geli\u015ftiriciler, bu yetenekler sayesinde karma\u015f\u0131k i\u015f ihtiya\u00e7lar\u0131n\u0131 daha verimli bir \u015fekilde kar\u015f\u0131layabilirler.<\/p>\n
Kurumsal \u0130htiya\u00e7lara \u00d6zel \u00c7\u00f6z\u00fcmler: v1.7.0 Enterprise S\u00fcr\u00fcm\u00fcn\u00fcn Fark Yaratan \u00d6zellikleri Nelerdir?<\/h3>\n
ngxsmk-datatable v1.7.0 Enterprise Edition<\/strong>, temel veri tablosu i\u015flevselliklerinin \u00f6tesine ge\u00e7erek, kurumsal d\u00fczeydeki karma\u015f\u0131k ve \u00f6zel ihtiya\u00e7lar\u0131 kar\u015f\u0131lamak \u00fczere tasarlanm\u0131\u015f bir dizi ileri d\u00fczey \u00f6zellik sunar. Bu \u00f6zellikler, i\u015f ak\u0131\u015flar\u0131n\u0131 optimize eder, kullan\u0131c\u0131 deneyimini zenginle\u015ftirir ve geli\u015ftiricilere daha fazla kontrol ve esneklik sa\u011flar. Standart bir veri tablosunun yaln\u0131zca veriyi g\u00f6r\u00fcnt\u00fclemesi beklenirken, Enterprise s\u00fcr\u00fcm\u00fc verilerle daha derinlemesine etkile\u015fim kurma ve onlar\u0131 daha verimli bir \u015fekilde y\u00f6netme yetene\u011fi kazand\u0131r\u0131r.<\/p>\n
Geli\u015fmi\u015f Veri D\u0131\u015fa Aktarma Se\u00e7enekleri (PDF, Excel, CSV):<\/strong> Kurumsal d\u00fcnyada raporlama ve veri payla\u015f\u0131m\u0131 vazge\u00e7ilmezdir. v1.7.0, kullan\u0131c\u0131lar\u0131n tablodaki verileri yaln\u0131zca temel CSV format\u0131nda de\u011fil, ayn\u0131 zamanda daha yap\u0131land\u0131r\u0131lm\u0131\u015f ve profesyonel olan Excel (.xlsx<\/code>) ve PDF formatlar\u0131nda da d\u0131\u015fa aktarabilmesini sa\u011flar. Bu \u00f6zellik, \u00f6zellikle finans, sat\u0131\u015f veya operasyonel raporlamalar i\u00e7in b\u00fcy\u00fck de\u011fer ta\u015f\u0131r. \u00d6rne\u011fin, bir finansal raporlama sisteminde, kullan\u0131c\u0131lar belirli bir d\u00f6neme ait t\u00fcm i\u015flem kay\u0131tlar\u0131n\u0131 tek t\u0131klamayla bir Excel dosyas\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir ve ilgili departmanlarla kolayca payla\u015fabilirler. Bu, manuel veri kopyalama ve bi\u00e7imlendirme i\u015flemlerini ortadan kald\u0131rarak zaman kazand\u0131r\u0131r ve insan hatalar\u0131n\u0131 azalt\u0131r. D\u0131\u015fa aktarma i\u015flemi s\u0131ras\u0131nda, g\u00f6r\u00fcn\u00fcr s\u00fctunlar, s\u0131ralama ve filtreleme durumlar\u0131 gibi mevcut tablo ayarlar\u0131 korunarak, d\u0131\u015fa aktar\u0131lan verinin kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fcyle birebir ayn\u0131 olmas\u0131 sa\u011flan\u0131r.<\/p>\n
\n\n\n