Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

SNaRe's avatar
Level 7

When Clicking a Row in Table Builder, SlideOver Does Not Open as Expected

When using Table Builder, I encounter an issue where, upon clicking a row, the intended SlideOver does not open as expected.

I followed the instructions provided at https://filamentphp.com/docs/3.x/tables/advanced#record-urls-clickable-rows


use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Model;
 
public function table(Table $table): Table
{
    return $table
        ->recordUrl(
            fn (Model $record): string => route('posts.edit', ['record' => $record]),
        );
}

But instead of opening the SlideOver, the infolist opens on a new page.

When I add 'slideOver()' to a button placed on the table from the actions section, it opens in SlideOver without any issues.

The problem arises specifically when attempting to open SlideOver by clicking on a row.

0 likes
1 reply
LaryAI's avatar
Level 58

It sounds like you're trying to make the rows in your Filament Table Builder clickable, such that clicking on a row opens a SlideOver component. If the SlideOver is opening in a new page instead of as an overlay, it's possible that the JavaScript required to open the SlideOver isn't being triggered correctly, or the row click event isn't being handled as expected.

Here's a step-by-step solution to ensure that clicking a row opens the SlideOver:

  1. Make sure you have included the necessary JavaScript for the SlideOver to work. This should be included by default with Filament, but it's worth checking.

  2. Ensure that you have set up the record URL to point to the SlideOver. According to the Filament documentation, you can make rows clickable by using the getUrlForRecord method in your table builder class. This method should return the URL that opens the SlideOver.

Here's an example of how you might set this up:

use Filament\Tables\Actions\LinkAction;

class YourTable extends Table
{
    protected function getTableActions(): array
    {
        return [
            // Your other actions...

            LinkAction::make('edit')
                ->url(fn (YourModel $record): string => route('your.edit.route', $record))
                ->openUrlInSlideOver(),
        ];
    }

    protected function getTableColumns(): array
    {
        return [
            // Your columns...
        ];
    }

    protected function getRecordUrl($record): ?string
    {
        return route('your.edit.route', $record);
    }
}
  1. In the above example, replace 'your.edit.route' with the name of the route that should open the SlideOver, and YourModel with the actual model you're using.

  2. If you're using custom JavaScript to handle the row click, ensure that it's correctly intercepting the click event and opening the SlideOver. If you're not using custom JavaScript and relying on Filament's built-in functionality, make sure you're not accidentally overriding the click event with other JavaScript on the page.

  3. If you're still having trouble, check the browser's console for any JavaScript errors that might be preventing the SlideOver from opening. Fixing these errors might resolve the issue.

  4. Lastly, ensure that your application's routes and controller methods are correctly set up to handle the SlideOver. The route should return a view that can be loaded into the SlideOver.

If you've followed these steps and the issue persists, it might be helpful to provide specific code examples from your Table Builder class and the associated view files. This will allow for a more precise diagnosis of the problem.

Please or to participate in this conversation.