[Question]How to customize export options button in Splade?"

[syedahnb]

Can we customize the export, PDF, and CSV buttons in the x-splade-table component? Also, how can we use the route helper function to generate a link for exporting data in the x-splade-table component?

<x-splade-table :for="$auditLogs" search-debounce="1000" striped>
or Like this
<Link href="{{ route('splade.table.export', ['table' => 'users', 'export' => 'excel-export', 'slug' => 'my_slug']) }}">Excel Export</Link>

I am trying to achieve something like this structure.

• Laravel Version: #.#.#
• PHP Version: #.#.#
• Splade JS Version (npm): #.#.#
• Splade PHP Version (composer): #.#.#
• Dev environment (OS, Sail/Valet/etc): ...

You may use the built-in Artisan Command to show the installed versions of the packages:

php artisan splade:show-versions

Make sure both Splade packages (JS + PHP) are up-to-date and on the same version. For example, when using version 0.5.0 of the PHP package, you should use the same JavaScript package version.

Description:

Steps To Reproduce Issue:

[jamesj2]

I think you maybe able to accomplish this by publishing the blade templates for Splade and modifying table/controls.blade.php & table/bulk-actions-exports.blade.php.

[Adel-Kazem]

I have done a work around job and fix this because I faced the same issue. I used bulk action to export the data instead of the export method. And eventually I sent the file using email because also I had the issue of not automatically and installed through the browser. In details:
1- move out from the export method and use the bulk action
2- after calling the export class send the file using email because it will not be automatically downloaded

note: this is a better choice because it allows you to select the records that you want to download as CSV instead of downloading the whole model. Also saving the file inside the email is better for easier access in the future..

The details of the codes are the following:

Inside your data table class, use bulk action:
->bulkAction(
label: 'Export to CSV',
before: fn (array $selectedIds) => $this->exportToCsv($selectedIds, 'user'sEmailHere..'),
after: fn () => Toast::info('Export initiated!')->autoDismiss(4)
)

Within the same data table class and a method to handle the selected IDs:
public function exportToCsv(array $selectedIds, $userEmail)
{
// Create a unique file name
$fileName = 'notes-' . time() . '.csv';

    // Store the CSV file
    Excel::store(new NotesExport($selectedIds), $fileName, 'local');

    // Send the email with the attachment
    Mail::to($userEmail)->send(new NotesExported($fileName));

    // After sending the email, delete the file from storage
    Storage::disk('local')->delete($fileName);
}

here is the last responsible for exporting the data:

ids = $ids; } public function collection() { return empty($this->ids) ? Note::all() : Note::whereIn('id', **$this->ids**)->get(); } } Mailable details: fileName = $fileName; } public function build() { return $this->markdown('emails.notes.exported') ->subject('Your Notes Export') ->attachFromStorage($this->fileName); } }

[Adel-Kazem]

The solution that I have provided earlier appears to work only on the records available inside one page if you try to select 'all' the records it will not going to work. Which means that now it's necessary to send the ID (that has a relationship of one to many to the records) associated with the records (that belongs to that ID..) available inside the data table.

Here is another solution to be able to send this ID by setting it as an attribute for the bulk action.

Step 1: Define Extra Parameters in BulkAction Class
Add a method in the BulkAction class to set extra parameters.

// In BulkAction.php
public function setExtraParameters(array $extraParameters)
{
$this->extraParameters = $extraParameters;
}

Step 2: Set Extra Parameters in HasBulkActions Trait
When defining a bulk action, set the extra parameters.

// In HasBulkActions.php
public function bulkAction(
// ... other parameters,
array $extraParameters = []
): self {
// ... existing code to set up bulk action

$this->bulkActions[$key]->setExtraParameters($extraParameters);

return $this;

}

Step 3: Pass Product ID as an Extra Parameter
In your ProductReviews table configuration, pass the productId.

// In ProductReviews.php
$table->bulkAction(
label: 'Delete Selected',
// ... other parameters,
extraParameters: ['productId' => $this->productId]
);

Step 4: Access Product ID in the Bulk Action Method
Retrieve the productId within the deleteSelectedReviews method using the request helper.

// In ProductReviews.php
protected function deleteSelectedReviews($selectedIds)
{
$productId = request('wildId');
// ... existing deletion logic
}

Step 5: Use Extra Parameters in Blade Template
Modify the Blade template to use the extra parameters in the getUrl method.

{{-- In your Blade template --}}
@foreach($table->getBulkActions() as $bulkAction)
<button
v-if="table.hasSelectedItems"
@click.prevent="table.performBulkAction(
@js($bulkAction->getUrl(['wildId' => $bulkAction->extraParameters])),
// ... other parameters
)"
dusk="action.{{ $bulkAction->getSlug() }}"
>
{{ $bulkAction->label }}

@Endforeach