table structure tab

packages/web/src/elements/ColumnLabel.svelte

@@ -0,0 +1,46 @@
+<script context="module" lang="ts">
+  export function getColumnIcon(column, forceIcon = false) {
+    if (column.autoIncrement) return 'img autoincrement';
+    if (column.foreignKey) return 'img foreign-key';
+    if (forceIcon) return 'img column';
+    return null;
+  }
+</script>
+
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let notNull = false;
+  export let forceIcon = false;
+  export let headerText = '';
+  export let columnName = '';
+  export let extInfo = null;
+
+  $: icon = getColumnIcon($$props, forceIcon);
+</script>
+
+<span class="label" class:notNull>
+  {#if icon}
+    <FontIcon {icon} />
+  {/if}
+  {headerText || columnName}
+  {#if extInfo}
+    <span class="extinfo">{extInfo}</span>
+  {/if}
+</span>
+
+<style>
+  .label {
+    white-space: nowrap;
+  }
+
+  .label.notNull {
+    font-weight: bold;
+  }
+
+  .extinfo {
+    font-weight: normal;
+    margin-left: 5px;
+    color: var(--theme-font-3);
+  }
+</style>