@invopop/popui 0.1.90 → 0.1.92

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

@@ -2,6 +2,7 @@
   import Button from '../button/button.svelte'
   import InputSelect from '../InputSelect.svelte'
   import InputText from '../InputText.svelte'
+  import Skeleton from '../skeleton/skeleton.svelte'
   import { ArrowLeft, ArrowRight, ScrollLeft, ScrollRight } from '@invopop/ui-icons'
   import { cn } from '../utils.js'
   import clsx from 'clsx'
@@ -21,7 +22,8 @@
     rowCount,
     manualPagination,
     disabled = false,
-    disableJumpToPage = false
+    disableJumpToPage = false,
+    countLoading = false
   }: DataTablePaginationProps<any> = $props()
 
   let currentPage = $derived(table.getState().pagination.pageIndex + 1)
@@ -140,8 +142,13 @@
               disabled={disableJumpToPage}
             />
           </div>
-          <span class="text-base text-foreground-default-secondary whitespace-nowrap">
-            / {formatNumber(totalPages)}
+          <span class="text-base text-foreground-default-secondary whitespace-nowrap flex items-center gap-1.5">
+            /
+            {#if countLoading}
+              <Skeleton class="h-4 w-8" />
+            {:else}
+              {formatNumber(totalPages)}
+            {/if}
           </span>
         </div>
         <div class="flex items-center">
@@ -206,7 +213,12 @@
         </div>
       {/if}
     </div>
-    {#if totalItems > 0}
+    {#if countLoading}
+      <span class="text-base text-foreground-default-secondary flex items-center gap-1.5">
+        <Skeleton class="h-4 w-10" />
+        {itemsLabel}
+      </span>
+    {:else if totalItems > 0}
       <span class="text-base text-foreground-default-secondary">
         {formatNumber(totalItems)}
         {itemsLabel}

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

@@ -94,6 +94,7 @@ export interface DataTablePaginationProps<T> {
     manualPagination?: boolean;
     disabled?: boolean;
     disableJumpToPage?: boolean;
+    countLoading?: boolean;
 }
 export interface DataTableRowProps<TData> {
     row: Row<TData>;
@@ -152,6 +153,7 @@ export interface DataTableProps<TData> {
     manualSorting?: boolean;
     pageCount?: number;
     rowCount?: number;
+    countLoading?: boolean;
     onPageChange?: (pageIndex: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     onSortingChange?: (columnId: string, direction: TableSortBy) => void;

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

@@ -68,6 +68,7 @@
     manualSorting = false,
     pageCount,
     rowCount,
+    countLoading = false,
     onPageChange,
     onPageSizeChange,
     onSortingChange,
@@ -154,9 +155,12 @@
   // Track selection changes
   $effect(() => {
     if (onSelectionChange) {
-      const selectedRows = Object.keys(rowSelection)
-        .filter((key) => rowSelection[key])
-        .map((key) => data[parseInt(key)])
+      const selectedKeys = Object.keys(rowSelection).filter((key) => rowSelection[key])
+      const selectedRows = getRowId
+        ? selectedKeys
+            .map((key) => data.find((row, idx) => getRowId(row, idx) === key))
+            .filter((row): row is TData => row !== undefined)
+        : selectedKeys.map((key) => data[parseInt(key)])
       onSelectionChange(selectedRows)
     }
   })
@@ -434,6 +438,7 @@
         {onPageChange}
         {onPageSizeChange}
         {disableJumpToPage}
+        {countLoading}
         disabled={disableControls || loading}
       >
         {#if paginationSlot}

package/package.json

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