React İle Dinamik Bir Veri Tablosu 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) kurulu olduğundan emin olmalısınız. React projelerini başlatmak için Vite gibi modern bir yapı aracı kullanmak, performans ve geliştirme hızı açısından 2026 standartlarında en doğru tercihtir.

• Node.js (v20 veya üzeri)
• React 19 veya daha yeni bir sürüm
• Temel JavaScript (ES6+ sözdizimi) bilgisi
• Bir kod editörü (VS Code önerilir)

Projenizi başlatmak için terminalinizde şu komutları sırasıyla çalıştırarak ortamınızı hazırlayabilirsiniz:

npm create vite@latest dinamik-tablo -- --template react
cd dinamik-tablo
npm install
npm run dev

Bu komutlar, projenizin temel iskeletini oluşturacak ve yerel bir geliştirme sunucusu başlatacaktır. Artık kodlamaya başlamaya hazırsınız.

Veri Yapısını Tanımlama ve State Yönetimi

Dinamik bir tablonun kalbinde, verilerin nasıl tutulduğu yatar. React'te veriyi yönetmek için useState kancasını (hook) kullanırız. Tablonun güncellenmesi için verinin bir state içinde olması şarttır.

Aşağıdaki örnekte, örnek bir kullanıcı verisi dizisini state olarak tanımlıyoruz:

import { useState } from 'react';

const KullaniciTablosu = () => {
  const [veriler, setVeriler] = useState([
    { id: 1, ad: 'Ahmet', gorev: 'Yazılımcı', yas: 28 },
    { id: 2, ad: 'Ayşe', gorev: 'Tasarımcı', yas: 24 },
    { id: 3, ad: 'Mehmet', gorev: 'Yönetici', yas: 35 }
  ]);

  return (
    

      {/* Tablo içeriği buraya gelecek */}
    
  );
};

Burada veriler değişkeni, tablonun ana kaynağıdır. setVeriler fonksiyonu ise bu veriyi dinamik olarak değiştirmemize olanak tanır.

Tablo Bileşenini Oluşturma ve Verileri Listeleme

Veriyi ekrana yansıtmak için React'in map fonksiyonunu kullanırız. Bu fonksiyon, her bir veri nesnesi için bir tablo satırı (tr) oluşturur. Dinamik içeriklerde key özelliğini kullanmak, React'in DOM güncellemelerini optimize etmesi için kritiktir.

    {veriler.map((kullanici) => (
      
    ))}
  

  

    

      
Ad
      
Görev
      
Yaş
    
  
  

        
{kullanici.ad}
        
{kullanici.gorev}
        
{kullanici.yas}
      

Bu yapı, verileriniz değiştikçe tablonun otomatik olarak güncellenmesini sağlar. key değeri olarak verinin benzersiz bir kimliği (id) kullanılması, performans açısından en iyi pratiktir.

Dinamik Filtreleme Özelliği Ekleme

Kullanıcıların tabloyu filtreleyebilmesi, dinamik tabloların en önemli özelliğidir. Bir input alanı oluşturup, kullanıcının yazdığı metne göre veriler dizisini filtreleyebiliriz.

const [arama, setArama] = useState('');

const filtrelenmisVeriler = veriler.filter((kullanici) =>
  kullanici.ad.toLowerCase().includes(arama.toLowerCase())
);

// Render kısmında:
 setArama(e.target.value)} 
/>

Burada filtrelenmisVeriler değişkeni, orijinal veriyi bozmadan sadece görüntülenen kısmı değiştirir. Bu, verinin bütünlüğünü korumak için güvenli bir yöntemdir.

Sıralama Mantığını Entegre Etme

Sütun başlıklarına tıklandığında verilerin sıralanması, profesyonel bir tablo için olmazsa olmazdır. Bunun için bir sıralama durumu tutmamız gerekir.

const [sirala, setSirala] = useState('asc');

const siralaVeri = () => {
  const sirali = [...filtrelenmisVeriler].sort((a, b) => {
    return sirala === 'asc' ? a.yas - b.yas : b.yas - a.yas;
  });
  setVeriler(sirali);
  setSirala(sirala === 'asc' ? 'desc' : 'asc');
};

Bu kodda, diziyi doğrudan değiştirmek yerine [...filtrelenmisVeriler] ile bir kopyasını alarak sıralama yapıyoruz. Bu, React'in değişmezlik (immutability) prensibine uygun bir yaklaşımdır.

Performans Karşılaştırması ve Yöntemler

Güvenlik Uyarısı: Kullanıcıdan alınan verileri tabloya yazdırırken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olunmalıdır. React varsayılan olarak verileri otomatik olarak kaçış (escaping) işleminden geçirir, ancak dangerouslySetInnerHTML kullanımından kesinlikle kaçının.

Sıkça Sorulan Sorular

React tablosunda neden key kullanmalıyım?

Key, React'in hangi öğelerin değiştiğini, eklendiğini veya silindiğini takip etmesini sağlar. Bu, DOM güncellemelerini minimize ederek uygulamanızın daha hızlı çalışmasına yardımcı olur.

Büyük veri setleri için ne yapmalıyım?

Veri setiniz binlerce satırı aşıyorsa, "Windowing" veya "Virtual Scrolling" tekniklerini kullanan kütüphaneleri tercih etmelisiniz. Bu yöntem sadece ekranda görünen satırları render eder.

State yönetimi için Context API yeterli mi?

Tablonuz sadece tek bir bileşende kullanılıyorsa useState yeterlidir. Ancak veriye uygulamanın farklı yerlerinden erişmeniz gerekiyorsa Context API veya Redux/Zustand gibi araçlar daha uygundur.

Sıralama fonksiyonu orijinal veriyi bozar mı?

Eğer diziyi kopyalamadan (spread operatörü ile) doğrudan sort() fonksiyonunu kullanırsanız, orijinal veri bozulabilir. Her zaman dizinin bir kopyası üzerinde işlem yapmalısınız.

CSS ile tabloyu nasıl güzelleştirebilirim?

Tabloya nth-child(even) seçicisi ile satır renklendirmesi ekleyebilir ve border-collapse özelliği ile kenarlıkları temizleyebilirsiniz.

React Tablolarında Sayfalama (Pagination) Mantığı

Büyük veri setlerini tek bir sayfada listelemek, hem kullanıcı deneyimini olumsuz etkiler hem de DOM ağacının gereksiz yere şişmesine neden olur. Sayfalama, veriyi küçük parçalara bölerek tarayıcının performansını korur. Aşağıdaki örnekte, slice metodunu kullanarak veriyi nasıl sayfalara bölebileceğinizi görebilirsiniz.

const [currentPage, setCurrentPage] = useState(1);
const rowsPerPage = 5;

const indexOfLastRow = currentPage * rowsPerPage;
const indexOfFirstRow = indexOfLastRow - rowsPerPage;
const currentRows = data.slice(indexOfFirstRow, indexOfLastRow);

const paginate = (pageNumber) => setCurrentPage(pageNumber);

// Render kısmında
{currentRows.map(item => (
  
    {item.name}
  
))}

Tablo Bileşenleri İçin Test Stratejileri

Dinamik tablolar, kullanıcı etkileşimi yoğun olan bileşenlerdir. Bu nedenle, sıralama ve filtreleme gibi kritik fonksiyonların doğru çalıştığından emin olmak için birim testleri (unit tests) yazmak hayati önem taşır. Jest ve React Testing Library kullanarak tablonuzun davranışlarını şu şekilde test edebilirsiniz:

• Render Testi: Tablonun verileri doğru sayıda satırla yükleyip yüklemediğini kontrol edin.
• Etkileşim Testi: Sıralama butonuna tıklandığında verilerin gerçekten sıralanıp sıralanmadığını doğrulayın.
• Boş Durum Testi: Veri seti boş olduğunda "Veri bulunamadı" mesajının göründüğünden emin olun.

import { render, screen, fireEvent } from '@testing-library/react';
import DataTable from './DataTable';

test('sıralama butonu veriyi günceller', () => {
  render();
  const sortButton = screen.getByText(/Sırala/i);
  fireEvent.click(sortButton);
  // Sıralama sonrası ilk satırın değiştiğini assert edin
  expect(screen.getByTestId('first-row')).toHaveTextContent('Beklenen Değer');
});

Alternatif Yaklaşım: TanStack Table (React Table)

Eğer tablonuzun karmaşıklığı artıyorsa (sütun gizleme, gruplama, sanal kaydırma - virtual scrolling gibi), kendi mantığınızı yazmak yerine endüstri standardı olan TanStack Table kütüphanesini kullanmanız önerilir. Bu kütüphane, "headless" yapısı sayesinde size sadece mantığı sunar, tasarımı ise tamamen sizin CSS ve HTML yapınıza bırakır.

İpucu: Kütüphane kullanmak, tekerleği yeniden icat etmenizi engeller ve özellikle karmaşık veri tablolarında hata payını minimize eder.

import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

// Kullanımı
{table.getHeaderGroups().map(headerGroup => (
  
    {headerGroup.headers.map(header => (
      
        {flexRender(header.column.columnDef.header, header.getContext())}
      
    ))}
  
))}

Sonuç

React ile dinamik bir veri tablosu oluşturmak, bileşen tabanlı düşünme yeteneğinizi geliştiren harika bir pratik çalışmasıdır. Bu rehberde, veriyi tanımlamadan filtreleme ve sıralama işlemlerine kadar temel adımları tamamladık. Bir sonraki adım olarak, tablonuza "sayfalama" (pagination) özelliğini ekleyerek veri setinizi daha yönetilebilir hale getirebilir veya API üzerinden gerçek zamanlı veri çekerek projeyi bir üst seviyeye taşıyabilirsiniz. Başarılar dilerim.

Kod güvenliği sorumluluk reddi: Yukarıdaki örnekler eğitim amaçlıdır. Üretim ortamında (production) kullanacağınız verilerin doğrulanması, API uç noktalarının güvenliğinin sağlanması ve hassas verilerin şifrelenmesi tamamen geliştiricinin sorumluluğundadır.