Server-side Mode

Handling large datasets with API-driven data fetching.

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

Live Server-side Demo

This table fetches data from a mock internal API.

Loading...
Showing to of results
blade 
<div class="w-full" id="server-side-demo">
    <x-plume::card class="p-0 overflow-hidden">
        <x-plume::data-table id="server-side-table" url="/api/users" :columns="[
            ['key' => 'id', 'label' => 'ID', 'sortable' => true],
            ['key' => 'name', 'label' => 'Name', 'sortable' => true],
            ['key' => 'email', 'label' => 'Email', 'sortable' => true],
            ['key' => 'role', 'label' => 'Role', 'sortable' => true],
        ]" searchable
            paginated :per-page="10" fixed-height />
    </x-plume::card>
</div>

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.
  • sort_col: The key of the column being sorted.
  • sort_dir: Direction (asc or desc).

Server Response

Use the DataTableResponse class to return the expected JSON structure:

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

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

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