@kikiloaw/simple-table 1.1.11 → 1.1.19

package/README.md

@@ -419,7 +419,7 @@ SimpleTable supports three data modes:
 | Protocol | When to Use | Backend Compatibility |
 |----------|-------------|-----------------------|
 | **`laravel`** (default) | **Recommended for 99% of cases.** | Standard Laravel pagination, Resource Collections, and custom JSON responses (including simple DataTables-like backends). |
-| **`datatables`** | Rare. | Only use if your backend **strictly requires** `draw`, `start`, and `length` request parameters and fails with standard `page`/`per_page` params. |
+| **`datatables`** | Legacy integrations. | Sends full DataTables payload (`draw`, `columns[...]`, `order[...]`, `search[...]`). Use this if you are using `yajra/laravel-datatables` or a strict DataTables backend. |
 
 ---
 
@@ -1153,17 +1153,22 @@ $('#myTable').DataTable({
 
 **SimpleTable sends:**
 ```
-GET /api/users?start=0&length=10&draw=1&search[value]=john&order[0][column]=1&order[0][dir]=asc
+GET /api/users?draw=1&start=0&length=10&search[value]=john&search[regex]=false&order[0][column]=1&order[0][dir]=asc&columns[0][data]=id&columns[0][name]=id&columns[0][searchable]=true...
 ```
 
-| Parameter | Description | Example |
-|-----------|-------------|---------|
-| `start` | Record offset | `0`, `10`, `20` |
-| `length` | Records per page | `10`, `25`, `50` |
-| `draw` | Request counter | `1`, `2`, `3` |
-| `search[value]` | Search query | `john`, `admin` |
-| `order[0][column]` | Column index to sort | `0`, `1`, `2` |
-| `order[0][dir]` | Sort direction | `asc`, `desc` |
+| Parameter | Description |
+|-----------|-------------|
+| `draw` | Request counter |
+| `start` | Record offset (0, 10, 20...) |
+| `length` | Records per page (10, 25, 50...) |
+| `search[value]` | Global search term |
+| `search[regex]` | Regex flag (always false) |
+| `order[0][column]` | Index of column being sorted |
+| `order[0][dir]` | Sort direction (`asc`, `desc`) |
+| `columns[i][data]` | Column key |
+| `columns[i][name]` | Column name (or custom sort key) |
+| `columns[i][searchable]` | Searchable flag |
+| `columns[i][orderable]` | Sortable flag |
 
 ### Response Format
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kikiloaw/simple-table",
-    "version": "1.1.11",
+    "version": "1.1.19",
     "description": "A lightweight, dependency-light DataTable component for Vue 3 with Tailwind CSS",
     "main": "src/index.js",
     "module": "src/index.js",

package/src/SimpleTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T">
-import { computed, ref, watch, onMounted } from 'vue'
+import { computed, ref, watch, onMounted, nextTick } from 'vue'
 import { router } from '@inertiajs/vue3'
 import {
   Table,
@@ -194,13 +194,18 @@ function getCacheKey(): string {
     })
 }
 
-function clearCache(scope: 'all' | 'current' = 'all') {
+async function clearCache(scope: 'all' | 'current' = 'all') {
     if (scope === 'current') {
         const key = getCacheKey()
         responseCache.value.delete(key)
     } else {
         responseCache.value.clear()
     }
+    
+    // User requested behavior: clearCache triggers fresh fetch
+    if (props.fetchUrl) {
+        await fetchData()
+    }
 }
 
 // Internal data state to handle both props updates and ajax updates
@@ -399,6 +404,7 @@ async function fetchData(params: any = {}) {
         }
         
         isLoading.value = true
+
         try {
             // Construct Query Parameters
             const url = new URL(props.fetchUrl, window.location.origin)
@@ -410,10 +416,29 @@ async function fetchData(params: any = {}) {
                 url.searchParams.append('length', String(currentPerPage.value))
                 url.searchParams.append('draw', String(drawCounter.value))
                 
-                if (searchQuery.value) {
-                    url.searchParams.append('search[value]', searchQuery.value)
-                }
+                // Defensive: Remove standard pagination params if they exist in the base URL
+                url.searchParams.delete('page')
+                url.searchParams.delete('per_page')
+                
+                // Add Columns Configuration (Required for strict DataTables backends like Yajra)
+                props.columns.forEach((col, index) => {
+                    const colName = typeof col.sortable === 'string' ? col.sortable : col.key
+                    const isSortable = !!col.sortable
+                    const isSearchable = true // Default to true as SimpleTable global search applies to all usually
+                    
+                    url.searchParams.append(`columns[${index}][data]`, col.key)
+                    url.searchParams.append(`columns[${index}][name]`, colName)
+                    url.searchParams.append(`columns[${index}][searchable]`, String(isSearchable))
+                    url.searchParams.append(`columns[${index}][orderable]`, String(isSortable))
+                    url.searchParams.append(`columns[${index}][search][value]`, '') 
+                    url.searchParams.append(`columns[${index}][search][regex]`, 'false')
+                })
+
+                // Global Search (Always send, even if empty)
+                url.searchParams.append('search[value]', searchQuery.value || '')
+                url.searchParams.append('search[regex]', 'false')
                 
+
                 if (sortColumn.value) {
                     // Find column index
                     const columnIndex = props.columns.findIndex(col => {
@@ -470,7 +495,10 @@ async function fetchData(params: any = {}) {
 
             let data = await response.json()
             
-            // Transform DataTables response to internal format
+            // Emit raw response immediately
+            emit('fetched', data)
+            
+            // Transform DataTables response to internal format for internal use
             if (props.protocol === 'datatables') {
                 // DataTables response: { draw, recordsTotal, recordsFiltered, data }
                 // Transform to Laravel format internally
@@ -492,7 +520,7 @@ async function fetchData(params: any = {}) {
             }
             
             internalData.value = data
-            emit('fetched', data)
+            // emit('fetched', data) // <-- Removed this, we emit raw data above
             
             // Store in cache if enabled
             if (props.enableCache) {
@@ -504,15 +532,55 @@ async function fetchData(params: any = {}) {
             isLoading.value = false
         }
     } else if (isServerSide.value) {
-         router.visit(window.location.pathname, {
-            data: { 
+        
+        let data: any = {}
+
+        if (props.protocol === 'datatables') {
+            const start = params.page 
+                ? (params.page - 1) * currentPerPage.value 
+                : (currentPage.value - 1) * currentPerPage.value
+                
+            data = {
+                draw: drawCounter.value,
+                start: start,
+                length: currentPerPage.value,
+                'search[value]': params.search ?? searchQuery.value ?? '',
+                ...props.queryParams
+            }
+
+            // Add Sort
+            if (params.sort || sortColumn.value) {
+                const colKey = params.sort ?? sortColumn.value
+                const colDir = params.order ?? sortDirection.value
+                
+                // Find column index
+                const columnIndex = props.columns.findIndex(col => {
+                    const sortKey = typeof col.sortable === 'string' ? col.sortable : col.key
+                    return sortKey === colKey
+                })
+                
+                if (columnIndex !== -1) {
+                    data['order[0][column]'] = columnIndex
+                    data['order[0][dir]'] = colDir
+                }
+            }
+            
+            drawCounter.value++
+
+        } else {
+            // Laravel format (default)
+            data = { 
                 page: params.page ?? currentPage.value,
                 per_page: currentPerPage.value,
                 search: params.search ?? searchQuery.value,
                 sort: params.sort ?? sortColumn.value,
                 order: params.order ?? sortDirection.value,
                 ...(props.queryParams || {})
-            },
+            }
+        }
+
+         router.visit(window.location.pathname, {
+            data,
             preserveState: true,
             preserveScroll: true,
             replace: true,
@@ -663,8 +731,20 @@ function handlePageChange(page: number) {
   emit('page-change', page)
 }
 
-function refresh() {
+
+// Reload (Reset): Go to page 1, clear cache, and refetch
+async function reload() {
     currentPage.value = 1
+    await nextTick()
+    
+    // Clear cache for fresh start
+    if (props.enableCache) {
+        clearCache('current')
+        // Note: clearCache calls fetchData(), so we don't need to call it again explicitly here
+        // However, clearCache is async now.
+        return // clearCache already fetched
+    }
+    
     fetchData()
 }
 
@@ -675,9 +755,9 @@ onMounted(() => {
 })
 
 defineExpose({
-    refresh,
+    reload, // The new "Reset" function
     fetchData,
-    clearCache
+    clearCache // The "Reload current page" function (effectively)
 })