<div class="wishlist-management-table">
    <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="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="">
                </colgroup>
                <thead>
                    <tr class="responsive-table__tr">
                        <th class="responsive-table__th">
                            Listenname
                        </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">
                            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">
                            <div class="responsive-table__td-inner-container">
                                <button class="wishlist-management-table__link">
                                    <span class="wishlist-management-table__link-name">Zubehör</span>
                                </button>

                            </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">Anzahl</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">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">
                                                        <a href="#" class="ellipsis-actions__link">Bearbeiten</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 is-active">
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <button class="wishlist-management-table__link">
                                    <span class="wishlist-management-table__link-name">Bikeschuhe</span>
                                </button>

                            </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">Anzahl</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">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">
                                                        <a href="#" class="ellipsis-actions__link">Bearbeiten</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <button class="wishlist-management-table__link">
                                    <span class="wishlist-management-table__link-name">Laufschuhe</span>
                                </button>

                            </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">Anzahl</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">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">
                                                        <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="6">
                            <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/b2b-wishlist/components/wishlist-management-table/wishlist-management-table.twig' %}
{
  "table": {
    "noMatchMessage": "Keine Ergebnisse gefunden",
    "autoScrollbar": true,
    "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"
    },
    "firstColumnMobileFullHeight": true,
    "columnDefs": [
      {
        "label": "Listenname",
        "name": "name"
      },
      {
        "label": "Erstellt am",
        "name": "creationDate"
      },
      {
        "label": "Geändert am",
        "name": "modificationDate"
      },
      {
        "label": "Geändert von",
        "name": "modifiedBy"
      },
      {
        "label": "Anzahl",
        "name": "count"
      },
      {
        "label": "Aktion",
        "name": "more",
        "thClass": "is-hidden-on-desktop"
      }
    ],
    "rowData": [
      {
        "name": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "name": "Zubehör"
          }
        },
        "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>"
          }
        },
        "more": {
          "type": "template",
          "path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
          "tdClass": "is-right-aligned",
          "data": {
            "toggle": "More actions",
            "list": [
              {
                "link": {
                  "title": "Bearbeiten",
                  "href": "#"
                }
              },
              {
                "link": {
                  "title": "Löschen",
                  "href": "#"
                }
              }
            ]
          }
        }
      },
      {
        "rowActive": true,
        "name": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "name": "Bikeschuhe"
          }
        },
        "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>"
          }
        },
        "more": {
          "type": "template",
          "path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
          "tdClass": "is-right-aligned",
          "data": {
            "toggle": "More actions",
            "list": [
              {
                "link": {
                  "title": "Bearbeiten",
                  "href": "#"
                }
              }
            ]
          }
        }
      },
      {
        "name": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "name": "Laufschuhe"
          }
        },
        "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>"
          }
        },
        "more": {
          "type": "template",
          "path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
          "tdClass": "is-right-aligned",
          "data": {
            "toggle": "More actions",
            "list": [
              {
                "link": {
                  "title": "Umbenennen",
                  "href": "#"
                }
              },
              {
                "link": {
                  "title": "Löschen",
                  "href": "#"
                }
              }
            ]
          }
        }
      }
    ]
  }
}
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/b2b-wishlist/components/wishlist-management-table/wishlist-management-table";
  • URL: /components/raw/wishlist-management-table/wishlist-management-table.scss
  • Filesystem Path: src/components/modules/b2b-wishlist/components/wishlist-management-table/wishlist-management-table.scss
  • Size: 158 Bytes

No notes defined.