Ana içeriğe geç
Versiyon: 1.0.1

Ops Table Guide

Bu rehber, Ops Table kullanmaya yeni başlayanlar için hazırlanmıştır. Ops Table bileşeninin tüm temel ve gelişmiş özelliklerini anlamanıza yardımcı olacak şekilde yapılandırılmıştır. Her bölüm, adım adım ilerleyen örneklerle desteklenmiştir ve zorluk derecesine göre sıralanmıştır.

Ops Table Nedir?​

Ops Table, React tabanlı bir tablo bileşenidir. Filtreleme, sıralama, sayfalama ve özelleştirilmiş aksiyonlar gibi dinamik veri yönetim özellikleri sunar. Backend'den gelen veri ile senkronize bir şekilde çalışabilir.

Ops Table Nasıl Kullanılır?​

Basit Kullanım Örneği​

Aşağıda Ops Table bileşeninin temel bir kullanımı gösterilmektedir:

import React from "react";
import { OpsTable } from "./OpsTable";
import { IOpsTableService } from "./IOpsTableService";

const tableService: IOpsTableService<any> = {
  url: "/api/data",
  initialProcess: () => {},
  setTableLoading: (loading) => console.log(loading),
  getdata: (requestData, successCallback) => {
    // API çağrısı yapılabilir
    successCallback?.({
      data: [],
      currentPageNumber: 1,
      totalPageCount: 1,
      totalDataCount: 0,
      aggregationResults: [],
    });
  },
  generateColumns: (metadata) => metadata,
  generateInitiaTableState: (response) => ({
    columnOrder: [],
  }),
  // Diğer metotlar...
};

const SimpleOpsTable = () => {
  const columns = [
    {
      accessorKey: "name",
      header: "Name",
    },
    {
      accessorKey: "age",
      header: "Age",
    },
  ];

  return (
    <OpsTable
      opsService={tableService}
      data={[]}
      columns={columns}
      tableProps={{ showEditIcon: true }}
    />
  );
};

export default SimpleOpsTable;

Tabloda Özel Aksiyonlar Nasıl Eklenir?​

Ops Table, her satıra özel aksiyonlar eklemenize olanak tanır.

Örnek​

const actionIcons = [
  (row) => <button onClick={() => console.log(row)}>Düzenle</button>,
  (row) => <button onClick={() => console.log("Sil")}>Sil</button>,
];

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  actionIcons={actionIcons}
  tableProps={{ showEditIcon: false }}
/>;

Tabloda Kolon Özelliği Nasıl Kapatılır?​

Tablonun herhangi bir kolonunun görünürlüğünü kontrol edebilirsiniz.

Örnek​

const columns = [
  {
    accessorKey: "name",
    header: "Name",
    meta: { visible: true },
  },
  {
    accessorKey: "age",
    header: "Age",
    meta: { visible: false },
  },
];

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  tableVisibility={{ columnsVisibility: true }}
/>;

Backend'den Gelen Değerler Nasıl Yönetilir?​

Filtre Türleri​

Backend'den filtre türleri dinamik olarak yönetilebilir.

const filters = [
  {
    column: "age",
    operator: "GreaterThan",
    value: "18",
    type: "number",
  },
];

tableService.handleFilter(filters);

Sütun Yönetimi​

Backend'den gelen metadata ile kolon ayarları yapılabilir:

tableService.generateColumns([
  { accessorKey: "name", header: "Name" },
  { accessorKey: "age", header: "Age" },
]);

Satır Tıklama (Row Click) Özelliği​

Satıra tıklama özelliği ile detay sayfasına yönlendirme yapabilirsiniz.

Örnek​

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  onRowClick={(row) => console.log("Clicked row:", row)}
/>

Sayfalama (Pagination) Nasıl Yönetilir?​

Ops Table, sayfalama işlemleri için backend ile senkronize bir yapı sunar.

Örnek​

tableService.onChangePage(2, 10, () => console.log("Sayfa değiştirildi"));

Tablodaki Yoğunluk Modları (Density Modes) Nasıl Değiştirilir?​

Tablonun görünüm yoğunluğunu değiştirebilirsiniz.

Örnek​

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  tableProps={{ density: "compact" }}
/>

Dışa Aktarma Özellikleri Nasıl Eklenir?​

Tablo verilerini CSV veya PDF olarak dışa aktarabilirsiniz.

Örnek​

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  tableVisibility={{ exportVisibility: true }}
/>

Filtreleme Nasıl Özelleştirilir?​

Tablodaki filtreler için özel seçenekler ekleyebilirsiniz.

Örnek​

const customFilters = [
  {
    column: "name",
    operator: "Contains",
    value: "Ali",
  },
];

tableService.handleFilter(customFilters);

Toplama (Aggregation) Nasıl Yapılır?​

Ops Table toplama fonksiyonlarıyla belirli kolonlarda veri toplayabilirsiniz.

Örnek​

const aggregations = [
  {
    column: "age",
    type: "SUM",
  },
];

tableService.handleAggregation(aggregations);

Özelleştirilmiş Araç Çubuğu (Toolbar) Nasıl Eklenir?​

Tablonun üst kısmına özel butonlar ekleyebilirsiniz.

Örnek​

const toolBarButtons = [
  {
    label: "Yenile",
    onClick: () => console.log("Yenile tıklandı"),
  },
];

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  toolBarButtons={toolBarButtons}
/>;

Silme ve Düzenleme İkonları Nasıl Özelleştirilir?​

Her satır için düzenleme ve silme ikonları ekleyebilirsiniz.

Örnek​

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  tableProps={{
    showEditIcon: true,
    handleEditIconClick: (row) => console.log("Düzenle:", row),
    showDeleteIcon: true,
    handleDeleteIconClick: (row) => console.log("Sil:", row),
  }}
/>

Seçim Kolonu (Selection Column) Nasıl Eklenir?​

Tabloda seçim yapılabilir bir kolon ekleyebilirsiniz.

Örnek​

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  tableVisibility={{ selectionColumnVisibility: true }}
/>

Tablodaki Yüklenme Durumu Nasıl Yönetilir?​

Tablo yüklenirken iskelet gösterimi ekleyebilirsiniz.

Örnek​

tableService.setTableLoading(true);

Veri Hazırlama (Prepare Data) Nasıl Yapılır?​

Backend'den gelen veriyi tabloya uygun şekilde hazırlayabilirsiniz.

Örnek​

const preparedData = tableService.prepareTableData(response, request);
console.log(preparedData);

Toplama Sonuçları Nasıl Görüntülenir?​

Toplama işlemleri sonrası sonuçları gösterebilirsiniz.

Örnek​

const aggregationResults = response.aggregationResults;
console.log(aggregationResults);

Gelişmiş Sıralama Nasıl Yapılır?​

Ops Table, gelişmiş sıralama işlemlerini destekler.

Örnek​

tableService.handleSort("name", "ASC", () =>
  console.log("Sıralama tamamlandı")
);

Sütun Genişliği Nasıl Ayarlanır?​

Her sütunun genişliğini dinamik veya statik olarak belirleyebilirsiniz.

Örnek​

const columns = [
  {
    accessorKey: "name",
    header: "Name",
    size: 150,
  },
  {
    accessorKey: "age",
    header: "Age",
    size: 100,
  },
];

<OpsTable opsService={tableService} data={[]} columns={columns} />;

Backend Hatalarını Yönetme​

Backend'den gelen hataları kullanıcıya gösterebilirsiniz.

Örnek​

const handleError = (error) => console.error("API Error:", error);

tableService.getdata(requestData, undefined, handleError);

Filtre Çubuğunu Gizleme​

Kullanıcı arayüzünde filtre çubuğunu gizleyebilirsiniz.

Örnek​

<OpsTable
  opsService={tableService}
  data={[]}
  columns={columns}
  tableVisibility={{ filtersVisibility: false }}
/>