next: improved column selection user interface

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte

@@ -11,56 +11,51 @@
     import { cn } from '$lib/utils';
     import IconArrowDownward from '~icons/mdi/arrow-downward';
     import IconArrowUpward from '~icons/mdi/arrow-upward';
+    import IconEyeOff from '~icons/mdi/eye-off-outline';
     import IconUnfoldMore from '~icons/mdi/unfold-more-horizontal';
 
-    type Props = HTMLAttributes<Element> & {
+    type Props = HTMLAttributes<HTMLDivElement> & {
         column: Column<TData, unknown>;
     };
 
-    let { children, class: className, column }: Props = $props();
-
-    function handleAscSort(e: Event) {
-        if (column.getIsSorted() === 'asc') {
-            return;
-        }
-
-        column.getToggleSortingHandler()?.(e);
-    }
-
-    function handleDescSort(e: Event) {
-        if (column.getIsSorted() === 'desc') {
-            return;
-        }
-
-        column.getToggleSortingHandler()?.(e);
-    }
+    let { children, class: className, column, ...restProps }: Props = $props();
 </script>
 
 {#if column.getCanSort()}
-    <div class={cn('flex items-center', className)}>
+    <div class={cn('flex items-center', className)} {...restProps}>
         <DropdownMenu.Root>
             <DropdownMenu.Trigger>
-                {#snippet children()}
-                    <Button class="-ml-3 h-8 data-[state=open]:bg-accent" variant="ghost">
+                {#snippet child({ props })}
+                    <Button class="-ml-3 h-8 data-[state=open]:bg-accent" variant="ghost" {...props}>
                         {#if children}
                             {@render children()}
                         {/if}
                         {#if column.getIsSorted() === 'desc'}
-                            <IconArrowDownward class="ml-2 h-4 w-4" />
+                            <IconArrowDownward />
                         {:else if column.getIsSorted() === 'asc'}
-                            <IconArrowUpward class="ml-2 h-4 w-4" />
+                            <IconArrowUpward />
                         {:else}
-                            <IconUnfoldMore class="ml-2 h-4 w-4" />
+                            <IconUnfoldMore />
                         {/if}
                     </Button>
                 {/snippet}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="start">
-                <DropdownMenu.Item onclick={handleAscSort}>Asc</DropdownMenu.Item>
-                <DropdownMenu.Item onclick={handleDescSort}>Desc</DropdownMenu.Item>
+                <DropdownMenu.Item onclick={() => column.toggleSorting(false)}
+                    ><IconArrowUpward class="mr-2 size-3.5 text-muted-foreground/70" />Asc</DropdownMenu.Item
+                >
+                <DropdownMenu.Item onclick={() => column.toggleSorting(true)}
+                    ><IconArrowDownward class="mr-2 size-3.5 text-muted-foreground/70" />Desc</DropdownMenu.Item
+                >
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item onclick={() => column.toggleVisibility(false)}
+                    ><IconEyeOff class="mr-2 size-3.5 text-muted-foreground/70" />Hide</DropdownMenu.Item
+                >
             </DropdownMenu.Content>
         </DropdownMenu.Root>
     </div>
 {:else if children}
-    {@render children()}
+    <div class={className} {...restProps}>
+        {@render children()}
+    </div>
 {/if}