table structure tab

packages/web/src/elements/ForeignKeyObjectListControl.svelte

@@ -0,0 +1,43 @@
+<script>
+  import _ from 'lodash';
+
+  import ConstraintLabel from '../elements/ConstraintLabel.svelte';
+
+  import ObjectListControl from '../elements/ObjectListControl.svelte';
+
+  export let collection;
+  export let title;
+</script>
+
+<ObjectListControl
+  {collection}
+  {title}
+  columns={[
+    {
+      fieldName: 'baseColumns',
+      header: 'Base columns',
+      slot: 0,
+    },
+    {
+      fieldName: 'refTableName',
+      header: 'Referenced table',
+    },
+    {
+      fieldName: 'refColumns',
+      header: 'Referenced columns',
+      slot: 1,
+    },
+    {
+      fieldName: 'updateAction',
+      header: 'ON UPDATE',
+    },
+    {
+      fieldName: 'deleteAction',
+      header: 'ON DELETE',
+    },
+  ]}
+>
+  <svelte:fragment slot="name" let:row><ConstraintLabel {...row} /></svelte:fragment>
+  <svelte:fragment slot="0" let:row>{row?.columns.map(x => x.columnName).join(', ')}</svelte:fragment>
+  <svelte:fragment slot="1" let:row>{row?.columns.map(x => x.refColumnName).join(', ')}</svelte:fragment>
+</ObjectListControl>