Contao 5.x Elementtyp Tabelle erweitern

Halli hallo, ich bräuchte mal einen Schubser in die richtige Richtung.

Ich möchte das CE Table so erweitern, dass das Table Tag immer eine bestimmte klasse bekommt UND, dass noch ein DIV um das TABLE gewrapped wird.

Im Backend steht, dass content_element/table [ContaoCore]
genutzt wird.

Ich habe also ein neues Template erstellt und im Ordner templates liegt jetzt:
content_element
table.html.twig

da habe ich folgendes rein geschrieben:

PHP-Code:

---

{% extends "@Contao/content_element/table.html.twig" %}


{% block table %}
  <div class="my-div-wrapper">
    {{ parent() }}
  </div>
{% endblock %}


{% block table_attributes %}
  {{ parent() }} class="tolle neue klasse"
{% endblock %} 


---

Das greift aber leider so garnicht.

Jemand ne Idee?

Schick Mal bitte, wie das Markup im HTML aussehen soll

hab das Neue mal GROSSGESCHRIEBEN

VORHER

HTML-Code:

---

<div class="content-table">
  <h2>Headline</h2>
  <table>
    <caption>Die Zusammenfassung</caption>
    <thead>
    <tr>
      <th>Zelle A</th>
      <th>Zelle B</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

---

NACHHER

HTML-Code:

---


<div class="content-table TOLLENEUEKLASSE">
  <DIV CLASS="INSIDE">
    <h2>Headline</h2>
    <table>
      <caption>Die Zusammenfassung</caption>
      <thead>
      <tr>
        <th>Zelle A</th>
        <th>Zelle B</th>
      </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </DIV>
</div>

---

/templates/content_element/table.html.twig ist der richtige Pfad?

Hast du diese Änderung in Contao 5.5 über das Template Studio gemacht? Falls nicht, dann musst du den Cache clearen (var/cache).

Und zusätzlich ist deine Klasse nun in `<table>`, würde hier aber die attributes nutzen:

Nachfolgend Beispiele für das folgende Markup

HTML-Code:

---

<div class="content-element-list content-table my-content-class">
    <h2>Text elements</h2>
   
    <div class="inside">
        <table class="my-great-class" data-sortable-table="{&quot;descending&quot;:false}">
            <caption>Listing of all text content elements</caption>
            <thead class="my-table-header-class">
            <tr>
                <th class="my-table-header-cell-class" role="columnheader" tabindex="0">Name</th>
                <th class="my-table-header-cell-class" role="columnheader" tabindex="0">CSS class</th>
                <th class="my-table-header-cell-class" role="columnheader" tabindex="0">Description</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

---

HTML-Code:

---

{# /templates/content_element/table.html.twig #}
{% extends "@Contao/content_element/table.html.twig" %}

{% block table %}
    <div class="inside">
        {{ parent() }}
    </div>
{% endblock %}

{# Setze eine Klasse: <table class="my-great-class"> #}
{% set table_attributes = attrs().mergeWith(table_attributes|default).addClass('my-great-class') %}

{# Setze eine Klasse: <thead class="my-table-header-class"> #}
{% set table_header_attributes = attrs().mergeWith(table_header_attributes|default).addClass('my-table-header-class') %}

{# Setze eine Klasse: <th class="my-table-header-cell-class"> #}
{% set default_header_cell_attributes = attrs().mergeWith(default_header_cell_attributes|default).addClass('my-table-header-cell-class') %}

{# Setze eine Klasse im content-wrapper / content-table: <div class="content-table my-content-class"> #}
{% set attributes = attrs().mergeWith(attributes|default).addClass('my-content-class') %}

---

Zitat:

---

Zitat von whitedrow

Halli hallo, ich bräuchte mal einen Schubser in die richtige Richtung.

Ich möchte das CE Table so erweitern, dass das Table Tag immer eine bestimmte klasse bekommt UND, dass noch ein DIV um das TABLE gewrapped wird.

Im Backend steht, dass content_element/table [ContaoCore]
genutzt wird.

Ich habe also ein neues Template erstellt und im Ordner templates liegt jetzt:
content_element
table.html.twig

da habe ich folgendes rein geschrieben:

PHP-Code:

---

{% extends "@Contao/content_element/table.html.twig" %}


{% block table %}
  <div class="my-div-wrapper">
    {{ parent() }}
  </div>
{% endblock %}


{% block table_attributes %}
  {{ parent() }} class="tolle neue klasse"
{% endblock %} 


---

Das greift aber leider so garnicht.

Jemand ne Idee?

---

Wenn dann so:

PHP-Code:

---

{% extends "@Contao/content_element/table.html.twig" %}

{% block table %}
    <div class="my-div-wrapper">
        {{ parent() }}
    </div>
{% endblock %}

{% block table_attributes -%}
    {%- set table_attributes = attrs()
        .addClass('tolle-neue-klasse')
        .mergeWith(table_attributes|default)
    -%}
    {{ parent() }}
{%- endblock %} 


---

(getestet)

Deins ist spezifischer @spooky, das stimmt und hat auch ein Trim drin. Ich glaube jedoch, dass es dem TE hier um die normalen attributes aus dem _base Template geht (dem Wrapper-Block). Ist aber im letzten Beispiel von mir drin :)

Laut initialem Post möchte @whitedrow dem <table> eine Klasse hinzufügen:

Zitat:

---

Zitat von whitedrow

Ich möchte das CE Table so erweitern, dass das Table Tag immer eine bestimmte klasse bekommt

---

Ok, Super! Hat geklappt, alles!


Sogar mein Versuch hat funktioniert.

Missing Link war:
Contao 5.3 = CACHE LEEREN :D

Template Studio ist mir auch neu - schaue ich mir mal an.



Vielen, vielen Dank jedenfalls!

Dann hast du nun 3 verschiedene Möglichkeiten gelernt :)