Skip to content

Commit 8b6946a

Browse files
rappasoftrappasoft
committed
Docs
1 parent c659362 commit 8b6946a

File tree

3 files changed

+75
-89
lines changed

3 files changed

+75
-89
lines changed

‎docs/columns/footer.md

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,22 @@ Column::make('Price')
1717

1818
The footer row is enabled when ever any column calls `footer`.
1919

20-
See also [footer component configuration](../footer/available-methods).
20+
See also [footer component configuration](../footer/available-methods).
21+
22+
## Using a filter as a footer
23+
24+
As of version 2.7, you can use a filter as a footer.
25+
26+
```php
27+
// Example filter
28+
SelectFilter::make('Active')
29+
->hiddenFromAll(), // Optional, hides the filter from the menus, pills, count.
30+
31+
// You can pass a filter directly
32+
Column::make('Active')
33+
->footer($this->getFilterByKey('active')),
34+
35+
// Or use the shorthand method
36+
Column::make('Active')
37+
->footerFilter('active'), // Takes the key from the filter, which you can find in the query string when the filter is applied.
38+
```

‎docs/columns/secondary-header.md

Lines changed: 11 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -19,97 +19,20 @@ The secondary header row is enabled when ever any column calls `secondaryHeader`
1919

2020
See also [secondary header component configuration](../secondary-header/available-methods).
2121

22-
## Example: Adding a column search
22+
## Using a filter as a secondary header
2323

24-
Column search is not built in by default, but is easily achievable using this feature.
25-
26-
Here are the steps you need to take:
27-
28-
1. Add state to the component to track the input values
29-
2. Add the inputs to the columns using the secondaryHeader method
30-
3. Add the clause to the query based on the new state
31-
32-
### 1. Add state to the component to track the input values
33-
34-
This can be called whatever you want, but you need an array to house the values of the column search fields:
35-
36-
```php
37-
public $columnSearch = [
38-
'name' => null,
39-
];
40-
```
41-
42-
### 2. Add the inputs to the columns using the secondaryHeader method
43-
44-
You can do this inline, but I'll break it out into a partial for clarity:
24+
As of version 2.7, you can use a filter as a header.
4525

4626
```php
47-
Column::make('Name')
48-
->sortable()
49-
->searchable()
50-
->asHtml()
51-
->secondaryHeader(
52-
fn() => view('tables.cells.input-search', ['field' => 'name']);
53-
),
54-
```
55-
56-
**input-search.blade.php**
57-
58-
```html
59-
<input type="text" wire:model.debounce="columnSearch.{{ $field }}" placeholder="Search {{ ucfirst($field) }}" class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md" />
60-
```
61-
62-
### 3. Add the clause to the query based on the new state
63-
64-
Now you need to tell the query what to do when something is typed into the search:
65-
66-
```php
67-
public function query()
68-
{
69-
return User::query()
70-
->when(
71-
$this->columnSearch['name'] ?? null,
72-
fn ($query, $name) => $query->where('name', 'like', '%' . $name . '%')
73-
);
74-
}
75-
```
76-
77-
### Extra: Add a clear button to the inputs
78-
79-
If you want the input to have a clear button when it has a value like the default search does:
80-
81-
1. Send the state to the partial
82-
83-
```php
84-
Column::make('Name')
85-
->sortable()
86-
->searchable()
87-
->asHtml()
88-
->secondaryHeader(
89-
fn() => view('tables.cells.input-search', [
90-
'field' => 'name',
91-
'columnSearch' => $this->columnSearch
92-
])
93-
),
94-
```
95-
96-
2. Copy the search field and modify:
27+
// Example filter
28+
SelectFilter::make('Active')
29+
->hiddenFromAll(), // Optional, hides the filter from the menus, pills, count.
9730

98-
```html
99-
<div class="flex rounded-md shadow-sm">
100-
<input
101-
wire:model.debounce="columnSearch.{{ $field }}"
102-
placeholder="Search {{ ucfirst($field) }}"
103-
type="text"
104-
class="block w-full border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 dark:bg-gray-700 dark:text-white dark:border-gray-600 @if (isset($columnSearch[$field]) && strlen($columnSearch[$field])) rounded-none rounded-l-md focus:ring-0 focus:border-gray-300 @else focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md @endif"
105-
/>
31+
// You can pass a filter directly
32+
Column::make('Active')
33+
->secondaryHeader($this->getFilterByKey('active')),
10634

107-
@if (isset($columnSearch[$field]) && strlen($columnSearch[$field]))
108-
<span wire:click="$set('columnSearch.{{ $field }}', null)" class="inline-flex items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600">
109-
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
110-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
111-
</svg>
112-
</span>
113-
@endif
114-
</div>
35+
// Or use the shorthand method
36+
Column::make('Active')
37+
->secondaryHeaderFilter('active'), // Takes the key from the filter, which you can find in the query string when the filter is applied.
11538
```

‎docs/filters/available-methods.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,51 @@ SelectFilter::make('Active')
195195

196196
Now instead of `Active: Yes` it will say `User Status: Active`
197197

198+
### hiddenFromMenus
199+
200+
Hide the filter from both the filter popover and the filter slide down.
201+
202+
```php
203+
SelectFilter::make('Active')
204+
->hiddenFromMenus()
205+
```
206+
207+
### hiddenFromPills
208+
209+
Hide the filter from the filter pills when applied.
210+
211+
```php
212+
SelectFilter::make('Active')
213+
->hiddenFromPills()
214+
```
215+
216+
### hiddenFromFilterCount
217+
218+
Hide the filter from the filter count when applied.
219+
220+
```php
221+
SelectFilter::make('Active')
222+
->hiddenFromFilterCount()
223+
```
224+
225+
### hiddenFromAll
226+
227+
Hide the filter from the menus, pills, and count.
228+
229+
```php
230+
SelectFilter::make('Active')
231+
->hiddenFromAll()
232+
```
233+
234+
### notResetByClearButton
235+
236+
By default the `clear` button will reset all filters to their defaults. You can prevent this on a specific filter by using this method.
237+
238+
```php
239+
SelectFilter::make('Active')
240+
->notResetByClearButton()
241+
```
242+
198243
### Config
199244

200245
If the filter takes any config options, you can set them with the `config` method:

0 commit comments

Comments
 (0)