---
title: "Head to Head Custom Components Order"
canonical_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/widget-specific/example-h2h-components-reorder"
markdown_url: "https://apidocs.sportradar.com/resources/widgets/docs/tutorials/widget-specific/example-h2h-components-reorder.md"
last_updated: "2026-03-23T13:02:40Z"
---
# Head to Head Custom Components Order
[Head To Head](https://apidocs.sportradar.com/resources/widgets/docs/head_to_head/standalone.md) has an option to change the default order of its components (tabs when using `layout: inline` option) by passing `components` property to [`SIR`](https://apidocs.sportradar.com/resources/widgets/docs/tutorials/SIR.md) function. This option also controls which components are enabled.
`components` property supports two notations:
1. simplified notation: array of strings representing available components
2. full object notation: key-value mapping between `sportId {number}` and its corresponding components
### Simplified Notation
Example of simplified notation: `components: ["headtohead", "form", "teamstats", "lastmatches"]`.
Manipulating this array enables you to:
1. re-order components by changing the order of strings in the array,
2. disable components by removing specific strings from the array.
#### Example
Below is an example code with the removed `form` component and `teamstats` set as the first component (listed first in an array):
```html
Head To Head Components Re-order
```
### Full Object Notation
Using full object notation, the value for each sport is basically a simplified notation mapped to a specific sport.
This notation enables per-sport components configuration for Head To Head when the match can be dynamically changed.
Each sport has its own set of available components. Here is a list of all possible values:
```plaintext
default: ["headtohead", "form", "teamstats", "lastmatches"],
1: ["gamePulse", "headtohead", "form", "teamstats", "teamstatsmatch", "lastmatches"], // soccer
2: ["headtohead", "form", "teamstats", "lastmatches"], // basket
3: ["headtohead", "form", "teamstats", "lastmatches"], // baseball
4: ["headtohead", "form", "teamstats", "lastmatches"], // ice hockey
5: ["headtohead", "form", "teamstats", "lastmatches"], // tennis
6: ["headtohead", "form", "teamstats", "lastmatches"], // handball
12: ["headtohead", "form", "lastmatches"], // rugby
13: ["headtohead", "form", "teamstats", "lastmatches"], // aussie rules
16: ["headtohead", "form", "lastmatches"], // american football
19: ["headtohead", "teamstats", "lastmatches"], // snooker
20: ["headtohead", "lastmatches"], // table tennis
21: ["headtohead", "form", "teamstats", "lastmatches"], // cricket
22: ["headtohead", "form", "teamstats", "lastmatches"], // darts
23: ["headtohead", "form", "lastmatches"], // volleyball
26: ["headtohead", "form", "teamstats", "lastmatches"], // waterpolo
29: ["headtohead", "form", "teamstats", "lastmatches"], // futsal
31: ["headtohead", "lastmatches"], // badminton
34: ["headtohead", "form", "lastmatches"], // beach volleyball
37: ["headtohead", "lastmatches"], // squash
60: ["headtohead", "form", "lastmatches"], // beach soccer
61: ["headtohead", "form", "teamstats", "lastmatches"], // pesapallo
137: ["headtohead", "form", "teamstats", "lastmatches"], // esport: E-soccer
153: ["headtohead", "lastmatches"], // esport: E-basketball
195: ["headtohead", "lastmatches"], // esport: E-ice hockey
```
#### Example
Below is an example code setting:
- default components order (switched "teamstats" and "form") config,
- overriding config for soccer (adding "gamepulse" because it's not present in "default") and
- overriding config for basketball (setting "lastmatches" as the first component)
```html
Head To Head Components Re-order
```