Tablo

MonoChat'teki Table bileşeni, yapılandırılmış verileri görüntülemek, filtrelemek ve yönetmek için tamamen etkileşimli ve genişletilebilir bir yol sağlar. Tablolar yerleşik filtreleme, sıralama, sayfalama, dinamik sütun render'ı, özel satır aksiyonları, koşullu mantık ve gelişmiş UI entegrasyonu (drawer ve dropdownlar ile) destekler.

Bu, Client SDK içindeki en güçlü araçlardan biridir ve geliştiricilerin CRM benzeri liste görünümleri ve yönetim arayüzleri oluşturmasına, UI ve mantık üzerinde tam kontrol sağlamasına olanak tanır.

---

Temel Özellikler

• Deklaratif Tablo Başlıkları: Sütun başlıklarını, sıralama alanlarını ve özel render mantığını tanımlayın.
• Özel Satır Render'ı: Her satırı, alınan verilere göre çeşitli UI bileşenleri kullanarak render edin.
• Filtreleme Seçenekleri: atoms-select-ajax kullanarak gelişmiş filtreler ekleyin, backend sorgularına bağlı.
• Sayfalama ve Sıralama: SDK’nın state ve reaktif güncelleme sistemi ile entegre.
• Aksiyon Butonları & Dropdownlar: Her satıra aksiyon ekleyin, içinde nested form ve çok adımlı workflow’lar dahil.

---

Örnek Kurulum

Aşağıdaki örnek, tam özellikli bir lead yönetim tablosu oluşturmayı gösterir:

• Kullanıcı, ülke, ilgi düzeyi vb. ile filtreleme
• Kalan zamanı dinamik olarak hesaplayıp görüntüleme
• Çeşitli UI elemanlarını gösterme (badge, dropdown, butonlar)
• Lead güncellemeleri için custom form içeren drawer'ları tetikleme

sdk.sorting.set({ 'payload.pendingAt': -1 })
sdk.filteringOptions = {
  items: [
    {
      type: 'atoms-select-ajax',
      name: 'payload.agentUserId',
      label: 'Kullanıcı',
      multiple: true,
      events: {
        async onSearch(templateInstance, params, callback) {
          // Method üzerinden seçenekleri getir
        },
      },
    },
    {
      type: 'atoms-select-ajax',
      name: 'payload.countryKey',
      label: 'Ülke',
      multiple: true,
      events: {
        async onSearch(templateInstance, params, callback) {
          // Custom function üzerinden getir
        },
      },
    },
  ],
}

sdk.options = function () {
  const items = sdk.state.get('leads')
  return {
    header: {
      title: 'Leads',
      buttons: [{
        text: 'Lead Oluştur',
        events: {
          onClick() {
            sdk.utils.drawer.show({
              customFunctionPathString: sdk.utils.absolutePathString('create.js'),
              title: 'Lead Oluştur',
            })
          }
        }
      }],
    },
    tableHeaders: [
      { title: 'Şirket Adı', sortField: 'payload.companyName' },
      { title: 'Üyelik Türü', sortField: 'payload.membershipTypeKey' },
      { title: 'Durum', sortField: 'payload.leadStateKey' },
    ],
    items: items.map((lead) => ({
      cells: [
        { type: 'atoms-text', text: lead.payload.companyName },
        { type: 'atoms-badge', text: lead.payload.membershipTypeKey },
        { type: 'atoms-badge', text: lead.payload.leadStateKey },
      ]
    })),
  }
}

---

Table Config Fields

Alan	Tür	Açıklama
header	object	Başlık ve isteğe bağlı butonları içerir
tableHeaders	array	Görünür sütunları ve sıralama alanlarını tanımlar
items	array	Satır verisi, her biri cells dizisine sahiptir
notFound	object	Veri bulunamadığında gösterilecek UI

Her hücre atoms-text, atoms-text, atoms-badge, atoms-button, components-dropdown, vb. kullanabilir.

---

En Doğru Kullanımlar

• Filtreleme ve sayfalama için reaktiviteyi yönetmek amacıyla sdk.utils.autorun() kullanın.
• Veriyi yönetmek ve render etmek için sdk.state.set ve sdk.state.get kullanın.
• Dinamik filtreleme durumu için ReactiveVar kullanın.
• Görsel geri bildirim sağlamak için sdk.utils.loading.show/remove() kullanın.
• Her satır aksiyonunun net bir UI ve yedek onay diyaloglarına sahip olduğundan emin olun.