show sort in perspective deisgner and tree

packages/web/src/designer/ColumnLine.svelte

@@ -6,6 +6,7 @@
   import CheckboxField from '../forms/CheckboxField.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import contextMenu from '../utility/contextMenu';
+  import SortOrderIcon from './SortOrderIcon.svelte';
   export let column;
   export let table;
   export let designer;
@@ -25,6 +26,16 @@
 
   function createMenu() {
     const foreignKey = findForeignKeyForColumn(table, column);
+
+    if (settings?.columnMenu) {
+      return settings?.columnMenu({
+        designer,
+        designerId,
+        column,
+        foreignKey,
+      });
+    }
+
     const setSortOrder = sortOrder => {
       onChangeColumn(
         {
@@ -47,6 +58,8 @@
       foreignKey && { text: 'Add reference', onClick: addReference },
     ];
   }
+
+  $: sortOrderProps = settings?.getSortOrderProps ? settings?.getSortOrderProps(designerId, column.columnName) : null;
 </script>
 
 <div
@@ -144,6 +157,10 @@
     <FontIcon icon="img group" />
   {/if}
 
+  {#if sortOrderProps}
+    <SortOrderIcon {...sortOrderProps} />
+  {/if}
+
   {#if designer?.style?.showNullability || designer?.style?.showDataType}
     <div class="space" />
     {#if designer?.style?.showDataType && column?.dataType}

packages/web/src/designer/SortOrderIcon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let order;
+  export let orderIndex;
+</script>
+
+{#if order == 'ASC'}
+  <span class="icon">
+    <FontIcon icon="img sort-asc" />
+    {#if orderIndex >= 0}
+      <span class="color-icon-green order-index">{orderIndex + 1}</span>
+    {/if}
+  </span>
+{/if}
+{#if order == 'DESC'}
+  <span class="icon">
+    <FontIcon icon="img sort-desc" />
+    {#if orderIndex >= 0}
+      <span class="color-icon-green order-index">{orderIndex + 1}</span>
+    {/if}
+  </span>
+{/if}