Server-side Mode

Handling large datasets with API-driven data fetching for galleries.

When a url is provided, the Data Gallery shifts to server-side mode. It will automatically handle fetching data, managing loading states, and sending pagination/search parameters to your API.

Live Server-side Demo

This gallery fetches data from a mock internal API.

Loading...
Showing to of results
blade 
<x-plume::data-gallery url="/api/products" paginated searchable :per-page="6" cols="3"
    gap="4">
    <x-plume::card class="overflow-hidden h-full flex flex-col group">
        <div class="relative overflow-hidden bg-background-100 dark:bg-background-900 h-48">
            <img :src="item.image"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform" />
            <div x-show="item.in_stock === false"
                class="absolute inset-0 bg-black/70 flex items-center justify-center">
                <span class="text-white font-semibold">Out of Stock</span>
            </div>
        </div>
        <div class="p-4 flex flex-col grow">
            <div class="flex items-start justify-between gap-2 mb-2">
                <div class="grow">
                    <h3 x-text="item.name" class="font-semibold line-clamp-2"></h3>
                    <p x-text="item.category" class="text-xs text-foreground/50"></p>
                </div>
            </div>
            <p x-text="item.description" class="text-sm text-foreground/60 grow mb-3"></p>
            <div class="flex items-center justify-between">
                <span x-text="`$${item.price}`" class="font-bold text-lg text-primary"></span>
                <div class="flex gap-1">
                    <template x-for="i in [1, 2, 3, 4, 5]" :key="i">
                        <span
                            :class="i <= Math.ceil(item.rating) ? 'text-yellow-500' : 'text-foreground/20'"
                            class="icon icon-[fluent--star-24-filled] size-4"></span>
                    </template>
                </div>
            </div>
        </div>
    </x-plume::card>
</x-plume::data-gallery>

API Parameters

The component sends the following query parameters:

  • page: The current page number.
  • per_page: Number of items requested.
  • search: The search query string.

Server Response

Use the DataTableResponse class to return the expected JSON structure. This ensures consistency between Data Tables and Data Galleries.

php 
use deokon\Plume\Http\Responses\DataTableResponse;

public function index(Request $request)
{
$query = Product::query();

// ... apply filters/search based on $request ...

return DataTableResponse::fromPaginator($query->paginate($request->per_page));
}

Refreshing Data

You can trigger a data refresh by calling the fetch() method. This is useful when you want to update the gallery after an external action.

blade 
<x-plume::button @click="fetch()">
    Refresh Gallery
</x-plume::button>