React İle Bileşen Bazlı Bir Veri Tablosu Filtreleme Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeye başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün (LTS) yüklü olduğundan emin olmalısınız. Proje kurulumu için modern bir React geliştirme ortamı olan Vite'ı kullanacağız. Vite, hızlı derleme süresi ve modern modül desteği ile 2026 standartlarına en uygun araçtır.

Projenizi başlatmak için terminalinizde şu komutları sırasıyla çalıştırın:

npm create vite@latest veri-tablosu-filtreleme -- --template react
cd veri-tablosu-filtreleme
npm install
npm run dev

Kurulum tamamlandıktan sonra, projenin temiz bir başlangıç yapması için src klasöründeki gereksiz dosyaları (CSS dosyaları hariç) temizleyebilir ve App.jsx dosyasını boşaltabilirsiniz. Bu çalışma, React 19 ve üzeri sürümlerdeki fonksiyonel bileşen sözdizimini temel almaktadır.

Veri Yapısını Planlama ve Mock Veri Oluşturma

Bileşen bazlı bir filtreleme sistemi oluşturmadan önce, işleyeceğimiz verinin yapısını belirlemeliyiz. Gerçek bir senaryoda bu veriler bir API'den gelecek olsa da, geliştirme sürecinde yönetilebilir bir "mock" (sahte) veri seti kullanmak test süreçlerini hızlandırır.

Projenizin kök dizininde data.js adında bir dosya oluşturun ve örnek kullanıcı verilerini tanımlayın:

export const kullaniciListesi = [
  { id: 1, isim: "Ahmet Yılmaz", departman: "Yazılım", rol: "Geliştirici" },
  { id: 2, isim: "Ayşe Kaya", departman: "Tasarım", rol: "UI/UX" },
  { id: 3, isim: "Mehmet Demir", departman: "Yazılım", rol: "DevOps" },
  { id: 4, isim: "Zeynep Çelik", departman: "Pazarlama", rol: "Uzman" }
];

Bu yapı, filtreleme algoritmamızı test etmek için yeterli çeşitliliğe sahiptir. Veri yapınızın tutarlı olması, filtreleme fonksiyonlarının hata vermeden çalışması için kritiktir.

Filtreleme Mantığını İçeren Tablo Bileşeni

React'te filtreleme mantığını ana bileşende tutmak yerine, tabloyu ve filtreleme girdilerini ayrı bileşenlere bölmek "Single Responsibility" (Tek Sorumluluk) prensibine uygundur. İlk olarak, veriyi listeleyen Tablo bileşenini oluşturalım.

const Tablo = ({ veriler }) => {
  return (
    
        {veriler.map((item) => (
          
        ))}
      

      

        

          
İsim
          
Departman
          
Rol
        
      
      

            
{item.isim}
            
{item.departman}
            
{item.rol}
          
    
  );
};

Bu bileşen, kendisine props olarak gelen veriyi alır ve tablo satırlarına dönüştürür. key kullanımı, React'in sanal DOM (Virtual DOM) üzerinde verimli değişiklik yapabilmesi için zorunludur.

Dinamik Filtreleme Girdisi Oluşturma

Kullanıcıdan alınan input değerini state içerisinde tutmalı ve bu değere göre ana veriyi filtrelemeliyiz. App.jsx içerisinde useState kullanarak arama terimini yönetelim.

import { useState } from 'react';
import { kullaniciListesi } from './data';

function App() {
  const [arama, setArama] = useState("");

  const filtrelenmisVeri = kullaniciListesi.filter((kisi) =>
    kisi.isim.toLowerCase().includes(arama.toLowerCase())
  );

  return (
    

       setArama(e.target.value)} 
      />
      
    
  );
}

Burada toLowerCase() metodu kullanarak büyük/küçük harf duyarlılığını ortadan kaldırdık. Bu, kullanıcı dostu bir arama deneyimi için standart bir yaklaşımdır.

Filtreleme Yöntemleri Karşılaştırması

Büyük veri setleri ile çalışırken filtreleme yöntemlerinin performans etkileri farklılık gösterir. Aşağıdaki tablo, farklı senaryolar için uygun yöntemleri özetler:

Güvenlik Uyarısı: Eğer filtreleme işlemini sunucu tarafında (API üzerinden) yapıyorsanız, kullanıcıdan gelen arama parametrelerini mutlaka temizleyin (sanitization). Doğrudan veritabanı sorgularına eklenen kullanıcı girdileri SQL Injection açıklarına yol açabilir.

Performans Optimizasyonu: useMemo Kullanımı

Veri setiniz büyüdüğünde, her render işleminde filtreleme fonksiyonunun yeniden çalışması performansı düşürebilir. useMemo hook'u, filtreleme sonucunu önbelleğe alarak sadece arama kriteri değiştiğinde hesaplama yapılmasını sağlar.

import { useMemo } from 'react';

// ... App bileşeni içinde
const filtrelenmisVeri = useMemo(() => {
  return kullaniciListesi.filter((kisi) =>
    kisi.isim.toLowerCase().includes(arama.toLowerCase())
  );
}, [arama]);

Bu optimizasyon, uygulamanızın gereksiz hesaplamalardan kaçınmasını sağlayarak 60 FPS akıcılığında bir arayüz sunmanıza yardımcı olur.

Sıkça Sorulan Sorular

Filtreleme neden büyük/küçük harfe duyarlı olmalı?

Kullanıcılar arama yaparken klavyelerinde "Caps Lock" tuşunun açık olup olmadığına dikkat etmezler. Bu nedenle her zaman girdiyi ve veriyi aynı formata (genellikle küçük harfe) çevirerek karşılaştırmak en doğru yöntemdir.

Çoklu filtreleme (Dropdown + Arama) nasıl yapılır?

State'inizi bir obje olarak tutarak (örneğin: { arama: "", departman: "Tümü" }) filtreleme fonksiyonunuzu bu obje içerisindeki değerleri kontrol edecek şekilde genişletebilirsiniz.

Veri setim çok büyükse ne yapmalıyım?

Eğer veriniz binlerce satırı geçiyorsa, "Virtual Scrolling" (Sanal Kaydırma) kütüphanelerini kullanmalı ve filtrelemeyi mutlaka sunucu tarafında (Pagination/Offset ile) gerçekleştirmelisiniz.

Neden filter metodunu kullanıyoruz?

JavaScript'in yerleşik filter metodu, mevcut diziyi değiştirmeden yeni bir dizi döndürür (immutable). Bu, React'in state değişimlerini algılaması ve bileşeni doğru şekilde güncellemesi için temel gereksinimdir.

Arama yaparken gecikme (Debounce) eklemeli miyim?

Evet, özellikle sunucuya istek gönderiyorsanız debounce kullanarak kullanıcının yazmayı bitirmesini beklemek, gereksiz API çağrılarını önlemek için hayati önem taşır.

İleri Seviye Filtreleme: Çoklu Kriterli ve Dinamik Sorgu Yapısı

Basit bir metin aramasının ötesine geçmek istediğinizde, kullanıcıların aynı anda birden fazla kriteri (örneğin; kategori, fiyat aralığı ve durum) birleştirebildiği bir yapı kurmanız gerekir. Bu durum, filtreleme mantığınızı tek bir filter fonksiyonu içinde birleştirmeyi zorunlu kılar.

Aşağıdaki örnekte, her bir filtre kriterinin birer state olarak tutulduğu ve bu state'lerin useMemo içerisinde birleştirildiği profesyonel bir yaklaşım sergilenmektedir:

const [filters, setFilters] = useState({ search: '', category: 'all', minPrice: 0 });

const filteredData = useMemo(() => {
  return data.filter(item => {
    const matchesSearch = item.name.toLowerCase().includes(filters.search.toLowerCase());
    const matchesCategory = filters.category === 'all' || item.category === filters.category;
    const matchesPrice = item.price >= filters.minPrice;

    return matchesSearch && matchesCategory && matchesPrice;
  });
}, [data, filters]);

Büyük Ölçekli Veri Setlerinde Sanallaştırma (Virtualization)

Eğer filtrelediğiniz veri seti binlerce satırdan oluşuyorsa, React'in tüm DOM elemanlarını aynı anda render etmesi tarayıcıyı kilitleyebilir. Bu noktada Virtualization (Sanallaştırma) tekniği devreye girer. Bu teknik, sadece kullanıcının o an gördüğü satırları DOM'a ekler.

Bu işlem için en popüler kütüphanelerden biri olan react-window kullanımına dair temel bir yapılandırma örneği:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  
{filteredData[index].name}
);

// Tablo içerisinde kullanımı

  {Row}

Hata Ayıklama ve Geliştirici İpuçları

Filtreleme sistemlerinde en sık karşılaşılan hatalar genellikle veri tipi uyumsuzluklarıdır. Özellikle API'den gelen sayısal verilerin string olarak algılanması, >= veya

Sonuç