> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.
# Display dependent variants as a table
> How to output dependent variants in WEBSALE V8s as a table, at what quantity this is worthwhile, and how to switch between table and select lists in the template.
With the table display, the customer sees all variant combinations of a product at a glance instead of selecting them one after another. This is suitable for products with few combinations and lets the customer add several variants to the shopping cart at the same time.
Two dependent variants "color" and "size" with ten combinations, for example, result in this table:
| Product number | Color | Size | Price | Quantity |
| - | - | - | - | - |
| 1001 | red | S | 10.00 EUR | |
| 1002 | red | M | 11.00 EUR | |
| 1003 | red | L | 12.00 EUR | |
| 1004 | red | XL | 12.00 EUR | |
| 1005 | blue | S | 15.00 EUR | |
| 1006 | blue | M | 15.00 EUR | |
| 1007 | blue | XXL | 19.00 EUR | |
| 1008 | yellow | S | 5.00 EUR | |
| 1009 | yellow | M | 5.00 EUR | |
| 1010 | yellow | L | 5.00 EUR | |
## When a table fits
Technically, WEBSALE V8s supports up to 100 variant combinations in the table. This value is an upper limit of the system, not a guideline. A table with 100 rows suffers equally in clarity, usability, page design, and load time.
Products can have several hundred or even several thousand combinations. For those, only the display via select lists makes sense, because only part of the variants appears at any one time.
For that reason, do not decide across the board, but on a per-product basis. In the template, you set a maximum value for variant combinations. We recommend 25:
* A product with no more than 25 combinations appears as a table.
* A product with more than 25 combinations appears as a select list.
## Which product data belongs in the table
Any product data can be displayed. Alongside the variants themselves, that is, color and size, we recommend:
* the product number
* the product image, if it depends on the variants
* the price, if it depends on the variants
* stock or availability, if present
* an input field for the quantity
## One or several quantity fields
For quantity input, there are two designs, and the choice determines how much the customer can order in one go.
**One quantity field per row.** As in the table above. This lets the customer add several variants to the shopping cart at once, for example two red ones in size M and one blue one in XXL.
**A single quantity field for the entire table.** In that case, the customer must first select a variant, which is why the rows are linked. If, for example, the customer clicks on product number 1007, its data appears in a "Your selection" block and can be added to the shopping cart from there. To check in the template whether a product number has already been chosen, use `ST-DepVar_OK`.
## Integration
The table is built into the single-product template.
### Set the maximum value in the template
In the `WS-Config` section, you specify up to which number of combinations the table is used.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-Config}
...
MAXSeparatedDepVariations = 25
{/WS-Config}
```
Reference: WS-Config
### Build the table
The bracket `PR-SeparateDepVariations` decides on the display. In the positive branch you build the table, in the negative branch the select lists or links. Both branches belong in the template, otherwise products beyond the maximum value are left without variant selection.
Inside the table, the bracket of the variant names takes on a second task: it generates the columns dynamically. If a product has only the variant "color", only this column appears. If it has color, size, and type, three appear. The same template thus serves all products.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-SeparateDepVariations}
{CAT-AdvData($DepVariations,99)}
{/CAT-AdvData($DepVariations,99)}
{/PR-SeparateDepVariations}
{!PR-SeparateDepVariations}
...
The select lists are displayed here.
...
{/!PR-SeparateDepVariations}
```
Note the order of the brackets. `CAT-AdvData($DepVariations,99)` initializes the list of combinations, and only then does the `@PR-Data` loop deliver one combination per iteration.
## Tags
| Tag | Meaning |
| - | - |
| `PR-SeparateDepVariations` | The section appears when the variants are displayed as a table. In the negative branch, the select lists or links appear |
| `CAT-AdvData()` | Initializes the list of variant combinations |
| `PR-Data` | Loop over the combinations, outputs the product data |
| `PR-DepVariationName1…100` | Name of the variant, for example "color" or "size". As a bracket, it generates the table columns dynamically |
| `PR-DepVariationValue1…100` | Value of the variant, for example "red" or "XXL" |
| `PR-DepVarLink` | Link to a single variant, used as `` |
| `PR-DepVariationSelected` | Indicates whether this variant has been chosen, for example via its link |
| `PR-Quantity_Input` | Field name for the quantity input field |
| `PR-SelectedDepVariations` | Outputs all variant values of the chosen variant. WEBSALE V8s automatically generates a two-column table from this |
| `ST-DepVar_OK` | The section appears when a variant link has been clicked |
## Styles
Reference: Styles for products
## Related topics
* Guide: Display variants
* Guide: Display dependent variants as select lists
* Guide: Display dependent variants as links
* Guide: Reload dependent variants via AJAX
## Related topics
- [Display dependent variants](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)
- [Display dependent variants as links](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
- [Display dependent variants as a graphical view](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-grafische-ansicht-anzeigen.md)
- [Display dependent variants as select lists](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md)
- [Styles for catalog and products](https://dokumentation.websale.de/en/v8s/referenz/styles/katalog-und-produkte.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.