<div class="returns-list-table">

    <div class="table-header">

        <div class="table-header__column--title">

            <h4 class="heading-counter">
                Artikel
                <span class="counter-bubble" data-counter="12"></span>
            </h4>

        </div>

        <div class="table-header__column--buttons">

            <button class="button-icon--icon-text-regular -icon-scan" type="button" name="scan" value="testvalue">
                Retouren scannen
            </button>

            <button class="button-icon--icon-text-regular -icon-import" type="button" name="refresh" value="true">
                CSV Importieren
            </button>

            <button class="button-icon--icon-text-regular -icon-trash" type="button" name="refresh" value="true">
                Retourenliste leeren
            </button>

        </div>

    </div>
    <div class="responsive-table--first-column-mobile-full-height -spacing-large">
        <div class="table-search" data-offset="none">
            <div class="table-search__container">

                <div class="text-field--light text-field-search--light is-initialized" data-disable-text-field-js>
                    <div class="text-field__wrapper text-field-search__wrapper">
                        <input class="text-field__input text-field-search__input" id="returns-list-table-search" type="text" name="returns-list-table-search" required data-responsive-table-search="true" placeholder="Suche" />
                        <label class="visually-hidden" for="returns-list-table-search">Suche</label>
                        <button type="reset" class="text-field-search__reset"></button>
                        <button type="submit" class="text-field-search__search"></button>
                        <div class="text-field-search__loader ">
                            <div class="loading-spinner -vertical -horizontal">
                                <div class="loading-spinner__spinner--small"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="responsive-table__container--auto-scrollbar">
            <table class="responsive-table__table" data-responsive-table-filter-context>
                <colgroup>
                    <col style="">
                    <col style="72px">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="160px">
                    <col style="64px">
                </colgroup>
                <thead>
                    <tr class="responsive-table__tr">
                        <th class="responsive-table__th">
                            <div class="responsive-table__select-all-box">
                                <div class="checkbox--light is-initialized">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-selection-checkbox" type="checkbox" name="&#x23;" />

                                        <label class="checkbox__label has-empty-label" for="multi-selection-checkbox">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                                <div class="responsive-table__multiselect-dropdown">
                                    <div class="dropdown">
                                        <button type="button" class="dropdown__toggle is-thin"> </button>
                                        <div class="dropdown__content" style="width: 300px;">
                                            <div class="responsive-table__batch-operations-dropdown">
                                                <button type="button" class="responsive-table__batch-operations-dropdown-item">
                                                    Auswahl löschen
                                                </button>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                        <th class="responsive-table__th">

                        </th>
                        <th class="responsive-table__th">
                            Artikel
                        </th>
                        <th class="responsive-table__th">
                            Auftragsnummer
                        </th>
                        <th class="responsive-table__th">
                            Urspr. Pos
                        </th>
                        <th class="responsive-table__th">
                            Lieferdatum
                        </th>
                        <th class="responsive-table__th">
                            Retournierbar bis
                        </th>
                        <th class="responsive-table__th">
                            Grund
                        </th>
                        <th class="responsive-table__th is-right-aligned">
                            Retournierbar
                        </th>
                        <th class="responsive-table__th">
                            Anzahl
                        </th>
                        <th class="responsive-table__th is-hidden-on-desktop">
                            Aktion
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td is-left is-select-td">
                            <div class="responsive-table__td-inner-container">
                                <div class="checkbox--light is-initialized is-filled-in">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-select-1" type="checkbox" name="&#x23;" value="1" data-multi-selectable="true" />

                                        <label class="checkbox__label has-empty-label" for="multi-select-1">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td is-top-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title"></div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <a href="#" class="image-cell__image-link">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </a>

                                        <div class="image-cell__specials">
                                            <div class="specials">

                                                <div class="specials--medium-horizontally-vertically  ">
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                        <span class="visually-hidden">Sale</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #000000;">
                                                        <span class="visually-hidden">New</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <h5 class="item-cell__title--with-attributes">
                                    <a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
                                </h5>
                                <div class="attributes--small-bold">
                                    <ul class="attributes__list">
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Art.-Nr.</div>
                                            <div class="attributes__value " title="56.65563">
                                                56.65563
                                            </div>
                                        </li>
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Gruppe</div>
                                            <div class="attributes__value " title="Bosch eBike">
                                                Bosch eBike
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="text-field--light text-field-placeholder--light is-initialized">
                                    <div class="text-field__wrapper text-field-placeholder__wrapper ">
                                        <input class="text-field__input text-field-placeholder__input" id="comment-1" type="text" name="comment-1" disabled placeholder="Kommentar" />
                                        <label class="visually-hidden" for="comment-1">Kommentar
                                        </label>
                                    </div>

                                </div>
                                <div class="item-cell__value-list">
                                    <ul class="value-list">
                                        <li class="value-list__item--info">
                                            <div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
                                            <div class="value-list__price">

                                                <div class="price--extra-small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">4.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="value-list__tooltip">
                                                <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
                                                    <span class="visually-hidden">Information</span>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Auftragsnummer</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <a href="#">423870</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Urspr. Pos</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <p>2</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Lieferdatum</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="wysiwyg-content">
                                            <p>05.11.2021</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Retournierbar bis</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="wysiwyg-content">
                                            <p>05.12.2021</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td no-paddings-desktop-only">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Grund</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="select--light is-initialized is-filled-in">
                                            <div class="select__wrapper">
                                                <select class="select__select" id="returnReason1" name="returnReason" required>

                                                    <option value="" disabled>Please choose</option>
                                                    <option value="option1">Falschbestellung</option>
                                                    <option value="option2">Falschlieferung</option>
                                                    <option value="option3">Defekt</option>
                                                </select>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Retournierbar</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="text-with-tooltip-cell">
                                            <div class="text-with-tooltip-cell__text">5</div>
                                            <button type="button" class="info-tooltip__toggle--small">
                                                <span class="visually-hidden"></span>
                                            </button>
                                            <div class="info-tooltip__html" data-info-tooltip-content-html="">
                                                <div class="responsive-table--first-column-mobile-full-height -spacing-medium -not-responsive">
                                                    <div class="responsive-table__container--auto-scrollbar">
                                                        <table class="responsive-table__table" data-responsive-table-filter-context>
                                                            <colgroup>
                                                                <col style="">
                                                                <col style="">
                                                            </colgroup>
                                                            <thead>
                                                                <tr class="responsive-table__tr">
                                                                    <th class="responsive-table__th">
                                                                        Status
                                                                    </th>
                                                                    <th class="responsive-table__th is-right-aligned">
                                                                        Anzahl
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__td-inner-container">
                                                                            <div class="wysiwyg-content">
                                                                                <p>Ursprünglich bestellt</p>
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>10</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__td-inner-container">
                                                                            <div class="wysiwyg-content">
                                                                                <p>Bereits retourniert</p>
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>5</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                    <td class="responsive-table__td" colspan="2">
                                                                        <div class="wysiwyg-content">
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Anzahl</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="quantity-switcher--light">
                                            <button type="button" class="quantity-switcher__minus">
                                                <span class="quantity-switcher__minus-content">–</span>
                                            </button>
                                            <input class="quantity-switcher__quantity" type="number" id="quantity-1-1195379881" min="1" max="99" name="quantity-1" value="5" />
                                            <label class="visually-hidden" for="quantity-1-1195379881">Anzahl</label>
                                            <input type="hidden" name="productId" value="abcdefghijk-123" />
                                            <button type="button" class="quantity-switcher__plus">
                                                <span class="quantity-switcher__plus-content">+</span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Aktion</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <button class="button-icon--icon-regular -icon-trash" type="button" name="test" value="testvalue">
                                            <span class="visually-hidden">Artikel löschen</span>
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td is-left is-select-td">
                            <div class="responsive-table__td-inner-container">
                                <div class="checkbox--light is-initialized is-filled-in">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-select-2" type="checkbox" name="&#x23;" value="1" data-multi-selectable="true" />

                                        <label class="checkbox__label has-empty-label" for="multi-select-2">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td is-top-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title"></div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <a href="#" class="image-cell__image-link">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </a>

                                        <div class="image-cell__specials">
                                            <div class="specials">

                                                <div class="specials--medium-horizontally-vertically  ">
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                        <span class="visually-hidden">Sale</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #000000;">
                                                        <span class="visually-hidden">New</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <h5 class="item-cell__title--with-attributes">
                                    <a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
                                </h5>
                                <div class="attributes--small-bold">
                                    <ul class="attributes__list">
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Art.-Nr.</div>
                                            <div class="attributes__value " title="56.65563">
                                                56.65563
                                            </div>
                                        </li>
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Gruppe</div>
                                            <div class="attributes__value " title="Bosch eBike">
                                                Bosch eBike
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="text-field--light text-field-placeholder--light is-initialized">
                                    <div class="text-field__wrapper text-field-placeholder__wrapper ">
                                        <input class="text-field__input text-field-placeholder__input" id="comment-2" type="text" name="comment-2" disabled placeholder="Kommentar" />
                                        <label class="visually-hidden" for="comment-2">Kommentar
                                        </label>
                                    </div>

                                </div>
                                <div class="item-cell__value-list">
                                    <ul class="value-list">
                                        <li class="value-list__item--info">
                                            <div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
                                            <div class="value-list__price">

                                                <div class="price--extra-small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">4.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="value-list__tooltip">
                                                <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
                                                    <span class="visually-hidden">Information</span>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Auftragsnummer</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <a href="#">423870</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Urspr. Pos</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <p>2</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Lieferdatum</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="wysiwyg-content">
                                            <p>05.11.2021</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Retournierbar bis</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="wysiwyg-content">
                                            <p>05.12.2021</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td no-paddings-desktop-only">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Grund</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="select--light is-initialized is-filled-in">
                                            <div class="select__wrapper">
                                                <select class="select__select" id="returnReason2" name="returnReason" required>

                                                    <option value="" disabled>Please choose</option>
                                                    <option value="option1">Falschbestellung</option>
                                                    <option value="option2">Falschlieferung</option>
                                                    <option value="option3">Defekt</option>
                                                </select>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Retournierbar</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="text-with-tooltip-cell">
                                            <div class="text-with-tooltip-cell__text">5</div>
                                            <button type="button" class="info-tooltip__toggle--small">
                                                <span class="visually-hidden"></span>
                                            </button>
                                            <div class="info-tooltip__html" data-info-tooltip-content-html="">
                                                <div class="responsive-table--first-column-mobile-full-height -spacing-medium -not-responsive">
                                                    <div class="responsive-table__container--auto-scrollbar">
                                                        <table class="responsive-table__table" data-responsive-table-filter-context>
                                                            <colgroup>
                                                                <col style="">
                                                                <col style="">
                                                            </colgroup>
                                                            <thead>
                                                                <tr class="responsive-table__tr">
                                                                    <th class="responsive-table__th">
                                                                        Status
                                                                    </th>
                                                                    <th class="responsive-table__th is-right-aligned">
                                                                        Anzahl
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__td-inner-container">
                                                                            <div class="wysiwyg-content">
                                                                                <p>Ursprünglich bestellt</p>
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>10</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__td-inner-container">
                                                                            <div class="wysiwyg-content">
                                                                                <p>Bereits retourniert</p>
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>5</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                    <td class="responsive-table__td" colspan="2">
                                                                        <div class="wysiwyg-content">
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Anzahl</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="quantity-switcher--light">
                                            <button type="button" class="quantity-switcher__minus">
                                                <span class="quantity-switcher__minus-content">–</span>
                                            </button>
                                            <input class="quantity-switcher__quantity" type="number" id="quantity-1-1348632998" min="1" max="99" name="quantity-1" value="5" />
                                            <label class="visually-hidden" for="quantity-1-1348632998">Anzahl</label>
                                            <input type="hidden" name="productId" value="abcdefghijk-123" />
                                            <button type="button" class="quantity-switcher__plus">
                                                <span class="quantity-switcher__plus-content">+</span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Aktion</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <button class="button-icon--icon-regular -icon-trash" type="button" name="test" value="testvalue">
                                            <span class="visually-hidden">Artikel löschen</span>
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td is-left is-select-td">
                            <div class="responsive-table__td-inner-container">
                                <div class="checkbox--light is-initialized is-filled-in">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-select-3" type="checkbox" name="&#x23;" value="1" data-multi-selectable="true" />

                                        <label class="checkbox__label has-empty-label" for="multi-select-3">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td is-top-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title"></div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <a href="#" class="image-cell__image-link">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </a>

                                        <div class="image-cell__specials">
                                            <div class="specials">

                                                <div class="specials--medium-horizontally-vertically  ">
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                        <span class="visually-hidden">Sale</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #000000;">
                                                        <span class="visually-hidden">New</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <h5 class="item-cell__title--with-attributes">
                                    <a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
                                </h5>
                                <div class="attributes--small-bold">
                                    <ul class="attributes__list">
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Art.-Nr.</div>
                                            <div class="attributes__value " title="56.65563">
                                                56.65563
                                            </div>
                                        </li>
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Gruppe</div>
                                            <div class="attributes__value " title="Bosch eBike">
                                                Bosch eBike
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="text-field--light text-field-placeholder--light is-initialized">
                                    <div class="text-field__wrapper text-field-placeholder__wrapper ">
                                        <input class="text-field__input text-field-placeholder__input" id="comment-3" type="text" name="comment-3" disabled placeholder="Kommentar" />
                                        <label class="visually-hidden" for="comment-3">Kommentar
                                        </label>
                                    </div>

                                </div>
                                <div class="item-cell__value-list">
                                    <ul class="value-list">
                                        <li class="value-list__item--info">
                                            <div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
                                            <div class="value-list__price">

                                                <div class="price--extra-small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">4.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="value-list__tooltip">
                                                <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
                                                    <span class="visually-hidden">Information</span>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Auftragsnummer</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <a href="#">423870</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Urspr. Pos</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <p>2</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Lieferdatum</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="wysiwyg-content">
                                            <p>05.11.2021</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Retournierbar bis</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="wysiwyg-content">
                                            <p>05.12.2021</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td no-paddings-desktop-only">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Grund</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="select--light is-initialized is-filled-in">
                                            <div class="select__wrapper">
                                                <select class="select__select" id="returnReason3" name="returnReason" required>

                                                    <option value="" disabled>Please choose</option>
                                                    <option value="option1">Falschbestellung</option>
                                                    <option value="option2">Falschlieferung</option>
                                                    <option value="option3">Defekt</option>
                                                </select>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Retournierbar</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="text-with-tooltip-cell">
                                            <div class="text-with-tooltip-cell__text">5</div>
                                            <button type="button" class="info-tooltip__toggle--small">
                                                <span class="visually-hidden"></span>
                                            </button>
                                            <div class="info-tooltip__html" data-info-tooltip-content-html="">
                                                <div class="responsive-table--first-column-mobile-full-height -spacing-medium -not-responsive">
                                                    <div class="responsive-table__container--auto-scrollbar">
                                                        <table class="responsive-table__table" data-responsive-table-filter-context>
                                                            <colgroup>
                                                                <col style="">
                                                                <col style="">
                                                            </colgroup>
                                                            <thead>
                                                                <tr class="responsive-table__tr">
                                                                    <th class="responsive-table__th">
                                                                        Status
                                                                    </th>
                                                                    <th class="responsive-table__th is-right-aligned">
                                                                        Anzahl
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__td-inner-container">
                                                                            <div class="wysiwyg-content">
                                                                                <p>Ursprünglich bestellt</p>
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>10</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__td-inner-container">
                                                                            <div class="wysiwyg-content">
                                                                                <p>Bereits retourniert</p>
                                                                            </div>
                                                                        </div>

                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>5</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                    <td class="responsive-table__td" colspan="2">
                                                                        <div class="wysiwyg-content">
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Anzahl</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="quantity-switcher--light">
                                            <button type="button" class="quantity-switcher__minus">
                                                <span class="quantity-switcher__minus-content">–</span>
                                            </button>
                                            <input class="quantity-switcher__quantity" type="number" id="quantity-1-436731738" min="1" max="99" name="quantity-1" value="5" />
                                            <label class="visually-hidden" for="quantity-1-436731738">Anzahl</label>
                                            <input type="hidden" name="productId" value="abcdefghijk-123" />
                                            <button type="button" class="quantity-switcher__plus">
                                                <span class="quantity-switcher__plus-content">+</span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Aktion</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <button class="button-icon--icon-regular -icon-trash" type="button" name="test" value="testvalue">
                                            <span class="visually-hidden">Artikel löschen</span>
                                        </button>
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                        <td class="responsive-table__td" colspan="11">
                            <div class="wysiwyg-content">
                                <p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% include '@SharedComponents/modules/offag-returns/components/returns-list-table/returns-list-table.twig' %}
{
  "tableHeader": {
    "heading": {
      "level": "4",
      "title": "Artikel",
      "counter": "12"
    },
    "headerButtons": [
      {
        "variant": "icon-text-regular",
        "title": "Retouren scannen",
        "icon": "scan",
        "type": "button",
        "role": "button",
        "name": "scan",
        "value": "testvalue"
      },
      {
        "variant": "icon-text-regular",
        "title": "CSV Importieren",
        "icon": "import",
        "type": "button",
        "role": "button",
        "name": "refresh",
        "value": "true"
      },
      {
        "variant": "icon-text-regular",
        "title": "Retourenliste leeren",
        "icon": "trash",
        "type": "button",
        "role": "button",
        "name": "refresh",
        "value": "true"
      }
    ]
  },
  "table": {
    "multiselectDropdown": {
      "label": " ",
      "contentWidth": "300px",
      "thinToggleArrow": true
    },
    "moveItemsDropdownContent": [
      {
        "name": "Auswahl löschen"
      }
    ],
    "noMatchMessage": "Keine Ergebnisse gefunden",
    "autoScrollbar": true,
    "search": {
      "searchField": {
        "variant": "light",
        "id": "returns-list-table-search",
        "name": "returns-list-table-search",
        "label": "Suche",
        "required": true,
        "value": "",
        "disabled": false,
        "error": "",
        "type": "text",
        "autocomplete": "",
        "attributes": {
          "data-responsive-table-search": "true"
        }
      },
      "offset": "none"
    },
    "firstColumnMobileFullHeight": true,
    "columnDefs": [
      {
        "name": "multiSelect",
        "type": "checkbox",
        "path": "modules/shared/components/form-components/checkbox/checkbox",
        "checkbox": {
          "variant": "light",
          "id": "multi-selection-checkbox",
          "name": "#"
        }
      },
      {
        "name": "image",
        "width": "72px"
      },
      {
        "label": "Artikel",
        "name": "item",
        "customResponsive": true
      },
      {
        "label": "Auftragsnummer",
        "name": "orderNo"
      },
      {
        "label": "Urspr. Pos",
        "name": "originalPosition"
      },
      {
        "label": "Lieferdatum",
        "name": "deliveryDate",
        "preventWrap": true
      },
      {
        "label": "Retournierbar bis",
        "name": "returnDate",
        "preventWrap": true
      },
      {
        "label": "Grund",
        "name": "reason",
        "minWidth": "180px"
      },
      {
        "label": "Retournierbar",
        "name": "returnable",
        "thClass": "is-right-aligned"
      },
      {
        "label": "Anzahl",
        "name": "quantity",
        "width": "160px"
      },
      {
        "label": "Aktion",
        "name": "action",
        "width": "64px",
        "thClass": "is-hidden-on-desktop"
      }
    ],
    "rowData": [
      {
        "multiSelect": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-left is-select-td",
          "data": {
            "id": "multi-select-1",
            "variant": "light",
            "name": "#",
            "required": false,
            "disabled": false,
            "checked": false,
            "value": "1",
            "attributes": {
              "data-multi-selectable": "true"
            }
          }
        },
        "image": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/image-cell/image-cell",
          "tdClass": "is-top-aligned",
          "data": {
            "href": "#",
            "image": {
              "src": "/example-assets/images/responsive-table/thumb.png",
              "src2x": "/example-assets/images/responsive-table/thumb.png",
              "alt": "Alt",
              "title": "Title"
            },
            "specials": {
              "variant": "medium-horizontally-vertically",
              "items": [
                {
                  "value": "Sale",
                  "color": "#e30a24",
                  "icon": "/example-assets/images/specials/sale.svg"
                },
                {
                  "value": "New",
                  "color": "#000000",
                  "icon": "/example-assets/images/specials/new.svg"
                }
              ]
            }
          }
        },
        "item": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/item-cell/item-cell",
          "data": {
            "heading": {
              "level": "5"
            },
            "title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit",
            "href": "#",
            "attributes": {
              "variant": "small-bold",
              "attributes": [
                {
                  "type": "text",
                  "name": "Art.-Nr.",
                  "value": "56.65563"
                },
                {
                  "type": "text",
                  "name": "Gruppe",
                  "value": "Bosch eBike"
                }
              ]
            },
            "textField": {
              "variant": "light",
              "id": "comment-1",
              "name": "comment-1",
              "label": "Kommentar",
              "required": false,
              "value": "",
              "disabled": true,
              "type": "text",
              "autocomplete": "",
              "error": "",
              "helper": ""
            },
            "valueList": {
              "list": [
                {
                  "type": "info",
                  "label": "Vorgezogene Recyclinggebühren",
                  "price": {
                    "variant": "extra-small",
                    "labels": {
                      "from": "ab",
                      "instead": "statt"
                    },
                    "price": {
                      "currency": "CHF",
                      "price": "4.00",
                      "note": ""
                    }
                  },
                  "tooltip": {
                    "variant": "small",
                    "title": "Information",
                    "content": "Für das Recycling."
                  }
                }
              ]
            }
          }
        },
        "orderNo": {
          "type": "template",
          "path": "modules/offag-returns/components/cell-components/order-number-cell/order-number-cell",
          "data": {
            "content": "<a href=\"#\">423870</a>"
          }
        },
        "originalPosition": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "tdClass": "is-right-aligned",
          "data": {
            "content": "<p>2</p>"
          }
        },
        "deliveryDate": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>05.11.2021</p>"
          }
        },
        "returnDate": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>05.12.2021</p>"
          }
        },
        "reason": {
          "type": "template",
          "path": "modules/shared/components/form-components/select/select",
          "tdClass": "no-paddings-desktop-only",
          "data": {
            "variant": "light",
            "id": "returnReason1",
            "name": "returnReason",
            "choose": "Please choose",
            "required": true,
            "disabled": false,
            "selected": "Falschbestellung",
            "options": {
              "option1": "Falschbestellung",
              "option2": "Falschlieferung",
              "option3": "Defekt"
            }
          }
        },
        "returnable": {
          "type": "template",
          "path": "modules/shared-account/components/cell-components/text-with-tooltip-cell/text-with-tooltip-cell",
          "tdClass": "is-right-aligned",
          "data": {
            "content": "5",
            "tooltipData": {
              "variant": "small",
              "html": true,
              "tableContent": {
                "spacingVariant": "medium",
                "notResponsive": true,
                "firstColumnMobileFullHeight": true,
                "columnDefs": [
                  {
                    "label": "Status",
                    "name": "label"
                  },
                  {
                    "label": "Anzahl",
                    "name": "value",
                    "thClass": "is-right-aligned"
                  }
                ],
                "rowData": [
                  {
                    "label": {
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p>Ursprünglich bestellt</p>"
                      }
                    },
                    "value": {
                      "tdClass": "is-right-aligned",
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p><strong>10</strong></p>"
                      }
                    }
                  },
                  {
                    "label": {
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p>Bereits retourniert</p>"
                      }
                    },
                    "value": {
                      "tdClass": "is-right-aligned",
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p><strong>5</strong></p>"
                      }
                    }
                  }
                ]
              }
            }
          }
        },
        "quantity": {
          "type": "template",
          "path": "modules/shared/components/form-components/quantity-switcher/quantity-switcher",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "light",
            "quantity": {
              "id": "quantity-1",
              "name": "quantity-1",
              "label": "Anzahl",
              "min": "1",
              "max": "99",
              "value": "5",
              "required": false,
              "disabled": false,
              "autocomplete": ""
            },
            "identifier": {
              "name": "productId",
              "value": "abcdefghijk-123"
            }
          }
        },
        "action": {
          "type": "template",
          "path": "modules/shared/components/button-icon/button-icon",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "icon-regular",
            "title": "Artikel löschen",
            "icon": "trash",
            "type": "button",
            "role": "button",
            "name": "test",
            "value": "testvalue"
          }
        }
      },
      {
        "multiSelect": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-left is-select-td",
          "data": {
            "id": "multi-select-2",
            "variant": "light",
            "name": "#",
            "required": false,
            "disabled": false,
            "checked": false,
            "value": "1",
            "attributes": {
              "data-multi-selectable": "true"
            }
          }
        },
        "image": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/image-cell/image-cell",
          "tdClass": "is-top-aligned",
          "data": {
            "href": "#",
            "image": {
              "src": "/example-assets/images/responsive-table/thumb.png",
              "src2x": "/example-assets/images/responsive-table/thumb.png",
              "alt": "Alt",
              "title": "Title"
            },
            "specials": {
              "variant": "medium-horizontally-vertically",
              "items": [
                {
                  "value": "Sale",
                  "color": "#e30a24",
                  "icon": "/example-assets/images/specials/sale.svg"
                },
                {
                  "value": "New",
                  "color": "#000000",
                  "icon": "/example-assets/images/specials/new.svg"
                }
              ]
            }
          }
        },
        "item": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/item-cell/item-cell",
          "data": {
            "heading": {
              "level": "5"
            },
            "title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit",
            "href": "#",
            "attributes": {
              "variant": "small-bold",
              "attributes": [
                {
                  "type": "text",
                  "name": "Art.-Nr.",
                  "value": "56.65563"
                },
                {
                  "type": "text",
                  "name": "Gruppe",
                  "value": "Bosch eBike"
                }
              ]
            },
            "textField": {
              "variant": "light",
              "id": "comment-2",
              "name": "comment-2",
              "label": "Kommentar",
              "required": false,
              "value": "",
              "disabled": true,
              "type": "text",
              "autocomplete": "",
              "error": "",
              "helper": ""
            },
            "valueList": {
              "list": [
                {
                  "type": "info",
                  "label": "Vorgezogene Recyclinggebühren",
                  "price": {
                    "variant": "extra-small",
                    "labels": {
                      "from": "ab",
                      "instead": "statt"
                    },
                    "price": {
                      "currency": "CHF",
                      "price": "4.00",
                      "note": ""
                    }
                  },
                  "tooltip": {
                    "variant": "small",
                    "title": "Information",
                    "content": "Für das Recycling."
                  }
                }
              ]
            }
          }
        },
        "orderNo": {
          "type": "template",
          "path": "modules/offag-returns/components/cell-components/order-number-cell/order-number-cell",
          "data": {
            "content": "<a href=\"#\">423870</a>"
          }
        },
        "originalPosition": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "tdClass": "is-right-aligned",
          "data": {
            "content": "<p>2</p>"
          }
        },
        "deliveryDate": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>05.11.2021</p>"
          }
        },
        "returnDate": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>05.12.2021</p>"
          }
        },
        "reason": {
          "type": "template",
          "path": "modules/shared/components/form-components/select/select",
          "tdClass": "no-paddings-desktop-only",
          "data": {
            "variant": "light",
            "id": "returnReason2",
            "name": "returnReason",
            "choose": "Please choose",
            "required": true,
            "disabled": false,
            "selected": "Falschbestellung",
            "options": {
              "option1": "Falschbestellung",
              "option2": "Falschlieferung",
              "option3": "Defekt"
            }
          }
        },
        "returnable": {
          "type": "template",
          "path": "modules/shared-account/components/cell-components/text-with-tooltip-cell/text-with-tooltip-cell",
          "tdClass": "is-right-aligned",
          "data": {
            "content": "5",
            "tooltipData": {
              "variant": "small",
              "html": true,
              "tableContent": {
                "spacingVariant": "medium",
                "notResponsive": true,
                "firstColumnMobileFullHeight": true,
                "columnDefs": [
                  {
                    "label": "Status",
                    "name": "label"
                  },
                  {
                    "label": "Anzahl",
                    "name": "value",
                    "thClass": "is-right-aligned"
                  }
                ],
                "rowData": [
                  {
                    "label": {
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p>Ursprünglich bestellt</p>"
                      }
                    },
                    "value": {
                      "tdClass": "is-right-aligned",
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p><strong>10</strong></p>"
                      }
                    }
                  },
                  {
                    "label": {
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p>Bereits retourniert</p>"
                      }
                    },
                    "value": {
                      "tdClass": "is-right-aligned",
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p><strong>5</strong></p>"
                      }
                    }
                  }
                ]
              }
            }
          }
        },
        "quantity": {
          "type": "template",
          "path": "modules/shared/components/form-components/quantity-switcher/quantity-switcher",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "light",
            "quantity": {
              "id": "quantity-1",
              "name": "quantity-1",
              "label": "Anzahl",
              "min": "1",
              "max": "99",
              "value": "5",
              "required": false,
              "disabled": false,
              "autocomplete": ""
            },
            "identifier": {
              "name": "productId",
              "value": "abcdefghijk-123"
            }
          }
        },
        "action": {
          "type": "template",
          "path": "modules/shared/components/button-icon/button-icon",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "icon-regular",
            "title": "Artikel löschen",
            "icon": "trash",
            "type": "button",
            "role": "button",
            "name": "test",
            "value": "testvalue"
          }
        }
      },
      {
        "multiSelect": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-left is-select-td",
          "data": {
            "id": "multi-select-3",
            "variant": "light",
            "name": "#",
            "required": false,
            "disabled": false,
            "checked": false,
            "value": "1",
            "attributes": {
              "data-multi-selectable": "true"
            }
          }
        },
        "image": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/image-cell/image-cell",
          "tdClass": "is-top-aligned",
          "data": {
            "href": "#",
            "image": {
              "src": "/example-assets/images/responsive-table/thumb.png",
              "src2x": "/example-assets/images/responsive-table/thumb.png",
              "alt": "Alt",
              "title": "Title"
            },
            "specials": {
              "variant": "medium-horizontally-vertically",
              "items": [
                {
                  "value": "Sale",
                  "color": "#e30a24",
                  "icon": "/example-assets/images/specials/sale.svg"
                },
                {
                  "value": "New",
                  "color": "#000000",
                  "icon": "/example-assets/images/specials/new.svg"
                }
              ]
            }
          }
        },
        "item": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/item-cell/item-cell",
          "data": {
            "heading": {
              "level": "5"
            },
            "title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit",
            "href": "#",
            "attributes": {
              "variant": "small-bold",
              "attributes": [
                {
                  "type": "text",
                  "name": "Art.-Nr.",
                  "value": "56.65563"
                },
                {
                  "type": "text",
                  "name": "Gruppe",
                  "value": "Bosch eBike"
                }
              ]
            },
            "textField": {
              "variant": "light",
              "id": "comment-3",
              "name": "comment-3",
              "label": "Kommentar",
              "required": false,
              "value": "",
              "disabled": true,
              "type": "text",
              "autocomplete": "",
              "error": "",
              "helper": ""
            },
            "valueList": {
              "list": [
                {
                  "type": "info",
                  "label": "Vorgezogene Recyclinggebühren",
                  "price": {
                    "variant": "extra-small",
                    "labels": {
                      "from": "ab",
                      "instead": "statt"
                    },
                    "price": {
                      "currency": "CHF",
                      "price": "4.00",
                      "note": ""
                    }
                  },
                  "tooltip": {
                    "variant": "small",
                    "title": "Information",
                    "content": "Für das Recycling."
                  }
                }
              ]
            }
          }
        },
        "orderNo": {
          "type": "template",
          "path": "modules/offag-returns/components/cell-components/order-number-cell/order-number-cell",
          "data": {
            "content": "<a href=\"#\">423870</a>"
          }
        },
        "originalPosition": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "tdClass": "is-right-aligned",
          "data": {
            "content": "<p>2</p>"
          }
        },
        "deliveryDate": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>05.11.2021</p>"
          }
        },
        "returnDate": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>05.12.2021</p>"
          }
        },
        "reason": {
          "type": "template",
          "path": "modules/shared/components/form-components/select/select",
          "tdClass": "no-paddings-desktop-only",
          "data": {
            "variant": "light",
            "id": "returnReason3",
            "name": "returnReason",
            "choose": "Please choose",
            "required": true,
            "disabled": false,
            "selected": "Falschbestellung",
            "options": {
              "option1": "Falschbestellung",
              "option2": "Falschlieferung",
              "option3": "Defekt"
            }
          }
        },
        "returnable": {
          "type": "template",
          "path": "modules/shared-account/components/cell-components/text-with-tooltip-cell/text-with-tooltip-cell",
          "tdClass": "is-right-aligned",
          "data": {
            "content": "5",
            "tooltipData": {
              "variant": "small",
              "html": true,
              "tableContent": {
                "spacingVariant": "medium",
                "notResponsive": true,
                "firstColumnMobileFullHeight": true,
                "columnDefs": [
                  {
                    "label": "Status",
                    "name": "label"
                  },
                  {
                    "label": "Anzahl",
                    "name": "value",
                    "thClass": "is-right-aligned"
                  }
                ],
                "rowData": [
                  {
                    "label": {
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p>Ursprünglich bestellt</p>"
                      }
                    },
                    "value": {
                      "tdClass": "is-right-aligned",
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p><strong>10</strong></p>"
                      }
                    }
                  },
                  {
                    "label": {
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p>Bereits retourniert</p>"
                      }
                    },
                    "value": {
                      "tdClass": "is-right-aligned",
                      "type": "template",
                      "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
                      "data": {
                        "content": "<p><strong>5</strong></p>"
                      }
                    }
                  }
                ]
              }
            }
          }
        },
        "quantity": {
          "type": "template",
          "path": "modules/shared/components/form-components/quantity-switcher/quantity-switcher",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "light",
            "quantity": {
              "id": "quantity-1",
              "name": "quantity-1",
              "label": "Anzahl",
              "min": "1",
              "max": "99",
              "value": "5",
              "required": false,
              "disabled": false,
              "autocomplete": ""
            },
            "identifier": {
              "name": "productId",
              "value": "abcdefghijk-123"
            }
          }
        },
        "action": {
          "type": "template",
          "path": "modules/shared/components/button-icon/button-icon",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "icon-regular",
            "title": "Artikel löschen",
            "icon": "trash",
            "type": "button",
            "role": "button",
            "name": "test",
            "value": "testvalue"
          }
        }
      }
    ]
  }
}
  • Content:
    import ReturnsListTable, {selector as sel} from 'cando-cx-components-library/components/modules/offag-returns/components/returns-list-table/returns-list-table';
    
    export default ReturnsListTable;
    export const selector = sel;
  • URL: /components/raw/returns-list-table/returns-list-table.js
  • Filesystem Path: src/components/modules/offag-returns/components/returns-list-table/returns-list-table.js
  • Size: 223 Bytes

No notes defined.