<div class="responsive-table -spacing-large">
<div class="responsive-table__container--auto-scrollbar">
<table class="responsive-table__table" data-responsive-table-filter-context>
<colgroup>
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
Bestellnummer
</th>
<th class="responsive-table__th">
Typ
</th>
<th class="responsive-table__th">
Kunden-Bestellnummer
</th>
<th class="responsive-table__th">
Bestelldatum
</th>
<th class="responsive-table__th">
Status
</th>
<th class="responsive-table__th is-right-aligned">
Betrag
</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">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--grey">Offen</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--amber">In Bearbeitung</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--red">Teilgeliefert</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--green">Geliefert</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--violet">Storniert</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--blue">Versendet</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--dark-grey">unknown</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<a href="#">98765432</a>
</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">Typ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="image ">
<picture>
<img src="/example-assets/images/cart-management-table/cart-type-customer.svg" class="image__img orders-table__image is-loading" alt="Endkunde" title="Endkunde" onload="this.classList.remove('is-loading')" />
</picture>
</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">Kunden-Bestellnummer</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>423870</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">Bestelldatum</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.03.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">Status</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="status">
<span class="status--yellow">In Freigabe</span>
</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">Betrag</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="price--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">325.90</div>
</div>
</div>
</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">Aktion</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="ellipsis-actions">
<button type="button" class="ellipsis-actions__toggle">
<span class="visually-hidden">More actions</span>
</button>
<div class="info-tooltip__html" data-info-tooltip-content-html>
<ul class="ellipsis-actions__list">
<li class="ellipsis-actions__list-item">
<button type="button" class="ellipsis-actions__link">Details</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Etiketten drucken</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Stornieren</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="7">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Bestellungen gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% include '@SharedComponents/modules/b2b-account/components/orders-table/orders-table.twig' %}
{
"table": {
"noMatchMessage": "Keine Bestellungen gefunden",
"autoScrollbar": true,
"columnDefs": [
{
"label": "Bestellnummer",
"name": "orderNo"
},
{
"label": "Typ",
"name": "type"
},
{
"label": "Kunden-Bestellnummer",
"name": "customerOrderNo"
},
{
"label": "Bestelldatum",
"name": "orderDate"
},
{
"label": "Status",
"name": "status"
},
{
"label": "Betrag",
"name": "amount",
"thClass": "is-right-aligned"
},
{
"label": "Aktion",
"name": "action",
"thClass": "is-hidden-on-desktop"
}
],
"rowData": [
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "grey",
"label": "Offen"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
},
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "amber",
"label": "In Bearbeitung"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
},
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "red",
"label": "Teilgeliefert"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
},
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "green",
"label": "Geliefert"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
},
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "violet",
"label": "Storniert"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
},
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "blue",
"label": "Versendet"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
},
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "dark-grey",
"label": "unknown"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
},
{
"orderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<a href=\"#\">98765432</a>"
}
},
"type": {
"type": "template",
"path": "modules/shared/components/image/image",
"data": {
"imageClass": "orders-table__image",
"image": {
"src": "/example-assets/images/cart-management-table/cart-type-customer.svg",
"alt": "Endkunde",
"title": "Endkunde"
}
}
},
"customerOrderNo": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>423870</p>"
}
},
"orderDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.03.2021</p>"
}
},
"status": {
"type": "template",
"path": "modules/shared-account/components/status/status",
"data": {
"variant": "yellow",
"label": "In Freigabe"
}
},
"amount": {
"type": "template",
"path": "modules/shared-product/components/price/price",
"tdClass": "is-right-aligned",
"data": {
"variant": "small",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "325.90",
"note": ""
}
}
},
"action": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Details"
}
},
{
"link": {
"title": "Etiketten drucken",
"href": "#"
}
},
{
"link": {
"title": "Stornieren",
"href": "#"
}
}
]
}
}
}
]
}
}
import './orders-table.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-account/components/orders-table/orders-table";
No notes defined.