Javascript İle Dinamik Bir Etkileşimli Tablo Filtreleme Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için bilgisayarınızda modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve herhangi bir metin editörü (VS Code önerilir) yeterlidir. Projemiz 2026 yılı standartlarına uygun olarak ES6+ (ECMAScript 6 ve sonrası) sözdizimi kullanacaktır.

• HTML5: Tablo yapısını oluşturmak için.
• CSS3: Görsel düzenleme ve kullanıcı deneyimi için.
• JavaScript (ES6+): Filtreleme mantığını çalıştırmak için.

Herhangi bir kurulum gerekmemektedir; tarayıcınızın geliştirici araçlarını (F12) kullanarak kodlarınızın çıktısını anlık olarak takip edebilirsiniz.

Adım 1: Temel HTML Tablo Yapısının Oluşturulması

Filtreleme sistemimizin temeli, verilerin düzgün bir şekilde görüntülendiği HTML tablosudur. Filtreleme işleminin sağlıklı çalışması için her satıra bir sınıf veya veri özniteliği (data attribute) eklemek, seçicileri yönetmemizi kolaylaştıracaktır.

  

    

      
İsim
      
Departman
    
  
  

    
Ahmet Yılmaz
Yazılım
    
Ayşe Demir
Pazarlama
  

Burada input etiketi, kullanıcının filtreleme metnini gireceği alandır. table yapısı ise verilerimizi barındıran ana konteynerdir.

Adım 2: JavaScript ile Filtreleme Mantığını Kurma

Filtreleme mantığı, kullanıcının girdiği değeri mevcut tablo satırlarıyla karşılaştırmaya dayanır. keyup olay dinleyicisi ile her tuş vuruşunda tabloyu güncelleyeceğiz.

const aramaInput = document.getElementById('aramaInput');
const tablo = document.getElementById('personelTablosu');
const satirlar = tablo.getElementsByTagName('tr');

aramaInput.addEventListener('keyup', function() {
  const arananDeger = aramaInput.value.toLowerCase();
  
  for (let i = 1; i < satirlar.length; i++) {
    const metin = satirlar[i].textContent.toLowerCase();
    satirlar[i].style.display = metin.includes(arananDeger) ? "" : "none";
  }
});

Bu kod bloğu, her tuş vuruşunda tüm satırları gezer. textContent özelliği ile satırdaki tüm veriyi alır ve includes() metodu ile aranan değerin varlığını kontrol eder.

Adım 3: Performans ve Optimizasyon Stratejileri

Büyük veri setlerinde her tuş vuruşunda DOM manipülasyonu yapmak tarayıcıyı yorabilir. "Debounce" tekniği, kullanıcının yazmayı bırakmasını beklemenizi sağlar.

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

const filtrele = debounce(() => {
  // Filtreleme mantığı buraya gelecek
}, 300);

Bu yöntem, filtreleme fonksiyonunun 300 milisaniye boyunca tetiklenmemesini sağlayarak gereksiz işlem yükünü azaltır.

Adım 4: Filtreleme Yöntemlerinin Karşılaştırılması

Farklı filtreleme yaklaşımlarını anlamak, projenizin ölçeklenebilirliği için kritiktir.

Adım 5: Güvenlik ve Hata Yönetimi

Kullanıcıdan alınan verileri işlerken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Kullanıcı girdisini doğrudan HTML olarak eklememeli, her zaman metin içeriği olarak işlemelisiniz.

Kritik Uyarı: Kullanıcıdan gelen verileri asla innerHTML ile tabloya eklemeyin. Her zaman textContent veya innerText kullanarak veriyi güvenli hale getirin. Aksi takdirde, kötü niyetli kullanıcılar script çalıştıran kodlar enjekte edebilir.

Adım 6: Dinamik Veri Kaynağı ile Entegrasyon

Modern uygulamalarda veriler genellikle JSON formatında bir API'den gelir. Bu durumda tabloyu dinamik olarak oluşturmak en sağlıklı yöntemdir.

const veriler = [{isim: 'Ali', departman: 'İK'}, {isim: 'Can', departman: 'Satış'}];

function tabloyuDoldur(data) {
  const tbody = document.querySelector('#personelTablosu tbody');
  tbody.innerHTML = data.map(kisi => 
    `${kisi.isim}${kisi.departman}`
  ).join('');
}

Bu örnekte map() fonksiyonu ile veriyi HTML satırlarına dönüştürüyoruz. Bu, verinizi merkezi bir noktadan yönetmenizi sağlar.

Sorumluluk Reddi: Bu rehberde sunulan kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanırken, özellikle büyük ölçekli uygulamalarda veri doğrulama ve sunucu taraflı filtreleme (server-side filtering) yöntemlerini kullanmanız önerilir.

Sıkça Sorulan Sorular

Filtreleme büyük/küçük harf duyarlı mı?

Hayır, yukarıdaki kodda toLowerCase() metodu kullanıldığı için her iki durumda da doğru sonuç verir.

Çok fazla verim varsa ne yapmalıyım?

Veri setiniz 1000 satırı geçiyorsa, sanallaştırma (virtualization) kütüphaneleri kullanmalı veya sunucu taraflı arama yapmalısınız.

Aynı anda birden fazla sütunu nasıl filtrelerim?

Satır içindeki tüm hücreleri bir döngü ile kontrol edip, herhangi birinde eşleşme varsa satırı göstermeyi seçebilirsiniz.

Mobil cihazlarda performans düşer mi?

Debounce tekniğini kullandığınız sürece mobil cihazlarda da oldukça yüksek performans alırsınız.

İnternet bağlantısı kesilirse sistem çalışır mı?

Evet, filtreleme işlemi tamamen tarayıcı (client-side) üzerinde çalıştığı için internet bağlantısına ihtiyaç duymaz.

Gelişmiş Kullanıcı Deneyimi İçin İleri İpuçları

Filtreleme sisteminizi bir adım öteye taşımak için kullanıcıya görsel geri bildirimler sağlamak ve etkileşimi daha akıcı hale getirmek önemlidir. Özellikle büyük veri setlerinde, kullanıcının neyi filtrelediğini anlaması için "boş sonuç" durumu yönetimi ve arama terimini vurgulama (highlighting) teknikleri büyük fark yaratır.

Arama Terimlerini Vurgulama

Kullanıcının yazdığı metnin tabloda eşleştiği kısımları renklendirmek, arayüzün profesyonel görünmesini sağlar. Bunu, hücre içeriğini innerHTML ile güncelleyerek gerçekleştirebiliriz.

function highlightText(cell, query) {
  if (!query) {
    cell.innerHTML = cell.textContent;
    return;
  }
  const regex = new RegExp(`(${query})`, 'gi');
  cell.innerHTML = cell.textContent.replace(regex, '$1');
}

Boş Durum (Empty State) Yönetimi

Hiçbir sonuç bulunamadığında kullanıcıya boş bir tablo göstermek yerine, bilgilendirici bir mesaj sunmak kullanıcı deneyimini iyileştirir. Filtreleme fonksiyonunuzun sonuna şu mantığı ekleyebilirsiniz:

function checkEmptyResults(tableBody, rows) {
  const visibleRows = Array.from(rows).filter(row => row.style.display !== 'none');
  let emptyMsg = document.getElementById('empty-msg');
  
  if (visibleRows.length === 0) {
    if (!emptyMsg) {
      emptyMsg = document.createElement('tr');
      emptyMsg.id = 'empty-msg';
      emptyMsg.innerHTML = 'Aranan kriterlere uygun kayıt bulunamadı.';
      tableBody.appendChild(emptyMsg);
    }
  } else if (emptyMsg) {
    emptyMsg.remove();
  }
}

Alternatif Yaklaşım: Veri Odaklı Filtreleme (Data-Driven)

DOM üzerinde doğrudan işlem yapmak yerine, veriyi bir JavaScript dizisi (Array) olarak tutmak ve tabloyu bu diziye göre yeniden render etmek, özellikle karmaşık uygulamalarda daha sürdürülebilir bir yöntemdir. Bu yaklaşım, verinin kaynağı ile görünümü arasındaki bağı kopararak hata ayıklamayı kolaylaştırır.

const data = [
  { id: 1, name: 'Ahmet', role: 'Developer' },
  { id: 2, name: 'Ayşe', role: 'Designer' }
];

function renderTable(filteredData) {
  const tbody = document.querySelector('tbody');
  tbody.innerHTML = filteredData.map(item => `
    
      ${item.id}
      ${item.name}
      ${item.role}
    
  `).join('');
}

// Filtreleme mantığı
const filterData = (query) => {
  const filtered = data.filter(item => 
    item.name.toLowerCase().includes(query.toLowerCase())
  );
  renderTable(filtered);
};

Bu yöntem, React veya Vue gibi modern kütüphanelere geçiş yapmadan önce, saf JavaScript ile "state" yönetimi mantığını kavramak için mükemmel bir pratik alanıdır. Veri setiniz büyüdükçe, DOM'u sürekli manipüle etmek yerine sadece değişen veriyi render etmek tarayıcı yükünü ciddi oranda azaltacaktır.

Sonuç

JavaScript ile dinamik bir etkileşimli tablo filtreleme sistemi oluşturmak, uygulamanızın kullanılabilirliğini artıran temel bir beceridir. Bu rehberde, basit bir DOM manipülasyonundan başlayarak performans odaklı bir yapıya kadar ilerledik. Bir sonraki adım olarak, tablonuza sıralama (sorting) ve sayfalama (pagination) özelliklerini ekleyerek bu sistemi daha kapsamlı bir veri yönetim paneline dönüştürebilirsiniz.