Pretier rows

public/index.html

@@ -24,13 +24,97 @@
       overflow-y: auto; 
       flex-shrink: 0;
     }
-    #main { 
+
+   #main { 
       flex: 1; 
       display: flex; 
       flex-direction: column; 
       min-width: 0;
       overflow: hidden;
     }
+    
+    #table { 
+      flex: 1; 
+      position: relative; 
+      overflow: auto; /* ✅ Разрешаем прокрутку */
+      min-height: 0;
+    }
+    
+    /* ✅ Горизонтальная прокрутка для Tabulator */
+    .tabulator {
+      border: none;
+      background-color: white;
+      overflow: auto !important; /* Включаем прокрутку */
+    }
+    
+    .tabulator .tabulator-header {
+      background-color: #f5f5f5;
+      border-bottom: 2px solid #ddd;
+    }
+    
+    .tabulator .tabulator-tableholder {
+      overflow: auto !important; /* ✅ Горизонтальная прокрутка */
+    }
+    
+    .tabulator .tabulator-table {
+      width: auto !important; /* ✅ Позволяем таблице быть шире контейнера */
+    }
+
+    /* ✅ Стили для меню столбцов */
+    .columns-menu {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+      z-index: 10000;
+      max-width: 500px;
+      max-height: 80vh;
+      overflow-y: auto;
+    }
+    
+    .columns-menu-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 9999;
+    }
+    
+    .column-checkbox {
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      margin: 4px 0;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    
+    .column-checkbox:hover {
+      background: #f5f5f5;
+    }
+    
+    .column-checkbox input[type="checkbox"] {
+      margin-right: 10px;
+      cursor: pointer;
+    }
+    
+    .column-checkbox label {
+      cursor: pointer;
+      flex: 1;
+      user-select: none;
+    }
+
+    /* ✅ Минимальная ширина столбцов */
+    .tabulator-col {
+      min-width: 100px !important;
+    }
+
     #toolbar { 
       padding: 8px; 
       border-bottom: 1px solid #ccc; 
@@ -40,14 +124,6 @@
       gap: 4px;
       flex-wrap: wrap;
     }
-    #table { 
-      flex: 1; 
-      position: relative; 
-      overflow: auto;
-      min-height: 0;
-    }
-    .schema { font-weight: bold; margin-top: 8px; cursor: pointer; }
-    .table { margin-left: 12px; cursor: pointer; }
     #loginPanel { 
       padding: 8px; 
       border-bottom: 1px solid #ccc; 
@@ -206,6 +282,7 @@
     <input type="file" id="csvFileInput" accept=".csv">
     <button id="btnExportCSV">📤 Экспорт CSV</button>
     <button id="btnAnalyzeCSV">🔍 Анализ CSV</button>
+    <button id="btnManageColumns">⚙️ Столбцы</button>
     <span id="selectionCounter" style="display: none;">Выбрано: 0</span>
   </div>
   <div id="table"></div>