---
name: table
title: Table
components:
  - sd-button
  - sd-checkbox
  - sd-icon
  - sd-interactive
  - sd-interactive--reset
  - sd-link
  - sd-paragraph
  - sd-table
  - sd-table-cell
  - sd-table-cell--bg-neutral-100
  - sd-table-cell--bg-primary-100
  - sd-table-cell--bg-transparent
  - sd-table-cell--bg-white
  - sd-table-cell--divider
  - sd-table-cell--shadow-active
  - sd-table-cell--shadow-bottom
  - sd-table-cell--shadow-left
  - sd-table-cell--shadow-right
  - sd-table-cell--shadow-top
  - sd-tooltip
version: 1.0.0
---

## Template: simple Table

```html
<section tabindex="0" aria-label="Simple table" class="focus-visible:focus-outline">
  <table id="simple" class="sd-table sample-table w-full">
    <thead>
      <tr>
        <th class="sd-table-cell sd-table-cell--bg-white">Job title</th>
        <th class="sd-table-cell sd-table-cell--bg-white">Location</th>
        <th class="sd-table-cell sd-table-cell--bg-white">Job category</th>
        <th class="sd-table-cell sd-table-cell--bg-white">Employment type</th>
        <th class="sd-table-cell sd-table-cell--bg-white">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Apprenticeship</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Portfolio Management</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Employee for our Legal Reporting in the Fund Administration Area</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Fund Administration</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or
            Part-time))</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Customer Service</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Hamburg</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Compliance</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">
            Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Other</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</section>
<script type="module">
  const table = document.getElementById('simple');
  const actions = table.querySelectorAll('sd-button');

  actions?.forEach(action => {
    action.onclick = () => {
      alert('Action performed');
    };
  });
</script>
```

## Template: Simple Table with Vertical Dividers

```html
<section tabindex="0" aria-label="Simple Table with Vertical Dividers" class="focus-visible:focus-outline">
  <table id="dividers" class="sd-table sample-table w-full">
    <thead>
      <tr>
        <th class="sd-table-cell sd-table-cell--bg-white sd-table-cell--divider">Job title</th>
        <th class="sd-table-cell sd-table-cell--bg-white sd-table-cell--divider">Location</th>
        <th class="sd-table-cell sd-table-cell--bg-white sd-table-cell--divider">Job category</th>
        <th class="sd-table-cell sd-table-cell--bg-white sd-table-cell--divider">Employment type</th>
        <th class="sd-table-cell sd-table-cell--bg-white">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Apprenticeship</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">
          Dual Study Program / Training
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">
          Dual Study Program / Training
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)">Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Portfolio Management</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Employee for our Legal Reporting in the Fund Administration Area</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Fund Administration</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)">
            Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or
            Part-time))
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Customer Service</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Hamburg</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Compliance</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)">
            Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Other</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent sd-table-cell--divider">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</section>
<script type="module">
  const table = document.getElementById('dividers');
  const actions = table.querySelectorAll('sd-button');

  actions?.forEach(action => {
    action.onclick = () => {
      alert('Action performed');
    };
  });
</script>
```

## Template: Simple Table with Alternating Colors

```html
<section tabindex="0" aria-label="Simple Table with Alternating Colors" class="focus-visible:focus-outline">
  <table id="alternating" class="sd-table sample-table w-full">
    <thead>
      <tr>
        <th class="sd-table-cell sd-table-cell--bg-primary-100">Job title</th>
        <th class="sd-table-cell sd-table-cell--bg-primary-100">Location</th>
        <th class="sd-table-cell sd-table-cell--bg-primary-100">Job category</th>
        <th class="sd-table-cell sd-table-cell--bg-primary-100">Employment type</th>
        <th class="sd-table-cell sd-table-cell--bg-primary-100">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Apprenticeship</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-primary-100 w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Portfolio Management</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-primary-100 w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Employee for our Legal Reporting in the Fund Administration Area</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Fund Administration</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or
            Part-time))</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Customer Service</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-primary-100 w-1/3">
          <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Hamburg</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Compliance</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-primary-100 w-1/3">
          <sd-link href="javascript:void(0)">
            Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-primary-100 w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Other</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-primary-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</section>
<script type="module">
  const table = document.getElementById('alternating');
  const actions = table.querySelectorAll('sd-button');

  actions?.forEach(action => {
    action.onclick = () => {
      alert('Action performed');
    };
  });
</script>
```

## Template: sortable Table

```html
<span id="sortable-announcement" role="status" class="sr-only"></span>
<section tabindex="0" aria-label="Sortable table" class="focus-visible:focus-outline">
  <table id="sortable" class="sd-table sample-table w-full" .sortData=${sortData}>
    <thead>
      ${(() => {
        return html`<tr>
          ${headerData.map((header, columnIndex) => {
            return html`<th
              class="${cx('sd-table-cell sd-table-cell--bg-transparent', header.sortable ? 'sortable' : '')}"
              id="sortableHeader-${columnIndex}"
              aria-sort=${ifDefined(
                sortData[columnIndex] === 'none' || !header.sortable ? undefined : 'ascending'
              )}
            >
              ${
                header.sortable
                  ? html` <button
                      class="sd-interactive flex items-center gap-1"
                      @click="${() => sortTable(columnIndex)}"
                    >
                      ${header.label}<sd-icon
                        id="sortIcon-${columnIndex}"
                        name=${sortData[columnIndex] === 'none' ? 'system/sort-down' : 'system/sort-down-filled'}
                        class="text-[12px]"
                      ></sd-icon>
                    </button>`
                  : header.label
              }
            </th>`;
          })}
        </tr>`;
      })()}
    </thead>
    <tbody>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Apprenticeship</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Portfolio Management</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Employee for our Legal Reporting in the Fund Administration Area</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Fund Administration</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">
            Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or
            Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Customer Service</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Hamburg</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Compliance</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">
            Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Other</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</section>
<script type="module">
  const table = document.getElementById('sortable');
  const actions = table.querySelectorAll('sd-button');

  actions?.forEach(action => {
    action.onclick = () => {
      alert('Action performed');
    };
  });
</script>
```

## Template: multi Select Table

```html
<style>
  /* a11y: visually hide labels inside sd-checkbox */
  sd-checkbox.hide-label::part(label) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>
<section class="focus-visible:focus-outline">
  <table id="multi-select-table" class="sd-table sample-table w-full" aria-label="Multi Select Table">
    <thead>
      <tr class="">
        <th class="sd-table-cell sd-table-cell--bg-white text-center text-sm leading-none" scope="col">
          <sd-checkbox class="hide-label block mx-auto" id="select-all" size="sm" indeterminate tabindex="0"
            >Select all</sd-checkbox
          >
        </th>
        <th class="sd-table-cell sd-table-cell--bg-white text-sm leading-none" scope="col">Name</th>
        <th class="sd-table-cell sd-table-cell--bg-white text-sm leading-none" scope="col">ISIN</th>
        <th class="sd-table-cell sd-table-cell--bg-white text-sm leading-none" scope="col">Fund type</th>
        <th class="sd-table-cell sd-table-cell--bg-white text-sm leading-none" scope="col">Date</th>
        <th class="sd-table-cell sd-table-cell--bg-white text-sm leading-none text-center" scope="col">File type</th>
      </tr>
    </thead>
    <tbody class="selectable-rows">
      <tr class="leading-none">
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" tabindex="0"
            >Select PrivatFonds: Flexibel</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">PrivatFonds: Flexibel</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">DE000A0Q2H14</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Mixed funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview PrivatFonds: Flexibel PDF">
            <button class="sd-interactive sd-interactive--reset items-center flex mx-auto">
              <sd-icon
                class="w-6 h-6 text-sm"
                name="system/file-pdf"
                label="Preview PrivatFonds: Flexibel PDF"
              ></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" checked tabindex="0"
            >Select PrivatFonds: Flexibel pro</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent  text-sm leading-none">
          <sd-link href="javascript:void(0)">PrivatFonds: Flexibel pro</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">DE000A0RPAL7</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Value-protected funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview PrivatFonds: Flexibel pro PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview PrivatFonds: Flexibel PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" checked tabindex="0"
            >Select PrivatFonds: Konsequent</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">PrivatFonds: Konsequent</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">LU0493492200</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Value-protected funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview PrivatFonds: Konsequent PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview PrivatFonds: Konsequent PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" tabindex="0"
            >Select PrivatFonds: Konsequent pro</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">PrivatFonds: Konsequent pro</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">LU0493584741</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Value-protected funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview PrivatFonds: Konsequent pro PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview PrivatFonds: Konsequent pro PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" tabindex="0"
            >Select PrivatFonds: Kontrolliert</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">PrivatFonds: Kontrolliert</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">DE000A0RPAM5</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Mixed funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview PrivatFonds: Kontrolliert PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview PrivatFonds: Kontrolliert PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" tabindex="0"
            >Select PrivatFonds: Kontrolliert pro</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">PrivatFonds: Kontrolliert pro</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">DE000A0RPAN3</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Mixed funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview PrivatFonds: Kontrolliert pro PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon
                class="w-6 h-6"
                name="system/file-pdf"
                label="Preview PrivatFonds: Kontrolliert pro PDF"
              ></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" checked tabindex="0"
            >Select PrivatFonds: Nachhaltig</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">PrivatFonds: Nachhaltig</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">LU1900195949</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Mixed funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview PrivatFonds: Nachhaltig PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview PrivatFonds: Nachhaltig PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" tabindex="0"
            >Select Uni21.Jahrhundert -net-</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)"> Uni21.Jahrhundert -net- </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">DE0009757872</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Stock funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview Uni21.Jahrhundert -net- PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview Uni21.Jahrhundert -net- PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" tabindex="0"
            >Select UniAbsoluterErtrag -net- A</sd-checkbox
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">UniAbsoluterErtrag -net- A</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">LU1206679554</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Mixed funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview UniAbsoluterErtrag -net- A PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview UniAbsoluterErtrag -net- A PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-center text-sm leading-none">
          <sd-checkbox class="hide-label block mx-auto" size="sm" tabindex="0">Select UniAbsoluterErtrag A</sd-checkbox>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-link href="javascript:void(0)">UniAbsoluterErtrag A</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">LU1206678580</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">Mixed funds</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">23.01.2025</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent text-sm leading-none">
          <sd-tooltip content="Preview UniAbsoluterErtrag A PDF">
            <button class="sd-interactive sd-interactive--reset flex mx-auto">
              <sd-icon class="w-6 h-6" name="system/file-pdf" label="Preview UniAbsoluterErtrag A PDF"></sd-icon>
            </button>
          </sd-tooltip>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="flex flex-row gap-4 py-6">
    <p id="selected-count" class="sd-paragraph pt-3 font-bold">selected:</p>
    <sd-button id="download-btn" variant="primary" disabled>
      <sd-icon name="system/download" slot="icon-left"></sd-icon>Download PDF
    </sd-button>
    <sd-button id="print-btn" variant="secondary" disabled>
      <sd-icon name="system/print" slot="icon-left"></sd-icon>Print
    </sd-button>
  </div>
</section>
<script type="module">
  const selectAllCheckbox = document.querySelector('#select-all');
  const tbody = document.querySelector('.selectable-rows');
  const selectedCountEl = document.querySelector('#selected-count');
  const downloadBtn = document.querySelector('#download-btn');
  const printBtn = document.querySelector('#print-btn');

  function getCheckedCount() {
    const checkboxes = tbody.querySelectorAll('sd-checkbox');
    let count = 0;
    checkboxes.forEach(cb => {
      if (cb.checked) count++;
    });
    return { checked: count, total: checkboxes.length };
  }

  function updateUI() {
    const res = getCheckedCount();
    const checked = res.checked;
    const total = res.total;

    if (selectedCountEl) selectedCountEl.textContent = checked + ' selected';

    const hasSelection = checked > 0;
    [downloadBtn, printBtn].forEach(btn => {
      if (btn) btn.toggleAttribute('disabled', !hasSelection);
    });

    if (selectAllCheckbox) {
      const isAllChecked = checked === total;
      const isPartiallyChecked = checked > 0 && checked < total;
      selectAllCheckbox.checked = isAllChecked;
      selectAllCheckbox.indeterminate = isPartiallyChecked;
    }
  }

  function handleCheckboxToggle(checkbox) {
    if (checkbox && tbody.contains(checkbox)) {
      checkbox.checked = !checkbox.checked;
      updateUI();
    }
  }

  function handleSelectAllToggle() {
    const checkboxes = tbody.querySelectorAll('sd-checkbox');
    const shouldCheck = !selectAllCheckbox.checked;
    selectAllCheckbox.checked = shouldCheck;
    checkboxes.forEach(cb => (cb.checked = shouldCheck));
    updateUI();
  }

  function handleEvent(e, isSelectAll = false) {
    if (e.type === 'keydown' && !['Space', 'Enter', ' '].includes(e.key)) {
      return;
    }

    if (e.type === 'keydown') {
      e.preventDefault();
    }

    if (isSelectAll) {
      handleSelectAllToggle();
    } else {
      const checkbox = e.target.closest('sd-checkbox');
      handleCheckboxToggle(checkbox);
    }
  }

  tbody?.addEventListener('click', e => handleEvent(e, false));
  tbody?.addEventListener('keydown', e => handleEvent(e, false));

  selectAllCheckbox?.addEventListener('click', e => handleEvent(e, true));
  selectAllCheckbox?.addEventListener('keydown', e => handleEvent(e, true));

  updateUI();
</script>
```

## Template: advanced Tables

```html
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const scrollableTable = document.getElementById('vertical-scrollable-table');
    const tableHeaders = scrollableTable?.querySelectorAll('th');

    scrollableTable?.addEventListener('scroll', () => {
      tableHeaders.forEach(header => {
        if (scrollableTable.scrollTop === 0) {
          header.classList.remove('sd-table-cell--shadow-active');
        } else {
          header.classList.add('sd-table-cell--shadow-active');
        }
      });
    });

    const actions = scrollableTable?.querySelectorAll('button') ?? [];
    actions?.forEach(action => {
      action.onclick = () => {
        alert('Action performed');
      };
    });
  });
</script>
<section tabindex="0" aria-label="Table with Fixed Top Header Row and Shadow" class="focus-visible:focus-outline">
  <table id="vertical-scrollable-table" class="sd-table sample-table h-[200px] overflow-y-scroll block">
    <thead>
      <tr>
        <th class="sd-table-cell sd-table-cell--bg-white sticky top-0 sd-table-cell--shadow-bottom">Job title</th>
        <th class="sd-table-cell sd-table-cell--bg-white sticky top-0 sd-table-cell--shadow-bottom">Location</th>
        <th class="sd-table-cell sd-table-cell--bg-white sticky top-0 sd-table-cell--shadow-bottom">Job category</th>
        <th class="sd-table-cell sd-table-cell--bg-white sticky top-0 sd-table-cell--shadow-bottom">Employment type</th>
        <th class="sd-table-cell sd-table-cell--bg-white sticky top-0 sd-table-cell--shadow-bottom z-10">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Apprenticeship</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Portfolio Management</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Employee for our Legal Reporting in the Fund Administration Area</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Fund Administration</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">
            Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or
            Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Customer Service</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Hamburg</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Compliance</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">
            Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Other</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</section>
```

## Template: Table with Fixed Bottom Header Row and Shadow

```html
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const scrollableTable = document.getElementById('vertical-scrollable-table-2');
    const tableHeaders = scrollableTable?.querySelectorAll('th');

    scrollableTable?.addEventListener('scroll', () => {
      tableHeaders.forEach(header => {
        if (scrollableTable.scrollTop === scrollableTable.scrollHeight - scrollableTable.clientHeight) {
          header.classList.remove('sd-table-cell--shadow-active');
        } else {
          header.classList.add('sd-table-cell--shadow-active');
        }
      });
    });

    const actions = scrollableTable?.querySelectorAll('button') ?? [];
    actions?.forEach(action => {
      action.onclick = () => {
        alert('Action performed');
      };
    });
  });
</script>
<section tabindex="0" aria-label="Table with Fixed Bottom Header Row and Shadow" class="focus-visible:focus-outline">
  <table id="vertical-scrollable-table-2" class="sd-table sample-table h-[200px] block overflow-y-scroll">
    <thead class="sr-only">
      <tr>
        <th>Job title</th>
        <th>Location</th>
        <th>Job category</th>
        <th>Employment type</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Apprenticeship</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Portfolio Management</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Employee for our Legal Reporting in the Fund Administration Area</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Fund Administration</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">
            Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or
            Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Customer Service</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Hamburg</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Compliance</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)"
            >(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link
          >
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">
            Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
          </sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <td class="sd-table-cell sd-table-cell--bg-transparent w-1/3">
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
        </td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Other</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td
          class="sd-table-cell sd-table-cell--bg-white sticky bottom-0 sd-table-cell--shadow-top sd-table-cell--shadow-active"
        >
          Job title
        </td>
        <td
          class="sd-table-cell sd-table-cell--bg-white sticky bottom-0 sd-table-cell--shadow-top sd-table-cell--shadow-active"
        >
          Location
        </td>
        <td
          class="sd-table-cell sd-table-cell--bg-white sticky bottom-0 sd-table-cell--shadow-top sd-table-cell--shadow-active"
        >
          Job category
        </td>
        <td
          class="sd-table-cell sd-table-cell--bg-white sticky bottom-0 sd-table-cell--shadow-top sd-table-cell--shadow-active"
        >
          Employment type
        </td>
        <td
          class="sd-table-cell sd-table-cell--bg-white sticky bottom-0 sd-table-cell--shadow-top sd-table-cell--shadow-active"
        >
          Actions
        </td>
      </tr>
    </tfoot>
  </table>
</section>
```

## Template: Table with Fixed Left Header Column and Shadow

```html
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const scrollableTable = document.getElementById('horizontal-scrollable-table');
    const tableHeaders = scrollableTable?.querySelectorAll('th');

    scrollableTable?.addEventListener('scroll', () => {
      tableHeaders.forEach(header => {
        if (scrollableTable.scrollLeft === 0) {
          header.classList.remove('sd-table-cell--shadow-active');
        } else {
          header.classList.add('sd-table-cell--shadow-active');
        }
      });
    });

    const actions = scrollableTable?.querySelectorAll('button') ?? [];
    actions?.forEach(action => {
      action.onclick = () => {
        alert('Action performed');
      };
    });
  });
</script>
<section
  id="horizontal-scrollable-table"
  class="overflow-x-scroll overflow-y-visible w-[600px] focus-visible:focus-outline"
  tabindex="0"
  aria-label="Table with Fixed Left Header Column and Shadow"
>
  <table class="sd-table sample-table">
    <thead class="sr-only">
      <tr>
        <td></td>
        <th>Job title</th>
        <th>Location</th>
        <th>Job category</th>
        <th>Employment type</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-white"
        >
          <sd-link href="javascript:void(0)"
            >Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link
          >
        </th>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Apprenticeship</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
        >
          <sd-link href="javascript:void(0)"
            >Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link
          >
        </th>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Dual Study Program / Training</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-white"
        >
          <sd-link href="javascript:void(0)">Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link>
        </th>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Portfolio Management</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
        >
          <sd-link href="javascript:void(0)">
            (Junior) Employee for our Legal Reporting in the Fund Administration Area
          </sd-link>
        </th>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Fund Administration</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-white"
        >
          <sd-link href="javascript:void(0)">
            Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or
            Part-time)
          </sd-link>
        </th>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Customer Service</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
        >
          <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
        </th>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Hamburg</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Compliance</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-white"
        >
          <sd-link href="javascript:void(0)"
            >(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link
          >
        </th>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
        >
          <sd-link href="javascript:void(0)">
            Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
          </sd-link>
        </th>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">IT</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time<br />Part-time</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-white"
        >
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
        </th>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Private Clients</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-transparent">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
      <tr>
        <th
          class="sd-table-cell top-auto sticky left-0 z-[2] bg-clip-padding sd-table-cell--shadow-right sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
        >
          <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
        </th>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Other</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time</td>
        <td class="sd-table-cell sd-table-cell--bg-neutral-100">
          <div class="flex gap-1">
            <sd-tooltip content="Add to favorites">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
              </button>
            </sd-tooltip>
            <sd-tooltip content="Share">
              <button class="sd-interactive sd-interactive--reset flex">
                <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
              </button>
            </sd-tooltip>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</section>
```

## Template: Table with Fixed Right Header Column and Shadow

```html
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const scrollableTable = document.getElementById('horizontal-scrollable-table-2');
      const tableHeaders = scrollableTable?.querySelectorAll('th');


      scrollableTable?.addEventListener('scroll', () => {
        tableHeaders.forEach(header => {
          if (scrollableTable.scrollLeft + scrollableTable.clientWidth >= scrollableTable.scrollWidth) {
            header.classList.remove('sd-table-cell--shadow-active');
          } else {
            header.classList.add('sd-table-cell--shadow-active');
          }
        });
      });

      const actions = scrollableTable?.querySelectorAll('button') ?? [];
      actions?.forEach(action => {
        action.onclick = () => {
          alert('Action performed');
        };
      });
    });
  </script>
  <section
    id="horizontal-scrollable-table-2"
    class="overflow-x-scroll overflow-y-visible w-[600px] focus-visible:focus-outline"
    tabindex="0"
    aria-label="Table with Fixed Right Header Column and Shadow"
  >
    <table class="sd-table sample-table">
      <thead class="sr-only">
        <th>Job title</th>
        <th>Location</th>
        <th>Job category</th>
        <th>Employment type</th>
        <th>Actions</th>
        <td></td>
      </thead>
      <tbody>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-transparent min-w-[400px]">
            <sd-link href="javascript:void(0)">Dual Study Program with Training Investment Fund Saleswoman/Man (m/f/d)</sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Apprenticeship</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Dual Study Program / Training</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-white"
          >
            <div class="flex gap-1">
             <sd-tooltip content="Add to favorites">
                <button class="sd-interactive sd-interactive--reset flex">
                  <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                </button>
              </sd-tooltip>
              <sd-tooltip content="Share">
                <button class="sd-interactive sd-interactive--reset flex">
                 <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                </button>
              </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 min-w-[400px]">
            <sd-link href="javascript:void(0)">Dual Study Program in Business Informatics (m/f/d), Start 01.09.2025</sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">IT</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Dual Study Program / Training</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
          >
            <div class="flex gap-1">
              <sd-tooltip content="Add to favorites">
                <button class="sd-interactive sd-interactive--reset flex">
                  <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                </button>
              </sd-tooltip>
              <sd-tooltip content="Share">
                <button class="sd-interactive sd-interactive--reset flex">
                 <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                </button>
              </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-transparent min-w-[400px]">
            <sd-link href="javascript:void(0)">Portfolio Manager Multi Asset Solutions (Full-time or Part-time)</sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Portfolio Management</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time<br />Part-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-white"
          >
            <div class="flex gap-1">
              <sd-tooltip content="Add to favorites">
                <button class="sd-interactive sd-interactive--reset flex">
                  <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                </button>
              </sd-tooltip>
              <sd-tooltip content="Share">
                <button class="sd-interactive sd-interactive--reset flex">
                 <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                </button>
              </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 min-w-[400px]">
            <sd-link href="javascript:void(0)"
              >(Junior) Employee for our Legal Reporting in the Fund Administration Area</sd-link
            >
          </td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Fund Administration</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time<br />Part-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
          >
            <div class="flex gap-1">
             <sd-tooltip content="Add to favorites">
                <button class="sd-interactive sd-interactive--reset flex">
                  <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                </button>
              </sd-tooltip>
              <sd-tooltip content="Share">
                <button class="sd-interactive sd-interactive--reset flex">
                 <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                </button>
              </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-transparent min-w-[400px]">
            <sd-link href="javascript:void(0)">
              Sales Staff (m/f/d) Customer Service with a Focus on Partner Banks and Private Clients (Full-time or Part-time)
            </sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Customer Service</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time<br />Part-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-white"
          >
            <div class="flex gap-1">
              <sd-tooltip content="Add to favorites">
                  <button class="sd-interactive sd-interactive--reset flex">
                    <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                  </button>
                </sd-tooltip>
                <sd-tooltip content="Share">
                  <button class="sd-interactive sd-interactive--reset flex">
                   <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                  </button>
                </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 min-w-[400px]">
            <sd-link href="javascript:void(0)">Data Protection Officer/Auditor (Full-time or Part-time)</sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Hamburg</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Compliance</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time<br />Part-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
          >
            <div class="flex gap-1">
             <sd-tooltip content="Add to favorites">
                  <button class="sd-interactive sd-interactive--reset flex">
                    <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                  </button>
                </sd-tooltip>
                <sd-tooltip content="Share">
                  <button class="sd-interactive sd-interactive--reset flex">
                   <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                  </button>
                </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-transparent min-w-[400px]">
            <sd-link href="javascript:void(0)">(Junior) Business Analyst Risk Management (Full-time or Part-time)</sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Private Clients</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time<br />Part-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-white"
          >
            <div class="flex gap-1">
             <sd-tooltip content="Add to favorites">
                  <button class="sd-interactive sd-interactive--reset flex">
                    <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                  </button>
                </sd-tooltip>
                <sd-tooltip content="Share">
                  <button class="sd-interactive sd-interactive--reset flex">
                   <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                  </button>
                </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 min-w-[400px]">
            <sd-link href="javascript:void(0)">
              Head of the AI Competence Center as Group Leader*in IT Data Analytics (Full-time or Part-time)
            </sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">IT</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time<br />Part-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
          >
            <div class="flex gap-1">
              <sd-tooltip content="Add to favorites">
                  <button class="sd-interactive sd-interactive--reset flex">
                    <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                  </button>
                </sd-tooltip>
                <sd-tooltip content="Share">
                  <button class="sd-interactive sd-interactive--reset flex">
                   <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                  </button>
                </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-transparent min-w-[400px]">
            <sd-link href="javascript:void(0)">Trainee (m/f/d) Product Management & Sales PLUS</sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Private Clients</td>
          <td class="sd-table-cell sd-table-cell--bg-transparent whitespace-nowrap">Full-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-white"
          >
            <div class="flex gap-1">
             <sd-tooltip content="Add to favorites">
                  <button class="sd-interactive sd-interactive--reset flex">
                    <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                  </button>
                </sd-tooltip>
                <sd-tooltip content="Share">
                  <button class="sd-interactive sd-interactive--reset flex">
                   <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                  </button>
                </sd-tooltip>
            </div>
          </th>
        </tr>
        <tr>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 min-w-[400px]">
            <sd-link href="javascript:void(0)">Trainee (m/f/d) Digitalization PLUS</sd-link>
          </td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Frankfurt am Main</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Other</td>
          <td class="sd-table-cell sd-table-cell--bg-neutral-100 whitespace-nowrap">Full-time</td>
          <th
            class="sd-table-cell top-auto sticky right-0 z-[2] bg-clip-padding sd-table-cell--shadow-left sd-table-cell--shadow-active sd-table-cell--bg-neutral-100"
          >
            <div class="flex gap-1">
              <sd-tooltip content="Add to favorites">
                  <button class="sd-interactive sd-interactive--reset flex">
                    <sd-icon class="w-6 h-6" name="system/star-empty" label="Add to favorites"></sd-icon>
                  </button>
                </sd-tooltip>
                <sd-tooltip content="Share">
                  <button class="sd-interactive sd-interactive--reset flex">
                   <sd-icon class="w-6 h-6" name="system/share" label="Share"></sd-icon>
                  </button>
                </sd-tooltip>
            </div>
          </th>
        </tr>
      </tbody>
    </table>
  </section>
</div>
```