DataTable

Table üzerinde sıralama, arama ve kolon filtreleri, sayfalama, checkbox ile satır seçimi ve kolon görünürlüğü. State'i useDataTable tutar; DataTable render'lar. Bağımlılık yok.

import { Badge, DataTable, type DataTableColumn, useDataTable } from "@meridui/react";

const columns: DataTableColumn<Member>[] = [
  { id: "name", header: "Ad", accessor: "name", sortable: true, hideable: false },
  { id: "email", header: "E-posta", accessor: "email" },
  { id: "role", header: "Rol", accessor: "role", sortable: true },
  {
    id: "status",
    header: "Durum",
    accessor: "status",
    sortable: true,
    cell: (row) => <Badge tone={row.status === "Aktif" ? "success" : "neutral"}>{row.status}</Badge>,
  },
  { id: "projects", header: "Projeler", accessor: "projects", sortable: true, align: "end" },
];

export function Members({ members }: { members: Member[] }) {
  const table = useDataTable({ data: members, columns, defaultPageSize: 5 });
  return (
    <DataTable
      table={table}
      caption="Ekip üyeleri"
      selectable
      getRowLabel={(row) => row.name}
      pageSizeOptions={[5, 10]}
      labels={labelsTr}
    />
  );
}

Import

import { DataTable, useDataTable, type DataTableColumn } from "@meridui/react";

Anatomi

const table = useDataTable({ data, columns });

<DataTable table={table} caption="…" />

• Kolonlar her alanı tanımlar: accessor (bir anahtar ya da fonksiyon) sıralamayı, aramayı ve varsayılan hücreyi besler; cell başka her şeyi render'lar.
• useDataTable headless'tır: geçerli sayfanın satırlarını ve her setter'ı döndürür. Her state parçası controlled ya da uncontrolled çalışır.
• DataTable bir araç satırı (arama, Kolonlar menüsü, senin toolbar'ın), sıralanabilir başlıkları ve isteğe bağlı checkbox'larıyla Table'ı, ve durum satırı, sayfa başına satır seçimi ile Pagination'dan oluşan bir alt bilgi render'lar.

Örnekler

Kolon filtreleri, varsayılan sıralama ve gizli kolonlar

Kendi filtre kontrollerini toolbar'a koy ve onları setColumnFilter ile yönet. Bir kolonun filterFn'i varsayılan "içerir" eşleşmesinin yerini alır.

const table = useDataTable({
  data: members,
  columns,
  defaultSort: { columnId: "projects", direction: "descending" },
  defaultHiddenColumns: ["email"],
});

<DataTable
  table={table}
  caption="Role göre ekip üyeleri"
  labels={labelsTr}
  toolbar={
    <NativeSelect
      size="sm"
      aria-label="Rol"
      value={table.columnFilters.role ?? ""}
      onChange={(event) => table.setColumnFilter("role", event.target.value)}
    >
      <option value="">Tüm roller</option>
      <option value="Sahip">Sahip</option>
      {/* … */}
    </NativeSelect>
  }
/>

Metinleri çevirmek

Görünen ve ekran okuyucuya giden her metin labels ile değişir; varsayılanlar İngilizcedir. Bu sayfadaki örnekler şu nesneyi kullanıyor:

const labelsTr: Partial<DataTableLabels> = {
  search: "Ara",
  searchPlaceholder: "Ara…",
  columns: "Kolonlar",
  selectPage: "Bu sayfadaki tüm satırları seç",
  selectRow: (label) => `${label} satırını seç`,
  selected: (count, total) => `${total} satırdan ${count} tanesi seçili`,
  results: (count) => `${count} sonuç`,
  empty: "Sonuç yok.",
  rowsPerPage: "Sayfa başına satır",
  pagination: "Sayfalama",
  previousPage: "Önceki sayfa",
  nextPage: "Sonraki sayfa",
  page: (page) => `Sayfa ${page}`,
};

Headless

DataTable'ın düzeni uymadığında (örneğin mobilde kart listesi) aynı state'ten kendi markup'ını render'la.

const table = useDataTable({ data, columns });

// DataTable'ın render'ladığı her şey kendi markup'ın için de hazır:
table.rows;              // geçerli sayfa, filtrelenmiş ve sıralanmış
table.toggleSort("name");
table.setGlobalFilter("ada");
table.setPage(2);
table.toggleRow(table.getRowId(row));
table.selectedRows;      // tüm sayfalarda
table.toggleColumn("email", false);

Hook, verdiğin satırlar üzerinde çalışır. Sunucu tarafında sıralama ya da sayfalama için kendi state'inle veri çek ve doğrudan Table render'la.

API referansı

DataTableColumn

useDataTable

Her state'in bir controlled prop'u, bir default… prop'u ve bir on…Change callback'i vardır.

rows, filteredRows, visibleColumns, page, pageCount, pageSelection ("all" | "some" | "none"), selectedRows ile toggleSort, setGlobalFilter, setColumnFilter, setPage, setPageSize, toggleRow, togglePage, clearSelection ve toggleColumn setter'larını döndürür. Bir filtreyi ya da sayfa boyutunu değiştirmek 1. sayfaya döner.

DataTable

Tüm Table prop'larını kabul eder.

DataTableLabels: search, searchPlaceholder, columns, selectPage, selectRow(rowLabel), selected(count, total), results(count), empty, rowsPerPage, pagination, previousPage, nextPage, page(n).

Stil verme

Satırlar, başlıklar ve hücreler Table'ın kendi sınıflarıdır (.mrd-table__*); seçili satırlar data-selected alır.

Erişilebilirlik

Tablo, bir <caption> ile native tablo semantiğini korur. Sıralanabilir başlıklar <th aria-sort> içindeki butonlardır; her checkbox'ın bir adı vardır ("Ada Lovelace satırını seç", "Bu sayfadaki tüm satırları seç") ve başlık checkbox'ı karışık state'i gösterir. Durum satırı, aramadan sonra sonuç sayısını ve seçim sayısını okuyan polite bir live region'dır; arama kutusu onunla açıklanır.

Kullanım ilkeleri

İlgili sayfalar

• Table: DataTable'ın üzerine kurulduğu markup.
• Veri tabloları deseni: yerleşim ve toplu aksiyonlar.
• Pagination: alt bilgideki kontrol.