pika-ux 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pika-ux",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "exports": {
     "./pika/*": "./src/pika/*",

package/src/pika/copy-button/copy-button.svelte

@@ -21,9 +21,11 @@
 
         /** When provided, this is the title of the button */
         title?: string;
+
+        size?: 'small' | 'medium';
     }
 
-    const { children, value: propValue, embedded = false, truncateAfter = 0, showTextAsLink = false, linkCallbackFn, title }: Props = $props();
+    const { children, value: propValue, embedded = false, truncateAfter = 0, showTextAsLink = false, linkCallbackFn, title, size = 'medium' }: Props = $props();
 
     let hiddenRef = $state<HTMLElement>() as HTMLElement;
     let value: string | undefined = $state(undefined);
@@ -118,16 +120,16 @@
 
 <span class="inline-flex w-fit items-center {embedded ? '' : 'border border-gray-200 rounded-sm'}">
     {#if showTextAsLink}
-        <Button class="p-0" variant="link" onclick={() => linkCallbackFn?.()}>{buttonTitle}</Button>
+        <Button class="p-0 {size === 'small' ? 'text-xs' : ''}" variant="link" onclick={() => linkCallbackFn?.()}>{buttonTitle}</Button>
     {:else}
-        <span class={embedded ? '' : 'border-r border-gray-200 px-2'}>{buttonTitle}</span>
+        <span class="{embedded ? '' : 'border-r border-gray-200 px-2'} {size === 'small' ? 'text-xs' : ''}">{buttonTitle}</span>
     {/if}
-    <span class="w-6 h-6 flex items-center justify-center">
+    <span class="{size === 'small' ? 'w-4 h-4 ml-1' : 'w-6 h-6'} flex items-center justify-center">
         {#if showCheckmark}
-            <Check class="w-3.5 h-3.5 text-green-500" />
+            <Check class="{size === 'small' ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5'} text-green-500" />
         {:else}
             <Button variant="ghost" class="h-full w-full min-h-0 p-0 ml-1 rounded-none hover:border-blue-100 hover:border hover:rounded-sm" onclick={copy} disabled={!value}>
-                <Copy class="w-3.5 h-3.5 text-gray-400" />
+                <Copy class="{size === 'small' ? 'w-2.5 h-2.5' : 'w-3.5 h-3.5'} text-gray-400" />
             </Button>
         {/if}
     </span>

package/src/pika/pika-table/pika-table-pagination.svelte

@@ -20,22 +20,48 @@ PikaTablePagination - Pagination controls for PikaTable
         table: Table<TData>;
         serverSide: ServerSideConfig;
         showRowsPerPage?: boolean;
+        globalFilterActive?: boolean;
     }
 
-    let { table, serverSide, showRowsPerPage = true }: Props = $props();
+    let { table, serverSide, showRowsPerPage = true, globalFilterActive = false }: Props = $props();
 
     // For cursor-based pagination, we can't jump to arbitrary pages
     const isCursorBased = $derived(serverSide?.paginationMode === 'cursor');
+
+    // Calculate counts for display
+    const totalLoadedRows = $derived(table.getCoreRowModel().rows.length);
+    const visibleRows = $derived(table.getRowModel().rows.length);
+    const selectedRows = $derived(table.getFilteredSelectedRowModel().rows.length);
 </script>
 
 <div class="flex items-center justify-between px-2">
-    <div class="text-muted-foreground flex-1 text-sm">
-        {#if serverSide?.tableState?.totalRecords !== undefined}
-            {table.getFilteredSelectedRowModel().rows.length} of
-            {serverSide.tableState.totalRecords} total row(s) selected.
+    <div class="flex-1 text-sm">
+        {#if globalFilterActive && visibleRows < totalLoadedRows}
+            <!-- Client-side filtering active -->
+            <div class="flex items-center gap-2">
+                <span class="text-sm font-medium text-blue-700">
+                    Showing {visibleRows} of {totalLoadedRows} loaded results
+                </span>
+                {#if selectedRows > 0}
+                    <span class="text-muted-foreground text-xs">
+                        ({selectedRows} selected)
+                    </span>
+                {/if}
+            </div>
+        {:else if selectedRows > 0}
+            <!-- No filtering, just show selection -->
+            <span class="text-muted-foreground">
+                {#if serverSide?.tableState?.totalRecords !== undefined}
+                    {selectedRows} of {serverSide.tableState.totalRecords} total row(s) selected.
+                {:else}
+                    {selectedRows} of {visibleRows} row(s) selected.
+                {/if}
+            </span>
         {:else}
-            {table.getFilteredSelectedRowModel().rows.length} of
-            {table.getFilteredRowModel().rows.length} row(s) selected.
+            <!-- No filtering, no selection -->
+            <span class="text-muted-foreground">
+                {totalLoadedRows} row(s) loaded
+            </span>
         {/if}
     </div>
     <div class="flex items-center space-x-8">

package/src/pika/pika-table/pika-table.svelte

@@ -172,7 +172,9 @@ PikaTable - A reusable table component with server-side pagination, sorting, and
             return !!serverSideConfig;
         },
         get manualFiltering() {
-            return !!serverSideConfig;
+            // CRITICAL: If using client-side global filter, we must disable manualFiltering
+            // Otherwise TanStack skips ALL filtering logic before checking manualGlobalFilter
+            return serverSideConfig ? !serverSideConfig.clientSideGlobalFilter : false;
         },
         get manualPagination() {
             return !!serverSideConfig;
@@ -183,13 +185,19 @@ PikaTable - A reusable table component with server-side pagination, sorting, and
 
             const tableState = serverSideConfig?.tableState;
 
+            // For server-side pagination, use the pageSize from tableState if available
+            const effectivePageSize = tableState?.pageSize ?? pageSize;
+
             // Calculate pageCount if totalRecords is available, regardless of pagination mode
-            if (tableState?.totalRecords !== undefined && pageSize > 0) {
-                return Math.ceil(tableState.totalRecords / pageSize);
+            if (tableState?.totalRecords !== undefined && effectivePageSize > 0) {
+                return Math.ceil(tableState.totalRecords / effectivePageSize);
             }
             // For cursor-based pagination without totalRecords, we don't know the total
             if (serverState.paginationMode === 'cursor') {
-                return -1; // Unknown page count for cursor pagination without totalRecords
+                // For cursor pagination, determine page count based on hasNextPage
+                // If we're on page 0 and hasNextPage is false, we have 1 page
+                // If hasNextPage is true, we have at least 2 pages
+                return tableState?.hasNextPage ? pageIndex + 2 : pageIndex + 1;
             }
             return undefined; // Unknown page count
         },
@@ -251,17 +259,21 @@ PikaTable - A reusable table component with server-side pagination, sorting, and
             if (globalFilterProps?.showGlobalFilter) {
                 globalFilterProps.globalFilterValue = value;
 
-                // Trigger server request for server-side tables
-                if (serverSideConfig) {
+                // Only trigger server request if global filter is server-side (not client-side)
+                if (serverSideConfig && !serverSideConfig.clientSideGlobalFilter) {
                     triggerServerRequest();
                 }
+                // Otherwise, global filter will work client-side automatically via getFilteredRowModel
             }
         },
 
         // === ROW MODELS ===
         getCoreRowModel: getCoreRowModel(),
         ...(serverSideConfig
-            ? {}
+            ? {
+                  // Include filtered row model ONLY if using client-side global filter
+                  ...(serverSideConfig.clientSideGlobalFilter ? { getFilteredRowModel: getFilteredRowModel() } : {})
+              }
             : {
                   getFilteredRowModel: getFilteredRowModel(),
                   getPaginationRowModel: getPaginationRowModel(),
@@ -278,7 +290,12 @@ PikaTable - A reusable table component with server-side pagination, sorting, and
     </div>
     {#if paginationPlacement === 'top' || paginationPlacement === 'both'}
         <div class="mt-2 pb-1">
-            <TablePagination {table} serverSide={serverSideConfig} {showRowsPerPage} />
+            <TablePagination
+                {table}
+                serverSide={serverSideConfig}
+                {showRowsPerPage}
+                globalFilterActive={!!(serverSideConfig?.clientSideGlobalFilter && globalFilterProps?.globalFilterValue)}
+            />
         </div>
     {/if}
     <div class="rounded-md border h-full flex flex-col overflow-y-auto">
@@ -315,7 +332,12 @@ PikaTable - A reusable table component with server-side pagination, sorting, and
     </div>
     {#if paginationPlacement === 'bottom' || paginationPlacement === 'both'}
         <div class="mt-2">
-            <TablePagination {table} serverSide={serverSideConfig} {showRowsPerPage} />
+            <TablePagination
+                {table}
+                serverSide={serverSideConfig}
+                {showRowsPerPage}
+                globalFilterActive={!!(serverSideConfig?.clientSideGlobalFilter && globalFilterProps?.globalFilterValue)}
+            />
         </div>
     {/if}
 </div>

package/src/pika/pika-table/types.ts

@@ -111,6 +111,14 @@ export interface ServerSideConfig {
     // === ERROR HANDLING ===
     onError?: (error: string) => void;
 
+    // === CLIENT-SIDE FILTERING ===
+    /**
+     * When true, enables client-side global filter even in server-side mode.
+     * This allows users to quickly filter already-loaded results without triggering server requests.
+     * Column filters still work server-side, but the global filter searches loaded data only.
+     */
+    clientSideGlobalFilter?: boolean;
+
     // === DYNAMIC TABLE STATE ===
     tableState: ServerSideTableState;
 }