@invopop/popui 0.1.40 → 0.1.42

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, showFilterOption = true }: BaseTableHeaderOrderByProps = $props()
+  let { isActive = false, sortDirection, onOrderBy, onHide, onFilter, onFreeze, isFrozen = false, showSortOptions = true, showFilterOption = true, showHideOption = true }: BaseTableHeaderOrderByProps = $props()
 
   let items = $derived([
     ...(showSortOptions ? [
@@ -26,8 +26,10 @@
       { 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' }
+    ...(showHideOption ? [
+      { label: '', value: 'sep-3', separator: true },
+      { icon: Preview, label: 'Hide column', value: 'hide' }
+    ] : [])
   ] as DrawerOption[])
 </script>
 

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

@@ -126,6 +126,7 @@
         isFrozen={frozenColumns.has(column.id)}
         showSortOptions={column.getCanSort()}
         showFilterOption={!column.columnDef.meta?.disableColumnFilter}
+        showHideOption={column.getCanHide()}
         onOrderBy={(direction) => {
           column.toggleSorting(direction === 'desc')
           if (onSortingChange) {

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

@@ -20,7 +20,8 @@
     data,
     rowCount,
     manualPagination,
-    disabled = false
+    disabled = false,
+    disableJumpToPage = false
   }: DataTablePaginationProps<any> = $props()
 
   let currentPage = $derived(table.getState().pagination.pageIndex + 1)
@@ -78,28 +79,32 @@
     className
   )}
 >
-  <div class={clsx('flex items-center gap-3', {
-    'pointer-events-none opacity-30': disabled
-  })}>
+  <div
+    class={clsx('flex items-center gap-3', {
+      'pointer-events-none opacity-30': disabled
+    })}
+  >
     <div class="flex items-center gap-2">
       <div class="flex items-center gap-1.5">
         <div class="flex items-center">
-          <Button
-            variant="ghost"
-            size="md"
-            icon={ScrollLeft}
-            onclick={() => {
-              if (manualPagination) {
-                table.setPagination({ pageIndex: 0, pageSize: rowsPerPage })
-              } else {
-                table.setPageIndex(0)
-              }
-              onPageChange?.(1)
-            }}
-            disabled={currentPage === 1}
-            class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
-            aria-label="First page"
-          />
+          {#if !disableJumpToPage}
+            <Button
+              variant="ghost"
+              size="md"
+              icon={ScrollLeft}
+              onclick={() => {
+                if (manualPagination) {
+                  table.setPagination({ pageIndex: 0, pageSize: rowsPerPage })
+                } else {
+                  table.setPageIndex(0)
+                }
+                onPageChange?.(1)
+              }}
+              disabled={currentPage === 1}
+              class={cn(currentPage === 1 && 'pointer-events-none opacity-30')}
+              aria-label="First page"
+            />
+          {/if}
           <Button
             variant="ghost"
             size="md"
@@ -132,6 +137,7 @@
               size="sm"
               oninput={handlePageInput}
               onblur={handlePageBlur}
+              disabled={disableJumpToPage}
             />
           </div>
           <span class="text-base text-foreground-default-secondary whitespace-nowrap">
@@ -158,22 +164,24 @@
             class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
             aria-label="Next page"
           />
-          <Button
-            variant="ghost"
-            size="md"
-            icon={ScrollRight}
-            onclick={() => {
-              if (manualPagination) {
-                table.setPagination({ pageIndex: totalPages - 1, pageSize: rowsPerPage })
-              } else {
-                table.setPageIndex(totalPages - 1)
-              }
-              onPageChange?.(totalPages)
-            }}
-            disabled={currentPage === totalPages}
-            class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
-            aria-label="Last page"
-          />
+          {#if !disableJumpToPage}
+            <Button
+              variant="ghost"
+              size="md"
+              icon={ScrollRight}
+              onclick={() => {
+                if (manualPagination) {
+                  table.setPagination({ pageIndex: totalPages - 1, pageSize: rowsPerPage })
+                } else {
+                  table.setPageIndex(totalPages - 1)
+                }
+                onPageChange?.(totalPages)
+              }}
+              disabled={currentPage === totalPages}
+              class={cn(currentPage === totalPages && 'pointer-events-none opacity-30')}
+              aria-label="Last page"
+            />
+          {/if}
         </div>
       </div>
       {#if showRowsPerPage}
@@ -190,7 +198,6 @@
               table.setPageSize(size)
               table.setPageIndex(0)
               onPageSizeChange?.(size)
-              onPageChange?.(1)
             }}
             placeholder="Rows per page"
             disablePlaceholder={true}

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

@@ -93,6 +93,7 @@ export interface DataTablePaginationProps<T> {
     rowCount?: number;
     manualPagination?: boolean;
     disabled?: boolean;
+    disableJumpToPage?: boolean;
 }
 export interface DataTableRowProps<TData> {
     row: Row<TData>;
@@ -117,6 +118,7 @@ export interface DataTableProps<TData> {
     disablePagination?: boolean;
     disableKeyboardNavigation?: boolean;
     disableControls?: boolean;
+    disableJumpToPage?: boolean;
     rowActions?: TableAction[];
     getRowActions?: (row: TData) => TableAction[];
     onRowAction?: (action: AnyProp, row: TData) => void;

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

@@ -47,6 +47,7 @@
     disablePagination = false,
     disableKeyboardNavigation = false,
     disableControls = false,
+    disableJumpToPage = false,
     rowActions = [],
     getRowActions,
     onRowAction,
@@ -196,7 +197,14 @@
       tableRenderKey++
     },
     setSorting: (value) => (sorting = value),
-    setPagination: (value) => (pagination = value),
+    setPagination: (value) => {
+      const pageChanged = pagination.pageIndex !== value.pageIndex
+      pagination = value
+      // Clear selection when page changes
+      if (pageChanged && Object.keys(rowSelection).length > 0) {
+        rowSelection = {}
+      }
+    },
     setColumnSizing: (value) => {
       columnSizing = value
       if (onColumnResize && Object.keys(value).length > 0) {
@@ -417,6 +425,7 @@
         {manualPagination}
         {onPageChange}
         {onPageSizeChange}
+        {disableJumpToPage}
         disabled={disableControls || loading}
       >
         {#if paginationSlot}

package/dist/types.d.ts

@@ -240,6 +240,7 @@ export interface BaseTableHeaderOrderByProps {
     isFrozen?: boolean;
     showSortOptions?: boolean;
     showFilterOption?: boolean;
+    showHideOption?: boolean;
 }
 export interface BreadcrumbProps {
     breadcrumb: Breadcrumb;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },