ZoeTable 1.0.0

Açıklama

Verileri tabloda göstermek için kullanılan bileşen olan ZoeTable'ın belgeleri.

ZoeTable Bileşeni Projede Kullanımı

@page "/person-list"
@using Denemeler.Models     // Person modelinin bulunduğu namespace
@using ZoeTable

<Zt TDataItem="Person"
          Title="Personel Listesi"
          Items="people"
          Columns="tableColumns"
          AllowSearch="true"
          AllowPagination="true"
          AllowPageSizeChange="true"
          PageSize="10">
    
    <Actions Context="person">
        <button class="btn btn-sm btn-outline-primary me-1" 
                @onclick="@(() => EditPerson(person))">
            Düzenle
        </button>
        <button class="btn btn-sm btn-outline-danger" 
                @onclick="@(() => DeletePerson(person))">
            Sil
        </button>
    </Actions>
</Zt>

@code {
    private List<Person> people = new();
    private List<Ztc<Person>> tableColumns = new();

    protected override void OnInitialized()
    {
        // Verileri yükle
        people = GenerateSampleData(44);
        
        // Kolonları tanımla
        tableColumns = new List<Ztc<Person>>
        {
            new Ztc<Person> {Title = "ID", FieldName = "Id", Width = "80px", HeaderClass = "text-center bg-primary text-white", CellClass = "text-center" },
            new Ztc<Person> {Title = "Ad", FieldName = "FirstName", Width = "80px", HeaderClass = "text-center bg-primary text-white", CellClass = "text-center" },
            new Ztc<Person> {Title = "Soyad", FieldName = "LastName", Width = "100px", HeaderClass = "text-center bg-primary text-white", CellClass = "text-center" },
            new Ztc<Person> {Title = "E-Posta", FieldName = "Email", Width = "200px", HeaderClass = "text-center bg-primary text-white", CellClass = "text-center" },
            new Ztc<Person> {Title = "Bölüm", FieldName = "Department", Width = "200px", HeaderClass = "text-center bg-primary text-white", CellClass = "text-center" },
            new Ztc<Person> {Title = "Yaş", FieldName = "Age", Width = "80px", HeaderClass = "text-center bg-primary text-white", CellClass = "text-center" }
        };
    }
    private List<Person> GenerateSampleData(int count)
    {
        var departments = new[] { "IT", "İnsan Kaynakları", "Finans", "Pazarlama", "Satış" };
        var random = new Random();

        return Enumerable.Range(1, count).Select(i => new Person
        {
            Id = i,
            FirstName = $"İsim{i}",
            LastName = $"Soyisim{i}",
            Email = $"user{i}@mail.com",
            Age = random.Next(22, 55),
            Department = departments[random.Next(departments.Length)],
            Salary = random.Next(15000, 40000)
        }).ToList();
    }

    private void EditPerson(Person person) { /* ... */ }
    private void DeletePerson(Person person)
    {
        people.Remove(person);
        StateHasChanged();
    }
}

Özellikler

• TDataItem: Tablo satırlarının veri türünü belirtir.
• Class Ztc<TDataItem>: Tablo kolonlarının yapılandırılması için kullanılır.
• AllowSearch: Arama özelliğini etkinleştirir.
• AllowPagination: Sayfalama özelliğini etkinleştirir.
• AllowPageSizeChange: Sayfa boyutu değiştirme özelliğini etkinleştirir.
• PageSize: Sayfa başına gösterilecek öğe sayısını belirler.
• Actions: Her satır için özel işlem düğmeleri eklemeyi sağlar.
• Title: Tablo başlığını belirler.
• Items: Tabloya bağlanacak veri koleksiyonunu belirtir.
• Columns: Tablo kolonlarının yapılandırmasını belirtir.
• HeaderClass ve CellClass: Kolon başlıkları ve hücreler için CSS sınıflarını belirler.
• Width: Kolon genişliğini belirler.
• FieldName: Kolonun veri kaynağındaki alan adını belirtir.
• Title: Kolon başlığını belirler.
• Context: Actions bileşeninde geçerli satır verisini temsil eder.
• GenerateSampleData(int count): Örnek veri oluşturmak için kullanılan yardımcı yöntem.