Add Data Columns component in data display

components/data-display.html

@@ -48,5 +48,32 @@
 
   </section>
 
+  <!-- Component: Data Columns -->
+  <section id="component-data-columns">
+
+    <p class="sg-preview-label">Component: Data Columns</p>
+
+    <table class="sg-data-table" aria-label="Beispiel Kennzahlen-Spalten" data-component="data-columns">
+      <tbody>
+        <tr>
+          <td class="sg-data-table__label" data-component-part="data-columns-label-cell">PE <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
+          <td class="sg-data-table__value" data-component-part="data-columns-value-cell">7.7</td>
+          <td data-component-part="data-columns-reference-cell">11.7</td>
+        </tr>
+        <tr>
+          <td class="sg-data-table__label" data-component-part="data-columns-label-cell">PE Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
+          <td class="sg-data-table__value" data-component-part="data-columns-value-cell">8.6</td>
+          <td data-component-part="data-columns-reference-cell">9.7</td>
+        </tr>
+        <tr>
+          <td class="sg-data-table__label" data-component-part="data-columns-label-cell">PEG Forward <span class="sg-data-table__help-icon" aria-label="Hilfetext" data-component="help-icon" data-component-context="data-columns">?</span></td>
+          <td class="sg-data-table__value sg-data-table__value--warning" data-component-part="data-columns-value-cell" data-component-state="warning">1.23</td>
+          <td data-component-part="data-columns-reference-cell">1.43</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </section>
+
 </body>
-</html>
+</html>

semantic-tokens-components.html

@@ -187,6 +187,16 @@
       <tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Tabellenzellen.</td></tr>
       <tr><td>text-data-table-help-icon</td><td>color-font-dark</td><td>Textfarbe im Tabellen-Help-Icon.</td></tr>
     </tbody></table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Data Columns</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
+      <tr><td>surface-data-table</td><td>color-light-grey</td><td>Gesamtfläche der Spaltenliste.</td></tr>
+      <tr><td>surface-data-table-cell</td><td>color-light-grey</td><td>Fläche von Spaltenzellen.</td></tr>
+      <tr><td>surface-data-table-help-icon</td><td>color-medium-grey</td><td>Fläche des Help-Icons im Spaltenkontext.</td></tr>
+      <tr><td>text-data-table-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Spaltenzellen.</td></tr>
+      <tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Spaltenzellen.</td></tr>
+      <tr><td>text-data-table-help-icon</td><td>color-font-dark</td><td>Textfarbe im Spalten-Help-Icon.</td></tr>
+    </tbody></table>
   </section>
 
   <section id="semantic-typography">