Bootstrap 5 Editable Data Table with Add and Delete Rows

<section class="wdw-stage">
  <div class="container" style="max-width: 960px">
    <div class="wdw-card p-3 p-md-4" id="dt">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3 px-1">
        <div>
          <span class="wdw-eyebrow">Directory</span>
          <h1 class="wdw-heading h4 mb-0">Employee details</h1>
        </div>
        <button type="button" class="btn btn-primary rounded-pill px-4" id="dtAdd"><i class="bi bi-plus-lg"></i> Add employee</button>
      </div>
      <div class="d-flex flex-wrap align-items-center gap-3 mb-2 px-1">
        <div class="flex-grow-1 position-relative" style="min-width: 220px">
          <label class="visually-hidden" for="dtSearch">Search employees</label>
          <i class="bi bi-search dt-search-icon"></i>
          <input id="dtSearch" type="search" class="form-control ps-5" placeholder="Search employees">
        </div>
        <span class="small text-body-secondary" id="dtCount" aria-live="polite">3 employees</span>
      </div>
      <div class="table-responsive">
        <table class="table align-middle mb-0 dt-table">
          <thead>
            <tr><th scope="col">Employee</th><th scope="col">Department</th><th scope="col">Phone</th><th scope="col" class="text-end">Actions</th></tr>
          </thead>
          <tbody id="dtBody"></tbody>
        </table>
      </div>
      <p class="text-center text-body-secondary py-4 mb-0" id="dtEmpty" hidden>No employees found.</p>
    </div>
  </div>
  <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
    <div class="toast align-items-center text-bg-dark border-0" id="dtToast" role="status" aria-live="polite" aria-atomic="true" data-bs-autohide="true" data-bs-delay="6000">
      <div class="d-flex align-items-center">
        <div class="toast-body" id="dtToastMsg">Employee deleted.</div>
        <button type="button" class="btn btn-sm btn-outline-light me-2" id="dtUndo">Undo</button>
        <button type="button" class="btn-close btn-close-white me-2" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>
</section>

@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css");
/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
   Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root,
[data-bs-theme="light"] {
  --wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: var(--wdw-font);
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-primary-text-emphasis: #3730a3;
  --bs-primary-bg-subtle: #eef2ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-link-color: #4f46e5;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #4338ca;
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-focus-ring-color: rgba(79, 70, 229, 0.25);
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
  --wdw-radius-card: 1.25rem;
  --wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
  --wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
  --wdw-stage: #f5f6fb;
}

[data-bs-theme="dark"] {
  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-primary-text-emphasis: #c7d2fe;
  --bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
  --bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
  --bs-link-color: #a5b4fc;
  --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #c7d2fe;
  --bs-link-hover-color-rgb: 199, 210, 254;
  --bs-focus-ring-color: rgba(129, 140, 248, 0.35);
  --wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --wdw-stage: #0f1117;
}

body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }

/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
  --bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }

/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }

/* Component */
.dt-table { --bs-table-bg: transparent; }
.dt-table thead th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); border-bottom-width: 1px; padding: .75rem; }
.dt-table td { padding: .7rem .75rem; min-height: 64px; }
.dt-name { font-weight: 600; color: var(--bs-emphasis-color); }
.dt-table .form-control { min-height: 40px; padding: .35rem .7rem; font-size: .9rem; }
.dt-avatar { position: relative; flex: none; width: 40px; height: 40px; }
.dt-avatar > img, .dt-avatar > .dt-initials { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dt-initials { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.dt-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bs-body-bg); }
.dt-icon { width: 36px; padding: 0; }
.dt-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.dt-table tr.dt-editing td { background: var(--bs-primary-bg-subtle); }
.dt-table tr.dt-new { animation: dt-in .35s ease-out; }
@keyframes dt-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dt-table tr.dt-new { animation: none; } }
@media (max-width: 575.98px) {
  .dt-table thead { display: none; }
  .dt-table, .dt-table tbody { display: block; }
  .dt-table tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; padding: .85rem .25rem; border-bottom: 1px solid var(--bs-border-color); }
  .dt-table tr[hidden] { display: none; }
  .dt-table td { display: block; padding: .1rem .5rem; min-height: 0; border: 0; background: transparent; }
  .dt-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dt-table td:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: start; display: flex; }
  .dt-table td:nth-child(2), .dt-table td:nth-child(3) { grid-column: 1; color: var(--bs-secondary-color); font-size: .9rem; }
  .dt-table tr.dt-editing td { background: transparent; }
  .dt-table tr.dt-editing { background: var(--bs-primary-bg-subtle); border-radius: .75rem; }
}

(function () {
  var body = document.getElementById('dtBody');
  var addBtn = document.getElementById('dtAdd');
  var empty = document.getElementById('dtEmpty');
  var search = document.getElementById('dtSearch');
  var count = document.getElementById('dtCount');
  var toastEl = document.getElementById('dtToast');
  if (!body || !addBtn) return;

  var STATUS = { active: ['bg-success', 'Active'], away: ['bg-warning', 'Away'], offline: ['bg-secondary', 'Offline'] };
  var data = [
    { id: 1, name: 'John Doe', email: '[email protected]', dept: 'Administration', phone: '(171) 555-2222', status: 'active', img: 12 },
    { id: 2, name: 'Peter Parker', email: '[email protected]', dept: 'Customer Service', phone: '(313) 555-5735', status: 'away', img: 33 },
    { id: 3, name: 'Fran Wilson', email: '[email protected]', dept: 'Human Resources', phone: '(503) 555-9931', status: 'active', img: 47 }
  ];
  var nextId = 4, editing = null, lastDeleted = null, tips = [];
  var toast = toastEl ? bootstrap.Toast.getOrCreateInstance(toastEl) : null;

  function esc(s) {
    return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; });
  }
  function initials(n) {
    return n.split(/\s+/).slice(0, 2).map(function (p) { return p.charAt(0); }).join('').toUpperCase() || '?';
  }
  function iconBtn(cls, label, icon, extra) {
    return '<button type="button" class="btn btn-sm btn-outline-secondary rounded-circle dt-icon ' + cls + '" data-bs-toggle="tooltip" data-bs-title="' + label + '" aria-label="' + label + '"' + (extra || '') + '><i class="bi bi-' + icon + '"></i></button>';
  }

  function rowHtml(e) {
    var st = STATUS[e.status] || STATUS.offline;
    var avatar = e.img
      ? '<img src="https://i.pravatar.cc/80?img=' + e.img + '" alt="" width="40" height="40">'
      : '<span class="dt-initials" aria-hidden="true">' + esc(initials(e.name)) + '</span>';
    var dot = '<span class="dt-dot ' + st[0] + '"></span><span class="visually-hidden">' + st[1] + '</span>';
    if (e.editing) {
      return '<tr class="dt-editing' + (e.isNew ? ' dt-new' : '') + '" data-id="' + e.id + '">' +
        '<td><div class="d-flex flex-column gap-1"><input type="text" class="form-control" data-f="name" aria-label="Name" placeholder="Full name" value="' + esc(e.name) + '"><input type="email" class="form-control" data-f="email" aria-label="Email" placeholder="Email" value="' + esc(e.email) + '"></div></td>' +
        '<td><input type="text" class="form-control" data-f="dept" aria-label="Department" placeholder="Department" value="' + esc(e.dept) + '"></td>' +
        '<td><input type="tel" class="form-control" data-f="phone" aria-label="Phone" placeholder="Phone" value="' + esc(e.phone) + '"></td>' +
        '<td class="text-end"><div class="d-inline-flex gap-1">' + iconBtn('save', 'Save changes', 'check-lg') + iconBtn('cancel', 'Cancel (Esc)', 'x-lg') + '</div></td></tr>';
    }
    return '<tr data-id="' + e.id + '" data-q="' + esc((e.name + ' ' + e.email + ' ' + e.dept).toLowerCase()) + '">' +
      '<td><div class="d-flex align-items-center gap-3"><span class="dt-avatar">' + avatar + dot + '</span><div><div class="dt-name">' + esc(e.name) + '</div><div class="small text-body-secondary">' + esc(e.email) + '</div></div></div></td>' +
      '<td><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis">' + esc(e.dept) + '</span></td>' +
      '<td>' + esc(e.phone) + '</td>' +
      '<td class="text-end"><div class="d-inline-flex gap-1">' + iconBtn('edit', 'Edit employee', 'pencil') + iconBtn('del', 'Delete employee', 'trash3') + '</div></td></tr>';
  }

  function render() {
    tips.forEach(function (t) { t.dispose(); });
    body.innerHTML = data.map(rowHtml).join('');
    tips = Array.prototype.map.call(body.querySelectorAll('[data-bs-toggle="tooltip"]'), function (el) {
      return new bootstrap.Tooltip(el, { trigger: 'hover focus' });
    });
    addBtn.disabled = !!editing;
    applyFilter();
  }

  function applyFilter() {
    var q = search.value.trim().toLowerCase();
    var shown = 0;
    Array.prototype.forEach.call(body.rows, function (r) {
      var show = !q || r.classList.contains('dt-editing') || (r.dataset.q || '').indexOf(q) !== -1;
      r.hidden = !show;
      if (show) shown++;
    });
    var n = data.filter(function (e) { return !e.editing; }).length;
    count.textContent = q ? shown + ' of ' + n + ' employees' : n + (n === 1 ? ' employee' : ' employees');
    empty.hidden = shown > 0;
  }

  function find(id) { return data.filter(function (e) { return e.id === id; })[0]; }

  function startEdit(e) {
    if (editing) return;
    editing = { id: e.id, backup: { name: e.name, email: e.email, dept: e.dept, phone: e.phone } };
    e.editing = true;
    render();
    body.querySelector('tr.dt-editing input').focus();
  }

  function cancelEdit() {
    if (!editing) return;
    var e = find(editing.id);
    if (e.isNew) data.splice(data.indexOf(e), 1);
    else { Object.assign(e, editing.backup); e.editing = false; }
    editing = null;
    render();
  }

  function saveEdit() {
    var row = body.querySelector('tr.dt-editing');
    if (!row) return;
    var ok = true, vals = {};
    row.querySelectorAll('input').forEach(function (inp) {
      var bad = !inp.value.trim();
      inp.classList.toggle('is-invalid', bad);
      if (bad) ok = false;
      vals[inp.dataset.f] = inp.value.trim();
    });
    if (!ok) return;
    var e = find(editing.id);
    Object.assign(e, vals);
    e.editing = false;
    e.isNew = false;
    editing = null;
    render();
  }

  function remove(e) {
    var idx = data.indexOf(e);
    data.splice(idx, 1);
    lastDeleted = { emp: e, index: idx };
    render();
    document.getElementById('dtToastMsg').textContent = e.name + ' deleted.';
    if (toast) toast.show();
  }

  function initRows() {
    body.addEventListener('click', function (ev) {
      var btn = ev.target.closest('button');
      if (!btn) return;
      var row = btn.closest('tr');
      var e = find(Number(row.dataset.id));
      if (btn.classList.contains('edit')) startEdit(e);
      else if (btn.classList.contains('save')) saveEdit();
      else if (btn.classList.contains('cancel')) cancelEdit();
      else if (btn.classList.contains('del')) remove(e);
    });
    body.addEventListener('keydown', function (ev) {
      if (!ev.target.matches('input')) return;
      if (ev.key === 'Enter') { ev.preventDefault(); saveEdit(); }
      else if (ev.key === 'Escape') cancelEdit();
    });
  }

  function initUndo() {
    document.getElementById('dtUndo').addEventListener('click', function () {
      if (!lastDeleted) return;
      data.splice(Math.min(lastDeleted.index, data.length), 0, lastDeleted.emp);
      lastDeleted = null;
      if (toast) toast.hide();
      render();
    });
  }

  function initAdd() {
    addBtn.addEventListener('click', function () {
      if (editing) return;
      var e = { id: nextId++, name: '', email: '', dept: '', phone: '', status: 'active', isNew: true, editing: true };
      data.unshift(e);
      editing = { id: e.id, backup: null };
      search.value = '';
      render();
      body.querySelector('tr.dt-editing input').focus();
    });
  }

  search.addEventListener('input', applyFilter);
  initRows();
  initUndo();
  initAdd();
  render();
})();