@synergy-design-system/mcp 0.1.0 → 1.1.0

package/metadata/static/templates/table.md

@@ -0,0 +1,1426 @@
+## Table With Header
+
+```html
+<table class="syn-table--default">
+  <thead>
+    <tr>
+      <th class="">Name</th>
+      <th class="">Customer</th>
+      <th class="">Location</th>
+      <th class="">Contract Start</th>
+      <th class=""></th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<style>
+  .syn-table--default .buttons-cell {
+    padding-top: var(--syn-spacing-2x-small);
+    padding-bottom: var(--syn-spacing-2x-small);
+    min-width: 76px;
+  }
+</style>
+```
+
+---
+
+## Table With Alternating Rows
+
+```html
+<table class="syn-table--alternating">
+  <thead>
+    <tr>
+      <th class="">Name</th>
+      <th class="">Customer</th>
+      <th class="">Location</th>
+      <th class="">Contract Start</th>
+      <th class=""></th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<style>
+  .syn-table--alternating .buttons-cell {
+    padding-top: var(--syn-spacing-2x-small);
+    padding-bottom: var(--syn-spacing-2x-small);
+    min-width: 76px;
+  }
+</style>
+```
+
+---
+
+## Table With Borders
+
+```html
+<table class="syn-table--border">
+  <thead>
+    <tr>
+      <th class="">Name</th>
+      <th class="">Customer</th>
+      <th class="">Location</th>
+      <th class="">Contract Start</th>
+      <th class=""></th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+
+    <tr>
+      <td class="">Max Mustermann</td>
+      <td class="">Muster AG</td>
+      <td class="">Hamburg, Düsseldorf, Freiburg</td>
+      <td class="">20.01.2023</td>
+      <td class="buttons-cell">
+        <syn-button variant="text" size="small" title="">
+          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
+        </syn-button>
+        <syn-button variant="text" size="small" title="">
+          <syn-icon
+            name="delete_outline"
+            aria-hidden="true"
+            library="default"
+          ></syn-icon>
+        </syn-button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<style>
+  .syn-table--border .buttons-cell {
+    padding-top: var(--syn-spacing-2x-small);
+    padding-bottom: var(--syn-spacing-2x-small);
+    min-width: 76px;
+  }
+</style>
+```
+
+---
+
+## Table Shadow Left Column
+
+If using a table with borders, sticky row and scrolling mechanism together, the 'border-collapse'
+property should be set to 'separate'. Otherwise the table will have some strange behaviors.
+
+```html
+<div id="horizontal-scrollable-table">
+  <table class="syn-table--default">
+    <thead>
+      <tr>
+        <th
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          Name
+        </th>
+        <th class="">Customer</th>
+        <th class="">Location</th>
+        <th class="">Contract Start</th>
+        <th class=""></th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          Max Mustermann
+        </td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          Max Mustermann
+        </td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          Max Mustermann
+        </td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          Max Mustermann
+        </td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          Max Mustermann
+        </td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<style>
+  #horizontal-scrollable-table {
+    overflow-x: auto;
+    width: 550px;
+  }
+
+  #horizontal-scrollable-table > table {
+    /* Set border-collapse to separate, if using scrolling mechanism together with a table with borders */
+    /* border-collapse: separate; */
+  }
+
+  #horizontal-scrollable-table .shadow-cell {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  #horizontal-scrollable-table td {
+    min-width: 120px;
+  }
+
+  #horizontal-scrollable-table .buttons-cell {
+    padding-top: var(--syn-spacing-2x-small);
+    padding-bottom: var(--syn-spacing-2x-small);
+    min-width: 76px;
+  }
+</style>
+```
+
+---
+
+## Table Shadow Right Column
+
+If using a table with borders, sticky row and scrolling mechanism together, the 'border-collapse'
+property should be set to 'separate'. Otherwise the table will have some strange behaviors.
+
+```html
+<div id="horizontal-scrollable-table2">
+  <table class="syn-table--default">
+    <thead>
+      <tr>
+        <th class="">Name</th>
+        <th class="">Customer</th>
+        <th class="">Location</th>
+        <th class="">Contract Start</th>
+        <th
+          class="syn-table-cell--shadow-start shadow-cell syn-table-cell--shadow-active"
+        ></th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td
+          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
+        >
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td
+          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
+        >
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td
+          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
+        >
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td
+          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
+        >
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td
+          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
+        >
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<style>
+  #horizontal-scrollable-table2 {
+    overflow-x: auto;
+    width: 550px;
+  }
+
+  #horizontal-scrollable-table2 > table {
+    /* Set border-collapse to separate, if using scrolling mechanism together with a table with borders */
+    /* border-collapse: separate; */
+  }
+
+  #horizontal-scrollable-table2 .shadow-cell {
+    position: sticky;
+    right: 0;
+    z-index: 1;
+  }
+
+  #horizontal-scrollable-table2 td {
+    min-width: 120px;
+  }
+
+  #horizontal-scrollable-table2 .buttons-cell {
+    padding-top: var(--syn-spacing-2x-small);
+    padding-bottom: var(--syn-spacing-2x-small);
+    min-width: 76px;
+  }
+</style>
+```
+
+---
+
+## Table Shadow Top Row
+
+If using a table with borders, sticky row and scrolling mechanism together, the 'border-collapse'
+property should be set to 'separate'. Otherwise the table will have some strange behaviors.
+
+```html
+<div id="vertical-scrollable-table">
+  <table class="syn-table--default">
+    <thead>
+      <tr>
+        <th
+          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
+        >
+          Name
+        </th>
+        <th
+          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
+        >
+          Customer
+        </th>
+        <th
+          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
+        >
+          Location
+        </th>
+        <th
+          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
+        >
+          Contract Start
+        </th>
+        <th
+          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
+        ></th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td class="">Max Mustermann</td>
+        <td class="">Muster AG</td>
+        <td class="">Hamburg, Düsseldorf, Freiburg</td>
+        <td class="">20.01.2023</td>
+        <td class="buttons-cell">
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<style>
+  #vertical-scrollable-table {
+    overflow-y: auto;
+    height: 200px;
+    width: fit-content;
+  }
+
+  #vertical-scrollable-table > table {
+    /* Set border-collapse to separate, if using scrolling mechanism together with a table with borders */
+    /* border-collapse: separate; */
+  }
+
+  #vertical-scrollable-table .shadow-cell {
+    position: sticky;
+    z-index: 1;
+    top: 0;
+  }
+
+  #vertical-scrollable-table .buttons-cell {
+    padding-top: var(--syn-spacing-2x-small);
+    padding-bottom: var(--syn-spacing-2x-small);
+    min-width: 76px;
+  }
+</style>
+```
+
+---
+
+## Table Product
+
+```html
+<div id="product-table">
+  <table class="syn-table--default">
+    <thead>
+      <tr>
+        <th
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          Product
+        </th>
+        <th>Availability</th>
+        <th>Earliest delivery</th>
+        <th></th>
+        <th>Unit Price</th>
+        <th>Total Price</th>
+        <th></th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          <div class="product-cell">
+            <img
+              class="product-image"
+              src="https://synergy-design-system.github.io/card-example.jpg"
+              alt="Multiple persons having lunch in SICK Academy"
+            />
+            <div>
+              <div>Product details</div>
+              <div class="product-name">Product Name</div>
+              <div>Part no. XXXXXXX</div>
+            </div>
+          </div>
+        </td>
+        <td>
+          <div class="availability">
+            <syn-icon
+              class="check_icon"
+              name="check_circle_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            available
+          </div>
+        </td>
+        <td>2024-12-12</td>
+        <td>
+          <div class="price">
+            <div>List price:</div>
+            <div>Your net price:</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>106,00 €</div>
+            <div>96,00 €</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>318,00 €</div>
+            <div>288,00 €</div>
+          </div>
+        </td>
+        <td>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+        <td>
+          <syn-button variant="filled" size="small" title="">
+            <syn-icon
+              slot="prefix"
+              name="shopping_cart"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Add to cart
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              slot="suffix"
+              name="keyboard_arrow_right"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Request quote
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          <div class="product-cell">
+            <img
+              class="product-image"
+              src="https://synergy-design-system.github.io/card-example.jpg"
+              alt="Multiple persons having lunch in SICK Academy"
+            />
+            <div>
+              <div>Product details</div>
+              <div class="product-name">Product Name</div>
+              <div>Part no. XXXXXXX</div>
+            </div>
+          </div>
+        </td>
+        <td>
+          <div class="availability">
+            <syn-icon
+              class="check_icon"
+              name="check_circle_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            available
+          </div>
+        </td>
+        <td>2024-12-12</td>
+        <td>
+          <div class="price">
+            <div>List price:</div>
+            <div>Your net price:</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>106,00 €</div>
+            <div>96,00 €</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>318,00 €</div>
+            <div>288,00 €</div>
+          </div>
+        </td>
+        <td>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+        <td>
+          <syn-button variant="filled" size="small" title="">
+            <syn-icon
+              slot="prefix"
+              name="shopping_cart"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Add to cart
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              slot="suffix"
+              name="keyboard_arrow_right"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Request quote
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          <div class="product-cell">
+            <img
+              class="product-image"
+              src="https://synergy-design-system.github.io/card-example.jpg"
+              alt="Multiple persons having lunch in SICK Academy"
+            />
+            <div>
+              <div>Product details</div>
+              <div class="product-name">Product Name</div>
+              <div>Part no. XXXXXXX</div>
+            </div>
+          </div>
+        </td>
+        <td>
+          <div class="availability">
+            <syn-icon
+              class="check_icon"
+              name="check_circle_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            available
+          </div>
+        </td>
+        <td>2024-12-12</td>
+        <td>
+          <div class="price">
+            <div>List price:</div>
+            <div>Your net price:</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>106,00 €</div>
+            <div>96,00 €</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>318,00 €</div>
+            <div>288,00 €</div>
+          </div>
+        </td>
+        <td>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+        <td>
+          <syn-button variant="filled" size="small" title="">
+            <syn-icon
+              slot="prefix"
+              name="shopping_cart"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Add to cart
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              slot="suffix"
+              name="keyboard_arrow_right"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Request quote
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          <div class="product-cell">
+            <img
+              class="product-image"
+              src="https://synergy-design-system.github.io/card-example.jpg"
+              alt="Multiple persons having lunch in SICK Academy"
+            />
+            <div>
+              <div>Product details</div>
+              <div class="product-name">Product Name</div>
+              <div>Part no. XXXXXXX</div>
+            </div>
+          </div>
+        </td>
+        <td>
+          <div class="availability">
+            <syn-icon
+              class="check_icon"
+              name="check_circle_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            available
+          </div>
+        </td>
+        <td>2024-12-12</td>
+        <td>
+          <div class="price">
+            <div>List price:</div>
+            <div>Your net price:</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>106,00 €</div>
+            <div>96,00 €</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>318,00 €</div>
+            <div>288,00 €</div>
+          </div>
+        </td>
+        <td>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+        <td>
+          <syn-button variant="filled" size="small" title="">
+            <syn-icon
+              slot="prefix"
+              name="shopping_cart"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Add to cart
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              slot="suffix"
+              name="keyboard_arrow_right"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Request quote
+          </syn-button>
+        </td>
+      </tr>
+
+      <tr>
+        <td
+          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
+        >
+          <div class="product-cell">
+            <img
+              class="product-image"
+              src="https://synergy-design-system.github.io/card-example.jpg"
+              alt="Multiple persons having lunch in SICK Academy"
+            />
+            <div>
+              <div>Product details</div>
+              <div class="product-name">Product Name</div>
+              <div>Part no. XXXXXXX</div>
+            </div>
+          </div>
+        </td>
+        <td>
+          <div class="availability">
+            <syn-icon
+              class="check_icon"
+              name="check_circle_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            available
+          </div>
+        </td>
+        <td>2024-12-12</td>
+        <td>
+          <div class="price">
+            <div>List price:</div>
+            <div>Your net price:</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>106,00 €</div>
+            <div>96,00 €</div>
+          </div>
+        </td>
+        <td>
+          <div class="price">
+            <div>318,00 €</div>
+            <div>288,00 €</div>
+          </div>
+        </td>
+        <td>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="edit"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              name="delete_outline"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+          </syn-button>
+        </td>
+        <td>
+          <syn-button variant="filled" size="small" title="">
+            <syn-icon
+              slot="prefix"
+              name="shopping_cart"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Add to cart
+          </syn-button>
+          <syn-button variant="text" size="small" title="">
+            <syn-icon
+              slot="suffix"
+              name="keyboard_arrow_right"
+              aria-hidden="true"
+              library="default"
+            ></syn-icon>
+            Request quote
+          </syn-button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<style>
+  #product-table {
+    overflow-y: auto;
+    width: 900px;
+  }
+
+  #product-table .shadow-cell {
+    position: sticky;
+    z-index: 1;
+    left: 0;
+  }
+
+  #product-table td {
+    min-width: 100px;
+  }
+
+  .product-image {
+    height: var(--syn-spacing-3x-large);
+    width: var(--syn-spacing-3x-large);
+    object-fit: cover;
+  }
+
+  .product-cell {
+    color: var(--syn-typography-color-text);
+    display: flex;
+    flex-direction: row;
+    font: var(--syn-body-x-small-regular);
+    gap: var(--syn-spacing-medium);
+    width: 230px;
+  }
+
+  .product-name {
+    color: var(--syn-color-primary-600);
+    font: var(--syn-body-medium-semibold);
+  }
+
+  .availability {
+    display: flex;
+    align-items: center;
+    gap: var(--syn-spacing-2x-small);
+  }
+
+  .check_icon {
+    font-size: var(--syn-font-size-medium);
+    color: var(--syn-color-success-600);
+  }
+
+  .price {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-2x-small);
+  }
+
+  .price :nth-child(2) {
+    font: var(--syn-body-small-semibold);
+  }
+</style>
+```