fix uneven row size

public/app.js

@@ -218,6 +218,8 @@ function loadColumnVisibility() {
   return null;
 }
 
+// ✅ Показываем меню выбора столбцов
+
 // ✅ Показываем меню выбора столбцов
 function showColumnManager() {
   if (!table || !currentMeta) {
@@ -241,6 +243,26 @@ function showColumnManager() {
   // Получаем все колонки
   const columns = table.getColumns();
   
+  // ✅ Фильтруем служебные колонки
+  const userColumns = columns.filter(col => {
+    const field = col.getField();
+    const definition = col.getDefinition();
+    
+    // Исключаем колонку с чекбоксами (может быть undefined, __tabulator_row_selection и т.д.)
+    if (!field || field === 'undefined' || field.startsWith('__tabulator')) {
+      return false;
+    }
+    
+    // Исключаем колонки с formatter: "rowSelection"
+    if (definition.formatter === 'rowSelection') {
+      return false;
+    }
+    
+    return true;
+  });
+  
+  console.log('📋 Столбцов для настройки:', userColumns.length);
+  
   // Кнопки управления
   html += '<div style="margin-bottom: 15px; display: flex; gap: 10px;">';
   html += '<button id="selectAllColumns" style="padding: 6px 12px; cursor: pointer; border: 1px solid #ccc; background: #fff; border-radius: 3px;">✓ Выбрать все</button>';
@@ -249,12 +271,8 @@ function showColumnManager() {
   
   html += '<div style="max-height: 400px; overflow-y: auto;">';
   
-  columns.forEach(col => {
+  userColumns.forEach(col => {
     const field = col.getField();
-    
-    // Пропускаем колонку с чекбоксами
-    if (field === '__tabulator_row_selection') return;
-    
     const definition = col.getDefinition();
     const visible = col.isVisible();
     const title = definition.title || field;
@@ -267,7 +285,7 @@ function showColumnManager() {
       <div class="column-checkbox">
         <input type="checkbox" id="col_${field}" ${visible ? 'checked' : ''} data-field="${field}">
         <label for="col_${field}">
-          <strong>${title}</strong>
+          <strong>${escapeHtml(title)}</strong>
           ${comment ? `<br><small style="color: #666;">${escapeHtml(comment)}</small>` : ''}
         </label>
       </div>
@@ -348,6 +366,7 @@ function showColumnManager() {
 
 
 
+
 // selectTable
 
 async function selectTable(schema, tableName) {
@@ -543,11 +562,11 @@ async function selectTable(schema, tableName) {
     selectableRowsCheck: function(row) { return true; },
     
     columns: columns,
-    layout: "fitData", // ✅ Изменено с fitColumns на fitData
-    resizableColumns: true, // ✅ Разрешаем изменять ширину столбцов
-    resizableColumnFit: false, // ✅ Выключаем авто-подгонку при ресайзе
+    layout: "fitDataStretch", // ✅ Изменено - растягивает столбцы для заполнения + подгоняет под данные
+    resizableColumns: true,
+    resizableColumnFit: false,
     
-    columnMinWidth: 100, // ✅ Минимальная ширина столбца
+    columnMinWidth: 100,
     
     pagination: true,
     paginationMode: "remote",

public/index.html

@@ -255,7 +255,42 @@
       color: #b3e5fc;
       font-style: normal;
     }
-
+/* ✅ Синхронизация ширины заголовков и столбцов */
+    .tabulator {
+      border: none;
+      background-color: white;
+      overflow: auto !important;
+    }
+    
+    .tabulator .tabulator-header {
+      background-color: #f5f5f5;
+      border-bottom: 2px solid #ddd;
+      overflow: visible !important; /* Важно для синхронизации */
+    }
+    
+    .tabulator .tabulator-header .tabulator-col {
+      background-color: #f5f5f5;
+    }
+    
+    .tabulator .tabulator-tableholder {
+      overflow: auto !important;
+    }
+    
+    .tabulator .tabulator-table {
+      width: auto !important;
+    }
+    
+    /* ✅ Минимальная ширина столбцов */
+    .tabulator-col {
+      min-width: 100px !important;
+    }
+    
+    /* ✅ Фиксируем первый столбец с чекбоксами */
+    .tabulator-col[tabulator-field=""] {
+      width: 40px !important;
+      min-width: 40px !important;
+      max-width: 40px !important;
+    }
 </style>
 
 </head>