Ops Table Container Skeleton
Ops Table Container Skeleton, Ops Table bileşeninin yükleme sırasında bir placeholder (iskelet) kullanıcı arayüzü göstermesini sağlayan bir bileşendir. Bu bileşen, veriler yüklenirken tablo yapısını simüle ederek kullanıcı deneyimini iyileştirir.
Ne İşe Yarar?
Ops Table Container Skeleton:
- Tablo yüklenirken placeholder UI gösterir.
- Yükleme süresince kullanıcıya tablonun yapısını anlaması için bir önizleme sunar.
İş Mantığı
-
Placeholder Gösterimi:
- Tablo yapısı
Table
,TableHead
,TableBody
veTableCell
bileşenleriyle simüle edilir. - Yükleme sırasında hücreler için
Skeleton
bileşeni kullanılır.
- Tablo yapısı
-
Dinamik Satır ve Sütun Sayısı:
rowCount
vecolumnCount
propsları ile iskelet yapısının kaç satır ve sütundan oluşacağı belirlenir.- Varsayılan değerler:
rowCount = 8
,columnCount = 5
.
Aldığı Propslar
Prop | Tipi | Açıklama |
---|---|---|
rowCount | number | Placeholder tablosunda gösterilecek satır sayısı. Varsayılan: 8. |
columnCount | number | Placeholder tablosunda gösterilecek sütun sayısı. Varsayılan: 5. |
Yönetilen Olaylar
Ops Table Container Skeleton bir olay yönetimi içermez. Yalnızca tablo yüklenirken pasif bir placeholder arayüzü sağlar.
İlgili Bileşenler
- OpsTableProvider: Tablo yükleme durumunu yöneten ana bileşen.
- TableLoading: Daha küçük bir yükleme göstergesi olarak kullanılan bileşen.
Burada Yapılan Ana İşlemler
Ops Table Container Skeleton bileşeninde aşağıdaki işlemler anahtar rol oynar ve bu olaylara müdahale etmek için ilgili bölümlere odaklanabilirsiniz:
- Placeholder UI: Kullanıcıya yükleme sırasında tablo yapısının bir önizlemesini sağlar.
- Dinamik Satır ve Sütun Sayısı:
rowCount
vecolumnCount
değerleri değiştirilerek yükleme iskeleti özelleştirilebilir.
Örnek Kullanım
import React from "react";
import OpsTableContainerSkeleton from "./OpsTableContainerSkeleton";
export default function ExampleSkeleton() {
return <OpsTableContainerSkeleton rowCount={10} columnCount={6} />;
}