Filament•16mo ago

Customize the placeholder inside the search box

Is there any option to add a placeholder inside the search box of the table. For example: I need to show 'Search names' as the placeholder in the search box. Thanks

3 Replies

Patrick Boivin•16mo ago

You can change it in the translation files, but it's going to change the placeholder for all tables. I don't think there's a way to change it per table. https://github.com/filamentphp/filament/blob/3.x/packages/tables/resources/lang/en/table.php#L31

DrByte•16mo ago

One possibility (although it's not perfect: it's not ideal to publish any core templates, for lots of reasons; but this is a proof-of-concept): In your ListModelName page (which extends ListRecords), add a new function:

    protected function getPlaceholderText(): string
    {
        return __('filament-tables::table.fields.search.placeholder');
    }

    protected function getPlaceholderText(): string
    {
        return __('filament-tables::table.fields.search.placeholder');
    }

(you'll need to add that to ALL your List pages, else the template change below will be a problem) For any page you want to replace the default with something else, change the return value of that function, such as return 'Search Names'; like you mentioned above. Then clone and customize the template: Copy vendor/filament/tables/resources/views/components/search-field.blade.php to resources/views/vendor/filament-tables/components/search-field.blade.php and edit like this:

...
        <x-filament::input
            autocomplete="off"
            inline-prefix
-            :placeholder="__('filament-tables::table.fields.search.placeholder')"
+            :placeholder="$this->getPlaceholderText()"
            type="search"
            :wire:model.live.debounce.500ms="$wireModel"
            x-bind:id="$id('input')"
...

...
        <x-filament::input
            autocomplete="off"
            inline-prefix
-            :placeholder="__('filament-tables::table.fields.search.placeholder')"
+            :placeholder="$this->getPlaceholderText()"
            type="search"
            :wire:model.live.debounce.500ms="$wireModel"
            x-bind:id="$id('input')"
...

wyChoong•16mo ago

It’s not recommended to publish filament’s views It would be better to pr that function

Gaming

Programming

Customize the placeholder inside the search box