DijitalTable

Bağımsız, kurumsal düzeyde frontend veri tablosu, kart görünümü ve iş akışı kütüphanesi.
Sıfır bağımlılık. Vanilla JS & Modern CSS.

Özellikler

• Sıfır Bağımlılık — Harici framework veya kütüphane gerektirmez. ~34 KB JS + ~21 KB CSS (minified).
• Minimalist Durum & Birim Rozetleri — Doğal, kurumsal ve minimalist rozet tasarımı (Finans, İK, BT, Hukuk, Operasyon, GİB Onaylı, E-İmza vb.) ve tek tıkla durum değiştirici popover.
• Gelişmiş Mobil Uyumluluk — 768px altında otomatik kart görünümü (Card Mode), Apple HIG / WCAG uyumlu 44px dokunmatik hedefler ve mobilde dairesel + butonu.
• macOS Genie In & Out Action Sheet — Mobilde satır içi işlemlerde macOS pencerelerinin akıcı, elastik çekmece animasyonu ve frosted-glass efekti.
• Türkçe Harf Sıralaması — Intl.Collator('tr') ile Ç, İ, Ş, Ö, Ü, Ğ, ı karakterlerini hatasız alfabetik dizilim.
• Eksiksiz Dışa Aktarma (Export Engine) — Excel (.xlsx / .xls SpreadsheetML), UTF-8 BOM CSV, Panoya Kopyalama (TSV) ve resmi kurumsal PDF / Yazdırma dökümü.
• Hücre İçi Canlı Düzenleme (Inline Edit) — Çift tıklamayla anında hücre düzenleme, Enter kaydetme, Esc iptal.
• Toplu Seçim (Bulk Bar) — Checkbox seçimiyle altta beliren kayan eylem çubuğu ve toplu işlemler.
• Tema Desteği — Light, Dark ve System (dijital-ui tasarım sistemiyle %100 uyumlu).
• Entegrasyonlar — HTMX (data-dt-* etiketleri), Alpine.js ($dt), SSR / PHP tabloları için tek satırda DijitalTable.enhance().

Kurulum

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dijital-table/dist/dijital-table.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/dijital-table/dist/dijital-table.min.js"></script>

Sabit versiyon kullanmak isterseniz:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dijital-table@1/dist/dijital-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/dijital-table@1/dist/dijital-table.min.js"></script>

UNPKG alternatifi:

<link rel="stylesheet" href="https://unpkg.com/dijital-table/dist/dijital-table.min.css">
<script src="https://unpkg.com/dijital-table/dist/dijital-table.min.js"></script>

NPM

npm install dijital-table

ES Module

import DijitalTable from 'dijital-table';
import 'dijital-table/dist/dijital-table.min.css';

Hızlı Başlangıç

<div id="musteriTablosu"></div>

<script>
  const table = new DijitalTable('#musteriTablosu', {
    data: [
      { id: 101, firma: 'Çelikler Otomotiv A.Ş.', bakiye: 145250.75, durum: 'finans', tarih: '2024-06-12' },
      { id: 102, firma: 'Işıklar Dayanıklı Tüketim', bakiye: -24500.00, durum: 'ik', tarih: '2024-05-28' },
      { id: 103, firma: 'Şentürk Bilişim A.Ş.', bakiye: 382000.50, durum: 'bt', tarih: '2024-06-15' },
      { id: 104, firma: 'Özkan Uluslararası Lojistik', bakiye: 78900.00, durum: 'hukuk', tarih: '2024-06-01' },
      { id: 105, firma: 'İstanbul İletişim Grubu', bakiye: 0.00, durum: 'operasyon', tarih: '2024-04-10' }
    ],
    columns: [
      { key: 'id', title: 'ID', width: '65px', sortable: true },
      { key: 'firma', title: 'Firma Adı', sortable: true },
      { key: 'bakiye', title: 'Bakiye', type: 'currency', editable: true, sortable: true },
      { key: 'durum', title: 'Departman / Durum', type: 'workflow', width: '160px', sortable: true },
      { key: 'tarih', title: 'Son İşlem', type: 'date', sortable: true }
    ],
    responsive: 'auto',
    selectable: true,
    export: ['excel', 'csv', 'copy', 'pdf'],
    pagination: {
      enabled: true,
      pageSize: 10,
      pageSizes: [5, 10, 25, 50]
    }
  });
</script>

Sütun Yapılandırması (Columns)

Her sütun bir nesne ile tanımlanır ve aşağıdaki yapılandırmaları destekler:

| Parametre | Tip | Varsayılan | Açıklama | |---|---|---|---| | key | string | (Zorunlu) | Veri nesnesindeki alan adı. | | title | string | '' | Tablo başlığında görüntülenecek metin. | | width | string | undefined | Sütun genişliği (Örn: '120px', '20%'). | | sortable | boolean | true | Sütunun sıralanabilir olup olmadığı. | | type | string | 'string' | 'string', 'currency', 'date', 'workflow', 'status', 'badge'. | | currency | string | 'TRY' | type: 'currency' için para birimi kodu ('TRY', 'USD', 'EUR'). | | editable | boolean | false | Hücrenin çift tıklamayla düzenlenebilirliği. | | badge | object | {} | Değerleri stil sınıflarıyla eşleyen sözlük. | | render | function | undefined | Özel hücre çıktısı üreten fonksiyon: (val, row, index) => string. | | html | boolean | false | render çıktısında HTML etiketlerine izin ver (varsayılan: XSS kaçırma). |

Özel Hücre Render Fonksiyonu:

{
  key: 'firma',
  title: 'Firma & İletişim',
  sortable: true,
  render: (val, row) => `
    <div class="dt-user-cell">
      <div class="dt-avatar">${val.charAt(0)}</div>
      <div>
        <div style="font-weight: 600;">${val}</div>
        <small style="color: var(--dt-text-muted);">${row.email}</small>
      </div>
    </div>
  `,
  html: true
}

Minimalist Durum & Birim Rozetleri (Workflow Engine)

dijital-table, göz yoran gradyanlar ve yapay rozetler yerine kurumsal SaaS standartlarında temiz, minimalist rozetler sunar:

• Açık Tema: #f4f4f5 doğal gri zemin, 1px solid #e4e4e7 ince kenarlık, #18181b koyu metin.
• Koyu Tema: #27272a mat antrasit zemin, 1px solid #3f3f46 kenarlık, #fafafa beyaz metin.
• Ölçüler: 2px 8px kompakt dolgu, 5px modern köşe yuvarlama (22px standart yükseklik).

Standart Tanımlı Durumlar

| Kod | Etiket | Kategori | Açıklama | |---|---|---|---| | finans | Finans | Departman | Finans departmanı onay süreci | | ik | İK | Departman | İnsan Kaynakları onay süreci | | bt | BT | Departman | Bilgi Teknolojileri onay süreci | | hukuk | Hukuk | Departman | Hukuk servisi inceleme süreci | | operasyon | Operasyon | Departman | Operasyon birimi onay süreci | | gib_approved | GİB Onaylı | e-Dönüşüm | ETTN zaman damgalı resmi portal onayı | | esign_pending | E-İmza Bekliyor | e-Dönüşüm | Yetkili e-imza süreci bekleniyor | | kep_sending | KEP İletiminde | e-Tebligat | PTT KEP sunucusu üzerinden sevk | | reconciliation_dispute | Mutabakat Farkı | Finans | BA/BS mutabakat farkı tespit edildi | | kvkk_verified | İYS & KVKK | Mevzuat | Açık rıza ve İYS onay kaydı aktif | | due_alert | Kritik Vade | Finans | Ödeme vadesi için son 48 saat |

Tek Tıkla Durum Değiştirici (Interactive Popover)

Herhangi bir durum rozetine tıklandığında minimalist bir popover açılır. Kullanıcı yeni bir durum seçtiğinde:

1. Tablodaki satır anında güncellenir.
2. dt:status:change olayı tetiklenir.
3. Sağ üstte zarif bir geri bildirim bildirimi gösterilir.

Mobil Kart Görünümü & macOS Action Sheet

768px (veya belirlenen breakpoint) altındaki ekranlarda tablo otomatik olarak mobil kartlara dönüşür:

• Duyarlı Kart Düzeni: Masaüstündeki geniş tablo, dikey kaydırılabilir kompakt kartlara evrilir.
• 44px Dokunmatik Butonlar: Apple HIG ve WCAG standartlarına uygun parmak dostu dokunma hedefleri.
• Mobilde Dairesel Buton: Yeni kayıt ekleme butonu mobilde dairesel + butonuna dönüşür.
• macOS Genie In & Out: Kartın üzerindeki "İşlemler" butonuna tıklandığında, macOS pencerelerinin akıcı genie efektiyle alt çekmece (Action Sheet) açılır.

const table = new DijitalTable('#tablo', {
  mobile: {
    breakpoint: 768,
    actionSheet: true
  },
  actions: [
    { label: 'Cari Detayı', value: 'view' },
    { label: 'e-Fatura Düzenle', value: 'edit' },
    { label: 'Kaydı Sil', value: 'delete', danger: true }
  ],
  onAction: (action, row) => {
    console.log(`Eylem: ${action} | Kayıt:`, row);
  }
});

Hücre İçi Canlı Düzenleme (Inline Edit)

editable: true olarak tanımlanan hücreler kullanıcı tarafından doğrudan düzenlenebilir:

1. Düzenlemek istenen hücreye çift tıklayın.
2. Değeri güncelleyip Enter tuşuna basın veya dışarı tıklayın (blur).
3. Değişiklikten vazgeçmek için Escape tuşuna basın.
4. Düzenleme tamamlandığında onCellChange geri çağrısı ve dt:cell:change olayı tetiklenir:

const table = new DijitalTable('#tablo', {
  columns: [
    { key: 'balance', title: 'Bakiye', type: 'currency', editable: true }
  ],
  onCellChange: ({ row, key, oldValue, newValue }) => {
    // Backend API'ye otomatik kaydet
    fetch(`/api/guncelle/${row.id}`, {
      method: 'POST',
      body: JSON.stringify({ [key]: newValue })
    });
  }
});

Eksiksiz Dışa Aktarma (Export Engine)

Hiçbir harici kütüphaneye ihtiyaç duymadan (sıfır bağımlılık) 4 farklı formatta dışa aktarım sağlar:

// Dışa aktarma menüsünde gösterilecek formatlar
export: ['excel', 'csv', 'copy', 'pdf']

1. Excel (.xlsx / .xls): SpreadsheetML XML motoru sayesinde Türkçe karakter bozulması olmadan, sayı ve para birimi formatları korunarak doğrudan Microsoft Excel ile açılır.
2. CSV (UTF-8 BOM): Excel'in Türkçe harfleri (Ç, İ, Ş, Ö, Ü, Ğ) tanıması için özel UTF-8 Byte Order Mark (BOM) ve noktalı virgül (;) ayracı kullanılır.
3. Panoya Kopyala (TSV): Verileri anında panoya kopyalar; Google Sheets veya Excel'e doğrudan Ctrl+V ile yapıştırılabilir.
4. PDF / Yazdırma Raporu: A4 yatay formatında temiz, kurumsal döküm penceresi açar.

Toplu seçim yapıldığında, yalnızca seçili satırları Excel'e aktaran dinamik buton kayan eylem çubuğunda belirir.

Yapılandırma Seçenekleri (Options)

new DijitalTable(target, options);

| Seçenek | Tip | Varsayılan | Açıklama | |---|---|---|---| | data | Array | [] | Tabloda gösterilecek veri dizisi. | | columns | Array | [] | Sütun tanımları dizisi. | | searchable | boolean | true | Arama giriş kutusunu göster. | | selectable | boolean | true | Satır seçim kutucuklarını (checkbox) aktif et. | | responsive | string | 'auto' | 'auto' (mobil kart), 'cards' (her zaman kart), 'scroll' (yatay kaydırma). | | theme | string | 'system' | 'light', 'dark', 'system'. | | export | Array | ['excel', 'csv', 'copy', 'print'] | Sunulacak dışa aktarma seçenekleri. | | pagination | Object | { enabled: true, pageSize: 10 } | Sayfalama seçenekleri ve sayfa boyutları. | | mobile | Object | { breakpoint: 768, actionSheet: true } | Mobil görünüm ve alt çekmece ayarları. | | actions | Array | [] | Satır içi işlem menüsü butonları. | | labels | Object | (Türkçe etiketler) | Metin ve buton başlıklarının özelleştirilmesi. | | onCellChange| function| null | Canlı hücre düzenleme geri çağrısı. | | onSelectionChange | function | null | Seçili satırlar değiştiğinde tetiklenir. | | onAction | function | null | Bir aksiyon seçildiğinde tetiklenir. |

Statik Metot: Mevcut HTML Tablolarını Modernize Etme

Backend tarafından (PHP, Django, ASP.NET, vb.) sayfaya basılmış saf bir <table> elementini tek satırda DijitalTable'a dönüştürebilirsiniz:

<table id="hamTablo">
  <thead>
    <tr>
      <th data-dt-key="firma" data-dt-sortable="true">Firma</th>
      <th data-dt-key="tutar" data-dt-type="currency" data-dt-editable="true">Tutar</th>
      <th data-dt-key="durum" data-dt-type="workflow">Durum</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Çelikler Oto</td><td>145250</td><td>finans</td></tr>
    <tr><td>Işıklar Dayanıklı</td><td>24500</td><td>ik</td></tr>
  </tbody>
</table>

<script>
  // Tüm arama, sıralama, dışa aktarma ve mobil kart dönüşümünü anında bağlar:
  DijitalTable.enhance('#hamTablo', {
    selectable: true,
    export: ['excel', 'csv']
  });
</script>

Tema Yönetimi ve CSS Değişkenleri

DijitalTable, dijital-ui tasarım belirteçleri (design tokens) ile doğrudan entegredir.

<!-- Koyu Tema -->
<html data-theme="dark">

<!-- Açık Tema -->
<html data-theme="light">

Özelleştirilebilir CSS Değişkenleri

:root {
  --dt-primary: #2563eb;
  --dt-primary-hover: #1d4ed8;
  --dt-primary-subtle: rgba(37, 99, 235, 0.08);

  --dt-bg: #ffffff;
  --dt-bg-subtle: #f8fafc;
  --dt-bg-surface: #ffffff;
  --dt-bg-hover: #f1f5f9;
  --dt-bg-active: #e2e8f0;
  --dt-bg-selected: #eff6ff;

  --dt-text: #0f172a;
  --dt-text-secondary: #475569;
  --dt-text-muted: #64748b;

  --dt-border: #e2e8f0;
  --dt-border-strong: #cbd5e1;

  --dt-radius-sm: 6px;
  --dt-radius-md: 10px;
  --dt-radius-lg: 16px;

  --dt-font-sans: system-ui, -apple-system, sans-serif;
  --dt-touch-target: 44px;
}

Entegrasyonlar

Alpine.js

Sayfada Alpine.js tespit edildiğinde $dt sihirli nesnesi otomatik olarak global nesneye bağlanır:

<div x-data="{ secilenSayi: 0 }" @dt:selection:change="secilenSayi = $event.detail.selectedCount">
  <span x-text="secilenSayi + ' kayıt seçildi'"></span>
  <div id="musteriTablosu"></div>
</div>

HTMX

<!-- Sunucudan gelen tabloyu deklaratif modernize etme -->
<div hx-get="/api/firmalar" hx-trigger="load" hx-on::after-swap="DijitalTable.enhance('#gelenTablo')">
  <div id="gelenTablo"></div>
</div>

PHP / CodeIgniter 4 / Laravel

Controller:

public function musteriler()
{
    $data['musteriler'] = $this->musteriModel->findAll();
    return view('musteriler/index', $data);
}

View:

<div id="musteriTablosu"></div>

<script>
  new DijitalTable('#musteriTablosu', {
    data: <?= json_encode($musteriler, JSON_UNESCAPED_UNICODE) ?>,
    columns: [
      { key: 'id', title: 'ID', sortable: true },
      { key: 'unvan', title: 'Unvan', sortable: true },
      { key: 'bakiye', title: 'Bakiye', type: 'currency' },
      { key: 'durum', title: 'Durum', type: 'workflow' }
    ]
  });
</script>

Event Bus

Tüm tablo etkileşimleri standart DOM olayları fırlatır:

document.addEventListener('dt:status:change', (e) => {
  console.log('Durum güncellendi:', e.detail.row.company, '->', e.detail.newStatus);
});

document.addEventListener('dt:cell:change', (e) => {
  console.log('Hücre değişti:', e.detail.key, e.detail.oldValue, '=>', e.detail.newValue);
});

document.addEventListener('dt:selection:change', (e) => {
  console.log('Seçili kayıt adedi:', e.detail.selectedCount);
});

Desteklenen Olaylar

| Olay Adı | Tetiklenme Anı | event.detail İçeriği | |---|---|---| | dt:search | Arama yapıldığında | { query: string } | | dt:sort | Sütun sıralandığında | { column: string, direction: 'asc'\|'desc' } | | dt:page | Sayfa değiştiğinde | { page: number } | | dt:selection:change | Satır seçildiğinde / kalktığında | { selectedCount: number, selectedRows: Array } | | dt:status:change | İş akışı durumu değiştiğinde | { row: Object, col: string, oldStatus, newStatus } | | dt:cell:change | Hücre içi düzenleme kaydedildiğinde | { row: Object, key: string, oldValue, newValue } | | dt:action | Aksiyon menüsünden işlem seçildiğinde | { action: string, row: Object } | | dt:export | Dışa aktarma işlemi tamamlandığında | { format: string, recordCount: number } |

Tarayıcı Desteği

| Tarayıcı | Minimum Versiyon | |---|---| | Chrome / Chromium | 88+ | | Safari / iOS Safari | 14+ | | Firefox | 85+ | | Edge | 88+ |

Geliştirme

npm install
npm run build

Lisans

MIT