Live Docs

Navigation

Data Display /

stable

Table

Komponen tabel generik untuk data terstruktur dengan custom render, stripe, sticky header, dan compact mode.

import { Table } from "@naraya/ui";

Overview

Gunakan Table untuk data tabular yang butuh perbandingan antar kolom. Untuk dataset besar dengan sorting/filtering, pertimbangkan DataTable.

Examples

Default table

NameRoleStatusTeam
Ayu PrameswariProduct DesignerActiveNaraEdu
Raka NugrahaFrontend EngineerActiveNaraBiz
Nadia PutriQA EngineerReviewNaraAI
<Table columns={columns} data={data} />

Striped + compact

NameRoleStatusTeam
Ayu PrameswariProduct DesignerActiveNaraEdu
Raka NugrahaFrontend EngineerActiveNaraBiz
Nadia PutriQA EngineerReviewNaraAI
<Table columns={columns} data={data} striped compact />

Sticky header

NameRoleStatusTeam
Ayu PrameswariProduct DesignerActiveNaraEdu
Raka NugrahaFrontend EngineerActiveNaraBiz
Nadia PutriQA EngineerReviewNaraAI
Ayu PrameswariProduct DesignerActiveNaraEdu
Raka NugrahaFrontend EngineerActiveNaraBiz
Nadia PutriQA EngineerReviewNaraAI
Ayu PrameswariProduct DesignerActiveNaraEdu
Raka NugrahaFrontend EngineerActiveNaraBiz
Nadia PutriQA EngineerReviewNaraAI
Ayu PrameswariProduct DesignerActiveNaraEdu
Raka NugrahaFrontend EngineerActiveNaraBiz
Nadia PutriQA EngineerReviewNaraAI
<Table columns={columns} data={manyRows} sticky />

Custom cell render

FeatureScoreQuality
Accessibility92

Excellent

Performance84

Good

SEO77

Improve

const columns = [
  { key: "feature", header: "Feature" },
  { key: "score", header: "Score", align: "right" },
  { key: "quality", header: "Quality", render: (row) => <Text>{row.quality}</Text> },
];

Props

PropTypeDefaultDescription
columns*TableColumn[]—Definisi kolom tabel (key, header, render, width, align).
data*Record<string, ReactNode>[]—Array data baris.
stripedbooleanfalseZebra row style.
stickybooleanfalseSticky header + wrapper mode.
compactbooleanfalsePadding sel lebih rapat.
TableColumn.render(row, idx) => ReactNode—Custom renderer per sel.

Tokens Used

--bg-surface

Background table

--border-subtle

Border table/cell

--text-main

Isi cell text

--color-secondary

Striped row tint

Accessibility

  • Gunakan header kolom yang deskriptif agar pembacaan tabel jelas.
  • Pastikan urutan kolom konsisten dan tidak berubah mendadak.
  • Untuk data kompleks, pertimbangkan caption/summary tambahan di sekitar tabel.