create table

packages/web/src/tableeditor/ColumnEditorModal.svelte

@@ -8,6 +8,7 @@
 
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormButton from '../forms/FormButton.svelte';
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
   import ElectronFilesInput from '../impexp/ElectronFilesInput.svelte';
@@ -19,7 +20,6 @@
   export let setTableInfo;
   export let tableInfo;
   export let onAddNext;
-
 </script>
 
 <FormProvider initialValues={fillEditorColumnInfo(columnInfo, tableInfo)}>
@@ -51,7 +51,7 @@
         }}
       />
       {#if !columnInfo}
-        <FormStyledButton
+        <FormButton
           type="button"
           value="Save"
           on:click={e => {

packages/web/src/tableeditor/TableEditor.svelte

@@ -37,7 +37,7 @@
 
 <script lang="ts">
   import _ from 'lodash';
-  import { tick } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import invalidateCommands from '../commands/invalidateCommands';
   import registerCommand from '../commands/registerCommand';
 
@@ -77,7 +77,7 @@
   }
 
   export function allowAddPrimaryKey() {
-    return writable() && !tableInfo.primaryKey;
+    return writable() && !tableInfo?.primaryKey;
   }
 
   export function addPrimaryKey() {
@@ -109,7 +109,8 @@
 <div class="wrapper">
   <ObjectListControl
     collection={columns?.map((x, index) => ({ ...x, ordinal: index + 1 }))}
-    title="Columns"
+    title={`Columns (${columns?.length || 0})`}
+    showIfEmpty
     clickable={writable()}
     on:clickrow={e => showModal(ColumnEditorModal, { columnInfo: e.detail, tableInfo, setTableInfo })}
     columns={[