<div class="change-delivery-address-table">
<div class="table-header">
<div class="table-header__column--title">
<h4 class="table-header__title">Bitte wählen Sie eine Lieferadresse</h4>
</div>
<div class="table-header__column--buttons">
<button class="button-icon--icon-text-regular -icon-edit" type="button" name="edit" value="true">
Lieferadressen bearbeiten
</button>
</div>
</div>
<div class="responsive-table -spacing-large">
<div class="table-search">
<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="responsive-table-search" type="text" name="responsive-table-search" required data-responsive-table-search="true" placeholder="Suche in Lieferadressen" />
<label class="visually-hidden" for="responsive-table-search">Suche in Lieferadressen</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="">
<col style="">
<col style="">
<col style="">
<col style="">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
Firma
</th>
<th class="responsive-table__th">
Kontaktperson
</th>
<th class="responsive-table__th">
Strasse
</th>
<th class="responsive-table__th">
PLZ
</th>
<th class="responsive-table__th">
Ort
</th>
<th class="responsive-table__th">
</th>
</tr>
</thead>
<tbody>
<tr class="responsive-table__tr change-delivery-address-table__row">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Firma</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Hals & Beinbruch AG</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">Kontaktperson</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Daniel Downhill</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">Strasse</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Singletrail 10</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">PLZ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>6436</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">Ort</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Bisisthal</p>
</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"></div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="change-delivery-address-table__arrow-right-button">
<button class="button--primary" type="submit"> <span class="change-delivery-address-table__button">
<span class="visually-hidden"></span>
<span class="change-delivery-address-table__button-icon"></span>
</span>
</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr change-delivery-address-table__row">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Firma</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Sportbahnen Kerenzerberg GmbH</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">Kontaktperson</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Beik Schopp</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">Strasse</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Talalpstrasse 15</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">PLZ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>8757</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">Ort</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Filzbach</p>
</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"></div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="change-delivery-address-table__arrow-right-button">
<button class="button--primary" type="submit"> <span class="change-delivery-address-table__button">
<span class="visually-hidden"></span>
<span class="change-delivery-address-table__button-icon"></span>
</span>
</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr change-delivery-address-table__row">
<td class="responsive-table__td">
<div class="responsive-table__mobile-container">
<div class="responsive-table__mobile-column">
<div class="responsive-table__mobile-column-title">Firma</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Suicidal Tendencies AG</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">Kontaktperson</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Gips Kopf</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">Strasse</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Im Schädeltrauma 24</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">PLZ</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>8003</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">Ort</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p> Zürich</p>
</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"></div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="change-delivery-address-table__arrow-right-button">
<button class="button--primary" type="submit"> <span class="change-delivery-address-table__button">
<span class="visually-hidden"></span>
<span class="change-delivery-address-table__button-icon"></span>
</span>
</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
<td class="responsive-table__td" colspan="6">
<div class="wysiwyg-content">
<p class="responsive-table__no-match">Keine Lieferadressen gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
{% include '@SharedComponents/modules/b2b-checkout/components/change-delivery-address-table/change-delivery-address-table.twig' %}
{
"tableHeader": {
"heading": {
"level": "4",
"title": "Bitte wählen Sie eine Lieferadresse"
},
"headerButtons": [
{
"variant": "icon-text-regular",
"title": "Lieferadressen bearbeiten",
"icon": "edit",
"type": "button",
"role": "button",
"name": "edit",
"value": "true"
}
]
},
"table": {
"noMatchMessage": "Keine Lieferadressen gefunden",
"autoScrollbar": true,
"search": {
"searchField": {
"variant": "light",
"id": "responsive-table-search",
"name": "responsive-table-search",
"label": "Suche in Lieferadressen",
"required": true,
"value": "",
"disabled": false,
"error": "",
"type": "text",
"autocomplete": "",
"attributes": {
"data-responsive-table-search": "true"
}
}
},
"columnDefs": [
{
"label": "Firma",
"name": "companyName"
},
{
"label": "Kontaktperson",
"name": "contactPersonName"
},
{
"label": "Strasse",
"name": "street"
},
{
"label": "PLZ",
"name": "postalCode"
},
{
"label": "Ort",
"name": "city"
},
{
"name": "action"
}
],
"rowData": [
{
"rowClass": "change-delivery-address-table__row",
"companyName": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Hals & Beinbruch AG</p>"
}
},
"contactPersonName": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Daniel Downhill</p>"
}
},
"street": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Singletrail 10</p>"
}
},
"postalCode": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>6436</p>"
}
},
"city": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Bisisthal</p>"
}
},
"action": {
"type": "text",
"tdClass": "is-right-aligned",
"data": {
"variant": "primary",
"type": "button",
"disabled": false
}
}
},
{
"rowClass": "change-delivery-address-table__row",
"companyName": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Sportbahnen Kerenzerberg GmbH</p>"
}
},
"contactPersonName": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Beik Schopp</p>"
}
},
"street": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Talalpstrasse 15</p>"
}
},
"postalCode": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>8757</p>"
}
},
"city": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Filzbach</p>"
}
},
"action": {
"type": "text",
"tdClass": "is-right-aligned",
"data": {
"variant": "primary",
"type": "button",
"disabled": false
}
}
},
{
"rowClass": "change-delivery-address-table__row",
"companyName": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Suicidal Tendencies AG</p>"
}
},
"contactPersonName": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Gips Kopf</p>"
}
},
"street": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Im Schädeltrauma 24</p>"
}
},
"postalCode": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>8003</p>"
}
},
"city": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p> Zürich</p>"
}
},
"action": {
"type": "text",
"tdClass": "is-right-aligned",
"data": {
"variant": "primary",
"type": "button",
"disabled": false
}
}
}
]
}
}
import './change-delivery-address-table.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-checkout/components/change-delivery-address-table/change-delivery-address-table";
No notes defined.