Table

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

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Table, bir başlık (caption), bir üst bilgi satırı ve veri satırlarından oluşur. Başlık tabloyu adlandırır. Satırın adını taşıyan ilk hücre için Table.RowHeader kullanın.

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2
Üçüncü öğe	Beklemede	15 Eki 2026	305	Elif

AçıkKoyu

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function Default() {
  return (
    <Table caption="Öğe listesi">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
          <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell>Sahibi</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Üçüncü öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Yoğunluk

density satır yüksekliğini belirler: compact en az 32 px, standard (varsayılan) 40 px, comfortable 48 px. Çok satırlı, taranan tablolarda compact kullanın.

Öğe listesi: compact

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2

Öğe listesi: comfortable

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2

AçıkKoyu

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function Density() {
  return (
    <div className="flex flex-col gap-3xl">
      {(['compact', 'comfortable'] as const).map((density) => (
        <Table key={density} caption={`Öğe listesi: ${density}`} density={density}>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>Ad</Table.HeaderCell>
              <Table.HeaderCell>Durum</Table.HeaderCell>
              <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
              <Table.HeaderCell numeric>Adet</Table.HeaderCell>
              <Table.HeaderCell>Sahibi</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.RowHeader>Birinci öğe</Table.RowHeader>
              <Table.Cell>
                <Badge tone="success">Etkin</Badge>
              </Table.Cell>
              <Table.Cell>12 Eki 2026</Table.Cell>
              <Table.Cell numeric>1.240</Table.Cell>
              <Table.Cell>Kullanıcı 1</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.RowHeader>İkinci öğe</Table.RowHeader>
              <Table.Cell>
                <Badge tone="neutral">Taslak</Badge>
              </Table.Cell>
              <Table.Cell>14 Eki 2026</Table.Cell>
              <Table.Cell numeric>86</Table.Cell>
              <Table.Cell>Kullanıcı 2</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table>
      ))}
    </div>
  );
}

Şeritli

striped her ikinci gövde satırını boyar. Geniş tabloda gözün satırı izlemesine yardım eder. Üst bilgi ve alt bilgi satırları boyanmaz.

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2
Üçüncü öğe	Beklemede	15 Eki 2026	305	Elif

AçıkKoyu

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function Striped() {
  return (
    <Table caption="Öğe listesi" striped>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
          <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell>Sahibi</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Üçüncü öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Sayısal sütunlar

numeric hücreyi satır sonuna hizalar ve tabular rakamlar kullanır; basamaklar alt alta gelir. Sütun başlığına da aynı özelliği verin. Kısa durumlar için align="center" kullanılabilir.

Öğe listesi

Ad	Adet	Durum
Birinci öğe	1.240	Etkin
İkinci öğe	86	Taslak

AçıkKoyu

Kodu kopyala

import { Table } from '@bigbang/ui';

export default function Numeric() {
  return (
    <Table caption="Öğe listesi">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell align="center">Durum</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell align="center">Etkin</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell align="center">Taslak</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Alt bilgi

Table.Footer toplam gibi özet satırları içindir; üst bilgi rengini alır.

Öğe listesi

Ad	Adet
Birinci öğe	1.240
İkinci öğe	86
Toplam	1.326

AçıkKoyu

Kodu kopyala

import { Table } from '@bigbang/ui';

export default function WithFooter() {
  return (
    <Table caption="Öğe listesi">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell numeric>1.240</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell numeric>86</Table.Cell>
        </Table.Row>
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.RowHeader>Toplam</Table.RowHeader>
          <Table.Cell numeric>1.326</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table>
  );
}

Seçili satır

selected satırı seçili arka planla boyar ve data-selected ekler. Düz tabloda aria-selected yoktur; seçim görsel bir durumdur. Seçimin anlamı önemliyse metinle de belirtin.

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2
Üçüncü öğe	Beklemede	15 Eki 2026	305	Elif

AçıkKoyu

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function Selected() {
  return (
    <Table caption="Öğe listesi">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
          <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell>Sahibi</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row selected>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Üçüncü öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Üzerine gelince vurgulanan

hoverable gövde satırını üzerine gelince boyar; varsayılan olarak açıktır, birkaç değer gösteren bir tabloda hoverable={false} ile kapatılır. Yalnızca renk değişir; satır yükselmez. Tıklanabilir satır için bu bileşen değil, DataTable kullanılır.

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2
Üçüncü öğe	Beklemede	15 Eki 2026	305	Elif

AçıkKoyu

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function Hoverable() {
  return (
    <Table caption="Öğe listesi" hoverable>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
          <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell>Sahibi</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Üçüncü öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Sabit üst bilgi

stickyHeader üst bilgi hücrelerini gövde kayarken yukarıda tutar. Kapsayıcıya className ile bir yükseklik verin; örneğin max-h-64.

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Öğe 1	Etkin	12 Eki 2026	1.240	Kullanıcı 1
Öğe 2	Taslak	14 Eki 2026	86	Kullanıcı 2
Öğe 3	Beklemede	15 Eki 2026	305	Elif
Öğe 4	Etkin	12 Eki 2026	1.240	Kullanıcı 1
Öğe 5	Taslak	14 Eki 2026	86	Kullanıcı 2
Öğe 6	Beklemede	15 Eki 2026	305	Elif
Öğe 7	Etkin	12 Eki 2026	1.240	Kullanıcı 1
Öğe 8	Taslak	14 Eki 2026	86	Kullanıcı 2
Öğe 9	Beklemede	15 Eki 2026	305	Elif
Öğe 10	Etkin	12 Eki 2026	1.240	Kullanıcı 1
Öğe 11	Taslak	14 Eki 2026	86	Kullanıcı 2
Öğe 12	Beklemede	15 Eki 2026	305	Elif

AçıkKoyu

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function StickyHeader() {
  return (
    <Table caption="Öğe listesi" stickyHeader className="max-h-64">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
          <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell>Sahibi</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Öğe 1</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 2</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 3</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 4</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 5</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 6</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 7</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 8</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 9</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 10</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 11</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Öğe 12</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Yatay kaydırma

Tablo kapsayıcısından genişse kapsayıcı yatay kayar. Kaydırma bölgesi adlandırılmıştır ve klavyeyle odak alır; Tab ile bölgeye gelip ok tuşlarıyla kaydırabilirsiniz. Uzun metni truncate ve sütun genişliğiyle kesin.

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2

AçıkKoyu

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function HorizontalScroll() {
  return (
    <Table caption="Öğe listesi" className="max-w-md">
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
          <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell>Sahibi</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}

Açık ve koyu mod

Table renklerini yüzey, metin ve kenarlık token’larından alır; iki modda da aynı yapıda görünür.

Açık

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2
Üçüncü öğe	Beklemede	15 Eki 2026	305	Elif

Koyu

Öğe listesi

Ad	Durum	Oluşturulma tarihi	Adet	Sahibi
Birinci öğe	Etkin	12 Eki 2026	1.240	Kullanıcı 1
İkinci öğe	Taslak	14 Eki 2026	86	Kullanıcı 2
Üçüncü öğe	Beklemede	15 Eki 2026	305	Elif

Kodu kopyala

import { Badge, Table } from '@bigbang/ui';

export default function Striped() {
  return (
    <Table caption="Öğe listesi" striped>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Ad</Table.HeaderCell>
          <Table.HeaderCell>Durum</Table.HeaderCell>
          <Table.HeaderCell>Oluşturulma tarihi</Table.HeaderCell>
          <Table.HeaderCell numeric>Adet</Table.HeaderCell>
          <Table.HeaderCell>Sahibi</Table.HeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.RowHeader>Birinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="success">Etkin</Badge>
          </Table.Cell>
          <Table.Cell>12 Eki 2026</Table.Cell>
          <Table.Cell numeric>1.240</Table.Cell>
          <Table.Cell>Kullanıcı 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>İkinci öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="neutral">Taslak</Badge>
          </Table.Cell>
          <Table.Cell>14 Eki 2026</Table.Cell>
          <Table.Cell numeric>86</Table.Cell>
          <Table.Cell>Kullanıcı 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.RowHeader>Üçüncü öğe</Table.RowHeader>
          <Table.Cell>
            <Badge tone="warning">Beklemede</Badge>
          </Table.Cell>
          <Table.Cell>15 Eki 2026</Table.Cell>
          <Table.Cell numeric>305</Table.Cell>
          <Table.Cell>Elif</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  );
}