- Creating Columns
- Relationships
- Available Methods
- Other Column Types
- Column Selection
- Secondary Header
- Footer
- Reusable Columns
- Anonymous Columns
- Styling
- Standard Column
- Array Columns (beta)
- Avg Columns (beta)
- Boolean Columns
- Button Group Columns
- Color Columns
- Component Columns
- Count Columns (beta)
- Date Columns
- Icon Columns (beta)
- Image Columns
- Increment Column (beta)
- Link Columns
- Livewire Component (beta)
- Sum Columns (beta)
- View Component Columns
- Wire Link Column (beta)
- Introduction
- Boolean Filters (beta)
- Date Filters
- DateRange Filters
- DateTime Filters
- Multi-Select Dropdown Filters
- Multi-Select Filters
- NumberRange Filters
- Number Filters
- Select Filters
- Text Filters
- Livewire Custom Filter (Beta)
- Refreshing
- Loading Placeholder
- Multiple Tables Same Page
- Actions (beta)
- Adding Custom Markup
- Debugging
- Saving Table State
- Lifecycle Hooks
- Hiding The Table (beta)
- One Of Many Example
- Tools
Getting Started
Usage
DataTable
Columns
Column Types
Rows
Sorting
Pagination
Search
Bulk Actions
Filters
Filter Types
Reordering
Secondary Header
Footer
Examples
Misc.
Sponsored
Advanced Usage
Examples
🎉 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 on the left/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(): void2{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(): void2{3 $this->setSearchStatus(true);4 $this->setSearchStatus(false);5}
setSearchEnabled
Enable search for the whole component.
1public function configure(): void2{3 // Shorthand for $this->setSearchStatus(true)4 $this->setSearchEnabled();5}
Disable search for the whole component.
setSearchDisabled
1public function configure(): void2{3 // Shorthand for $this->setSearchStatus(false)4 $this->setSearchDisabled();5}
setSearchVisibilityStatus
Show/hide the search box.
1public function configure(): void2{3 $this->setSearchVisibilityStatus(true);4 $this->setSearchVisibilityStatus(false);5}
setSearchVisibilityEnabled
Show the search box.
1public function configure(): void2{3 // Shorthand for $this->setSearchVisibilityStatus(true)4 $this->setSearchVisibilityEnabled();5}
setSearchVisibilityDisabled
Hide the search box.
1public function configure(): void2{3 // Shorthand for $this->setSearchVisibilityStatus(false)4 $this->setSearchVisibilityDisabled();5}
setSearchPlaceholder
Set a custom placeholder for the search box
1public function configure(): void2{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(): void2{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(): void2{3 // Send the search request with the next network request4 $this->setSearchDefer();5}
setSearchLive
Tell Livewire to immediately update the search
1public function configure(): void2{3 // Send the search request immediately4 $this->setSearchLive();5}
setSearchBlur
Tell Livewire to update the search when focus is changed from the text box.
1public function configure(): void2{3 // Send the search request once focus changes4 $this->setSearchBlur();5}
setSearchThrottle
Tell Livewire to throttle updates
1public function configure(): void2{3 // Search will throttle to every 1 second4 $this->setSearchThrottle(1000);5}
setTrimSearchStringEnabled
A new behaviour, which will trim search strings of whitespace at either end
1public function configure(): void2{3 // Will trim whitespace from either end of search strings4 $this->setTrimSearchStringEnabled();5}
setTrimSearchStringDisabled
The default behaviour, does not trim search strings of whitespace.
1public function configure(): void2{3 // Will not trim whitespace from either end of search strings4 $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(): void2{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(): void2{3 $this->setSearchIconAttributes([4 'class' => 'h-4 w-4',5 'style' => 'color: #000000',6 ]);7}