Tables - A-raf Design System

Overview

Table is used to display structured data in rows and columns. The component is composed of Cell elements that can be freely combined — each column can use a different cell style depending on the type of data being displayed.

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>
  );
}

The header row uses Type=Header with two background style options.

White Header
Gray Header

White background (#FFFFFF), used for tables with light contrast.

Name ↓	Role	Status
Olivia Rhye	Product Designer	Active	Edit

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

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

Gray background (#F9FAFB), providing clearer contrast between the header and data rows.

Name ↓	Role	Status
Olivia Rhye	Product Designer	Active	Edit

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

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

Cell Styles

Each content cell (Type=Default) can use various styles depending on the type of data it displays.

Lead Cells

Cells with interactive elements (checkbox/toggle) and an optional avatar, icon, or payment logo on the left side.

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 with 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

Cells for displaying data in various visual formats.

Badge
Trend
Progress Bar
Avatar Group
Star Ratings

One or more badge labels. Suitable for Status, Category, or Tag columns.

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>

A numeric value accompanied by a percentage change badge — green for an increase, red for a decrease.

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

A horizontal bar showing a completion percentage. Blue bar over a gray background track.

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

Displays multiple overlapping avatars — suitable for “Team” or “Assigned to” columns.

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

Star rating from 1–5. Suitable for rating or product review columns.

4.0

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

Action Cells

Cells for displaying action controls at the far right of a row.

Style	Preview	Description
Action buttons	DeleteEdit	Text button without border
Action icons	✏️🗑️📋	Action icons without labels
Action dropdown icon	⋮	Single dropdown icon (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

Cells containing only a single interactive element with no accompanying text.

Checkbox only

Toggle only

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

Cell States

Each cell supports three interaction states.

Default
Hover
Disabled

Normal state with no interaction. Cell background is transparent (white from the table).

Iqbal Maulana

Product Designer

When the cursor hovers over a row — the row background changes to #F9FAFB with a smooth transition.

Iqbal Maulana

Product Designer

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

The row or cell cannot be interacted with. Interactive elements (checkbox, toggle) are in a disabled state with reduced opacity.

Iqbal Maulana

Product Designer

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

Properties

Each cell has 4 boolean properties that can be combined.

Property	Type	Default	Description
`checkbox`	`boolean`	`false`	Displays a checkbox on the left side of the cell
`toggle`	`boolean`	`false`	Displays a toggle button on the left side of the cell
`supportingText`	`boolean`	`false`	Displays small supporting text below the main text
`trailingIcon`	`boolean`	`false`	Displays a sort/dropdown icon in the header (only for Type=Header)

checkbox and toggle are mutually exclusive — they cannot be enabled simultaneously in the same cell.

Design Tokens

Table

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

Cell

Element	Token	Value
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

Additional class for the table wrapper.

bordered

boolean

default:"true"

Shows the outer table border.

`TableCell`

type

"default" | "header"

default:"\"default\""

Cell type — header for the header row, default for content rows.

style

required

The cell’s visual style, which determines its content and layout.

state

"default" | "hover" | "disabled"

default:"\"default\""

The cell’s interaction state.

checkbox

boolean

default:"false"

Displays a checkbox on the left side of the cell.

toggle

boolean

default:"false"

Displays a toggle button on the left side of the cell.

supportingText

boolean

default:"false"

Displays supporting text below the main text.

trailingIcon

boolean

default:"false"

Displays a sort icon on the header cell.

sortable

boolean

default:"false"

Enables sort functionality on the header cell.

value

string | number

The value to display (trend, progress, star ratings).

change

string | number

The percentage change for the trend-positive / trend-negative type.

Accessibility

Use semantic <table>, <thead>, <tbody>, <tr>, <th>, <td> elements
Header cells use <th scope="col"> for clear column relationships
The “select all” checkbox in the header uses aria-label="Select all rows"
Tables with sorting add aria-sort="ascending" | "descending" | "none" to the header
Long tables use a descriptive aria-label or <caption>
Ensure the table can scroll horizontally on narrow viewports with overflow-x: auto
Action buttons within cells use an aria-label that includes the row name (e.g. aria-label="Edit Iqbal Maulana")

Do’s & Don’ts

Do

Use consistent cell styles for each column
Limit the number of columns to prevent overflow on small screens
Use the Gray Header for tables with many rows to improve readability
Always include an action column at the far right
Use supportingText to show secondary information without adding extra columns
Provide an aria-label on every action button

Don't

Don’t mix checkbox and toggle in the same table
Don’t use more than 2 badges in a single badges-multiple cell
Don’t place action buttons in any column other than the last one
Don’t render a table without a header
Don’t use overly long text in a cell — truncate with an ellipsis if necessary
Don’t use the progress-bar style for non-percentage values

Documentation Index

​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