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

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/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

@@ -58,6 +58,8 @@ export interface DataTableProps<TData> {
     onRowAction?: (action: AnyProp, row: TData) => void;
     initialPageSize?: number;
     initialPage?: number;
+    initialSortColumn?: string;
+    initialSortDirection?: 'asc' | 'desc';
     pageSizeOptions?: number[];
     emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
     onRowClick?: (row: TData) => void;

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

@@ -38,6 +38,8 @@
     onRowAction,
     initialPageSize = 10,
     initialPage = 0,
+    initialSortColumn,
+    initialSortDirection,
     emptyState = {
       iconSource: Search,
       title: 'No results',
@@ -64,7 +66,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>({
@@ -272,6 +278,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 +312,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 +357,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 +375,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"
@@ -457,22 +459,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/types.d.ts

@@ -286,6 +286,7 @@ export interface BaseTableHeaderOrderByProps {
     onFreeze?: () => void;
     isFrozen?: boolean;
     showSortOptions?: boolean;
+    showFilterOption?: boolean;
 }
 export interface BaseTableRowProps {
     row: TableDataRow;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.4-beta.21",
+  "version": "0.1.4-beta.22",
   "repository": {
     "url":  "https://github.com/invopop/popui"
   },