@invopop/popui 0.1.4-beta.21 → 0.1.4-beta.23

package/dist/BaseDropdown.svelte

@@ -10,12 +10,16 @@
     fullWidth = false,
     placement = 'bottom-start',
     matchParentWidth = false,
+    usePortal = true,
     class: className = '',
     trigger,
     children,
     ...rest
   }: BaseDropdownProps = $props()
 
+  // Conditional portal action - noop if disabled
+  const conditionalPortal = usePortal ? portal : () => {}
+
   const middleware = [offset(6), flip(), shift()]
 
   if (matchParentWidth) {
@@ -31,14 +35,16 @@
     )
   }
 
+  let closedFromClickOutside = $state(false)
+
+  // Create floating actions with strategy based on usePortal
+  const strategy = usePortal ? 'absolute' : 'fixed'
   const [floatingRef, floatingContent] = createFloatingActions({
-    strategy: 'absolute',
+    strategy,
     placement,
     middleware
   })
 
-  let closedFromClickOutside = $state(false)
-
   export const toggle = () => {
     isOpen = !isOpen
   }
@@ -62,7 +68,7 @@
   {#if isOpen}
     <div
       class="max-h-40 absolute z-1001"
-      use:portal
+      use:conditionalPortal
       use:floatingContent
       use:clickOutside
       onclick_outside={() => {

package/dist/BaseTableHeaderContent.svelte

@@ -50,7 +50,7 @@
         {/if}
       </span>
     {/snippet}
-    <BaseDropdown bind:this={sortDropdown} {trigger} fullWidth>
+    <BaseDropdown bind:this={sortDropdown} {trigger} fullWidth usePortal={false}>
       <BaseTableHeaderOrderBy
         {sortDirection}
         isActive={sortBy === field.slug}

package/dist/BaseTableHeaderOrderBy.svelte

@@ -3,7 +3,7 @@
   import type { TableSortBy, DrawerOption, BaseTableHeaderOrderByProps } from './types.js'
   import DrawerContext from './DrawerContext.svelte'
 
-  let { isActive = false, sortDirection, onOrderBy, onHide, onFilter, onFreeze, isFrozen = false, showSortOptions = true }: BaseTableHeaderOrderByProps = $props()
+  let { isActive = false, sortDirection, onOrderBy, onHide, onFilter, onFreeze, isFrozen = false, showSortOptions = true, showFilterOption = true }: BaseTableHeaderOrderByProps = $props()
 
   let items = $derived([
     ...(showSortOptions ? [
@@ -21,8 +21,10 @@
       },
       { label: '', value: 'sep-1', separator: true }
     ] : []),
-    { icon: Filter, label: 'Filter by column', value: 'filter' },
-    { label: '', value: 'sep-2', separator: true },
+    ...(showFilterOption ? [
+      { icon: Filter, label: 'Filter by column', value: 'filter' },
+      { label: '', value: 'sep-2', separator: true }
+    ] : []),
     { icon: Lock, label: isFrozen ? 'Unfreeze column' : 'Freeze column', value: 'freeze' },
     { label: '', value: 'sep-3', separator: true },
     { icon: Preview, label: 'Hide column', value: 'hide' }

package/dist/DrawerContext.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DrawerContextProps, DrawerOption } from './types.ts'
+  import type { DrawerContextProps, DrawerOption, AnyProp } from './types.ts'
   import DrawerContextItem from './DrawerContextItem.svelte'
   import DrawerContextSeparator from './DrawerContextSeparator.svelte'
   import EmptyState from './EmptyState.svelte'
@@ -7,21 +7,28 @@
   import { Icon } from '@steeze-ui/svelte-icon'
   import { ChevronRight } from '@steeze-ui/heroicons'
   import { slide } from 'svelte/transition'
-  import Sortable from 'sortablejs'
+  import { flip } from 'svelte/animate'
+  import { dndzone } from 'svelte-dnd-action'
   import { onMount } from 'svelte'
 
+  const flipDurationMs = 150
+
   let {
     items = $bindable([]),
     multiple = false,
     draggable = false,
     widthClass = 'w-60',
+    collapsibleGroups = true,
     onclick,
     onselect,
     onreorder,
+    ondropitem,
     children,
     groups
   }: DrawerContextProps = $props()
 
+  type DndItem = DrawerOption & { id: string }
+
   let selectedItems = $derived(items.filter((i) => i.selected))
   let hasGroups = $derived(groups && groups.length > 0)
   let { groupedItems, ungroupedItems } = $derived.by(() => {
@@ -46,9 +53,75 @@
   })
 
   let openGroups = $state<Record<string, boolean>>({})
-  let ungroupedContainer: HTMLElement | null = $state(null)
-  let groupContainers: Record<string, HTMLElement | null> = {}
+  let groupDndItems = $state<Record<string, DndItem[]>>({})
+  let ungroupedDndItems = $state<DndItem[]>([])
+  let mounted = $state(false)
+  let itemsCache = $state<DrawerOption[]>([])
+  let isDragging = $state(false)
+  let emitTimeout: number | undefined
+
+  // Build internal DND items from external items
+  function buildListIn() {
+    if (hasGroups) {
+      // Build DND items for each group
+      groups!.forEach((group) => {
+        const groupItems = groupedItems.get(group.slug) || []
+        groupDndItems[group.slug] = groupItems.map((item: DrawerOption, i: number) => ({
+          ...item,
+          id: `${group.slug}-${item.value}-${i}`
+        }))
+      })
+    }
+
+    // Build DND items for ungrouped
+    ungroupedDndItems = ungroupedItems.map((item, i) => ({
+      ...item,
+      id: `ungrouped-${item.value}-${i}`
+    }))
+  }
+
+  // Build external items from internal DND items
+  function buildListOut() {
+    const newItems: DrawerOption[] = []
+    const used = new Set<AnyProp>()
+
+    // Add all grouped items
+    if (hasGroups) {
+      groups!.forEach((group) => {
+        const dndItems = groupDndItems[group.slug] || []
+        dndItems.forEach((dndItem) => {
+          if (!used.has(dndItem.value)) {
+            const { id, ...item } = dndItem
+            newItems.push({ ...item, groupBy: group.slug })
+            used.add(dndItem.value)
+          }
+        })
+      })
+    }
 
+    // Add ungrouped items
+    ungroupedDndItems.forEach((dndItem) => {
+      if (!used.has(dndItem.value)) {
+        const { id, ...item } = dndItem
+        newItems.push(item)
+        used.add(dndItem.value)
+      }
+    })
+
+    return newItems
+  }
+
+  // Sync items when they change from outside
+  $effect(() => {
+    if (items && mounted && !isDragging) {
+      if (JSON.stringify(items) !== JSON.stringify(itemsCache)) {
+        buildListIn()
+        itemsCache = JSON.parse(JSON.stringify(items))
+      }
+    }
+  })
+
+  // Open group with selected item on mount
   $effect(() => {
     if (hasGroups) {
       const selectedItem = items.find((i) => i.selected)
@@ -58,95 +131,78 @@
     }
   })
 
+  // Notify parent of selection changes
   $effect(() => {
     onselect?.(selectedItems)
   })
 
-  function initializeSortable() {
-    if (!draggable) return
-
-    // Initialize sortable for ungrouped items
-    if (ungroupedContainer && ungroupedItems.length > 0) {
-      Sortable.create(ungroupedContainer, {
-        animation: 150,
-        handle: '.draggable-item',
-        filter: '.no-drag',
-        preventOnFilter: false,
-        ghostClass: 'opacity-10',
-        dragClass: 'cursor-grabbing',
-        forceFallback: true,
-        onMove: (event) => {
-          // Prevent moving items above locked items
-          return !event.related.classList.contains('no-drag')
-        },
-        onEnd: (event) => {
-          if (event.oldIndex !== undefined && event.newIndex !== undefined) {
-            const newItems = [...items]
-            const ungroupedIndices = items
-              .map((item, index) => (!item.groupBy ? index : -1))
-              .filter((i) => i !== -1)
-
-            const fromIndex = ungroupedIndices[event.oldIndex]
-            const toIndex = ungroupedIndices[event.newIndex]
-
-            const [removed] = newItems.splice(fromIndex, 1)
-            newItems.splice(toIndex, 0, removed)
-
-            items = newItems
-            onreorder?.(newItems)
-          }
-        }
-      })
+  onMount(() => {
+    itemsCache = JSON.parse(JSON.stringify(items))
+    buildListIn()
+    mounted = true
+  })
+
+  function transformDraggedElement(draggedEl: HTMLElement | undefined) {
+    if (draggedEl) {
+      draggedEl.style.border = 'none'
+      draggedEl.style.outline = 'none'
     }
+  }
 
-    // Initialize sortable for grouped items
-    if (hasGroups && groups) {
-      groups.forEach((group) => {
-        const container = groupContainers[group.slug]
-        const groupItems = groupedItems.get(group.slug) || []
+  function emitGroupDistribution() {
+    if (ondropitem && hasGroups) {
+      // Clear any pending emit
+      if (emitTimeout) {
+        clearTimeout(emitTimeout)
+      }
 
-        if (container && groupItems.length > 0) {
-          Sortable.create(container, {
-            animation: 150,
-            handle: '.draggable-item',
-            filter: '.no-drag',
-            preventOnFilter: false,
-            ghostClass: 'opacity-10',
-            dragClass: 'cursor-grabbing',
-            forceFallback: true,
-            onMove: (event) => {
-              // Prevent moving items above locked items
-              return !event.related.classList.contains('no-drag')
-            },
-            onEnd: (event) => {
-              if (event.oldIndex !== undefined && event.newIndex !== undefined) {
-                const newItems = [...items]
-                const groupedIndices = items
-                  .map((item, index) => (item.groupBy === group.slug ? index : -1))
-                  .filter((i) => i !== -1)
-
-                const fromIndex = groupedIndices[event.oldIndex]
-                const toIndex = groupedIndices[event.newIndex]
-
-                const [removed] = newItems.splice(fromIndex, 1)
-                newItems.splice(toIndex, 0, removed)
-
-                items = newItems
-                onreorder?.(newItems)
-              }
-            }
-          })
-        }
-      })
+      // Debounce the emit to avoid duplicate calls when dragging between groups
+      emitTimeout = window.setTimeout(() => {
+        const groupsDistribution: Record<string, DrawerOption[]> = {}
+        groups!.forEach((group) => {
+          const dndItems = groupDndItems[group.slug] || []
+          groupsDistribution[group.slug] = dndItems.map(({ id, ...item }) => item)
+        })
+        ondropitem(groupsDistribution)
+      }, 0)
     }
   }
 
-  onMount(() => {
-    if (draggable) {
-      // Small delay to ensure DOM is ready
-      setTimeout(initializeSortable, 100)
+  function handleDndConsider(groupSlug: string, e: CustomEvent<any>) {
+    if (!isDragging) {
+      isDragging = true
     }
-  })
+    groupDndItems[groupSlug] = e.detail.items
+  }
+
+  function handleDndFinalize(groupSlug: string, e: CustomEvent<any>) {
+    isDragging = false
+    groupDndItems[groupSlug] = e.detail.items
+
+    const newItems = buildListOut()
+    items = newItems
+    itemsCache = JSON.parse(JSON.stringify(items))
+    onreorder?.(newItems)
+    emitGroupDistribution()
+  }
+
+  function handleUngroupedDndConsider(e: CustomEvent<any>) {
+    if (!isDragging) {
+      isDragging = true
+    }
+    ungroupedDndItems = e.detail.items
+  }
+
+  function handleUngroupedDndFinalize(e: CustomEvent<any>) {
+    isDragging = false
+    ungroupedDndItems = e.detail.items
+
+    const newItems = buildListOut()
+    items = newItems
+    itemsCache = JSON.parse(JSON.stringify(items))
+    onreorder?.(newItems)
+    emitGroupDistribution()
+  }
 
   function updateItem(item: DrawerOption) {
     items = items.map((i) => {
@@ -157,11 +213,6 @@
 
   function toggleGroup(groupSlug: string) {
     openGroups = openGroups[groupSlug] ? {} : { [groupSlug]: true }
-
-    // Reinitialize sortable when a group is toggled
-    if (draggable) {
-      setTimeout(initializeSortable, 100)
-    }
   }
 </script>
 
@@ -169,7 +220,7 @@
   {#if item.separator}
     <DrawerContextSeparator />
   {:else}
-    <div class:px-1={!item.groupBy} class:draggable-item={draggable && !item.locked} class:cursor-grab={draggable && !item.locked} class:no-drag={item.locked}>
+    <div class:px-1={!item.groupBy} class:cursor-grab={draggable && !item.locked}>
       <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
     </div>
   {/if}
@@ -184,50 +235,88 @@
     {#each groups as group, index}
       {@const groupItems = groupedItems.get(group.slug) || []}
       {@const isLastGroup = index === groups!.length - 1}
-      {@const isOpen = openGroups[group.slug]}
-      {@const hasOpenGroup = Object.values(openGroups).some((v) => v)}
+      {@const isOpen = collapsibleGroups ? openGroups[group.slug] : true}
+      {@const hasOpenGroup = collapsibleGroups ? Object.values(openGroups).some((v) => v) : true}
       <div
         class="px-1"
-        class:flex-1={isOpen}
+        class:flex-1={isOpen && collapsibleGroups}
         class:flex={isOpen}
         class:flex-col={isOpen}
-        class:min-h-0={isOpen}
-        class:flex-shrink-0={!isOpen && hasOpenGroup}
+        class:min-h-0={isOpen && collapsibleGroups}
+        class:flex-shrink-0={!isOpen && hasOpenGroup && collapsibleGroups}
       >
-        <button
-          class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip flex-shrink-0"
-          onclick={() => toggleGroup(group.slug)}
-        >
-          <div class="flex items-center gap-1.5">
+        {#if collapsibleGroups}
+          <button
+            class="cursor-pointer flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full hover:bg-background-default-secondary rounded-lg overflow-clip flex-shrink-0"
+            onclick={() => toggleGroup(group.slug)}
+          >
+            <div class="flex items-center gap-1.5">
+              <span>{group.label}</span>
+              <Icon
+                src={ChevronRight}
+                class="size-3 text-icon-default-secondary transition-all transform {isOpen
+                  ? 'rotate-90'
+                  : ''}"
+              />
+            </div>
+            {#if groupItems.length && !group.hideCounter}
+              <BaseCounter value={groupItems.length} />
+            {/if}
+          </button>
+        {:else}
+          <div
+            class="flex items-center justify-between h-8 pl-2.5 pr-2.5 py-2.5 text-base font-medium text-foreground-default-secondary w-full overflow-clip flex-shrink-0"
+          >
             <span>{group.label}</span>
-            <Icon
-              src={ChevronRight}
-              class="size-3 text-icon-default-secondary transition-all transform {isOpen
-                ? 'rotate-90'
-                : ''}"
-            />
+            {#if groupItems.length && !group.hideCounter}
+              <BaseCounter value={groupItems.length} />
+            {/if}
           </div>
-          {#if groupItems.length}
-            <BaseCounter value={groupItems.length} />
-          {/if}
-        </button>
+        {/if}
 
         {#if isOpen}
           <div
-            class="w-full overflow-y-auto flex-1 min-h-0"
-            transition:slide={{ duration: 200 }}
-            bind:this={groupContainers[group.slug]}
+            class="w-full overflow-y-auto {collapsibleGroups ? 'flex-1 min-h-0' : ''}"
+            transition:slide={{ duration: collapsibleGroups ? 200 : 0 }}
           >
-            {#if !groupItems.length}
+            {#if draggable}
+              <div
+                use:dndzone={{
+                  items: groupDndItems[group.slug] || [],
+                  flipDurationMs,
+                  dropTargetStyle: {},
+                  type: 'drawer-item',
+                  transformDraggedElement
+                }}
+                onconsider={(e) => handleDndConsider(group.slug, e)}
+                onfinalize={(e) => handleDndFinalize(group.slug, e)}
+              >
+                {#if !groupItems.length}
+                  <div class="px-1 pt-1 pb-5">
+                    <EmptyState
+                      iconSource={group.emptyIcon}
+                      title={group.emptyTitle}
+                      description={group.emptyDescription}
+                    />
+                  </div>
+                {:else}
+                  {#each groupDndItems[group.slug] || [] as dndItem (dndItem.id)}
+                    <div animate:flip={{ duration: flipDurationMs }}>
+                      {@render drawerItem(dndItem)}
+                    </div>
+                  {/each}
+                {/if}
+              </div>
+            {:else if !groupItems.length}
               <div class="px-1 pt-1 pb-5">
                 <EmptyState
                   iconSource={group.emptyIcon}
-                  title={group.emptyTitle || 'No items here'}
-                  description={group.emptyDescription || 'Add items to get started'}
+                  title={group.emptyTitle}
+                  description={group.emptyDescription}
                 />
               </div>
             {:else}
-              {#each groupItems as item}
+              {#each groupItems as item (item.value)}
                 {@render drawerItem(item)}
               {/each}
             {/if}
@@ -241,10 +330,31 @@
   {/if}
 
   {#if ungroupedItems.length}
-    <div class="flex-shrink-0 overflow-y-auto max-h-[564px]" bind:this={ungroupedContainer}>
-      {#each ungroupedItems as item (item.value)}
-        {@render drawerItem(item)}
-      {/each}
-    </div>
+    {#if draggable}
+      <div
+        class="flex-shrink-0 overflow-y-auto max-h-[564px]"
+        use:dndzone={{
+          items: ungroupedDndItems,
+          flipDurationMs,
+          dropTargetStyle: {},
+          type: 'drawer-item',
+          transformDraggedElement
+        }}
+        onconsider={handleUngroupedDndConsider}
+        onfinalize={handleUngroupedDndFinalize}
+      >
+        {#each ungroupedDndItems as dndItem (dndItem.id)}
+          <div animate:flip={{ duration: flipDurationMs }}>
+            {@render drawerItem(dndItem)}
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="flex-shrink-0 overflow-y-auto max-h-[564px]">
+        {#each ungroupedItems as item (item.value)}
+          {@render drawerItem(item)}
+        {/each}
+      </div>
+    {/if}
   {/if}
 </div>

package/dist/EmptyState.svelte

@@ -31,8 +31,12 @@
     </div>
   {/if}
   <div class="flex flex-col items-center gap-0.5 text-center">
-    <h4 class="font-medium text-foreground text-base">{title}</h4>
-    <p class="text-foreground-default-secondary text-base">{description}</p>
+    {#if title}
+      <h4 class="font-medium text-foreground text-base">{title}</h4>
+    {/if}
+    {#if description}
+      <p class="text-foreground-default-secondary text-base">{description}</p>
+    {/if}
   </div>
   {#if children}
     <div class="mt-4">

package/dist/data-table/data-table-toolbar.svelte

@@ -6,7 +6,7 @@
   let { table, filters, frozenColumns }: { table: Table<TData>; filters?: Snippet; frozenColumns: Set<string> } = $props()
 </script>
 
-<div class="flex items-center justify-between px-4 py-4">
+<div class="flex items-center justify-between px-4 py-3">
   {#if filters}
     <div class="flex-1">
       {@render filters()}

package/dist/data-table/data-table-types.d.ts

@@ -53,11 +53,15 @@ export interface DataTableProps<TData> {
     columns: DataTableColumn<TData>[];
     disableSelection?: boolean;
     disablePagination?: boolean;
+    disableKeyboardNavigation?: boolean;
     rowActions?: TableAction[];
     getRowActions?: (row: TData) => TableAction[];
     onRowAction?: (action: AnyProp, row: TData) => void;
     initialPageSize?: number;
     initialPage?: number;
+    initialSortColumn?: string;
+    initialSortDirection?: 'asc' | 'desc';
+    initialFrozenColumns?: string[];
     pageSizeOptions?: number[];
     emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
     onRowClick?: (row: TData) => void;

package/dist/data-table/data-table.svelte

@@ -10,6 +10,7 @@
     type VisibilityState,
     type Column
   } from '@tanstack/table-core'
+  import { onMount, onDestroy } from 'svelte'
   import DataTableToolbar from './data-table-toolbar.svelte'
   import DataTablePagination from './data-table-pagination.svelte'
   import FlexRender from './flex-render.svelte'
@@ -33,11 +34,15 @@
     columns: columnConfig,
     disableSelection = false,
     disablePagination = false,
+    disableKeyboardNavigation = false,
     rowActions = [],
     getRowActions,
     onRowAction,
     initialPageSize = 10,
     initialPage = 0,
+    initialSortColumn,
+    initialSortDirection,
+    initialFrozenColumns = [],
     emptyState = {
       iconSource: Search,
       title: 'No results',
@@ -64,7 +69,11 @@
 
   let rowSelection = $state<RowSelectionState>({})
   let columnVisibility = $state<VisibilityState>({})
-  let sorting = $state<SortingState>([])
+  let sorting = $state<SortingState>(
+    initialSortColumn && initialSortDirection
+      ? [{ id: initialSortColumn, desc: initialSortDirection === 'desc' }]
+      : []
+  )
   let pagination = $state<PaginationState>({ pageIndex: initialPage, pageSize: initialPageSize })
   let columnSizing = $state<ColumnSizingState>({})
   let columnSizingInfo = $state<ColumnSizingInfoState>({
@@ -78,7 +87,9 @@
   let columnOrder = $state<ColumnOrderState>([])
   let containerRef = $state<HTMLDivElement | null>(null)
   let columnDropdowns: Record<string, BaseDropdown> = {}
-  let frozenColumns = $state<Set<string>>(new Set())
+  let frozenColumns = $state<Set<string>>(new Set(initialFrozenColumns))
+  let focusedRowIndex = $state<number>(-1)
+  let tableBodyRef: HTMLTableSectionElement | null = null
 
   // Build TanStack columns from config
   const columns = $derived.by(() =>
@@ -106,6 +117,13 @@
     pagination.pageIndex = initialPage
   })
 
+  // Reorder initial frozen columns on mount
+  $effect(() => {
+    if (initialFrozenColumns.length > 0 && columnOrder.length === 0) {
+      initialFrozenColumns.forEach(columnId => reorderFrozenColumn(columnId))
+    }
+  })
+
   // Track selection changes
   $effect(() => {
     if (onSelectionChange) {
@@ -140,49 +158,44 @@
     setColumnOrder: (value) => (columnOrder = value)
   })
 
+  function reorderFrozenColumn(columnId: string) {
+    const currentOrder = table.getState().columnOrder.length > 0
+      ? table.getState().columnOrder
+      : table.getAllLeafColumns().map(col => col.id)
+
+    const newOrder = [...currentOrder]
+    const columnIndex = newOrder.indexOf(columnId)
+
+    if (columnIndex > -1) {
+      newOrder.splice(columnIndex, 1)
+
+      const selectIndex = newOrder.indexOf('select')
+      const insertIndex = selectIndex >= 0 ? selectIndex + 1 : 0
+
+      let lastFrozenIndex = insertIndex
+      for (let i = insertIndex; i < newOrder.length; i++) {
+        if (frozenColumns.has(newOrder[i])) {
+          lastFrozenIndex = i + 1
+        } else {
+          break
+        }
+      }
+
+      newOrder.splice(lastFrozenIndex, 0, columnId)
+      table.setColumnOrder(newOrder)
+    }
+  }
+
   function handleFreezeColumn(columnId: string) {
     const isFrozen = frozenColumns.has(columnId)
 
     if (isFrozen) {
-      // Unfreeze
       frozenColumns.delete(columnId)
       frozenColumns = new Set(frozenColumns)
     } else {
-      // Freeze
       frozenColumns.add(columnId)
       frozenColumns = new Set(frozenColumns)
-
-      // Reorder columns to move frozen column to the left
-      const currentOrder = table.getState().columnOrder.length > 0
-        ? table.getState().columnOrder
-        : table.getAllLeafColumns().map(col => col.id)
-
-      const newOrder = [...currentOrder]
-      const columnIndex = newOrder.indexOf(columnId)
-
-      if (columnIndex > -1) {
-        // Remove from current position
-        newOrder.splice(columnIndex, 1)
-
-        // Find position to insert (after select column if present, otherwise at start)
-        const selectIndex = newOrder.indexOf('select')
-        const insertIndex = selectIndex >= 0 ? selectIndex + 1 : 0
-
-        // Find the last frozen column position
-        let lastFrozenIndex = insertIndex
-        for (let i = insertIndex; i < newOrder.length; i++) {
-          if (frozenColumns.has(newOrder[i])) {
-            lastFrozenIndex = i + 1
-          } else {
-            break
-          }
-        }
-
-        // Insert after the last frozen column
-        newOrder.splice(lastFrozenIndex, 0, columnId)
-
-        table.setColumnOrder(newOrder)
-      }
+      reorderFrozenColumn(columnId)
     }
   }
 
@@ -202,6 +215,88 @@
 
     return offset
   }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const rows = table.getRowModel().rows
+    if (rows.length === 0) return
+
+    // Ignore if user is typing in an input or has a dropdown open
+    if ((event.target as HTMLElement).tagName === 'INPUT' ||
+        (event.target as HTMLElement).tagName === 'TEXTAREA') {
+      return
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        if (focusedRowIndex === -1 && rows.length > 0) {
+          // No row focused, focus first row
+          focusedRowIndex = 0
+          scrollToFocusedRow()
+          if (event.shiftKey && enableSelection) {
+            rows[focusedRowIndex].toggleSelected(true)
+          }
+        } else if (focusedRowIndex < rows.length - 1) {
+          // Move down
+          focusedRowIndex++
+          scrollToFocusedRow()
+          if (event.shiftKey && enableSelection) {
+            // Always select when going down
+            rows[focusedRowIndex].toggleSelected(true)
+          }
+        }
+        break
+      case 'ArrowUp':
+        event.preventDefault()
+        if (event.shiftKey && enableSelection && focusedRowIndex >= 0) {
+          // Deselect current row first when going up with shift
+          rows[focusedRowIndex].toggleSelected(false)
+        }
+        if (focusedRowIndex === -1 && rows.length > 0) {
+          // No row focused, focus first row
+          focusedRowIndex = 0
+          scrollToFocusedRow()
+        } else if (focusedRowIndex > 0) {
+          // Move up
+          focusedRowIndex--
+          scrollToFocusedRow()
+        }
+        break
+      case ' ':
+      case 'Enter':
+        event.preventDefault()
+        if (focusedRowIndex >= 0 && focusedRowIndex < rows.length && enableSelection) {
+          const row = rows[focusedRowIndex]
+          row.toggleSelected()
+        }
+        break
+      case 'Escape':
+        focusedRowIndex = -1
+        break
+    }
+  }
+
+  function scrollToFocusedRow() {
+    if (focusedRowIndex >= 0 && tableBodyRef) {
+      const rowElement = tableBodyRef.querySelector(`[data-row-index="${focusedRowIndex}"]`)
+      if (rowElement) {
+        rowElement.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+      }
+    }
+  }
+
+  // Add global keyboard navigation
+  onMount(() => {
+    if (!disableKeyboardNavigation) {
+      document.addEventListener('keydown', handleKeydown)
+    }
+  })
+
+  onDestroy(() => {
+    if (!disableKeyboardNavigation) {
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  })
 </script>
 
 {#snippet StickyCellWrapper({
@@ -219,7 +314,7 @@
 })}
   <div
     class={cn(
-      'absolute inset-0 flex items-center bg-background group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected px-3',
+      'absolute inset-0 flex items-center bg-background group-hover/row:bg-background-default-secondary group-data-[state=selected]/row:bg-background-selected group-data-[focused=true]/row:bg-background-default-secondary px-3',
       align === 'right' ? 'justify-end' : '',
       { 'pl-4': isFirst, 'pr-4': isLast, 'border-r border-border': isFrozen }
     )}
@@ -249,7 +344,7 @@
 }: { column: Column<TData>; title?: string } & HTMLAttributes<HTMLDivElement>)}
   {@const isCurrency = column.columnDef.meta?.cellType === 'currency'}
   <div class={cn('flex items-center w-full', className)} {...restProps}>
-    <BaseDropdown bind:this={columnDropdowns[column.id]} fullWidth>
+    <BaseDropdown bind:this={columnDropdowns[column.id]} fullWidth usePortal={false}>
       {#snippet trigger()}
         <button
           class={clsx('data-[state=open]:bg-accent w-full flex items-center gap-1 py-2.5', {
@@ -272,6 +367,7 @@
         isActive={column.getIsSorted() !== false}
         isFrozen={frozenColumns.has(column.id)}
         showSortOptions={column.getCanSort()}
+        showFilterOption={!column.columnDef.disableColumnFilter}
         onOrderBy={(direction) => {
           column.toggleSorting(direction === 'desc')
           // Reset to first page when sorting changes (same as page size change)
@@ -305,15 +401,24 @@
 <div class="flex flex-col h-full">
   <DataTableToolbar {table} {filters} {frozenColumns} />
   <div class="flex-1 overflow-hidden flex flex-col">
-    <div
-      bind:this={containerRef}
-      class="relative bg-background flex-1 overflow-auto"
-      style="overscroll-behavior-x: none;"
-    >
-      <Table.Root class={data.length === 0 ? 'h-full' : 'h-auto'}>
-        <Table.Header>
-          {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-            <Table.Row class="hover:!bg-transparent border-b border-border">
+    {#if data.length === 0}
+      <div class="flex-1 flex items-center justify-center bg-background">
+        <EmptyState
+          iconSource={emptyState.iconSource}
+          title={emptyState.title}
+          description={emptyState.description}
+        />
+      </div>
+    {:else}
+      <div
+        bind:this={containerRef}
+        class="relative bg-background flex-1 overflow-auto"
+        style="overscroll-behavior-x: none;"
+      >
+        <Table.Root>
+          <Table.Header>
+            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+              <Table.Row class="hover:!bg-transparent border-t border-b border-border">
               {#each headerGroup.headers as header, index (header.id)}
                 {@const isLastScrollable = index === headerGroup.headers.length - 2}
                 {@const isFirstHeader = index === 0}
@@ -341,13 +446,6 @@
                   {/if}
                   <!-- Left resize handler (resizes previous column) -->
                   {#if prevHeader && prevHeader.column.getCanResize()}
-                    <!-- Always visible vertical border on left -->
-                    <div
-                      class={cn(
-                        'absolute left-0 top-1/2 -translate-y-1/2 h-3 w-px bg-background-default-tertiary',
-                        prevHeader.column.getIsResizing() && 'opacity-0'
-                      )}
-                    ></div>
                     <!-- Left resize handler -->
                     <div
                       role="button"
@@ -366,13 +464,6 @@
                     </div>
                   {/if}
                   {#if header.column.getCanResize()}
-                    <!-- Always visible vertical border -->
-                    <div
-                      class={cn(
-                        'absolute right-0 top-1/2 -translate-y-1/2 h-3 w-px bg-background-default-tertiary',
-                        header.column.getIsResizing() && 'opacity-0'
-                      )}
-                    ></div>
                     <!-- Resize handler (larger interactive area, enhanced on hover) -->
                     <div
                       role="button"
@@ -395,10 +486,12 @@
             </Table.Row>
           {/each}
         </Table.Header>
-        <Table.Body>
-          {#each table.getRowModel().rows as row (row.id)}
+        <Table.Body bind:ref={tableBodyRef}>
+          {#each table.getRowModel().rows as row, rowIndex (row.id)}
             <Table.Row
               data-state={row.getIsSelected() ? 'selected' : undefined}
+              data-row-index={rowIndex}
+              data-focused={focusedRowIndex === rowIndex ? 'true' : undefined}
               class={cn('border-b border-border', getRowClassName?.(row.original as TData))}
               onclick={() => onRowClick?.(row.original as TData)}
             >
@@ -457,22 +550,11 @@
                 </Table.Cell>
               {/each}
             </Table.Row>
-          {:else}
-            <Table.Row class="hover:!bg-transparent h-full">
-              <Table.Cell colspan={columns.length} class="h-full !p-0">
-                <div class="flex items-center justify-center h-full w-full">
-                  <EmptyState
-                    iconSource={emptyState.iconSource}
-                    title={emptyState.title}
-                    description={emptyState.description}
-                  />
-                </div>
-              </Table.Cell>
-            </Table.Row>
           {/each}
         </Table.Body>
       </Table.Root>
     </div>
+    {/if}
     {#if enablePagination}
       <DataTablePagination
         {table}

package/dist/table/table-row.svelte

@@ -19,7 +19,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'group/row data-[state=selected]:bg-background-selected data-[state=checked]:bg-background-selected h-10 data-[state=selected]:hover:bg-background-selected data-[state=checked]:hover:bg-background-selected',
+    'group/row data-[state=selected]:bg-background-selected data-[state=checked]:bg-background-selected h-10 data-[state=selected]:hover:bg-background-selected data-[state=checked]:hover:bg-background-selected data-[focused=true]:bg-background-default-secondary',
     className
   )}
   {oncontextmenu}

package/dist/types.d.ts

@@ -23,6 +23,7 @@ export type DrawerGroup = {
     emptyIcon?: IconSource;
     emptyTitle?: string;
     emptyDescription?: string;
+    hideCounter?: boolean;
 };
 export type DrawerOption = SelectOption & {
     separator?: boolean;
@@ -217,6 +218,7 @@ export interface BaseDropdownProps {
     fullWidth?: boolean;
     placement?: Placement;
     matchParentWidth?: boolean;
+    usePortal?: boolean;
     trigger?: Snippet;
     children?: Snippet;
     [key: string]: any;
@@ -286,6 +288,7 @@ export interface BaseTableHeaderOrderByProps {
     onFreeze?: () => void;
     isFrozen?: boolean;
     showSortOptions?: boolean;
+    showFilterOption?: boolean;
 }
 export interface BaseTableRowProps {
     row: TableDataRow;
@@ -389,9 +392,11 @@ export interface DrawerContextProps {
     multiple?: boolean;
     draggable?: boolean;
     widthClass?: string;
+    collapsibleGroups?: boolean;
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
     onreorder?: (items: DrawerOption[]) => void;
+    ondropitem?: (groups: Record<string, DrawerOption[]>) => void;
     children?: Snippet;
     groups?: DrawerGroup[];
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.21",
+  "version": "0.1.4-beta.23",
   "repository": {
-    "url":  "https://github.com/invopop/popui"
+    "url": "https://github.com/invopop/popui"
   },
   "scripts": {
     "dev": "vite dev",
@@ -55,7 +55,6 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@types/lodash-es": "^4.17.12",
-    "@types/sortablejs": "^1.15.9",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "eslint": "^8.28.0",
@@ -98,7 +97,7 @@
     "inter-ui": "^3.19.3",
     "lodash-es": "^4.17.21",
     "mode-watcher": "^1.1.0",
-    "sortablejs": "^1.15.6",
+    "svelte-dnd-action": "^0.9.69",
     "svelte-floating-ui": "^1.5.8",
     "svelte-headlessui": "^0.0.46",
     "svelte-intersection-observer-action": "^0.0.4",