JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<input id="ckCodigo" name="ckCodigo" type="checkbox" data-type="ckColuna" data-column="codigo" />
<label for="ckCodigo">Código</label>
</div>
<div>
<input id="ckDesignacao" name="ckDesignacao" type="checkbox" data-type="ckColuna" data-column="designacao" />
<label for="ckDesignacao">Designação</label>
</div>
<div>
<input id="ckQuantidade" name="ckQuantidade" type="checkbox" data-type="ckColuna" data-column="quantidade" />
<label for="ckQuantidade">Quantidade</label>
</div>

<table id="table" class="hide">
    <thead>
      <tr>
          <th class="hide" data-column="codigo">Código</th>
          <th class="hide" data-column="designacao">Designação</th>
          <th class="hide" data-column="quantidade">Quantidade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td class="hide" data-column="codigo">Código</td>
          <td class="hide" data-column="designacao">Designação</td>
          <td class="hide" data-column="quantidade">Quantidade</td>
      </tr>
      <tr>
          <td class="hide" data-column="codigo">Código</td>
          <td class="hide" data-column="designacao">Designação</td>
          <td class="hide" data-column="quantidade">Quantidade</td>
      </tr>
      <tr>
          <td class="hide" data-column="codigo">Código</td>
          <td class="hide" data-column="designacao">Designação</td>
          <td class="hide" data-column="quantidade">Quantidade</td>
      </tr>
    </tbody>
</table>

CSS

.hide {
    display: none;
}

table, tr, th, td {
    border: 1px solid black;
}

JavaScript

var checkBoxes = $("[data-type='ckColuna']");
var tabela = $("#table");

checkBoxes.click(function () {
    if (checkBoxes.filter(":checked").length > 0) {
        tabela.removeClass("hide");
    } else {
        tabela.addClass("hide");
    }
    
    
    var checkBox = $(this);
    var celulas = $("table [data-column='" + checkBox.attr("data-column") + "']");
    celulas.toggleClass("hide");
});