Release v1.12.0: searchable column chooser with Hide all, export skips hidden columns (#18)

Author: Robin-Reiche

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to CSV Grid Editor are documented here.
 
+## [1.12.0] - 2026-06-16
+
+### Added
+- **Search and Hide all in the column chooser** - The **Show / hide columns** menu now has a search box that filters the column list by name, plus a **Hide all** button next to the existing **Show all** (requested in [#18](https://github.com/Robin-Reiche/csv-grid-editor/issues/18)). On a wide file the flow becomes: Hide all, then type to find the few columns you want and check them, instead of unchecking dozens one by one.
+
+### Changed
+- **Export now leaves out hidden columns** - Exporting to JSON, JSON Lines or Markdown used to still include columns you had hidden in the column chooser. It now exports only the visible columns, which matches how copy already behaved, so the output is exactly what you see (follow-up to [#18](https://github.com/Robin-Reiche/csv-grid-editor/issues/18)).
+
 ## [1.11.1] - 2026-06-15
 
 ### Fixed

README.md

@@ -88,7 +88,7 @@ For files larger than 10 MB you get a quick menu to open the full file, preview
   - Right-click → **Copy with header** to include the column headers in the copy
   - `Delete` / `Backspace` clears every cell in the selection
   - The status bar shows the selection size plus live `Count / Sum / Avg / Min / Max`
-- **Export as JSON** - Convert the current filtered and sorted view to a JSON array of objects via the native VS Code save dialog. Column headers become the keys and numbers and booleans come out typed, while values that would lose information (IDs with leading zeros, very large numbers) stay strings.
+- **Export as JSON** - Convert the current filtered and sorted view to a JSON array of objects via the native VS Code save dialog. Column headers become the keys and numbers and booleans come out typed, while values that would lose information (IDs with leading zeros, very large numbers) stay strings. Columns you have hidden in the column chooser are left out, the same as copy.
 - **Export as JSON Lines** - The same view as JSON Lines (NDJSON), one object per line, handy for streaming tools and data pipelines
 - **Export as Markdown table** - The same view as a GitHub-flavored Markdown table, ready to paste into a README, issue or pull request
 
@@ -106,7 +106,7 @@ For files larger than 10 MB you get a quick menu to open the full file, preview
 - **Rename** - Right-click a column header → **Rename column** to rename it. The new name is written to the CSV header row and is fully undoable.
 
 ### Show / Hide Columns
-- **Column chooser** - Click the checklist icon in the toolbar to open a list of all columns with checkboxes. Uncheck a column to hide it, re-check to show it, or **Show all** to reset. A view aid, hidden columns are still included on export.
+- **Column chooser** - Click the checklist icon in the toolbar to open a searchable list of all columns with checkboxes. Type to filter the list by column name, uncheck a column to hide it, re-check to show it, or use **Show all** / **Hide all** to flip every column at once (Hide all, then search and re-check the few you want). Hidden columns are excluded from copy and export, so the output matches exactly what you see.
 
 ### Sort & Filter
 

media/webview.css

@@ -1151,17 +1151,6 @@ body.vscode-high-contrast #grid-container.cm-on {
     border-bottom: 1px solid var(--vscode-menu-border, #454545);
     margin-bottom: 4px;
 }
-.col-chooser-showall {
-    border: 1px solid transparent;
-    border-radius: 3px;
-    padding: 2px 8px;
-    font-size: 11px;
-    font-family: inherit;
-    cursor: pointer;
-    background: var(--vscode-button-secondaryBackground, #3a3d41);
-    color:      var(--vscode-button-secondaryForeground, #ccc);
-}
-.col-chooser-showall:hover { background: var(--vscode-button-secondaryHoverBackground, #45494e); }
 .col-chooser-list { max-height: 320px; overflow-y: auto; }
 .col-chooser-list::-webkit-scrollbar { width: 6px; }
 .col-chooser-list::-webkit-scrollbar-thumb { background: var(--vscode-scrollbarSlider-background, #424242); border-radius: 3px; }

package.json

@@ -2,7 +2,7 @@
   "name": "csv-grid-editor",
   "displayName": "CSV Grid Editor: CSV & TSV Viewer",
   "description": "Open, view and edit CSV and TSV files in a fast sortable filterable grid. Inline editing, find and replace, freeze rows, column stats, Excel copy and paste and export to JSON. Free.",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "publisher": "RobinReiche",
   "license": "MIT",
   "icon": "icon.png",

src/webview.ts

@@ -172,7 +172,11 @@ export function getWebviewContent(
     <div id="col-chooser-popover" class="col-chooser-popover hidden">
         <div class="col-chooser-head">
             <span class="goto-label" style="margin:0;">Columns</span>
-            <button id="col-chooser-showall" class="col-chooser-showall">Show all</button>
+        </div>
+        <input id="col-chooser-search" class="csv-filter-input" type="text" placeholder="Search columns…" spellcheck="false">
+        <div class="csv-filter-actions">
+            <button id="col-chooser-showall" type="button" class="csv-filter-link">Show all</button>
+            <button id="col-chooser-hideall" type="button" class="csv-filter-link">Hide all</button>
         </div>
         <div id="col-chooser-list" class="col-chooser-list"></div>
     </div>

src/webview/features/column-chooser.ts

@@ -3,11 +3,15 @@ import { closeAllPopups } from './popups';
 
 // ── Column chooser (show / hide columns) ────────────────────────────────────
 // A toolbar dropdown listing every data column with a checkbox to toggle its
-// visibility. Visibility is applied via AG Grid (setColumnsVisible) and mirrored
-// into state.hiddenCols (0-based data-column indices) so it survives a grid
-// rebuild — e.g. a paged-view page change re-runs buildGrid, which re-applies
-// `hide` from this set. In-memory only (not persisted across reload), matching
-// the freeze features. Column insert/delete clears the set (see delete-row-col).
+// visibility. A search box filters the list by column name, and Show all / Hide
+// all flip every column at once (Hide all, then search and re-check the few you
+// want). Visibility is applied via AG Grid (setColumnsVisible) and mirrored into
+// state.hiddenCols (0-based data-column indices) so it survives a grid rebuild —
+// e.g. a paged-view page change re-runs buildGrid, which re-applies `hide` from
+// this set. In-memory only (not persisted across reload), matching the freeze
+// features. Column insert/delete clears the set (see delete-row-col).
+
+let searchQuery = '';
 
 function setColHidden(colIndex: number, hidden: boolean): void {
     if (hidden) state.hiddenCols.add(colIndex);
@@ -16,22 +20,46 @@ function setColHidden(colIndex: number, hidden: boolean): void {
     updateButton();
 }
 
-function showAll(): void {
+function allColIds(): string[] {
     const n = (state.data[0] ?? []).length;
     const ids: string[] = [];
     for (let c = 0; c < n; c++) ids.push('col_' + c);
+    return ids;
+}
+
+function showAll(): void {
+    state.hiddenCols.clear();
+    state.gridApi?.setColumnsVisible(allColIds(), true);
+    buildList();
+    updateButton();
+}
+
+function hideAll(): void {
+    const n = (state.data[0] ?? []).length;
     state.hiddenCols.clear();
-    state.gridApi?.setColumnsVisible(ids, true);
+    for (let c = 0; c < n; c++) state.hiddenCols.add(c);
+    state.gridApi?.setColumnsVisible(allColIds(), false);
     buildList();
     updateButton();
 }
 
+function colLabel(header: string[], c: number): string {
+    const name = header[c] ?? '';
+    return name !== '' ? name : '(column ' + (c + 1) + ')';
+}
+
 function buildList(): void {
     const list = document.getElementById('col-chooser-list');
     if (!list) return;
     list.innerHTML = '';
     const header = state.data[0] ?? [];
+    const q = searchQuery.trim().toLowerCase();
+    let shown = 0;
     for (let c = 0; c < header.length; c++) {
+        const label = colLabel(header, c);
+        if (q && !label.toLowerCase().includes(q)) continue;
+        shown++;
+
         const row = document.createElement('label');
         row.className = 'col-chooser-item';
 
@@ -43,13 +71,19 @@ function buildList(): void {
 
         const span = document.createElement('span');
         span.className = 'col-chooser-label';
-        const name = header[c] ?? '';
-        span.textContent = name !== '' ? name : '(column ' + (c + 1) + ')';
+        span.textContent = label;
 
         row.appendChild(cb);
         row.appendChild(span);
         list.appendChild(row);
     }
+
+    if (shown === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'csv-filter-empty';
+        empty.textContent = 'No matching columns';
+        list.appendChild(empty);
+    }
 }
 
 function updateButton(): void {
@@ -60,13 +94,17 @@ function openChooser(): void {
     const pop = document.getElementById('col-chooser-popover');
     const btn = document.getElementById('btn-columns');
     if (!pop || !btn) return;
+    searchQuery = '';
+    const search = document.getElementById('col-chooser-search') as HTMLInputElement | null;
+    if (search) search.value = '';
     buildList();
     pop.classList.remove('hidden');
     const r  = btn.getBoundingClientRect();
     const pw = pop.offsetWidth || 220;
     const vw = window.innerWidth;
     pop.style.top  = (r.bottom + 4) + 'px';
     pop.style.left = Math.max(4, Math.min(r.left, vw - pw - 4)) + 'px';
+    search?.focus();
 }
 
 function closeChooser(): void {
@@ -84,6 +122,13 @@ export function setupColumnChooser(): void {
     });
 
     document.getElementById('col-chooser-showall')?.addEventListener('click', showAll);
+    document.getElementById('col-chooser-hideall')?.addEventListener('click', hideAll);
+
+    const search = document.getElementById('col-chooser-search') as HTMLInputElement | null;
+    search?.addEventListener('input', () => {
+        searchQuery = search.value;
+        buildList();
+    });
 
     document.addEventListener('mousedown', (evt) => {
         const pop = document.getElementById('col-chooser-popover');

src/webview/features/export.ts

@@ -7,9 +7,10 @@ import { closeAllPopups } from './popups';
 // The toolbar Export button opens a small dropdown (JSON / JSON Lines /
 // Markdown table). Every format exports the CURRENT VIEW: active filters and
 // sort order are applied, columns appear in their current (possibly reordered)
-// order with their current (possibly renamed) headers. Hidden columns are still
-// included — the column chooser is documented as a view aid (see README). A
-// frozen reference row is exported first, matching where the user sees it.
+// order with their current (possibly renamed) headers. Hidden columns are
+// EXCLUDED, matching the Excel-style copy behavior — export reflects exactly the
+// visible view. A frozen reference row is exported first, matching where the
+// user sees it.
 // Saving the file itself already writes CSV, so there is no CSV entry here.
 
 type ExportFormat = 'json' | 'jsonl' | 'md';
@@ -22,7 +23,12 @@ const FORMAT_EXT: Record<ExportFormat, string> = {
 
 function collectView(): { headers: string[]; rows: string[][]; types: ColType[] } {
     const colDefs = (state.gridApi.getColumnDefs() as any[])
-        .filter(c => c.colId !== 'row-index' && (c.field ?? c.colId));
+        .filter(c => {
+            const id = String(c.field ?? c.colId ?? '');
+            if (c.colId === 'row-index' || id === '') return false;
+            const ci = parseInt(id.replace('col_', ''), 10);
+            return !state.hiddenCols.has(ci); // skip hidden columns — export the visible view only
+        });
     const fields  = colDefs.map(c => String(c.field ?? c.colId));
     const headers = colDefs.map(c => String(c.headerName ?? ''));
     const types   = fields.map(f => {