LivaDocsv1.0.112

LivaDataGrid

DevExtreme DataGrid üzerine kurulu, tam donanımlı veri tablosu bileşeni. Sayfalama, filtreleme, arama, seçim, satır içi düzenleme ve dışa aktarma gibi özellikler hazır prop'larla açılıp kapatılır. Veri kaynağı olarak yerel bir dizi veya ASP.NET uzak veri kaynağı tanımı kullanılabilir.

import { LivaDataGrid, type LivaDataGridColumn } from "@dataliva/livalib";

Temel kullanım

columns ve keyExpr zorunludur; dataSource düz bir dizi olabilir. Kolonlar LivaDataGridColumn tipindedir ve en sık dataField, caption, dataType, format ile alignment alanları kullanılır. showPager sayfalayıcıyı açar, pagingDefaultPageSize ve pagingAllowedPageSizes sayfa boyutunu yönetir.

type Personel = { id: number; adSoyad: string; sehir: string; gorev: string; maas: number };

const personeller: Personel[] = [
  { id: 1, adSoyad: "Ayşe Yılmaz", sehir: "İstanbul", gorev: "Yönetici", maas: 82000 },
  // ...
];

const kolonlar: LivaDataGridColumn[] = [
  { dataField: "adSoyad", caption: "Ad Soyad" },
  { dataField: "sehir", caption: "Şehir" },
  { dataField: "gorev", caption: "Görev" },
  { dataField: "maas", caption: "Maaş", dataType: "number", format: "#,##0 ₺", alignment: "right" },
];
Temel kullanım ve sayfalama
Önizleme yükleniyor…

Filtreleme ve arama

showFilterRow kolon altına filtre satırı, showHeaderFilter kolon başlığına değer listesi, showSearchPanel ise tablo genelinde arama kutusu ekler. rowAlternationEnabled satırları dönüşümlü renklendirerek okunabilirliği artırır.

Filtreleme ve arama
Önizleme yükleniyor…

Ortak prop preset'i — getGridProps()

Çoğu sayfada aynı temel proplar tekrar eder. Bunları her tabloda tek tek yazmak yerine projenin kendi preset fonksiyonunu spread edin. Bir grid kurarken yazacağınız satır budur:

import { LivaDataGrid } from "@dataliva/livalib";
import { getGridProps } from "@/features/_shared/components";

<LivaDataGrid
  {...getGridProps()}
  keyExpr="id"
  dataSource={personeller}
  columns={kolonlar}
/>

Spread'i props listesinin en başına koyun; böylece sayfaya özel proplar preset'i ezebilir — tek bir ayarı değiştirmek için o prop'u yazmanız yeter:

<LivaDataGrid {...getGridProps()} editMode="cell" />  // editMode → "cell"

Yetki (allowAdding, allowEditing, allowDeleting), export, veri kaynağı (remoteOperations dahil) ve olaylar preset'e girmez; bunlar her sayfanın kendi kararıdır.

Preset fonksiyonunu tanımlama

Her proje bu fonksiyonu bir kez yazar ve tüm gridler onu çağırır. LivaBudget'ta _shared/components/getGridProps.ts altında durur:

import { LivaDataGrid } from "@dataliva/livalib";
import type { ComponentProps } from "react";

type LivaGridProps = ComponentProps<typeof LivaDataGrid>;

export function getGridProps(): Partial<LivaGridProps> {
  return {
    gridSize: "xxs",
    fullHeight: true,
    editMode: "batch",
    scrollingMode: "virtual",
    showToolbar: true,
    showSearchPanel: true,
    columnChooser: true,
    isLivaContextMenu: true,
    allowGrouping: false,

    lang: currentLanguage(),          // Accept-Language başlığı
    noDataText: t("Common.NoData"),   // çeviriden
  };
}

Değerler tahminle değil, mevcut kullanımların taranmasıyla seçilir: bir ayarı sayfaların tamamına yakını aynı yazıyorsa preset'e girer. LivaBudget'taki 63 <LivaDataGrid> kullanımında gridSize: "xxs" 62/62, fullHeight 54/54, scrollingMode: "virtual" 45/45, editMode: "batch" 51/51 çıktığı için bunlar preset'e alındı.

Bu bir hook DEĞİLDİR ve hook çağırmaz. Fonksiyon JSX içinde koşullu dallarda (yetkiVar ? <LivaDataGrid {...getGridProps()} /> : null) çağrılabildiği için useTranslation/useSelector gibi bir hook barındırırsa render'lar arasında hook sayısı değişir ve React "Rendered more hooks than during the previous render" hatası verir. Dil ve çeviri değerlerini store'dan / i18n örneğinden doğrudan okuyun; sayfa zaten çeviri değişiminde yeniden render olduğu için değerler tazelenir.

Ağaç sürümü için LivaTreeList'teki getTreeList() kullanılır.

Kütüphane tarafı — baseGridProps

@dataliva/livalib, baseGridProps adında asgari bir nesne de dışa aktarır:

PropDeğer
gridSize"xs"
fullHeighttrue
showToolbartrue
showSearchPaneltrue
editMode"batch"

as const satisfies Partial<LivaDataGridProps> ile tanımlıdır: değerler literal tipte kalır, yanlış bir prop adı derleme hatası verir. Bu, kütüphane genelinde güvenli olan en küçük ortak kümedir — bir projenin standardı bundan geniştir, o yüzden sayfalarda doğrudan baseGridProps spread etmeyin. Yeni bir projede preset fonksiyonuna başlangıç noktası olarak kullanabilirsiniz:

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

export function getGridProps(): Partial<LivaGridProps> {
  return { ...baseGridProps, gridSize: "xxs", scrollingMode: "virtual" /* … */ };
}

Toplu işlemler

selectionMode="multiple" (varsayılan) iken alt araç çubuğunda, Kaydet'in sağında bir İşlemler menüsü çıkar. Satır seçildiği anda buton primary renge döner. Menü üç katmandan oluşur ve bu sırayla dizilir:

  1. Seçim araçları — bulkSelectionTools ile yönetilir, varsayılan açık: Sadece Seçilileri Göster (mevcut filtrenin üstüne geçici bir filtre biner, kapatınca eski filtre geri gelir), Panoya Kopyala (başlıklarla) — Excel'e yapıştırılabilir TSV, Seçimi Tersine Çevir (yalnızca yüklü satırlarda) ve Seçimi Temizle.
  2. Seçilenleri Sil — allowBulkDelete ile açılır; verilmezse allowDeleting değerini devralır. Onay penceresinden sonra varsayılan silme çalışır; onBulkDelete verirseniz davranışı siz üstlenirsiniz.
  3. bulkActions — sayfaya özel işlemler, listenin en altına eklenir.
import type { LivaGridBulkAction } from "@dataliva/livalib";

const islemler: LivaGridBulkAction[] = [
  {
    id: "approve",
    text: (ctx) => `Onayla (${ctx.keys.length})`,
    icon: "check",
    disabled: (ctx) => ctx.keys.length === 0,
    confirm: (ctx) => `${ctx.keys.length} kayıt onaylanacak, devam edilsin mi?`,
    confirmTitle: "Toplu Onay",
    confirmButtonText: "Onayla",
    onClick: async (ctx) => {
      await api.approve(ctx.keys);
      ctx.component.refresh();
    },
  },
];

<LivaDataGrid {...getGridProps()} bulkActions={islemler} allowBulkDelete />

text, disabled ve confirm alanları düz değer ya da (ctx: LivaGridBulkActionContext) => … fonksiyonu alabilir; fonksiyon menü her açıldığında güncel seçimle çağrılır. danger: true öğeyi ve onay butonunu kırmızıya çevirir.

Sayfalı veya sanal kaynakta ctx.rows yalnızca yüklü satırları taşır; ctx.keys tam seçimdir. Sunucuya iş gönderirken keys üzerinden çalışın.

Ondalık basamak — sağ tık menüsü

Sayısal (dataType: "number") bir kolonun ya da V001…V012 kalıbındaki ay kolonlarının hücresine sağ tıklandığında Görünüm → Ondalık Basamak alt menüsü çıkar: Küsuratsız, 1–4 basamak ve Varsayılan. Seçim kolonun kendi format tipini (para birimi, yüzde vb.) korur, yalnızca precision değerini ezer; string format verilmişse { type, precision } nesnesine, format hiç verilmemişse fixedPoint'e dönüştürülür.

Ay kolonlarında seçim tüm ay kolonlarına birden uygulanır — tek tek 12 kolonu ayarlamak gerekmez. Ayar bileşen state'inde tutulur; kalıcı değildir ve adlandırılmış düzenlere yazılmaz.

İçe/dışa aktarma

exportOptions Excel/CSV/PDF dışa aktarma butonlarını açar. importExportSettings ise DataExchange sözleşmesine bağlanır: processKey verdiğinizde içe aktarma sihirbazı grid'in içine kendiliğinden monte edilir. Kurulum, uç noktalar ve adaptörler için Veri Alışverişi sayfasına bakın.

Adlandırılmış düzenler

Grid'i bir LivaGridStateProvider altında kullanıp sabit bir id verdiğinizde araç çubuğunda Düzen menüsü açılır. Kullanıcı kolon sırası, genişliği, görünürlüğü, sıralama ve gruplama ayarlarını adlandırarak sunucuda saklayabilir. Kolon şeması geriye uyumsuz değiştiğinde stateVersion değerini artırın. Provider kurulumu ve REST sözleşmesi ayrı rehberde yer alır.