@invopop/popui 0.1.4-beta.44 → 0.1.4-beta.46

package/dist/data-table/column-definitions.js

@@ -22,9 +22,9 @@ export function createSelectionColumn() {
         enableSorting: false,
         enableHiding: false,
         enableResizing: false,
-        size: 52,
-        minSize: 52,
-        maxSize: 52
+        size: 40,
+        minSize: 40,
+        maxSize: 40
     };
 }
 /**

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

@@ -7,7 +7,7 @@
   let { table, filters, frozenColumns, onFreezeColumn, disabled = false }: { table: Table<TData>; filters?: Snippet; frozenColumns: Set<string>; onFreezeColumn: (columnId: string) => void; disabled?: boolean } = $props()
 </script>
 
-<div class={clsx('flex items-center justify-between px-4 py-3', {
+<div class={clsx('flex items-center justify-between px-4 py-2.5', {
   'pointer-events-none opacity-30': disabled
 })}>
   {#if filters}

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

@@ -78,6 +78,7 @@ export interface DataTableProps<TData> {
     initialSortDirection?: TableSortBy;
     initialFrozenColumns?: string[];
     initialColumnOrder?: string[];
+    initialColumnVisibility?: Record<string, boolean>;
     pageSizeOptions?: number[];
     emptyState?: Omit<EmptyStateProps, 'children' | 'check'>;
     onRowClick?: (row: TData) => void;
@@ -96,6 +97,7 @@ export interface DataTableProps<TData> {
     onFreezeChange?: (columnId: string) => void;
     onColumnResize?: (columnSizes: Record<string, number>) => void;
     onColumnOrderChange?: (columnOrder: string[]) => void;
+    onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
     getRowClassName?: (row: TData) => string;
     getRowState?: (row: TData) => {
         isSuccess?: boolean;

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

@@ -45,6 +45,7 @@
     initialSortDirection,
     initialFrozenColumns = [],
     initialColumnOrder = [],
+    initialColumnVisibility = {},
     emptyState = {
       iconSource: Search,
       title: 'No results',
@@ -65,6 +66,7 @@
     onFreezeChange,
     onColumnResize,
     onColumnOrderChange,
+    onColumnVisibilityChange,
     getRowClassName,
     getRowState,
     children
@@ -74,7 +76,7 @@
   const enablePagination = !disablePagination
 
   let rowSelection = $state<RowSelectionState>({})
-  let columnVisibility = $state<VisibilityState>({})
+  let columnVisibility = $state<VisibilityState>(initialColumnVisibility)
   let sorting = $state<SortingState>(
     initialSortColumn && initialSortDirection
       ? [{ id: initialSortColumn, desc: initialSortDirection === 'desc' }]
@@ -151,6 +153,13 @@
     }
   })
 
+  // Track column visibility changes
+  $effect(() => {
+    if (onColumnVisibilityChange && Object.keys(columnVisibility).length > 0) {
+      onColumnVisibilityChange(columnVisibility)
+    }
+  })
+
   const table = setupTable({
     getData: () => data,
     getColumns: () => columns,
@@ -393,7 +402,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 group-data-[state=selected]/row:group-hover/row:bg-background-selected group-data-[state=error]/row:bg-background-critical group-data-[state=error]/row:group-hover/row:bg-background-critical group-data-[state=success]/row:bg-background-selected group-data-[state=success]/row:group-hover/row:bg-background-selected group-data-[focused=true]/row:bg-background-default-secondary 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-[state=selected]/row:group-hover/row:bg-background-selected group-data-[state=error]/row:bg-background-critical group-data-[state=error]/row:group-hover/row:bg-background-critical group-data-[state=success]/row:bg-background-selected group-data-[state=success]/row:group-hover/row:bg-background-selected group-data-[focused=true]/row:bg-background-default-secondary px-3 shadow-[inset_0_-1px_0_0_var(--color-border)]',
       align === 'right' ? 'justify-end' : '',
       { 'pl-4': isFirst, 'pr-4': isLast, 'border-r border-border': isFrozen && isLastFrozen }
     )}
@@ -600,13 +609,14 @@
               data-state={dataState}
               data-row-index={rowIndex}
               data-focused={focusedRowIndex === rowIndex ? 'true' : undefined}
-              class={cn(clsx('border-b border-border', {
+              class={cn(clsx('shadow-[inset_0_-1px_0_0_var(--color-border)]', {
                 'cursor-pointer': onRowClick
               }), getRowClassName?.(row.original as TData))}
               onclick={() => onRowClick?.(row.original as TData)}
             >
               {#each row.getVisibleCells() as cell, index (cell.id)}
                 {@const visibleCells = row.getVisibleCells()}
+                {@const allCells = row.getAllCells()}
                 {@const isLastScrollable = index === visibleCells.length - 2}
                 {@const firstDataColumnIndex = visibleCells.findIndex(
                   (c) => c.column.id !== 'select' && c.column.id !== 'actions'
@@ -615,9 +625,9 @@
                 {@const isFirstCell = index === 0}
                 {@const isLastCell = index === visibleCells.length - 1}
                 {@const isFrozen = frozenColumns.has(cell.column.id)}
-                {@const lastFrozenColumnId = visibleCells.map(c => c.column).reverse().find(col => frozenColumns.has(col.id))?.id}
+                {@const lastFrozenColumnId = allCells.map(c => c.column).reverse().find(col => frozenColumns.has(col.id))?.id}
                 {@const isLastFrozen = isFrozen && cell.column.id === lastFrozenColumnId}
-                {@const frozenOffset = isFrozen ? calculateFrozenOffset(cell.column.id, visibleCells.map(c => c.column)) : 0}
+                {@const frozenOffset = isFrozen ? calculateFrozenOffset(cell.column.id, allCells.map(c => c.column)) : 0}
                 <Table.Cell
                   style={getCellStyle(cell, isLastScrollable, isFrozen, frozenOffset)}
                   class={getCellClasses(

package/dist/table/table-head.svelte

@@ -13,7 +13,7 @@
   bind:this={ref}
   data-slot="table-head"
   class={cn(
-    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:p-0 [&:has(button)]:p-0 px-3 bg-background',
+    'text-foreground-default-secondary text-base font-normal text-left align-middle [&:has([role=checkbox])]:p-0 [&:has(button)]:p-0 px-3 bg-background shadow-[inset_0_-1px_0_0_var(--color-border)]',
     className
   )}
   {...restProps}

package/dist/table/table-header.svelte

@@ -15,7 +15,7 @@
 <thead
   bind:this={ref}
   data-slot="table-header"
-  class={cn('sticky top-0 z-20 [&_tr]:border-b [&_tr]:border-border bg-background', className)}
+  class={cn('sticky top-0 z-20 bg-background', className)}
   onclick={bubble('click')}
   onkeydown={bubble('keydown')}
 >

package/package.json

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