Bootstrap Data Table with Row Selection — Free Snippet

<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-2">
    <span class="small text-muted" id="bsselCount">0 selected</span>
    <button class="btn btn-sm btn-outline-danger d-none" id="bsselDelete">Delete selected</button>
  </div>
  <table class="table table-hover align-middle bssel-table">
    <thead>
      <tr>
        <th style="width:40px"><input type="checkbox" class="form-check-input" id="bsselAll"></th>
        <th>File</th><th>Size</th><th>Modified</th>
      </tr>
    </thead>
    <tbody id="bsselBody">
      <tr><td><input type="checkbox" class="form-check-input bssel-row"></td><td>proposal-final.pdf</td><td>2.1 MB</td><td>Sep 8</td></tr>
      <tr><td><input type="checkbox" class="form-check-input bssel-row"></td><td>brand-assets.zip</td><td>18.4 MB</td><td>Sep 5</td></tr>
      <tr><td><input type="checkbox" class="form-check-input bssel-row"></td><td>meeting-notes.docx</td><td>84 KB</td><td>Sep 2</td></tr>
      <tr><td><input type="checkbox" class="form-check-input bssel-row"></td><td>roadmap-2026.xlsx</td><td>412 KB</td><td>Aug 29</td></tr>
    </tbody>
  </table>
</div>

.bssel-table tr.bssel-selected { background: #eef0ff; }

const selectAll = document.getElementById('bsselAll');
const rowChecks = document.querySelectorAll('.bssel-row');
const countEl = document.getElementById('bsselCount');
const deleteBtn = document.getElementById('bsselDelete');
const body = document.getElementById('bsselBody');

function updateSummary() {
  const checked = document.querySelectorAll('.bssel-row:checked');
  countEl.textContent = checked.length + ' selected';
  deleteBtn.classList.toggle('d-none', checked.length === 0);

  // The "select all" checkbox has a real third visual state — indeterminate
  // — for exactly this case: some but not all rows are checked.
  selectAll.indeterminate = checked.length > 0 && checked.length < rowChecks.length;
  selectAll.checked = checked.length === rowChecks.length;
}

rowChecks.forEach(box => {
  box.addEventListener('change', () => {
    box.closest('tr').classList.toggle('bssel-selected', box.checked);
    updateSummary();
  });
});

selectAll.addEventListener('change', () => {
  rowChecks.forEach(box => {
    box.checked = selectAll.checked;
    box.closest('tr').classList.toggle('bssel-selected', selectAll.checked);
  });
  updateSummary();
});

deleteBtn.addEventListener('click', () => {
  document.querySelectorAll('.bssel-row:checked').forEach(box => box.closest('tr').remove());
  updateSummary();
});