@invopop/popui 0.1.40 → 0.1.41

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/package.json

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