Laravel Livewire Tables Documentation
Sponsors Demo Support

Edit

🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.

This is the documentation for v3. You can switch versions in the menu at the top. Check your current version with the following command:

composer show rappasoft/laravel-livewire-tables

Available Methods

These are the available search configuration methods on the component.

If you need to programmatically set the search for when the component loads:

setSearch

1public function configure(): void
2{
3    $this->setSearch('Laravel');
4}

Search as a whole is enabled by default, but if you ever needed to toggle it you can use the following methods:

setSearchStatus

Enable/disable sorting for the whole component.

1public function configure(): void
2{
3    $this->setSearchStatus(true);
4    $this->setSearchStatus(false);
5}

setSearchEnabled

Enable search for the whole component.

1public function configure(): void
2{
3    // Shorthand for $this->setSearchStatus(true)
4    $this->setSearchEnabled();
5}

Disable search for the whole component.

setSearchDisabled

1public function configure(): void
2{
3    // Shorthand for $this->setSearchStatus(false)
4    $this->setSearchDisabled();
5}

setSearchVisibilityStatus

Show/hide the search box.

1public function configure(): void
2{
3    $this->setSearchVisibilityStatus(true);
4    $this->setSearchVisibilityStatus(false);
5}

setSearchVisibilityEnabled

Show the search box.

1public function configure(): void
2{
3    // Shorthand for $this->setSearchVisibilityStatus(true)
4    $this->setSearchVisibilityEnabled();
5}

setSearchVisibilityDisabled

Hide the search box.

1public function configure(): void
2{
3    // Shorthand for $this->setSearchVisibilityStatus(false)
4    $this->setSearchVisibilityDisabled();
5}

setSearchPlaceholder

Set a custom placeholder for the search box

1public function configure(): void
2{
3    $this->setSearchPlaceholder('Enter Search Term');
4}

You can only set one of the follow search modifiers:

setSearchDebounce

Set a search debounce in milliseconds on the search box:

1public function configure(): void
2{
3    // Search will wait 1 second before sending request.
4    $this->setSearchDebounce(1000);
5}

setSearchDefer

Tell Livewire to defer the search request until the following request.

1public function configure(): void
2{
3    // Send the search request with the next network request
4    $this->setSearchDefer();
5}

setSearchLive

Tell Livewire to immediately update the search

1public function configure(): void
2{
3    // Send the search request immediately
4    $this->setSearchLive();
5}

setSearchBlur

Tell Livewire to update the search when focus is changed from the text box.

1public function configure(): void
2{
3    // Send the search request once focus changes
4    $this->setSearchBlur();
5}

setSearchThrottle

Tell Livewire to throttle updates

1public function configure(): void
2{
3    // Search will throttle to every 1 second
4    $this->setSearchThrottle(1000);
5}

setTrimSearchStringEnabled

A new behaviour, which will trim search strings of whitespace at either end

1public function configure(): void
2{
3    // Will trim whitespace from either end of search strings
4    $this->setTrimSearchStringEnabled();
5}

setTrimSearchStringDisabled

The default behaviour, does not trim search strings of whitespace.

1public function configure(): void
2{
3    // Will not trim whitespace from either end of search strings
4    $this->setTrimSearchStringDisabled();
5}

Search Icon

To help customise, a "Search Input Icon" has been added, allowing for the addition of an icon to the search input field.

At present, the Search Icon is only available as a "left aligned" icon.

This is presently only available for Tailwind implementations

setSearchIcon

This adds an Icon to the Search Input Field, which expects an icon path (e.g. heroicon-m-magnifying-glass)

1public function configure(): void
2{
3    $this->setSearchIcon('heroicon-m-magnifying-glass');
4}

setSearchIconAttributes

This allows you to specify attributes for the Search Icon for the Input Field.

Note that classes will be injected prior to styles, due to the behaviour of icons.

1public function configure(): void
2{
3    $this->setSearchIconAttributes([
4        'class' => 'h-4 w-4',
5        'style' => 'color: #000000',
6    ]);
7}