Tables

Komponen tabel data yang fleksibel dengan 20+ variasi cell style, 2 tipe header, dan 3 state interaksi.

Overview

Table digunakan untuk menampilkan data terstruktur dalam baris dan kolom. Komponen terdiri dari Cell yang dapat dikombinasikan secara bebas — setiap kolom dapat menggunakan style cell yang berbeda sesuai jenis data yang ditampilkan.

Name ↓	Status	Revenue ↓	Progress
Iqbal Maulana [e-mail]	● Active	$1,800↑ 20%	60%	DeleteEdit
Siti Nurhaliza [e-mail]	● Inactive	$940↓ 8%	28%	DeleteEdit
Budi Santoso [e-mail]	● Pending	$2,400↑ 35%	85%	DeleteEdit

Installation

npm

npm install @araf-ds/core

Usage

import { Table, TableHeader, TableBody, TableRow, TableCell } from "@araf-ds/core";

export default function UsersTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableCell type="header" style="white-header" sortable>Name</TableCell>
          <TableCell type="header" style="white-header">Status</TableCell>
          <TableCell type="header" style="white-header" sortable>Revenue</TableCell>
          <TableCell type="header" style="white-header">Progress</TableCell>
          <TableCell type="header" style="white-header" />
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell style="lead-checkbox" checkbox supportingText>
              {user.name}
              <TableCell.Supporting>{user.email}</TableCell.Supporting>
            </TableCell>
            <TableCell style="badge">{user.status}</TableCell>
            <TableCell style="trend-positive" value={user.revenue} change={user.change} />
            <TableCell style="progress-bar" value={user.progress} />
            <TableCell style="action-buttons">
              <TableCell.Action variant="danger">Delete</TableCell.Action>
              <TableCell.Action variant="primary">Edit</TableCell.Action>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Header

Header row menggunakan Type=Header dengan dua pilihan style background.

White Header

Background putih (#FFFFFF), digunakan untuk tabel dengan kontras ringan.

Name ↓	Role	Status
Olivia Rhye	Product Designer	Active	Edit

Token	Nilai
Background	#FFFFFF
Text	#667085
Font	Inter Medium 12px
Border bottom	1px solid #EAECF0

<TableCell type="header" style="white-header" sortable>Name</TableCell>

Gray Header

Background abu-abu (#F9FAFB), memberikan kontras yang lebih jelas antara header dan baris data.

Name ↓	Role	Status
Olivia Rhye	Product Designer	Active	Edit

Token	Nilai
Background	#F9FAFB
Text	#667085
Font	Inter Medium 12px
Border bottom	1px solid #EAECF0

<TableCell type="header" style="gray-header" sortable>Name</TableCell>

Cell Styles

Setiap cell konten (Type=Default) dapat menggunakan berbagai style sesuai jenis datanya.

Lead Cells

Cell dengan elemen interaktif (checkbox/toggle) dan opsional avatar, ikon, atau logo pembayaran di sisi kiri.

Style	Preview
Lead checkbox	Iqbal Maulana [e-mail]
Lead toggle	Iqbal Maulana [e-mail]
Lead avatar checkbox	IM Iqbal Maulana [e-mail]
Lead icon checkbox	🏷️ Category A subcategory
Lead payment method checkbox	VISA Visa •••• 4242 Expires 04/27

// Lead checkbox dengan supporting text
<TableCell style="lead-checkbox" checkbox supportingText>
  Iqbal Maulana
  <TableCell.Supporting>[e-mail]</TableCell.Supporting>
</TableCell>

// Lead avatar checkbox
<TableCell style="lead-avatar-checkbox" checkbox avatar={user.avatar} supportingText>
  {user.name}
  <TableCell.Supporting>{user.email}</TableCell.Supporting>
</TableCell>

// Lead payment method checkbox
<TableCell style="lead-payment-checkbox" checkbox paymentLogo="visa" supportingText>
  Visa •••• 4242
  <TableCell.Supporting>Expires 04/27</TableCell.Supporting>
</TableCell>

Content Cells

Cell untuk menampilkan data dalam berbagai format visual.

Badge

Satu atau beberapa badge label. Cocok untuk kolom Status, Kategori, atau Tag.

Badge (single)

● Active

Badges multiple

DesignFrontend

<TableCell style="badge">
  <Badge variant="success">Active</Badge>
</TableCell>

<TableCell style="badges-multiple">
  <Badge variant="blue">Design</Badge>
  <Badge variant="purple">Frontend</Badge>
</TableCell>

Trend

Nilai numerik disertai badge persentase perubahan — hijau untuk naik, merah untuk turun.

$1,800↑ 20%|$940↓ 8%

State	Badge bg	Badge text
Positive	#ECFDF3	#027A48
Negative	#FEF3F2	#B42318
Value color	—	#667085

<TableCell style="trend-positive" value="$1,800" change="20%" />
<TableCell style="trend-negative" value="$940" change="8%" />

Progress Bar

Bar horizontal yang menampilkan persentase penyelesaian. Bar biru di atas background abu-abu.

Token	Nilai
Bar color	#3B82F6 (Status/Blue/600)
Track bg	#F2F4F7 (Gray/100)
Bar height	8px, radius 4px
Percentage text	#344054 (Gray/700), 14px Medium

<TableCell style="progress-bar" value={60} />

Avatar Group

Menampilkan beberapa avatar yang saling tumpang tindih — cocok untuk kolom “Tim” atau “Assigned to”.

+3

<TableCell style="avatar-group">
  <Avatar src={user1.avatar} />
  <Avatar src={user2.avatar} />
  <Avatar src={user3.avatar} />
  <AvatarCount>+3</AvatarCount>
</TableCell>

Star Ratings

Rating bintang 1–5. Cocok untuk kolom penilaian atau review produk.

4.0

<TableCell style="star-ratings" value={4} maxValue={5} />

Action Cells

Cell untuk menampilkan kontrol aksi di ujung kanan baris.

Style	Preview	Keterangan
Action buttons	DeleteEdit	Text button tanpa border
Action icons	✏️🗑️📋	Ikon aksi tanpa label
Action dropdown icon	⋮	Satu ikon dropdown (kebab menu)

// Action buttons
<TableCell style="action-buttons">
  <TableCell.Action variant="ghost-danger">Delete</TableCell.Action>
  <TableCell.Action variant="ghost-primary">Edit</TableCell.Action>
</TableCell>

// Action icons
<TableCell style="action-icons">
  <TableCell.IconAction icon={<EditIcon />} label="Edit" />
  <TableCell.IconAction icon={<TrashIcon />} label="Delete" />
</TableCell>

// Action dropdown
<TableCell style="action-dropdown-icon">
  <Dropdown>
    <DropdownItem>Edit</DropdownItem>
    <DropdownItem destructive>Delete</DropdownItem>
  </Dropdown>
</TableCell>

Standalone Cells

Cell yang hanya berisi satu elemen interaktif tanpa teks pendamping.

Checkbox only

Toggle only

<TableCell style="checkbox-only" />
<TableCell style="toggle-only" />

Cell States

Setiap cell mendukung tiga state interaksi.

Default

Kondisi normal, tidak ada interaksi. Background cell transparan (putih dari tabel).

Iqbal Maulana

Product Designer

Hover

Saat cursor menyorot baris — background row berubah menjadi #F9FAFB dengan transisi halus.

Iqbal Maulana

Product Designer

Token	Default	Hover
Row background	transparent	#F9FAFB

Disabled

Baris atau cell tidak dapat diinteraksi. Elemen interaktif (checkbox, toggle) dalam kondisi disabled, opacity dikurangi.

Iqbal Maulana

Product Designer

<TableRow disabled>
  <TableCell style="lead-checkbox" checkbox disabled>Iqbal Maulana</TableCell>
</TableRow>

Properties

Setiap cell memiliki 4 properties boolean yang dapat dikombinasikan.

Property	Type	Default	Deskripsi
checkbox	boolean	false	Menampilkan checkbox di sisi kiri cell
toggle	boolean	false	Menampilkan toggle button di sisi kiri cell
supportingText	boolean	false	Menampilkan teks kecil di bawah teks utama
trailingIcon	boolean	false	Menampilkan ikon sort/dropdown di header (khusus Type=Header)

checkbox dan toggle bersifat mutually exclusive — tidak boleh diaktifkan bersamaan dalam satu cell.

Design Tokens

Table

Token	Nilai
Border	1px solid #B9B9B9
Border radius	4px
Row divider	1px solid #EAECF0

Cell

Elemen	Token	Nilai
Padding	horizontal	24px
Padding	vertical	16px
Row height (Header)	—	52px
Row height (Default)	—	72px
Primary text	color	#101828 (Gray/900)
Supporting text	color	#667085 (Gray/500)
Primary text	font	Inter Medium 14px
Supporting text	font	Inter Regular 14px
Header text	font	Inter Medium 12px
Header bg (White)	—	#FFFFFF
Header bg (Gray)	—	#F9FAFB
Hover row bg	—	#F9FAFB

API Reference

Table

className · string

Class tambahan untuk wrapper tabel.

bordered · boolean · default: "true"

Menampilkan border luar tabel.

TableCell

type · "default" | "header" · default: "\"default\""

Tipe cell — header untuk baris header, default untuk baris konten.

style · "lead-checkbox" | "lead-toggle" | "lead-avatar-checkbox" | "lead-avatar-toggle" | "lead-icon-checkbox" | "lead-icon-toggle" | "badge" | "badges-multiple" | "trend-positive" | "trend-negative" | "progress-bar" | "avatar-group" | "action-buttons" | "action-icons" | "action-dropdown-icon" | "checkbox-only" | "toggle-only" | "star-ratings" | "lead-payment-checkbox" | "lead-payment-toggle" | "white-header" | "gray-header" · required

Style tampilan cell yang menentukan konten dan layout.

state · "default" | "hover" | "disabled" · default: "\"default\""

State interaksi cell.

checkbox · boolean · default: "false"

Menampilkan checkbox di sisi kiri cell.

toggle · boolean · default: "false"

Menampilkan toggle button di sisi kiri cell.

supportingText · boolean · default: "false"

Menampilkan teks pendukung di bawah teks utama.

trailingIcon · boolean · default: "false"

Menampilkan sort icon pada header cell.

sortable · boolean · default: "false"

Mengaktifkan fungsionalitas sort pada header cell.

value · string | number

Nilai yang ditampilkan (trend, progress, star ratings).

change · string | number

Persentase perubahan untuk tipe trend-positive / trend-negative.

Accessibility

• Gunakan elemen <table>, <thead>, <tbody>, <tr>, <th>, <td> yang semantik
• Header cell menggunakan <th scope="col"> untuk relasi kolom yang jelas
• Checkbox di header untuk “select all” menggunakan aria-label="Select all rows"
• Tabel dengan sorting menambahkan aria-sort="ascending" | "descending" | "none" pada header
• Tabel panjang menggunakan aria-label atau <caption> yang deskriptif
• Pastikan tabel bisa di-scroll horizontal pada viewport sempit dengan overflow-x: auto
• Tombol aksi pada cell menggunakan aria-label yang mencantumkan nama baris (misal aria-label="Edit Iqbal Maulana")

Do’s & Don’ts

Do

• Gunakan style cell yang konsisten untuk setiap kolom
• Batasi jumlah kolom agar tidak overflow pada layar kecil
• Gunakan Gray Header untuk tabel dengan banyak baris agar lebih terbaca
• Selalu sertakan kolom action di sisi paling kanan
• Gunakan supportingText untuk menampilkan info sekunder tanpa kolom tambahan
• Berikan aria-label pada setiap action button

Don't

• Jangan campur checkbox dan toggle dalam satu tabel
• Jangan gunakan lebih dari 2 badge dalam satu cell badges-multiple
• Jangan letakkan action buttons di kolom selain kolom terakhir
• Jangan tampilkan tabel tanpa header
• Jangan gunakan teks terlalu panjang di cell — potong dengan ellipsis jika perlu
• Jangan gunakan style progress-bar untuk nilai non-persentase