columns compare

packages/web/src/elements/ScrollableTableControl.svelte

@@ -48,6 +48,20 @@
     if (event.keyCode == keycodes.upArrow) {
       selectedIndex = Math.max(0, selectedIndex - 1);
     }
+    if (event.keyCode == keycodes.pageUp) {
+      selectedIndex -= Math.floor(clientHeight / headerHeight) - 1;
+      if (selectedIndex < 0) selectedIndex = 0;
+    }
+    if (event.keyCode == keycodes.pageDown) {
+      selectedIndex += Math.floor(clientHeight / headerHeight) - 1;
+      if (selectedIndex >= rows.length) selectedIndex = rows.length - 1;
+    }
+    if (event.keyCode == keycodes.home) {
+      selectedIndex = 0;
+    }
+    if (event.keyCode == keycodes.end) {
+      selectedIndex = rows.length - 1;
+    }
   };
 
   function scrollToIndex(index) {

packages/web/src/tabs/CompareModelTab.svelte

@@ -19,7 +19,7 @@
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
   import { extensions } from '../stores';
-  import { computeDbDiffRows } from '../utility/computeDiffRows';
+  import { computeDbDiffRows, computeTableDiffColumns } from '../utility/computeDiffRows';
   import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
 
   export let tabid;
@@ -48,6 +48,12 @@
 
   $: targetDbPaired = matchPairedObjects(sourceDb, targetDb, dbDiffOptions);
   $: diffRows = computeDbDiffRows(sourceDb, targetDbPaired, dbDiffOptions, driver);
+  $: diffColumns = computeTableDiffColumns(
+    diffRows[pairIndex]?.source,
+    diffRows[pairIndex]?.target,
+    dbDiffOptions,
+    driver
+  );
 
   $: sqlPreview = getAlterTableScript(
     diffRows[pairIndex]?.source,
@@ -150,6 +156,25 @@
         <svelte:fragment slot="1">
           <SqlEditor readOnly value={sqlPreview} />
         </svelte:fragment>
+
+        <svelte:fragment slot="2">
+          <ScrollableTableControl
+            rows={diffColumns}
+            disableFocusOutline
+            columns={[
+              { fieldName: 'sourceColumnName', header: 'Name', width: '100px' },
+              { fieldName: 'sourceDataType', header: 'Type' },
+              { fieldName: 'sourceNotNull', header: 'Not null', slot: 1 },
+              { fieldName: 'state', header: 'Action', width: '100px' },
+              { fieldName: 'targetColumnName', header: 'Schema' },
+              { fieldName: 'targetDataType', header: 'Name' },
+              { fieldName: 'targetNotNull', header: 'Not null', slot: 2 },
+            ]}
+          >
+            <input type="checkbox" disabled slot="1" let:row checked={!!row.sourceNotNull} />
+            <input type="checkbox" disabled slot="2" let:row checked={!!row.targetNotNull} />
+          </ScrollableTableControl>
+        </svelte:fragment>
       </TabControl>
     </svelte:fragment>
   </VerticalSplitter>

packages/web/src/utility/computeDiffRows.ts

@@ -55,8 +55,8 @@ export function computeTableDiffColumns(
   opts: DbDiffOptions,
   driver: EngineDriver
 ) {
-  if (!sourceTable || !sourceTable || !driver) return [];
+  if (!driver) return [];
-  return computeDiffRowsCore(sourceTable.columns, targetTable.columns, (a, b) =>
+  return computeDiffRowsCore(sourceTable?.columns || [], targetTable?.columns || [], (a, b) =>
     testEqualColumns(a, b, true, true, opts)
   ).map(row => ({
     ...row,