JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <label>
    <input type="checkbox" name="xxx">
    xxx
  </label>
  <label>
    <input type="checkbox" name="yyy">
    yyy
  </label>
  <label>
    <input type="checkbox" name="zzz">
    zzz
  </label>
</form>
<table>
  <thead>
    <th>#</th>
    <th>xxx</th>
    <th>yyy</th>
    <th>zzz</th>
  </thead>
  <tbody></tbody>
</table>

CSS

* {
  font-family: monospace;
}

td {
  padding: 10px;
  border: 1px solid silver;
}

JavaScript

const DATA = [...Array(8)].map((n, i) => ({
  id: i + 1,
  xxx: +!!(i & 1),
  yyy: +!!(i & 2),
  zzz: +!!(i & 4),
}));

function renderTable(data) {
  document.querySelector('table tbody').innerHTML = data
    .map(n => `
      <tr>
        <td>${n.id}</td>
        <td>${n.xxx}</td>
        <td>${n.yyy}</td>
        <td>${n.zzz}</td>
      </tr>
    `)
    .join('');
}

document.querySelector('form').addEventListener('change', function() {
  const checked = [...new FormData(this).keys()];
  const filteredData = checked.reduce((acc, n) => acc.filter(m => m[n]), DATA);

  renderTable(filteredData);
});

renderTable(DATA);