Ana içeriğe geç
Versiyon: 1.0.1

Ops Table Props Explained

Bu döküman, Ops Table bileşeninin aldığı props'ları ve her birinin ne işe yaradığını açıklamaktadır. Ayrıca, props değerlerini değiştirerek nasıl farklı sonuçlar elde edebileceğinizi göstermek için örnekler sunulmuştur.

1. opsService​

Açıklama: Ops Table ile backend arasında veri alışverişini sağlayan servis.

Gereklilik:​

Bu prop zorunludur.

Örnek Kullanım:​

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

2. data​

Açıklama: Tabloya gösterilecek olan veri dizisi.

Örnek Kullanım:​

const data = [
  { id: 1, name: "Ali", age: 25 },
  { id: 2, name: "Ayşe", age: 30 },
];

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

3. columns​

Açıklama: Tablo kolonlarını tanımlayan yapı.

Örnek Kullanım:​

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

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

4. actionIcons​

Açıklama: Her satıra özel aksiyon butonları eklemek için kullanılan fonksiyon dizisi.

Örnek Kullanım:​

const actionIcons = [
  (row) => <button onClick={() => console.log("Edit", row)}>Edit</button>,
  (row) => <button onClick={() => console.log("Delete", row)}>Delete</button>,
];

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

5. onRowClick​

Açıklama: Kullanıcı bir satıra tıkladığında tetiklenecek olay.

Örnek Kullanım:​

<OpsTable
  opsService={tableService}
  data={data}
  columns={columns}
  onRowClick={(row) => console.log("Row clicked", row)}
/>

6. toolBarButtons​

Açıklama: Tablo üzerinde bir araç çubuğuna özel butonlar eklemek için kullanılır.

Örnek Kullanım:​

const toolBarButtons = [
  {
    label: "Refresh",
    onClick: () => console.log("Refresh clicked"),
  },
];

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

7. tableVisibility​

Açıklama: Tablonun belirli bölümlerinin görünürlüğünü kontrol eder.

Özellikler:​

  • selectionColumnVisibility: Seçim kolonunu gösterir veya gizler.
  • columnsVisibility: Kolon yönetim menüsünü gösterir veya gizler.
  • filtersVisibility: Filtreleme menüsünü gösterir veya gizler.
  • aggregationVisibility: Toplama menüsünü gösterir veya gizler.
  • densityVisibility: Yoğunluk değiştirme menüsünü gösterir veya gizler.
  • exportVisibility: Dışa aktarma seçeneklerini gösterir veya gizler.

Örnek Kullanım:​

<OpsTable
  opsService={tableService}
  data={data}
  columns={columns}
  tableVisibility={{
    selectionColumnVisibility: true,
    filtersVisibility: false,
  }}
/>

8. initialTableState​

Açıklama: Tablo için başlangıç durumu ayarlarını tanımlar.

Örnek Kullanım:​

const initialState = {
  columnOrder: ["name", "age"],
};

<OpsTable
  opsService={tableService}
  data={data}
  columns={columns}
  initialTableState={initialState}
/>;

9. tableProps​

Açıklama: Tablonun davranışlarını ve görünümünü kontrol eden props'lar.

Özellikler:​

  • showEditIcon: Düzenleme ikonunu gösterir.
  • handleEditIconClick: Düzenleme ikonuna tıklama olayını işler.
  • showDeleteIcon: Silme ikonunu gösterir.
  • handleDeleteIconClick: Silme ikonuna tıklama olayını işler.
  • headerBackgroundColor: Tablo başlığının arka plan rengini ayarlar.

Örnek Kullanım:​

<OpsTable
  opsService={tableService}
  data={data}
  columns={columns}
  tableProps={{
    showEditIcon: true,
    handleEditIconClick: (row) => console.log("Edit", row),
    headerBackgroundColor: "#f0f0f0",
  }}
/>

10. customAppBar​

Açıklama: Tablo üzerinde özel bir uygulama çubuğu eklemenizi sağlar.

Örnek Kullanım:​

<OpsTable
  opsService={tableService}
  data={data}
  columns={columns}
  customAppBar={<div>Custom App Bar</div>}
/>

Bu rehber, Ops Table bileşeninin her bir props'unun işlevlerini ve kullanımlarını kapsamaktadır. Tablonuzun ihtiyaçlarınıza uygun hale getirilmesi için bu props'ları kullanabilirsiniz.