Cotable

Cotable, React ve TypeScript ile geliştirilmiş, TanStack Table ve Ant Design tabanlı, güçlü ve özelleştirilebilir bir tablo bileşenidir.

Özellikler

• 🔍 Gelişmiş Filtreleme Seçenekleri
  • Çoklu Seçim Filtresi (multiSelect)
  • Metin Arama Filtresi (searchFilter)
  • Sayısal Aralık Filtresi (numberRange)
  • Özel Seçim Filtresi (multipleChoiceFilter)
  • İç İçe Obje Filtresi (Nested Object Support)
• 🔎 Genel Arama
  • Tüm alanlarda anlık arama
  • Debounce optimizasyonu
  • Türkçe karakter desteği
  • Büyük/küçük harf duyarsız
  • İç içe objelerde arama
• 📊 Akıllı Sıralama
• 📑 Gelişmiş Sayfalama
  • Sayfa Başına Kayıt Sayısı Seçimi
  • Toplam Kayıt Gösterimi
  • Türkçe Sayfalama Metinleri
  • Sayfa Boyutu Değiştirme
• 🎨 Ant Design Tema Desteği
• 🌍 Türkçe Dil Desteği
  • Tüm metinler Türkçe
  • Türkçe karakter normalizasyonu
  • Türkçe tarih formatı
• 💪 TypeScript ile Tam Tip Güvenliği
• 🔄 Otomatik Filtre Tipi Belirleme
• 🧹 Toplu Filtre Temizleme

Kurulum

npm install cotable
# veya
yarn add cotable

Kullanım

import { Cotable } from 'cotable';

// Tablo verisi
const data = [
  { 
    id: 1, 
    customer: {
      title: 'ABC Ltd.',
      contact: {
        name: 'Ahmet',
        phone: '555-0101'
      }
    },
    age: 25, 
    city: 'İstanbul' 
  },
  // ...
];

// Sütun tanımlamaları
const columns = [
  {
    // İç içe obje erişimi için nokta notasyonu kullanımı
    accessorKey: 'customer.title',
    header: 'Müşteri Adı',
    meta: {
      isSearchFilter: true
    }
  },
  {
    // Daha derin iç içe obje erişimi
    accessorKey: 'customer.contact.name',
    header: 'İletişim Kişisi',
    meta: {
      isSearchFilter: true
    }
  },
  {
    accessorKey: 'age',
    header: 'Yaş',
    meta: {
      isNumberRange: true
    }
  },
  {
    accessorKey: 'city',
    header: 'Şehir',
    enableColumnFilter: true
  }
];

// Bileşen kullanımı
function App() {
  return (
    <Cotable
      columns={columns}
      data={data}
      showFilters={true}
      showPagination={true}
      filterStyle="popover"
    />
  );
}

Filtre Türleri

1. Metin Arama Filtresi (searchFilter)

• Anlık arama yapabilme
• Büyük/küçük harf duyarsız arama
• Otomatik temizleme butonu
• Prefix olarak arama ikonu
• İç içe objelerde arama desteği

2. Sayısal Aralık Filtresi (numberRange)

• Minimum ve maksimum değer girişi
• Tek yönlü filtreleme imkanı (sadece min veya sadece max)
• Sayısal değer kontrolü
• InputNumber bileşeni ile kolay giriş
• Nested sayısal değerlerde filtreleme

3. Çoklu Seçim Filtresi (multipleChoiceFilter)

• Virgülle ayrılmış değerleri otomatik seçeneklere dönüştürme
• Çoklu seçim yapabilme
• Checkbox grubu ile kolay seçim
• Otomatik değer ayrıştırma
• İç içe obje değerlerinde çoklu seçim

4. Standart Çoklu Seçim Filtresi (multiSelect)

• Benzersiz değerlerden otomatik seçenek oluşturma
• Tümünü seç/hiçbirini seçme butonları
• Seçenekler arasında anlık arama
• Kaydırılabilir liste görünümü
• Seçenek bulunamadığında özel mesaj
• Nested obje değerlerinde filtreleme

Props

Prop	Tip	Varsayılan	Açıklama
columns	ColumnDef<TData, TValue>[]	-	Tablo sütunlarının tanımları
data	TData[]	-	Tablo verileri
showFilters	boolean	true	Filtreleme özelliğinin gösterilip gösterilmeyeceği
showPagination	boolean	true	Sayfalama özelliğinin gösterilip gösterilmeyeceği
className	string	''	Ek CSS sınıfları
filterStyle	'popover' | 'inline'	'inline'	Filtre stili
showGlobalSearch	boolean	true	Genel arama özelliğinin gösterilip gösterilmeyeceği

Sütun Meta Özellikleri

Özellik	Tip	Açıklama	Otomatik Filtre
isNumberRange	boolean	Sayısal aralık filtresi kullanımı	inNumberRange
isSearchFilter	boolean	Metin arama filtresi kullanımı	searchFilter
isMultipleChoiceFilter	boolean	Çoklu seçim filtresi kullanımı	multipleChoiceFilter
-	-	Standart sütun	multiSelect

Özelleştirme

CSS Sınıfları

• .cotable-wrapper: Ana tablo konteyneri
• .scrollable-content: Kaydırılabilir filtre listesi
• .checkbox-item: Filtre seçenek öğesi

Stil Özelleştirme

• Özel scrollbar tasarımı
• Hover efektleri
• Responsive tasarım
• Ant Design tema desteği

Nested Obje Erişimi

• Nokta notasyonu ile sınırsız derinlikte obje erişimi
• Otomatik değer çözümleme
• Null-safe erişim
• Undefined kontrolü

Geliştirme

# Bağımlılıkları yükle
npm install

# Geliştirme modunda çalıştır
npm run dev

# Derleme
npm run build

# Lint kontrolü
npm run lint

Lisans

MIT