Skip to main content
Version: 1.0.1

Ops Table Quick Start Guide

Bu rehber, Ops Table'ı hızlı bir şekilde kullanarak backend ile çalışan sayfalar oluşturmanız için hazırlanmıştır. Aşağıdaki örneklerde farklı varyasyonlarla tabloyu nasıl özelleştirebileceğinizi görebilirsiniz.

1. Temel Kullanım​

En basit haliyle Ops Table, sadece bir URL ile çalışır.

Örnek​

"use client";

import { useEffect } from "react";
import OpsTableProvider from "@/common/opsTable/components/OpsTableProvider";
import { OpsApiRoutes } from "@/enums/OpsApiRoutes";
import TableService from "@/common/opsTable/services/OpsTableServices";
import { useTranslations } from "next-intl";
import OpsLayoutPage from "@/common/layout/OpsLayoutPage";

const tableService = new TableService(
  OpsApiRoutes.Users,
  OpsApiRoutes.User,
  "UserId"
);

export default function Page() {
  const t = useTranslations();

  useEffect(() => {
    tableService.initialProcess();
  }, []);

  return (
    <OpsLayoutPage title="User Management">
      <OpsTableProvider
        opsService={tableService}
        tableProps={{
          showEditIcon: false,
          showDeleteIcon: false,
        }}
      />
    </OpsLayoutPage>
  );
}

2. Sütunları Belirleme​

Tablonun kolonlarını belirleyerek özelleştirme yapabilirsiniz.

Örnek​

const columns = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
];

<OpsTableProvider
  opsService={tableService}
  tableVisibility={{ columnsVisibility: true }}
/>;

3. Filtreleri Kapatma​

Filtreleme özelliğini devre dışı bırakabilirsiniz.

Örnek​

<OpsTableProvider
  opsService={tableService}
  tableVisibility={{ filtersVisibility: false }}
/>

4. Toplama (Aggregation) Özelliğini Kapatma​

Toplama menüsünü devre dışı bırakabilirsiniz.

Örnek​

<OpsTableProvider
  opsService={tableService}
  tableVisibility={{ aggregationVisibility: false }}
/>

5. Seçim Kolonunu Etkinleştirme​

Tablonuzda seçim yapılabilir bir kolon ekleyebilirsiniz.

Örnek​

<OpsTableProvider
  opsService={tableService}
  tableVisibility={{ selectionColumnVisibility: true }}
/>

6. Özelleştirilmiş Aksiyonlar Eklemek​

Her satıra özel aksiyonlar ekleyerek interaktif özellikler sağlayabilirsiniz.

Örnek​

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

<OpsTableProvider opsService={tableService} actionIcons={actionIcons} />;

7. Yoğunluk Modlarını Kullanma​

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

Örnek​

<OpsTableProvider
  opsService={tableService}
  tableProps={{ densityVisibility: "compact" }}
/>

8. Sayfalama Ayarlarını Özelleştirme​

Sayfalama özelliklerini backend ile senkronize edebilirsiniz.

Örnek​

<OpsTableProvider
  opsService={tableService}
  tableProps={{ pageIndex: 1, pageSize: 20 }}
/>

9. Özel Araç Çubuğu Butonları​

Tabloya özel araç çubuğu butonları ekleyebilirsiniz.

Örnek​

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

<OpsTableProvider opsService={tableService} toolBarButtons={toolBarButtons} />;

10. Mobil Uyumlu Tablo Tasarımı​

Tabloyu mobil cihazlarda daha kullanışlı hale getirebilirsiniz.

Örnek​

<OpsTableProvider opsService={tableService} tableProps={{ responsive: true }} />

Bu rehber, Ops Table'ın hızlı bir şekilde entegre edilmesini ve farklı varyasyonlarla kullanılmasını amaçlamaktadır. Daha fazla özellik ve detaylı kullanım örnekleri için diğer dökümanlara göz atabilirsiniz.