## 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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">
          <syn-icon name="edit"></syn-icon>
        </syn-button>
        <syn-button variant="text" size="small">
          <syn-icon name="delete_outline"></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">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">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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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>
<script type="module">
  const scrollableTable = document.getElementById(
    "horizontal-scrollable-table",
  );
  const shadowCells = scrollableTable.querySelectorAll(
    ".syn-table-cell--shadow-end",
  );

  scrollableTable.addEventListener("scroll", () => {
    shadowCells.forEach((shadowCell) => {
      if (scrollableTable.scrollLeft === 0) {
        shadowCell.classList.remove("syn-table-cell--shadow-active");
      } else {
        shadowCell.classList.add("syn-table-cell--shadow-active");
      }
    });
  });

  scrollableTable.scrollLeft = 20;
</script>
```

---

## 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"></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-button variant="text" size="small">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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-button variant="text" size="small">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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-button variant="text" size="small">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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-button variant="text" size="small">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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-button variant="text" size="small">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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>
<script type="module">
  const scrollableTable = document.getElementById(
    "horizontal-scrollable-table2",
  );
  const shadowCells = scrollableTable.querySelectorAll(
    ".syn-table-cell--shadow-start",
  );
  const maxScrollX = scrollableTable.scrollWidth - scrollableTable.clientWidth;

  const handleShadow = () => {
    shadowCells.forEach((shadowCell) => {
      if (scrollableTable.scrollLeft === maxScrollX) {
        shadowCell.classList.remove("syn-table-cell--shadow-active");
      } else {
        shadowCell.classList.add("syn-table-cell--shadow-active");
      }
    });
  };

  // Initially set shadow on load
  handleShadow();

  scrollableTable.addEventListener("scroll", handleShadow);
</script>
```

---

## 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">Name</th>
        <th class="syn-table-cell--shadow-bottom shadow-cell">Customer</th>
        <th class="syn-table-cell--shadow-bottom shadow-cell">Location</th>
        <th class="syn-table-cell--shadow-bottom shadow-cell">
          Contract Start
        </th>
        <th class="syn-table-cell--shadow-bottom shadow-cell"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></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>
<script type="module">
  const scrollableTable = document.getElementById("vertical-scrollable-table");
  const shadowCells = scrollableTable.querySelectorAll(
    ".syn-table-cell--shadow-bottom",
  );

  scrollableTable.addEventListener("scroll", () => {
    shadowCells.forEach((shadowCell) => {
      if (scrollableTable.scrollTop === 0) {
        shadowCell.classList.remove("syn-table-cell--shadow-active");
      } else {
        shadowCell.classList.add("syn-table-cell--shadow-active");
      }
    });
  });

  scrollableTable.scrollTop = 20;
</script>
```

---

## Table Product

```html
<div id="product-table">
  <table class="syn-table--default">
    <thead>
      <tr>
        <th class="syn-table-cell--shadow-end shadow-cell">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">
          <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"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
        <td>
          <syn-button variant="filled" size="small">
            <syn-icon slot="prefix" name="shopping_cart"></syn-icon>
            Add to cart
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon slot="suffix" name="keyboard_arrow_right"></syn-icon>
            Request quote
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">
          <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"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
        <td>
          <syn-button variant="filled" size="small">
            <syn-icon slot="prefix" name="shopping_cart"></syn-icon>
            Add to cart
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon slot="suffix" name="keyboard_arrow_right"></syn-icon>
            Request quote
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">
          <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"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
        <td>
          <syn-button variant="filled" size="small">
            <syn-icon slot="prefix" name="shopping_cart"></syn-icon>
            Add to cart
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon slot="suffix" name="keyboard_arrow_right"></syn-icon>
            Request quote
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">
          <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"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
        <td>
          <syn-button variant="filled" size="small">
            <syn-icon slot="prefix" name="shopping_cart"></syn-icon>
            Add to cart
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon slot="suffix" name="keyboard_arrow_right"></syn-icon>
            Request quote
          </syn-button>
        </td>
      </tr>

      <tr>
        <td class="syn-table-cell--shadow-end shadow-cell">
          <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"></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">
            <syn-icon name="edit"></syn-icon>
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon name="delete_outline"></syn-icon>
          </syn-button>
        </td>
        <td>
          <syn-button variant="filled" size="small">
            <syn-icon slot="prefix" name="shopping_cart"></syn-icon>
            Add to cart
          </syn-button>
          <syn-button variant="text" size="small">
            <syn-icon slot="suffix" name="keyboard_arrow_right"></syn-icon>
            Request quote
          </syn-button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<script type="module">
  const scrollableTable = document.getElementById("product-table");
  const shadowCells = scrollableTable.querySelectorAll(
    ".syn-table-cell--shadow-end",
  );

  scrollableTable.addEventListener("scroll", () => {
    shadowCells.forEach((shadowCell) => {
      if (scrollableTable.scrollLeft === 0) {
        shadowCell.classList.remove("syn-table-cell--shadow-active");
      } else {
        shadowCell.classList.add("syn-table-cell--shadow-active");
      }
    });
  });

  scrollableTable.scrollLeft = 20;
</script>
<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 {
    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>
```
