Bootstrap Table Column Visibility Toggle — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bscolvis-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="fw-bold mb-0">Customers</h6>
        <div class="dropdown">
          <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">Columns</button>
          <ul class="dropdown-menu p-2" id="bscolvisMenu"></ul>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-sm mb-0" id="bscolvisTable"></table>
      </div>
    </div>
  </div>
</div>

.bscolvis-card { width: 460px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bscolvis-menu-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }
th.bscolvis-hidden, td.bscolvis-hidden { display: none; }

const COLUMNS = [
  { key: 'name', label: 'Name', locked: true },
  { key: 'email', label: 'Email', locked: false },
  { key: 'plan', label: 'Plan', locked: false },
  { key: 'mrr', label: 'MRR', locked: false },
  { key: 'signup', label: 'Signed up', locked: false },
];

const ROWS = [
  { name: 'Dana Reyes', email: '[email protected]', plan: 'Pro', mrr: '$29', signup: '2024-01-04' },
  { name: 'Marcus Lee', email: '[email protected]', plan: 'Team', mrr: '$99', signup: '2024-03-19' },
  { name: 'Priya Nair', email: '[email protected]', plan: 'Free', mrr: '$0', signup: '2024-06-02' },
];

let visible = new Set(COLUMNS.map(c => c.key));

const menu = document.getElementById('bscolvisMenu');
const table = document.getElementById('bscolvisTable');

function renderMenu() {
  menu.innerHTML = COLUMNS.map(c =>
    '<li><label class="bscolvis-menu-item"><input type="checkbox" class="form-check-input" data-key="' + c.key + '" ' +
    (visible.has(c.key) ? 'checked' : '') + (c.locked ? ' disabled' : '') + '> ' + c.label + '</label></li>'
  ).join('');
}

function renderTable() {
  const cols = COLUMNS.filter(c => visible.has(c.key));
  table.innerHTML =
    '<thead><tr>' + cols.map(c => '<th>' + c.label + '</th>').join('') + '</tr></thead>' +
    '<tbody>' + ROWS.map(row =>
      '<tr>' + cols.map(c => '<td>' + row[c.key] + '</td>').join('') + '</tr>'
    ).join('') + '</tbody>';
}

menu.addEventListener('change', e => {
  const key = e.target.dataset.key;
  if (!key) return;
  if (e.target.checked) visible.add(key); else visible.delete(key);
  renderTable();
});

renderMenu();
renderTable();