<velin-data-table editable page-size="5" empty-text="Keine Einträge">
  <table class="velin-table">
    <caption>Team</caption>
    <thead>
      <tr>
        <th data-sort="text">Name</th>
        <th data-sort="number">Commits</th>
        <th data-sort="none">Rolle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-editable>Ada</td>
        <td data-editable>42</td>
        <td>Engineer</td>
      </tr>
    </tbody>
  </table>
</velin-data-table>

document.querySelector('velin-data-table')?.addEventListener('velin-data-table-edit', (e) => {
  console.log('cell edited', e.detail);
});