7. Genel Tasarım — DataGrid (Table)
Bu adımda DataGrid widget'ın tüm görsel ve fonksiyonel ayarları yapılır: kolon görünürlüğü, sıra, genişlik, başlık stili, satır stili, ızgara çizgileri, sayfalama, sıralanabilirlik, filtreleme ve koşullu satır rengi.
Sihirbaz rotası: /cartography/add/generaldesign
Ön Koşul
DataGrid akışının 1, 2, 3. adımları tamamlanmış olmalıdır (4, 5, 6 atlanır).
1. Ekran Düzeni
Sol tarafta yapılandırma formu (kolon listesi, başlık/satır/ızgara ayarları), sağ tarafta canlı tablo önizlemesi yer alır.
2. Header (Başlık Satırı)
| Alan | Açıklama | Birim |
|---|---|---|
| Header Background Color | Başlık satırı arka plan rengi | renk |
| Header Text Color | Başlık metin rengi | renk |
| Header Font Size | Başlık font boyutu | px |
| Header Height | Başlık satırı yüksekliği | px |
| Bold Font | Başlık kalın olsun mu (toggle) | — |
| Header Hover Color | Başlık üzerine gelince renk | renk |
3. Row & Cell (Satır ve Hücre)
| Alan | Açıklama | Birim |
|---|---|---|
| Row Background Color | Satır arka plan rengi | renk |
| Row Text Color | Satır metin rengi | renk |
| Alternating Row Color | Tek/çift satır farklı renk | renk |
| Selection Color | Seçili satır rengi | renk |
| Cell Font Size | Hücre font boyutu | px |
| Cell Padding Horizontal | Hücre yatay padding'i | px |
| Row Hover Color | Satır üzerine gelince renk | renk |
| Row Hover Text Color | Hover metin rengi | renk |
| Row Hover Font Size | Hover font boyutu | px |
Alternating Row Color
Açık gri (#F9FAFB) ve beyaz dönüşümlü satırlar uzun listelerde okunabilirliği artırır.
4. Grid Lines (Izgara Çizgileri)
| Alan | Açıklama |
|---|---|
| Grid Line Color | Çizgi rengi |
| Grid Line Width | Çizgi kalınlığı (px) |
| Show Vertical Grid Lines | Dikey çizgiler |
| Show Horizontal Grid Lines | Yatay çizgiler |
5. Columns (Kolon Yönetimi)
DataGrid'in en önemli bölümü. Compass'tan gelen tüm kolonlar listelenir; her kolon için ayar yapılır:
| Alan | Açıklama |
|---|---|
| Kolon Görünürlüğü | Her kolonu aç / gizle (toggle) |
| Kolon Sırası | Sürükle-bırak ile yeniden sırala |
| Kolon Genişliği | Sabit piksel veya esnek genişlik |
| Sıralanabilir | Başlığa tıklayınca sıralama (toggle) |
| Filtrelenebilir | Kolon başında filtre kutusu (toggle) |
Hangi Kolon Görünsün?
Sorgu çok kolonlu dönüyorsa burada görünmesini istediğiniz kolonları seçin; gereksiz kolonları gizleyin. Tablo genişliği ve okunabilirlik artar. Önerilen: ekranda en fazla 8-10 kolon görünür kalsın.
6. Pagination (Sayfalama)
| Alan | Açıklama |
|---|---|
| Sayfalama Aktif | Toggle |
| Sayfa Başına Satır | Bir sayfada gösterilecek satır sayısı (10/20/50/100) |
Sayfalama vs Scroll
100+ satırda sayfalama; <100 satırda scroll yeterli. Çok yoğun (>500) verilerde sayfalama performansı korur.
7. Conditional Row Color (Koşullu Satır Rengi)
Satırları belli kolonun değerine göre renklendirme.
| Alan | Açıklama |
|---|---|
| Kural Kolonu | Hangi kolon değerine göre renk |
| Eşleşme | Değer eşleşmesi (örn. oncelik = 'YUKSEK') |
| Renk | Eşleşen satırların rengi |
Alarm Listesinde Koşullu Renk
Alarm tablosunda oncelik kolonuna göre:
- YÜKSEK → 🔴 kırmızı
- ORTA → 🟡 sarı
- DÜŞÜK → ⚪ beyaz
8. Onaylama
Sağ üstteki Next butonuna tıkladığınızda flow.hasGeneralDesign = true işaretlenir.