Tables

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 [email protected]	● Active	$1,800↑ 20%	60%	DeleteEdit
Siti Nurhaliza [email protected]	● Inactive	$940↓ 8%	28%	DeleteEdit
Budi Santoso [email protected]	● Pending	$2,400↑ 35%	85%	DeleteEdit

Installation

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 row menggunakan Type=Header dengan dua pilihan style background.

White Header
Gray 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>

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 [email protected]
Lead toggle	Iqbal Maulana [email protected]
Lead avatar checkbox	IM Iqbal Maulana [email protected]
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>[email protected]</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
Trend
Progress Bar
Avatar Group
Star Ratings

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>

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%" />

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} />

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

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

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
Hover
Disabled

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

Iqbal Maulana

Product Designer

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

Iqbal Maulana

Product Designer

Token	Default	Hover
Row background	`transparent`	`#F9FAFB`

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

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

Actions

Data Display

Navigation

Overview

Installation

Usage

Header

Cell Styles

Lead Cells

Content Cells

Action Cells

Standalone Cells

Cell States

Properties

Design Tokens

Table

Cell

API Reference

`Table`

`TableCell`

Accessibility

Do’s & Don’ts

Do

Don't

Actions

Data Display

Navigation

​Overview

​Installation

​Usage

​Header

​Cell Styles

​Lead Cells

​Content Cells

​Action Cells

​Standalone Cells

​Cell States

​Properties

​Design Tokens

​Table

​Cell

​API Reference

​Table

​TableCell

​Accessibility

​Do’s & Don’ts

Do

Don't

Overview

Installation

Usage

Header

Cell Styles

Lead Cells

Content Cells

Action Cells

Standalone Cells

Cell States

Properties

Design Tokens

Table

Cell

API Reference

`Table`

`TableCell`

Accessibility

Do’s & Don’ts