Add basic column selection

src/app/column-editor/column-editor.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { AccordionModule } from 'primeng/accordion';
+import { Column } from '../duckdb.service';
+import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-column-editor',
+  standalone: true,
+  imports: [AccordionModule, Checkbox, FormsModule],
+  template: `
+    <p-accordion [value]="0">
+      <p-accordion-panel [value]="0">
+        <p-accordion-header>Columns</p-accordion-header>
+        <p-accordion-content>
+          <ul>
+            @for (column of columns(); track $index) {
+              <li>
+                <p-checkbox
+                  (ngModelChange)="checkboxChanged($index)"
+                  [binary]="true"
+                  [inputId]="column.name"
+                  name="group"
+                  [ngModel]="column.enabled"
+                />
+                <label [for]="column.name" class="ml-2">
+                  {{ column.name }}
+                </label>
+                {{ column.name }}
+              </li>
+            }
+          </ul>
+        </p-accordion-content>
+      </p-accordion-panel>
+    </p-accordion>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ColumnEditorComponent {
+  columns = model<Column[]>();
+
+  protected checkboxChanged(index: number) {
+    this.columns.update((columns) => {
+      if (columns) {
+        let enabledColumns = columns?.slice();
+        enabledColumns[index] = {
+          ...enabledColumns[index],
+          enabled: !enabledColumns[index].enabled,
+        };
+        return enabledColumns;
+      }
+      return columns;
+    });
+  }
+}