> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Tables

> A flexible data table component with 20+ cell style variations, 2 header types, and 3 interaction states.

## 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.

<div style={{overflowX:"auto",margin:"16px 0"}}>
  <table style={{width:"100%",borderCollapse:"separate",borderSpacing:0,border:"1px solid #B9B9B9",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif",fontSize:"14px"}}>
    <thead>
      <tr style={{background:"#F9FAFB"}}>
        <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",whiteSpace:"nowrap"}}>
          <span style={{display:"flex",alignItems:"center",gap:"4px"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE"}} readOnly />

            Name ↓
          </span>
        </th>

        <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",whiteSpace:"nowrap"}}>Status</th>
        <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",whiteSpace:"nowrap"}}>Revenue ↓</th>
        <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",whiteSpace:"nowrap"}}>Progress</th>

        <th style={{padding:"12px 24px",textAlign:"right",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0"}} />
      </tr>
    </thead>

    <tbody>
      <tr style={{background:"#FFFFFF"}}>
        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE",flexShrink:0}} readOnly />

            <span>
              <div style={{fontWeight:500,color:"#101828",fontSize:"14px"}}>Iqbal Maulana</div>
              <div style={{color:"#667085",fontSize:"13px",fontWeight:400}}>[iqbal@mail.com](mailto:iqbal@mail.com)</div>
            </span>
          </span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{background:"#ECFDF3",color:"#027A48",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px",whiteSpace:"nowrap"}}>● Active</span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"8px"}}>
            <span style={{color:"#667085",fontSize:"14px"}}>\$1,800</span>
            <span style={{background:"#ECFDF3",color:"#027A48",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>↑ 20%</span>
          </span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
            <span style={{flex:1,height:"8px",background:"#F2F4F7",borderRadius:"4px",display:"block",minWidth:"80px",position:"relative"}}>
              <span style={{position:"absolute",left:0,top:0,height:"8px",width:"60%",background:"#3B82F6",borderRadius:"4px",display:"block"}} />
            </span>

            <span style={{color:"#344054",fontSize:"14px",fontWeight:500,whiteSpace:"nowrap"}}>60%</span>
          </span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0",textAlign:"right"}}>
          <span style={{display:"inline-flex",gap:"12px"}}>
            <span style={{color:"#71717A",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Delete</span>
            <span style={{color:"#0479CE",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Edit</span>
          </span>
        </td>
      </tr>

      <tr style={{background:"#FFFFFF"}}>
        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE",flexShrink:0}} readOnly />

            <span>
              <div style={{fontWeight:500,color:"#101828",fontSize:"14px"}}>Siti Nurhaliza</div>
              <div style={{color:"#667085",fontSize:"13px",fontWeight:400}}>[siti@mail.com](mailto:siti@mail.com)</div>
            </span>
          </span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{background:"#FEF3F2",color:"#B42318",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px",whiteSpace:"nowrap"}}>● Inactive</span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"8px"}}>
            <span style={{color:"#667085",fontSize:"14px"}}>\$940</span>
            <span style={{background:"#FEF3F2",color:"#B42318",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>↓ 8%</span>
          </span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
            <span style={{flex:1,height:"8px",background:"#F2F4F7",borderRadius:"4px",display:"block",minWidth:"80px",position:"relative"}}>
              <span style={{position:"absolute",left:0,top:0,height:"8px",width:"28%",background:"#3B82F6",borderRadius:"4px",display:"block"}} />
            </span>

            <span style={{color:"#344054",fontSize:"14px",fontWeight:500,whiteSpace:"nowrap"}}>28%</span>
          </span>
        </td>

        <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0",textAlign:"right"}}>
          <span style={{display:"inline-flex",gap:"12px"}}>
            <span style={{color:"#71717A",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Delete</span>
            <span style={{color:"#0479CE",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Edit</span>
          </span>
        </td>
      </tr>

      <tr style={{background:"#FFFFFF"}}>
        <td style={{padding:"16px 24px"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE",flexShrink:0}} readOnly />

            <span>
              <div style={{fontWeight:500,color:"#101828",fontSize:"14px"}}>Budi Santoso</div>
              <div style={{color:"#667085",fontSize:"13px",fontWeight:400}}>[budi@mail.com](mailto:budi@mail.com)</div>
            </span>
          </span>
        </td>

        <td style={{padding:"16px 24px"}}>
          <span style={{background:"#FFF7ED",color:"#C2410C",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px",whiteSpace:"nowrap"}}>● Pending</span>
        </td>

        <td style={{padding:"16px 24px"}}>
          <span style={{display:"flex",alignItems:"center",gap:"8px"}}>
            <span style={{color:"#667085",fontSize:"14px"}}>\$2,400</span>
            <span style={{background:"#ECFDF3",color:"#027A48",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>↑ 35%</span>
          </span>
        </td>

        <td style={{padding:"16px 24px"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
            <span style={{flex:1,height:"8px",background:"#F2F4F7",borderRadius:"4px",display:"block",minWidth:"80px",position:"relative"}}>
              <span style={{position:"absolute",left:0,top:0,height:"8px",width:"85%",background:"#3B82F6",borderRadius:"4px",display:"block"}} />
            </span>

            <span style={{color:"#344054",fontSize:"14px",fontWeight:500,whiteSpace:"nowrap"}}>85%</span>
          </span>
        </td>

        <td style={{padding:"16px 24px",textAlign:"right"}}>
          <span style={{display:"inline-flex",gap:"12px"}}>
            <span style={{color:"#71717A",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Delete</span>
            <span style={{color:"#0479CE",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Edit</span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

## Usage

```jsx theme={null}
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

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

<Tabs>
  <Tab title="White Header">
    White background (`#FFFFFF`), used for tables with light contrast.

    <div style={{overflowX:"auto",margin:"12px 0"}}>
      <table style={{width:"100%",borderCollapse:"separate",borderSpacing:0,border:"1px solid #EAECF0",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif"}}>
        <thead>
          <tr style={{background:"#FFFFFF"}}>
            <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",whiteSpace:"nowrap"}}>Name ↓</th>
            <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0"}}>Role</th>
            <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0"}}>Status</th>

            <th style={{padding:"12px 24px",textAlign:"right",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0"}} />
          </tr>
        </thead>

        <tbody>
          <tr>
            <td style={{padding:"16px 24px",color:"#101828",fontSize:"14px",fontWeight:500,borderBottom:"1px solid #EAECF0"}}>Olivia Rhye</td>
            <td style={{padding:"16px 24px",color:"#667085",fontSize:"14px",borderBottom:"1px solid #EAECF0"}}>Product Designer</td>
            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}><span style={{background:"#ECFDF3",color:"#027A48",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>Active</span></td>
            <td style={{padding:"16px 24px",textAlign:"right",borderBottom:"1px solid #EAECF0"}}><span style={{color:"#0479CE",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Edit</span></td>
          </tr>
        </tbody>
      </table>
    </div>

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

    ```jsx theme={null}
    <TableCell type="header" style="white-header" sortable>Name</TableCell>
    ```
  </Tab>

  <Tab title="Gray Header">
    Gray background (`#F9FAFB`), providing clearer contrast between the header and data rows.

    <div style={{overflowX:"auto",margin:"12px 0"}}>
      <table style={{width:"100%",borderCollapse:"separate",borderSpacing:0,border:"1px solid #EAECF0",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif"}}>
        <thead>
          <tr style={{background:"#F9FAFB"}}>
            <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",whiteSpace:"nowrap"}}>Name ↓</th>
            <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0"}}>Role</th>
            <th style={{padding:"12px 24px",textAlign:"left",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0"}}>Status</th>

            <th style={{padding:"12px 24px",textAlign:"right",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0"}} />
          </tr>
        </thead>

        <tbody>
          <tr>
            <td style={{padding:"16px 24px",color:"#101828",fontSize:"14px",fontWeight:500,borderBottom:"1px solid #EAECF0"}}>Olivia Rhye</td>
            <td style={{padding:"16px 24px",color:"#667085",fontSize:"14px",borderBottom:"1px solid #EAECF0"}}>Product Designer</td>
            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}><span style={{background:"#ECFDF3",color:"#027A48",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>Active</span></td>
            <td style={{padding:"16px 24px",textAlign:"right",borderBottom:"1px solid #EAECF0"}}><span style={{color:"#0479CE",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Edit</span></td>
          </tr>
        </tbody>
      </table>
    </div>

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

    ```jsx theme={null}
    <TableCell type="header" style="gray-header" sortable>Name</TableCell>
    ```
  </Tab>
</Tabs>

## 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.

<div style={{overflowX:"auto",margin:"12px 0"}}>
  <table style={{borderCollapse:"separate",borderSpacing:0,border:"1px solid #EAECF0",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif",width:"100%"}}>
    <thead>
      <tr style={{background:"#F9FAFB"}}>
        <th style={{padding:"10px 20px",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",textAlign:"left",whiteSpace:"nowrap"}}>Style</th>
        <th style={{padding:"10px 20px",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",textAlign:"left"}}>Preview</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",whiteSpace:"nowrap",fontFamily:"Inter,sans-serif"}}>Lead checkbox</td>

        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px",fontFamily:"Inter,sans-serif"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE",flexShrink:0}} readOnly />

            <span><div style={{fontSize:"14px",fontWeight:500,color:"#101828"}}>Iqbal Maulana</div><div style={{fontSize:"13px",color:"#667085"}}>[iqbal@mail.com](mailto:iqbal@mail.com)</div></span>
          </span>
        </td>
      </tr>

      <tr>
        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",whiteSpace:"nowrap",fontFamily:"Inter,sans-serif"}}>Lead toggle</td>

        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px",fontFamily:"Inter,sans-serif"}}>
            <span style={{width:"36px",height:"20px",background:"#0479CE",borderRadius:"10px",display:"inline-block",flexShrink:0}} />

            <span><div style={{fontSize:"14px",fontWeight:500,color:"#101828"}}>Iqbal Maulana</div><div style={{fontSize:"13px",color:"#667085"}}>[iqbal@mail.com](mailto:iqbal@mail.com)</div></span>
          </span>
        </td>
      </tr>

      <tr>
        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",whiteSpace:"nowrap",fontFamily:"Inter,sans-serif"}}>Lead avatar checkbox</td>

        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px",fontFamily:"Inter,sans-serif"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE",flexShrink:0}} readOnly />

            <span style={{width:"32px",height:"32px",borderRadius:"50%",background:"#0479CE",display:"inline-flex",alignItems:"center",justifyContent:"center",color:"#fff",fontSize:"12px",fontWeight:600,flexShrink:0}}>IM</span>
            <span><div style={{fontSize:"14px",fontWeight:500,color:"#101828"}}>Iqbal Maulana</div><div style={{fontSize:"13px",color:"#667085"}}>[iqbal@mail.com](mailto:iqbal@mail.com)</div></span>
          </span>
        </td>
      </tr>

      <tr>
        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",whiteSpace:"nowrap",fontFamily:"Inter,sans-serif"}}>Lead icon checkbox</td>

        <td style={{padding:"8px 20px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px",fontFamily:"Inter,sans-serif"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE",flexShrink:0}} readOnly />

            <span style={{width:"32px",height:"32px",borderRadius:"8px",background:"#F2F4F7",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:"14px",flexShrink:0}}>🏷️</span>
            <span><div style={{fontSize:"14px",fontWeight:500,color:"#101828"}}>Category A</div><div style={{fontSize:"13px",color:"#667085"}}>subcategory</div></span>
          </span>
        </td>
      </tr>

      <tr>
        <td style={{padding:"8px 20px",fontSize:"13px",color:"#667085",whiteSpace:"nowrap",fontFamily:"Inter,sans-serif"}}>Lead payment method checkbox</td>

        <td style={{padding:"8px 20px"}}>
          <span style={{display:"flex",alignItems:"center",gap:"12px",fontFamily:"Inter,sans-serif"}}>
            <input type="checkbox" style={{width:"16px",height:"16px",borderRadius:"4px",accentColor:"#0479CE",flexShrink:0}} readOnly />

            <span style={{background:"#F2F4F7",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",fontWeight:600,color:"#101828",flexShrink:0}}>VISA</span>
            <span><div style={{fontSize:"14px",fontWeight:500,color:"#101828"}}>Visa •••• 4242</div><div style={{fontSize:"13px",color:"#667085"}}>Expires 04/27</div></span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

```jsx theme={null}
// Lead checkbox with supporting text
<TableCell style="lead-checkbox" checkbox supportingText>
  Iqbal Maulana
  <TableCell.Supporting>iqbal@mail.com</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.

<Tabs>
  <Tab title="Badge">
    One or more badge labels. Suitable for Status, Category, or Tag columns.

    <div style={{margin:"12px 0",display:"flex",gap:"24px",flexWrap:"wrap",fontFamily:"Inter,sans-serif"}}>
      <div>
        <p style={{fontSize:"12px",color:"#667085",marginBottom:"8px"}}>Badge (single)</p>
        <span style={{background:"#ECFDF3",color:"#027A48",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>● Active</span>
      </div>

      <div>
        <p style={{fontSize:"12px",color:"#667085",marginBottom:"8px"}}>Badges multiple</p>

        <span style={{display:"flex",gap:"6px"}}>
          <span style={{background:"#EFF6FF",color:"#1D4ED8",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>Design</span>
          <span style={{background:"#F5F3FF",color:"#6D28D9",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>Frontend</span>
        </span>
      </div>
    </div>

    ```jsx theme={null}
    <TableCell style="badge">
      <Badge variant="success">Active</Badge>
    </TableCell>

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

  <Tab title="Trend">
    A numeric value accompanied by a percentage change badge — green for an increase, red for a decrease.

    <div style={{display:"flex",gap:"16px",flexWrap:"wrap",margin:"12px 0",fontFamily:"Inter,sans-serif",alignItems:"center"}}>
      <span style={{display:"flex",alignItems:"center",gap:"8px"}}>
        <span style={{color:"#667085",fontSize:"14px"}}>\$1,800</span>
        <span style={{background:"#ECFDF3",color:"#027A48",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>↑ 20%</span>
      </span>

      <span style={{color:"#D1D5DB"}}>|</span>

      <span style={{display:"flex",alignItems:"center",gap:"8px"}}>
        <span style={{color:"#667085",fontSize:"14px"}}>\$940</span>
        <span style={{background:"#FEF3F2",color:"#B42318",fontSize:"12px",fontWeight:500,padding:"2px 8px",borderRadius:"16px"}}>↓ 8%</span>
      </span>
    </div>

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

    ```jsx theme={null}
    <TableCell style="trend-positive" value="$1,800" change="20%" />
    <TableCell style="trend-negative" value="$940" change="8%" />
    ```
  </Tab>

  <Tab title="Progress Bar">
    A horizontal bar showing a completion percentage. Blue bar over a gray background track.

    <div style={{margin:"12px 0",display:"flex",flexDirection:"column",gap:"12px",fontFamily:"Inter,sans-serif",maxWidth:"300px"}}>
      {[60, 28, 85, 10].map((v, i) => (
                  <span key={i} style={{display:"flex",alignItems:"center",gap:"12px"}}>
                    <span style={{flex:1,height:"8px",background:"#F2F4F7",borderRadius:"4px",position:"relative",display:"block"}}>
                      <span style={{position:"absolute",left:0,top:0,height:"8px",width:`${v}%`,background:"#3B82F6",borderRadius:"4px",display:"block"}}/>
                    </span>
                    <span style={{color:"#344054",fontSize:"14px",fontWeight:500,minWidth:"40px",textAlign:"right"}}>{v}%</span>
                  </span>
                ))}
    </div>

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

    ```jsx theme={null}
    <TableCell style="progress-bar" value={60} />
    ```
  </Tab>

  <Tab title="Avatar Group">
    Displays multiple overlapping avatars — suitable for "Team" or "Assigned to" columns.

    <div style={{margin:"12px 0",display:"flex",alignItems:"center",fontFamily:"Inter,sans-serif"}}>
      {["IM","SN","BS","OR"].map((init, i) => (
                  <span key={i} style={{width:"32px",height:"32px",borderRadius:"50%",background:["#0479CE","#16A34A","#DC2626","#9333EA"][i],border:"2px solid #FFF",marginLeft: i === 0 ? 0 : "-8px",display:"inline-flex",alignItems:"center",justifyContent:"center",color:"#fff",fontSize:"11px",fontWeight:600,zIndex: 4-i}}>
                    {init}
                  </span>
                ))}

      <span style={{width:"32px",height:"32px",borderRadius:"50%",background:"#F2F4F7",border:"2px solid #FFF",marginLeft:"-8px",display:"inline-flex",alignItems:"center",justifyContent:"center",color:"#667085",fontSize:"11px",fontWeight:600}}>+3</span>
    </div>

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

  <Tab title="Star Ratings">
    Star rating from 1–5. Suitable for rating or product review columns.

    <div style={{margin:"12px 0",display:"flex",gap:"4px",fontFamily:"Inter,sans-serif",alignItems:"center"}}>
      {[1,2,3,4,5].map(i => (
                  <span key={i} style={{fontSize:"20px",color: i <= 4 ? "#F59E0B" : "#D1D5DB"}}>★</span>
                ))}

      <span style={{fontSize:"14px",color:"#667085",marginLeft:"8px"}}>4.0</span>
    </div>

    ```jsx theme={null}
    <TableCell style="star-ratings" value={4} maxValue={5} />
    ```
  </Tab>
</Tabs>

### Action Cells

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

<div style={{overflowX:"auto",margin:"12px 0"}}>
  <table style={{borderCollapse:"separate",borderSpacing:0,border:"1px solid #EAECF0",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif",width:"100%"}}>
    <thead>
      <tr style={{background:"#F9FAFB"}}>
        <th style={{padding:"10px 20px",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",textAlign:"left"}}>Style</th>
        <th style={{padding:"10px 20px",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",textAlign:"left"}}>Preview</th>
        <th style={{padding:"10px 20px",fontSize:"12px",fontWeight:500,color:"#667085",borderBottom:"1px solid #EAECF0",textAlign:"left"}}>Description</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td style={{padding:"12px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif",whiteSpace:"nowrap"}}>Action buttons</td>

        <td style={{padding:"12px 20px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"inline-flex",gap:"12px",fontFamily:"Inter,sans-serif"}}>
            <span style={{color:"#71717A",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Delete</span>
            <span style={{color:"#0479CE",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Edit</span>
          </span>
        </td>

        <td style={{padding:"12px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif"}}>Text button without border</td>
      </tr>

      <tr>
        <td style={{padding:"12px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif",whiteSpace:"nowrap"}}>Action icons</td>

        <td style={{padding:"12px 20px",borderBottom:"1px solid #EAECF0"}}>
          <span style={{display:"inline-flex",gap:"8px",fontFamily:"Inter,sans-serif"}}>
            <span style={{fontSize:"16px",cursor:"pointer"}}>✏️</span>
            <span style={{fontSize:"16px",cursor:"pointer"}}>🗑️</span>
            <span style={{fontSize:"16px",cursor:"pointer"}}>📋</span>
          </span>
        </td>

        <td style={{padding:"12px 20px",borderBottom:"1px solid #EAECF0",fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif"}}>Action icons without labels</td>
      </tr>

      <tr>
        <td style={{padding:"12px 20px",fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif",whiteSpace:"nowrap"}}>Action dropdown icon</td>

        <td style={{padding:"12px 20px"}}>
          <span style={{display:"inline-flex",alignItems:"center",justifyContent:"center",width:"32px",height:"32px",borderRadius:"6px",cursor:"pointer",fontFamily:"Inter,sans-serif",fontSize:"18px",color:"#667085"}}>⋮</span>
        </td>

        <td style={{padding:"12px 20px",fontSize:"13px",color:"#667085",fontFamily:"Inter,sans-serif"}}>Single dropdown icon (kebab menu)</td>
      </tr>
    </tbody>
  </table>
</div>

```jsx theme={null}
// 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.

<div style={{display:"flex",gap:"24px",margin:"12px 0",flexWrap:"wrap",fontFamily:"Inter,sans-serif",alignItems:"center"}}>
  <div>
    <p style={{fontSize:"12px",color:"#667085",marginBottom:"8px"}}>Checkbox only</p>

    <input type="checkbox" style={{width:"18px",height:"18px",borderRadius:"4px",accentColor:"#0479CE"}} readOnly />
  </div>

  <div>
    <p style={{fontSize:"12px",color:"#667085",marginBottom:"8px"}}>Toggle only</p>

    <span style={{width:"36px",height:"20px",background:"#0479CE",borderRadius:"10px",display:"inline-block",cursor:"pointer"}} />
  </div>
</div>

```jsx theme={null}
<TableCell style="checkbox-only" />
<TableCell style="toggle-only" />
```

## Cell States

Each cell supports three interaction states.

<Tabs>
  <Tab title="Default">
    Normal state with no interaction. Cell background is transparent (white from the table).

    <div style={{overflowX:"auto",margin:"12px 0"}}>
      <table style={{borderCollapse:"separate",borderSpacing:0,border:"1px solid #EAECF0",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif",width:"100%"}}>
        <tbody>
          <tr style={{background:"#FFFFFF"}}>
            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
              <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
                <input type="checkbox" style={{width:"16px",height:"16px",accentColor:"#0479CE",flexShrink:0}} readOnly />

                <span style={{fontWeight:500,color:"#101828",fontSize:"14px",fontFamily:"Inter,sans-serif"}}>Iqbal Maulana</span>
              </span>
            </td>

            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0",color:"#667085",fontSize:"14px",fontFamily:"Inter,sans-serif"}}>Product Designer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </Tab>

  <Tab title="Hover">
    When the cursor hovers over a row — the row background changes to `#F9FAFB` with a smooth transition.

    <div style={{overflowX:"auto",margin:"12px 0"}}>
      <table style={{borderCollapse:"separate",borderSpacing:0,border:"1px solid #EAECF0",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif",width:"100%"}}>
        <tbody>
          <tr style={{background:"#F9FAFB"}}>
            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
              <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
                <input type="checkbox" style={{width:"16px",height:"16px",accentColor:"#0479CE",flexShrink:0}} readOnly />

                <span style={{fontWeight:500,color:"#101828",fontSize:"14px",fontFamily:"Inter,sans-serif"}}>Iqbal Maulana</span>
              </span>
            </td>

            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0",color:"#667085",fontSize:"14px",fontFamily:"Inter,sans-serif"}}>Product Designer</td>
          </tr>
        </tbody>
      </table>
    </div>

    | Token          | Default       | Hover     |
    | -------------- | ------------- | --------- |
    | Row background | `transparent` | `#F9FAFB` |
  </Tab>

  <Tab title="Disabled">
    The row or cell cannot be interacted with. Interactive elements (checkbox, toggle) are in a disabled state with reduced opacity.

    <div style={{overflowX:"auto",margin:"12px 0"}}>
      <table style={{borderCollapse:"separate",borderSpacing:0,border:"1px solid #EAECF0",borderRadius:"8px",overflow:"hidden",fontFamily:"Inter,sans-serif",width:"100%"}}>
        <tbody>
          <tr style={{background:"#FFFFFF",opacity:0.5}}>
            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0"}}>
              <span style={{display:"flex",alignItems:"center",gap:"12px"}}>
                <input type="checkbox" style={{width:"16px",height:"16px",accentColor:"#D4D4D8",flexShrink:0}} disabled readOnly />

                <span style={{fontWeight:500,color:"#101828",fontSize:"14px",fontFamily:"Inter,sans-serif"}}>Iqbal Maulana</span>
              </span>
            </td>

            <td style={{padding:"16px 24px",borderBottom:"1px solid #EAECF0",color:"#667085",fontSize:"14px",fontFamily:"Inter,sans-serif"}}>Product Designer</td>
          </tr>
        </tbody>
      </table>
    </div>

    ```jsx theme={null}
    <TableRow disabled>
      <TableCell style="lead-checkbox" checkbox disabled>Iqbal Maulana</TableCell>
    </TableRow>
    ```
  </Tab>
</Tabs>

## 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)* |

<Note>
  `checkbox` and `toggle` are mutually exclusive — they cannot be enabled simultaneously in the same cell.
</Note>

## 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`

<ParamField path="className" type="string">
  Additional class for the table wrapper.
</ParamField>

<ParamField path="bordered" type="boolean" default="true">
  Shows the outer table border.
</ParamField>

### `TableCell`

<ParamField path="type" type="&#x22;default&#x22; | &#x22;header&#x22;" default="&#x22;default&#x22;">
  Cell type — `header` for the header row, `default` for content rows.
</ParamField>

<ParamField path="style" type="&#x22;lead-checkbox&#x22; | &#x22;lead-toggle&#x22; | &#x22;lead-avatar-checkbox&#x22; | &#x22;lead-avatar-toggle&#x22; | &#x22;lead-icon-checkbox&#x22; | &#x22;lead-icon-toggle&#x22; | &#x22;badge&#x22; | &#x22;badges-multiple&#x22; | &#x22;trend-positive&#x22; | &#x22;trend-negative&#x22; | &#x22;progress-bar&#x22; | &#x22;avatar-group&#x22; | &#x22;action-buttons&#x22; | &#x22;action-icons&#x22; | &#x22;action-dropdown-icon&#x22; | &#x22;checkbox-only&#x22; | &#x22;toggle-only&#x22; | &#x22;star-ratings&#x22; | &#x22;lead-payment-checkbox&#x22; | &#x22;lead-payment-toggle&#x22; | &#x22;white-header&#x22; | &#x22;gray-header&#x22;" required>
  The cell's visual style, which determines its content and layout.
</ParamField>

<ParamField path="state" type="&#x22;default&#x22; | &#x22;hover&#x22; | &#x22;disabled&#x22;" default="&#x22;default&#x22;">
  The cell's interaction state.
</ParamField>

<ParamField path="checkbox" type="boolean" default="false">
  Displays a checkbox on the left side of the cell.
</ParamField>

<ParamField path="toggle" type="boolean" default="false">
  Displays a toggle button on the left side of the cell.
</ParamField>

<ParamField path="supportingText" type="boolean" default="false">
  Displays supporting text below the main text.
</ParamField>

<ParamField path="trailingIcon" type="boolean" default="false">
  Displays a sort icon on the header cell.
</ParamField>

<ParamField path="sortable" type="boolean" default="false">
  Enables sort functionality on the header cell.
</ParamField>

<ParamField path="value" type="string | number">
  The value to display (trend, progress, star ratings).
</ParamField>

<ParamField path="change" type="string | number">
  The percentage change for the `trend-positive` / `trend-negative` type.
</ParamField>

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

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * 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
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * 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
  </Card>
</CardGroup>