LivaPivotGrid

DevExtreme PivotGrid üzerine kurulu özet tablo bileşeni. Düz bir veri dizisini fields tanımındaki satır, sütun ve veri alanlarına göre gruplayıp özetler; alan seçici, sıralama, filtreleme ve isteğe bağlı grafik görünümü sunar.

import { LivaPivotGrid } from "@dataliva/livalib";

Temel pivot

dataSource düz bir dizi olabilir. fields dizisindeki her öğe bir pivot alanıdır: dataField veri alanını, area alanın yerleşimini ('row', 'column', 'data'), summaryType ise özetleme biçimini (ör. sum) belirler. Aşağıdaki örnek bölge satırları ile ürün sütunlarının kesişiminde tutar toplamlarını gösterir; veri alanı tanımlanmayan ceyrek kolonu otomatik olarak toplanır.

type Satis = { bolge: string; urun: string; ceyrek: string; tutar: number };

const satislar: Satis[] = [
  { bolge: "Marmara", urun: "Klima", ceyrek: "Ç1", tutar: 185000 },
  { bolge: "Ege", urun: "Klima", ceyrek: "Ç1", tutar: 210000 },
  // ...
];

const alanlar = [
  { caption: "Bölge", dataField: "bolge", area: "row" },
  { caption: "Ürün", dataField: "urun", area: "column" },
  { caption: "Tutar", dataField: "tutar", dataType: "number", summaryType: "sum", format: "#,##0", area: "data" },
];

Çeyrek kırılımı ve alan seçici

Aynı area değerine sahip birden fazla alan iç içe kırılım oluşturur; burada bölge satırları çeyrek bazında detaylanır. rowHeaderLayout="tree" satır başlıklarını tek hiyerarşi sütununda kompakt gösterir. fieldChooserEnabled alan başlıklarına tıklandığında alan seçiciyi açar; allowSorting ve allowFiltering başlıklar üzerinden sıralama ve filtrelemeyi etkinleştirir.

Araç çubuğu ve düzen saklama

stateStoringId bir LivaGridStateProvider altında verildiğinde adlandırılmış alan düzenleri ve harici araç çubuğu etkinleşir: pivotun üstünde Düzen menüsünü, alan seçici ve Excel düğmelerini taşıyan bir şerit açılır. toolbarPosition araçları sola veya sağa hizalar. fieldPanelToggleEnabled, üstteki sürüklenebilir alan paneli için göster/gizle düğmesi ekler. Alan şeması değiştiğinde stateVersion artırın. Provider ve sunucu sözleşmesi.

Provider altında stateStoringId verilmezse de şerit ve düzen saklama açılır, ancak anahtar yalnızca sayfa yolundan üretilir — aynı sayfadaki kimliksiz pivotlar tek kaydı paylaşır — ve DevExtreme'in kendi alan seçici / dışa aktarma düğmeleri de görünür kalır. Provider altındaki pivotlara her zaman stateStoringId verin.

Şeride özel içerik — headerToolbar

headerToolbar, LivaDataGrid ve LivaTreeList'teki aynı adlı propla aynı amaçla kendi öğelerinizi (seçim kutusu, düğme vb.) araç şeridine yerleştirir. PivotGrid'de ayrı bir satır açılmaz: içerik düzen şeridinin içinde, alan paneli / Düzen / alan seçici / Excel düğmelerinin soluna çizilir. Şerit yalnızca düzen saklama etkinken — yani pivot bir LivaGridStateProvider altındayken — görünür; provider yoksa headerToolbar da çizilmez.

Aşağıdaki örnekte şeride bir para birimi seçici konmuştur: seçim değişince veri yeni kurla yeniden hesaplanır, preserveStateOnDataChange kullanıcının kurduğu pivot düzenini korur. Demo, düzenleri bellekte tutan bir storage ile çalışır (Özel depolama).

Veri ve görünüm

Toplamlar ve etkileşim

Araç şeridi ve dışa aktarma

Grafik

Yükleme ve durum

gridSize yoğunluğu (hücre iç boşluğu, satır yüksekliği, yazı boyutu) belirler ve LivaDataGrid / LivaTreeList ile aynı ölçeği kullanır — 'xxs' dahil; aynı sayfadaki grid ile pivotun satırları aynı yükseklikte durur. Kullanıcı erişilebilirlik tercihlerinde tablo yoğunluğu (gridDensity) için Otomatik dışında bir değer seçtiyse bu tercih gridSize'ı ezer. Uygulama genelinde aynı yoğunluk için paket basePivotGridProps ({ gridSize: "xs" }) dışa aktarır; baseGridProps gibi props listesinin en başına spread edilir:

import { LivaPivotGrid, basePivotGridProps } from "@dataliva/livalib";

<LivaPivotGrid {...basePivotGridProps} fields={alanlar} dataSource={satislar} />

loading dışarıdan kontrol edilen yükleme durumudur; showSkeleton da açıkken spinner yerine iskelet katmanı gösterilir. preserveStateOnDataChange, dizi tabanlı bir dataSource değiştiğinde önceki alan yerleşimini (satır/sütun/filtre konumları) yakalayıp yeni kaynağa geri uygular — veri tazelendiğinde kullanıcının kurduğu pivot düzeninin sıfırlanmaması için kullanılır.