You can fix this issue without resorting to publishing the filament table’s vendor file!

The Issue

The built in table as part of FilamentPHP has a recurring issue (IMO) where selecting a row causes the table to move downwards due to the insert of a ‘selection indicator’ element above the table.

This can cause grief for users who need to reposition their mouse after selecting a row.

Filter Example

Custom CSS

To fix this issue, we’re simply going to rearrange the order of some of the table components. For example, placing the selection indicator at the bottom of the table. This was my choice for a solution.

Why not publish the blade file?

Using custom css hooks are recommended by Filament itself over publishing vendor files. Doing this reduces your application’s risk profile and maintenance load when updating Filament versions. See more here

Registering your custom CSS file

Don’t forget to register your custom css class to override filament styling.

namespace App\Providers;
use Filament\Support\Assets\Css;
use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        FilamentAsset::register([
            Css::make('custom-stylesheet', __DIR__.'/../../resources/css/custom.css'),
        ]);
    }
}

When you’ve created your custom css file, you can publish it using php artisan filament:assets

Custom CSS

/*
file path: resources/css/custom.css

Tip: 
Open your table and inspect the html to gain greater 
clarity on where these css classes apply on the page 
/*

/*table container*/
.fi-ta-ctn {
    display: grid !important;
}

/*header container*/
.fi-ta-header-ctn{
    order: 1 !important;
}

/*table rows*/
.fi-ta-content {
    order: 2 !important;
}

/*!*selection indicator*!*/
.fi-ta-selection-indicator{
    order: 3 !important;
}

/*pagination section*/
.fi-pagination{
    order:4 !important;
}

Now that I’ve highlighted which css classes to use to change the table, you may want a different look than I selected - that’s totally cool, use your inspection tool & go crazy!; I just chose this because I think it still looks nice.

Final Styling Issues

No searching or bulk actions

If you use the css provided above and your table only has the filter icon with no search bar or bulk actions above the table (like in my example GIFs), you’ll notice a little bit of movement.

That is because any search bars or buttons will expand that region dynamically. You can fix this by:

  • Moving the filter section below the table
  • Fixing the filter section height ⬅ my choice
/* Add to your custom css file */
.fi-ta-header-toolbar{
    height: 58px; /* This height accounts for the button's size plus padding. May not work on every screen. Test it 🤷‍♂️ */
}

Rearanging the filter section

FilamentPHP supports fixing filters to the bottom of the page which may conflict with this custom CSS.

I did not test the recommeneded css changes on every table combination ever; I recommend you do if you have a cacophony of different table styles.

Result

Filter Example

No more movement :)