DataTable

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

DataTable dört şey ister: sütun tanımları (columns), veri (data), her satır için kararlı bir kimlik (getRowId) ve bir başlık (caption). Görünüm, Table ile aynı parçalardan gelir.

Öğe listesi

Ad	Durum	Sahibi	Adet
Öğe 1	Etkin	Kullanıcı 1	12
Öğe 2	Beklemede	Kullanıcı 2	49
Öğe 3	Taslak	Kullanıcı 3	86
Öğe 4	Tamamlandı	Kullanıcı 4	123
Öğe 5	Başarısız	Kullanıcı 5	160

AçıkKoyu

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey } from '@bigbang/ui';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const data: Row[] = [
  { id: 'row-1', name: 'Öğe 1', status: 'active', owner: 'Kullanıcı 1', count: 12 },
  { id: 'row-2', name: 'Öğe 2', status: 'pending', owner: 'Kullanıcı 2', count: 49 },
  { id: 'row-3', name: 'Öğe 3', status: 'draft', owner: 'Kullanıcı 3', count: 86 },
  { id: 'row-4', name: 'Öğe 4', status: 'completed', owner: 'Kullanıcı 4', count: 123 },
  { id: 'row-5', name: 'Öğe 5', status: 'failed', owner: 'Kullanıcı 5', count: 160 },
];

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function Default() {
  return <DataTable columns={columns} data={data} getRowId={(row) => row.id} caption="Öğe listesi" />;
}

Sıralama

Sıralanabilir sütunun başlığı bir butondur. Tıklayınca artan, azalan ve sıralamasız arasında döner; th üzerindeki aria-sort durumu bildirir ve değişiklik kibar bir canlı bölgede duyurulur. defaultSorting ilk sıralamayı verir; durumu siz yönetmek için sorting ve onSortingChange kullanın. Sunucuda sıralıyorsanız manualSorting ekleyin.

Öğe listesi

Ad	Durum	Sahibi	Adet
Öğe 5	Başarısız	Kullanıcı 5	160
Öğe 4	Tamamlandı	Kullanıcı 4	123
Öğe 3	Taslak	Kullanıcı 3	86
Öğe 2	Beklemede	Kullanıcı 2	49
Öğe 1	Etkin	Kullanıcı 1	12

AçıkKoyu

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey } from '@bigbang/ui';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const data: Row[] = [
  { id: 'row-1', name: 'Öğe 1', status: 'active', owner: 'Kullanıcı 1', count: 12 },
  { id: 'row-2', name: 'Öğe 2', status: 'pending', owner: 'Kullanıcı 2', count: 49 },
  { id: 'row-3', name: 'Öğe 3', status: 'draft', owner: 'Kullanıcı 3', count: 86 },
  { id: 'row-4', name: 'Öğe 4', status: 'completed', owner: 'Kullanıcı 4', count: 123 },
  { id: 'row-5', name: 'Öğe 5', status: 'failed', owner: 'Kullanıcı 5', count: 160 },
];

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function Sorting() {
  return <DataTable columns={columns} data={data} getRowId={(row) => row.id} caption="Öğe listesi" defaultSorting={[{ id: 'count', desc: true }]} />;
}

Seçim

selectionMode="multiple" bir onay kutusu sütunu ve tümünü seç kutusu ekler; bazı satırlar seçiliyken kutu karışık durumu gösterir. Satır onay kutuları, getRowLabel ile satırın adını taşır: “Öğe 1 satırını seç”. single bir seferde tek satıra izin verir.

Öğe listesi

Tüm satırları seç	Ad	Durum	Sahibi	Adet
Öğe 1 satırını seç	Öğe 1	Etkin	Kullanıcı 1	12
Öğe 2 satırını seç	Öğe 2	Beklemede	Kullanıcı 2	49
Öğe 3 satırını seç	Öğe 3	Taslak	Kullanıcı 3	86
Öğe 4 satırını seç	Öğe 4	Tamamlandı	Kullanıcı 4	123
Öğe 5 satırını seç	Öğe 5	Başarısız	Kullanıcı 5	160

AçıkKoyu

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey } from '@bigbang/ui';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const data: Row[] = [
  { id: 'row-1', name: 'Öğe 1', status: 'active', owner: 'Kullanıcı 1', count: 12 },
  { id: 'row-2', name: 'Öğe 2', status: 'pending', owner: 'Kullanıcı 2', count: 49 },
  { id: 'row-3', name: 'Öğe 3', status: 'draft', owner: 'Kullanıcı 3', count: 86 },
  { id: 'row-4', name: 'Öğe 4', status: 'completed', owner: 'Kullanıcı 4', count: 123 },
  { id: 'row-5', name: 'Öğe 5', status: 'failed', owner: 'Kullanıcı 5', count: 160 },
];

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function Selection() {
  return <DataTable columns={columns} data={data} getRowId={(row) => row.id} getRowLabel={(row) => row.name} caption="Öğe listesi" selectionMode="multiple" defaultRowSelection={{ 'row-2': true }} />;
}

Sütun görünürlüğü

columnToggle tablonun üstüne bir “Sütunlar” butonu ekler; düğme, her sütun için bir onay kutusu içeren bir panel açar. Başlangıç durumunu defaultColumnVisibility, kontrolü columnVisibility ve onColumnVisibilityChange verir.

Sütunlar

Öğe listesi

Ad	Durum	Adet
Öğe 1	Etkin	12
Öğe 2	Beklemede	49
Öğe 3	Taslak	86
Öğe 4	Tamamlandı	123
Öğe 5	Başarısız	160

AçıkKoyu

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey } from '@bigbang/ui';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const data: Row[] = [
  { id: 'row-1', name: 'Öğe 1', status: 'active', owner: 'Kullanıcı 1', count: 12 },
  { id: 'row-2', name: 'Öğe 2', status: 'pending', owner: 'Kullanıcı 2', count: 49 },
  { id: 'row-3', name: 'Öğe 3', status: 'draft', owner: 'Kullanıcı 3', count: 86 },
  { id: 'row-4', name: 'Öğe 4', status: 'completed', owner: 'Kullanıcı 4', count: 123 },
  { id: 'row-5', name: 'Öğe 5', status: 'failed', owner: 'Kullanıcı 5', count: 160 },
];

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function ColumnVisibility() {
  return <DataTable columns={columns} data={data} getRowId={(row) => row.id} caption="Öğe listesi" columnToggle defaultColumnVisibility={{ owner: false }} />;
}

Durumlar

status yükleniyor, boş, süzgece uymayan ve hata durumlarını yerleşik olarak gösterir; üst bilgi her zaman yerinde kalır. Yüklenirken tablo aria-busy olur ve iskelet satırlar gösterilir. Boş ve hata iletileri bir eylem butonu taşıyabilir.

Öğe listesi: loading

Ad	Durum	Sahibi	Adet

Yükleniyor

Öğe listesi: filtered

Ad	Durum	Sahibi	Adet
Filtrelere uyan kayıt yok Filtreleri temizle

Öğe listesi: error

Ad	Durum	Sahibi	Adet
Veriler yüklenemedi Yeniden dene

AçıkKoyu

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey } from '@bigbang/ui';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function States() {
  return (
    <div className="flex w-full flex-col gap-3xl">
      <DataTable columns={columns} data={[]} getRowId={(row) => row.id} caption="Öğe listesi: loading" status="loading" />
      <DataTable columns={columns} data={[]} getRowId={(row) => row.id} caption="Öğe listesi: filtered" status="filtered-empty" onClearFilters={() => {}} />
      <DataTable columns={columns} data={[]} getRowId={(row) => row.id} caption="Öğe listesi: error" status="error" onRetry={() => {}} />
    </div>
  );
}

Satır işlemleri ve satırı açma

rowActions son sütunda, satırın işlemlerini gösterir; her işlem ayrı bir sekme durağıdır ve adı satırı belirtmelidir. onRowOpen ilk sütunun içeriğini bir butona çevirir; böylece satır yalnızca tıklanır değil, klavyeyle de açılır.

Öğe listesi

Ad	Durum	Sahibi	Adet	İşlemler
Öğe 1	Etkin	Kullanıcı 1	12
Öğe 2	Beklemede	Kullanıcı 2	49
Öğe 3	Taslak	Kullanıcı 3	86
Öğe 4	Tamamlandı	Kullanıcı 4	123
Öğe 5	Başarısız	Kullanıcı 5	160

AçıkKoyu

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey, IconButton } from '@bigbang/ui';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const data: Row[] = [
  { id: 'row-1', name: 'Öğe 1', status: 'active', owner: 'Kullanıcı 1', count: 12 },
  { id: 'row-2', name: 'Öğe 2', status: 'pending', owner: 'Kullanıcı 2', count: 49 },
  { id: 'row-3', name: 'Öğe 3', status: 'draft', owner: 'Kullanıcı 3', count: 86 },
  { id: 'row-4', name: 'Öğe 4', status: 'completed', owner: 'Kullanıcı 4', count: 123 },
  { id: 'row-5', name: 'Öğe 5', status: 'failed', owner: 'Kullanıcı 5', count: 160 },
];

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function RowActions() {
  return (
    <DataTable
      columns={columns}
      data={data}
      getRowId={(row) => row.id}
      caption="Öğe listesi"
      onRowOpen={() => {}}
      rowActions={(row) => (
        <>
          <IconButton icon="pencil" size="sm" label={`Düzenle: ${row.name}`} />
          <IconButton icon="trash" size="sm" label={`Sil: ${row.name}`} />
        </>
      )}
    />
  );
}

Altlık

footer tablonun altında bir satır açar. Sayfalama bileşeni oraya konur; DataTable sayfalamayı kendisi yapmaz. Veri bir sayfadan ibaretse totalRowCount ile toplam satırı bildirin.

Öğe listesi

Ad	Durum	Sahibi	Adet
Öğe 1	Etkin	Kullanıcı 1	12
Öğe 2	Beklemede	Kullanıcı 2	49

Sayfa 1 / 3ÖncekiSonraki

AçıkKoyu

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey, Button } from '@bigbang/ui';
import { useState } from 'react';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const data: Row[] = [
  { id: 'row-1', name: 'Öğe 1', status: 'active', owner: 'Kullanıcı 1', count: 12 },
  { id: 'row-2', name: 'Öğe 2', status: 'pending', owner: 'Kullanıcı 2', count: 49 },
  { id: 'row-3', name: 'Öğe 3', status: 'draft', owner: 'Kullanıcı 3', count: 86 },
  { id: 'row-4', name: 'Öğe 4', status: 'completed', owner: 'Kullanıcı 4', count: 123 },
  { id: 'row-5', name: 'Öğe 5', status: 'failed', owner: 'Kullanıcı 5', count: 160 },
];

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function WithFooter() {
  const [page, setPage] = useState(0);
  const rows = data.slice(page * 2, page * 2 + 2);
  return (
    <DataTable
      columns={columns}
      data={rows}
      getRowId={(row) => row.id}
      caption="Öğe listesi"
      totalRowCount={data.length}
      footer={
        <>
          <span className="type-body-sm text-fg-subtle">Sayfa {page + 1} / 3</span>
          <span className="flex items-center gap-sm">
            <Button size="sm" variant="secondary" disabled={page === 0} onClick={() => setPage(page - 1)}>
              Önceki
            </Button>
            <Button size="sm" variant="secondary" disabled={page === 2} onClick={() => setPage(page + 1)}>
              Sonraki
            </Button>
          </span>
        </>
      }
    />
  );
}

Büyük veri

virtualize yalnızca görünen satırları üretir. Sabit yükseklikli bir kaydırma kapsayıcısı ister (scrollClassName="max-h-96"); 5.000 satırlık örnek Storybook’ta çalışır.

Canlı örnek, StorybookStorybook'ta aç

Sabit sütunlar

Sütun tanımında meta: { pin: 'start' } ya da meta: { pin: 'end' } o sütunu yatay kaydırmada yerinde tutar. Satırı tanıtan ad sütununu başa, tutar gibi karşılaştırılan sütunu sona sabitleyin. Başa sabit bir sütun varsa seçim ve aç/kapat sütunları da sabitlenir; sabit alanın kenarında ince bir çizgi görünür.

Canlı örnek, StorybookStorybook'ta aç

Açılır satırlar

renderExpanded her satırın başına bir aç/kapat düğmesi ekler ve açılan satırın altında tüm genişlikte bir ayrıntı satırı gösterir. Açılamayacak satırları getRowCanExpand ile ayırın; açık satırları expanded ve onExpandedChange ile yönetebilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

DataTable renklerini Table ile aynı table.* token’larından alır; iki modda da aynı yapıda görünür.

Açık

Öğe listesi

Ad	Durum	Sahibi	Adet
Öğe 1	Etkin	Kullanıcı 1	12
Öğe 2	Beklemede	Kullanıcı 2	49
Öğe 3	Taslak	Kullanıcı 3	86
Öğe 4	Tamamlandı	Kullanıcı 4	123
Öğe 5	Başarısız	Kullanıcı 5	160

Koyu

Öğe listesi

Ad	Durum	Sahibi	Adet
Öğe 1	Etkin	Kullanıcı 1	12
Öğe 2	Beklemede	Kullanıcı 2	49
Öğe 3	Taslak	Kullanıcı 3	86
Öğe 4	Tamamlandı	Kullanıcı 4	123
Öğe 5	Başarısız	Kullanıcı 5	160

Kodu kopyala

import { createDataTableColumnHelper, DataTable, StatusBadge, type StatusKey } from '@bigbang/ui';

type Row = { id: string; name: string; status: StatusKey; owner: string; count: number };

const data: Row[] = [
  { id: 'row-1', name: 'Öğe 1', status: 'active', owner: 'Kullanıcı 1', count: 12 },
  { id: 'row-2', name: 'Öğe 2', status: 'pending', owner: 'Kullanıcı 2', count: 49 },
  { id: 'row-3', name: 'Öğe 3', status: 'draft', owner: 'Kullanıcı 3', count: 86 },
  { id: 'row-4', name: 'Öğe 4', status: 'completed', owner: 'Kullanıcı 4', count: 123 },
  { id: 'row-5', name: 'Öğe 5', status: 'failed', owner: 'Kullanıcı 5', count: 160 },
];

const helper = createDataTableColumnHelper<Row>();

const columns = [
  helper.accessor('name', { header: 'Ad', meta: { rowHeader: true } }),
  helper.accessor('status', { header: 'Durum', enableSorting: false, cell: (context) => <StatusBadge status={context.getValue()} /> }),
  helper.accessor('owner', { header: 'Sahibi' }),
  helper.accessor('count', { header: 'Adet', meta: { numeric: true } }),
];

export default function Default() {
  return <DataTable columns={columns} data={data} getRowId={(row) => row.id} caption="Öğe listesi" />;
}