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. 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.
| Prop | Tip | Varsayılan |
|---|---|---|
fields | any[] | — |
dataSource | any[] | PivotGridDataSource | { xmlaStoreOptions } | — |
gridHeight | number | string | — |
gridWidth | number | string | — |
currency | 'USD' | 'EUR' | 'TRY' | — |
chartVisible | boolean | — |
chartType | 'bar' | 'line' | 'area' | 'spline' | 'stackedbar' | 'stackedarea' | — |
showRowTotals | boolean | — |
showColumnTotals | boolean | — |
showRowGrandTotals | boolean | — |
showColumnGrandTotals | boolean | — |
fieldChooserEnabled | boolean | — |
fieldPanelToggleEnabled | boolean | false |
allowSorting | boolean | — |
allowFiltering | boolean | — |
rowHeaderLayout | 'standard' | 'tree' | 'standard' |
toolbarPosition | 'left' | 'right' | 'left' |
gridSize | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' |
loading | boolean | false |
showSkeleton | boolean | true |
preserveStateOnDataChange | boolean | false |
stateStoringId | string | — (verilirse düzen saklama etkinleşir) |
stateVersion | number | — |
gridSize yoğunluğu (hücre iç boşluğu, satır yüksekliği, yazı boyutu) belirler
ve LivaDataGrid'deki gridSize ile aynı ölçeği kullanır — LivaDataGrid'den
farklı olarak burada 'xxs' yoktur.
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.
Ayrıca scrollingMode ('standard' \| 'virtual'), emptyValuePlaceholder,
exportEnabled, rowHeaderColumnWidth ve onCellClick desteklenir.