Sandbox Test Page 3

  .report-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 1em;
  }
  .report-table th, .report-table td {
    border: 1px solid #ccc;
    padding: 4px 8px;
    text-align: left;
  }
  .hidden-col {
    display: none;
  }

Настройка столбцов:
Реализация

Поставки

  function toggleGroup(group) {
    const groupBox = document.getElementById('group-' + group);
    const options = document.getElementById(group + '-options');
    const checkboxes = options.querySelectorAll('input[type=checkbox]');
    if (groupBox.checked) {
      options.style.display = 'block';
    } else {
      options.style.display = 'none';
      checkboxes.forEach(cb => {
        cb.checked = false;
        toggleColumn(cb.parentNode.textContent.trim().toLowerCase(), false);
      });
      if (group === 'realization') {
        toggleColumn('qty', false);
        toggleColumn('price', false);
        toggleColumn('sum', false);
      }
      if (group === 'supply') {
        toggleColumn('supplier', false);
        toggleColumn('arrival', false);
      }
    }
  }

  function toggleColumn(colName, force) {
    const show = force !== undefined ? force : event.target.checked;
    const cells = document.querySelectorAll('.col-' + colName);
    cells.forEach(cell => {
      if (show) {
        cell.classList.remove('hidden-col');
      } else {
        cell.classList.add('hidden-col');
      }
    });
  }