> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Comparison Table

> Side-by-side product sustainability comparison widget.

The Comparison Table widget displays multiple products side-by-side with sustainability metrics, highlighting the best performers.

## Quick start

```html theme={null}
<script src="https://cdn.heychocolate.com/widgets/v1/comparison-table.js"></script>

<hc-comparison-table
  product-ids="prod_abc123,prod_def456,prod_ghi789"
  api-key="sk_live_your_key"
  metrics="co2,mki,water"
></hc-comparison-table>
```

## Attributes

| Attribute          | Type    | Required | Description                                           |
| ------------------ | ------- | -------- | ----------------------------------------------------- |
| `product-ids`      | String  | Yes      | Comma-separated product IDs (max 5)                   |
| `api-key`          | String  | Yes      | API key                                               |
| `metrics`          | String  | No       | Comma-separated metrics (default: `co2,mki`)          |
| `theme`            | String  | No       | `light`, `dark`, `auto`                               |
| `locale`           | String  | No       | Language code                                         |
| `highlight-winner` | Boolean | No       | Highlight best performer per metric (default: `true`) |
| `show-equivalency` | Boolean | No       | Show equivalencies below scores (default: `false`)    |
| `sortable`         | Boolean | No       | Allow sorting by metric (default: `true`)             |

## Available metrics

| Key           | Label             | Unit    |
| ------------- | ----------------- | ------- |
| `co2`         | CO2 Equivalent    | kg CO2e |
| `mki`         | MKI Score         | EUR     |
| `water`       | Water Footprint   | liters  |
| `energy`      | Energy Use        | kWh     |
| `recycled`    | Recycled Content  | %       |
| `circularity` | Circularity Score | 0-100   |

## Styling

```css theme={null}
hc-comparison-table {
  --hc-table-bg: #ffffff;
  --hc-table-header-bg: #f5f5f5;
  --hc-table-winner-bg: #e8f5e9;
  --hc-table-border: #e0e0e0;
  --hc-table-font: inherit;
}
```

## Events

```javascript theme={null}
document.querySelector('hc-comparison-table').addEventListener('hc:product-selected', (e) => {
  console.log('Product selected:', e.detail.productId);
});
```