<div class="responsive-table -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="responsive-table-search" type="text" name="responsive-table-search" required data-responsive-table-search="true" placeholder="Suche" />
<label class="visually-hidden" for="responsive-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="">
<col style="">
<col style="">
<col style="">
<col style="">
<col style="">
</colgroup>
<thead>
<tr class="responsive-table__tr">
<th class="responsive-table__th">
Warenkorbname
</th>
<th class="responsive-table__th">
Erstellt am
</th>
<th class="responsive-table__th">
Geändert am
</th>
<th class="responsive-table__th">
Geändert von
</th>
<th class="responsive-table__th">
Artikel
</th>
<th class="responsive-table__th is-right-aligned">
Warenwert
</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">Warenkorbname</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Endkunde X</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">Erstellt am</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>17.06.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">Geändert am</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.06.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">Geändert von</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Max Mustermann</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">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>15</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">Warenwert</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">119.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">Checkout</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Umbenennen</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Löschen</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">Warenkorbname</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Endkunde X</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">Erstellt am</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>17.06.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">Geändert am</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.06.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">Geändert von</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Max Mustermann</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">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>15</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">Warenwert</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">119.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">Checkout</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Umbenennen</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Löschen</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">Warenkorbname</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Endkunde X</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">Erstellt am</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>17.06.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">Geändert am</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>18.06.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">Geändert von</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>Max Mustermann</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">Artikel</div>
</div>
<div class="responsive-table__mobile-column">
<div class="responsive-table__td-inner-container">
<div class="wysiwyg-content">
<p>15</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">Warenwert</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">119.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">Checkout</button>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Umbenennen</a>
</li>
<li class="ellipsis-actions__list-item">
<a href="#" class="ellipsis-actions__link">Löschen</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 Ergebnisse gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% include '@SharedComponents/modules/shared/components/responsive-table/responsive-table.twig' %}
{
"noMatchMessage": "Keine Ergebnisse gefunden",
"search": {
"searchField": {
"variant": "light",
"id": "responsive-table-search",
"name": "responsive-table-search",
"label": "Suche",
"required": true,
"value": "",
"disabled": false,
"error": "",
"type": "text",
"autocomplete": "",
"attributes": {
"data-responsive-table-search": "true"
}
},
"offset": "none"
},
"columnDefs": [
{
"label": "Warenkorbname",
"name": "name"
},
{
"label": "Erstellt am",
"name": "creationDate"
},
{
"label": "Geändert am",
"name": "modificationDate"
},
{
"label": "Geändert von",
"name": "modifiedBy"
},
{
"label": "Artikel",
"name": "count"
},
{
"label": "Warenwert",
"name": "amount",
"thClass": "is-right-aligned"
},
{
"label": "Aktion",
"name": "more",
"thClass": "is-hidden-on-desktop"
}
],
"rowData": [
{
"name": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Endkunde X</p>"
}
},
"creationDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>17.06.2021</p>"
}
},
"modificationDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.06.2021</p>"
}
},
"modifiedBy": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Max Mustermann</p>"
}
},
"count": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>15</p>"
}
},
"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": "119.90",
"note": ""
}
}
},
"more": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Checkout"
}
},
{
"link": {
"title": "Umbenennen",
"href": "#"
}
},
{
"link": {
"title": "Löschen",
"href": "#"
}
}
]
}
}
},
{
"name": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Endkunde X</p>"
}
},
"creationDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>17.06.2021</p>"
}
},
"modificationDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.06.2021</p>"
}
},
"modifiedBy": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Max Mustermann</p>"
}
},
"count": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>15</p>"
}
},
"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": "119.90",
"note": ""
}
}
},
"more": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Checkout"
}
},
{
"link": {
"title": "Umbenennen",
"href": "#"
}
},
{
"link": {
"title": "Löschen",
"href": "#"
}
}
]
}
}
},
{
"name": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Endkunde X</p>"
}
},
"creationDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>17.06.2021</p>"
}
},
"modificationDate": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>18.06.2021</p>"
}
},
"modifiedBy": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>Max Mustermann</p>"
}
},
"count": {
"type": "template",
"path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
"data": {
"content": "<p>15</p>"
}
},
"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": "119.90",
"note": ""
}
}
},
"more": {
"type": "template",
"path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
"tdClass": "is-right-aligned",
"data": {
"toggle": "More actions",
"list": [
{
"button": {
"title": "Checkout"
}
},
{
"link": {
"title": "Umbenennen",
"href": "#"
}
},
{
"link": {
"title": "Löschen",
"href": "#"
}
}
]
}
}
}
]
}
import './responsive-table.scss';
import ResponsiveTable, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/responsive-table/responsive-table';
export default ResponsiveTable;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/responsive-table/responsive-table";
No notes defined.