VGTable

<div id="table-columns-controls" class="vg-dropdown">
  <button type="button" data-vg-toggle="dropdown" data-placement="auto">Колонки</button>
  <div class="vg-dropdown-content">
    <div class="vg-dropdown-container">
      <label><input type="checkbox" data-vg-table-column="name" checked> Сотрудник</label>
      <label><input type="checkbox" data-vg-table-column="department" checked> Отдел</label>
      <button type="button" data-vg-table-columns-reset>Сбросить настройки</button>
    </div>
  </div>
</div>

<div class="vg-table-wrapper">
  <div class="vg-table-container">
    <table
      id="employees-table"
      class="vg-table vg-table-hovered"
      data-vg-table
      data-column-resize-enable="true"
      data-column-resize-min-width="80"
      data-column-resize-max-width="480"
      data-column-reorder-enable="true"
      data-column-visibility-enable="true"
      data-column-visibility-controls="#table-columns-controls"
      data-fixed-columns="left:id;right:actions"
      style="min-width: 88rem"
    >
      <thead>...</thead>
      <tbody>...</tbody>
    </table>
  </div>
</div>

const table = document.querySelector('#employees-table');
const instance = VGTable.getInstance(table);

instance.setColumnWidth('name', 260);
instance.moveColumn('department', 'position');
instance.setColumnVisible('email', false);
instance.resetColumns();

table.addEventListener('columnresize.vg.table', ({detail}) => console.log(detail));
table.addEventListener('columnreorder.vg.table', ({detail}) => console.log(detail));
table.addEventListener('columnvisibilitychange.vg.table', ({detail}) => console.log(detail));

/* Публичные переменные resize и drag-and-drop. */
#employees-table {
  --vg-table-columns-resize-line-color: var(--vg-primary);
  --vg-table-columns-drag-outline-color: var(--vg-primary);
}