Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add setFilterSlidedownWrapperAttributes and setFilterSlidedownRowAttributes #2120

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
273 changes: 273 additions & 0 deletions docs/filters/available-component-methods.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,273 @@
---
title: Available Component Methods
weight: 5
---

These are the available filters configuration methods on the component. These are "table-wide" methods.

---

Filters are **enabled by default** but will only show up if you have at least one defined.

## setFiltersStatus

Enable/disable filters for the whole component.

```php
public function configure(): void
{
$this->setFiltersStatus(true);
$this->setFiltersStatus(false);
}
```

## setFiltersEnabled

Enable filters for the component.

```php
public function configure(): void
{
// Shorthand for $this->setFiltersStatus(true)
$this->setFiltersEnabled();
}
```

## setFiltersDisabled

Disable filters for the component.

```php
public function configure(): void
{
// Shorthand for $this->setFiltersStatus(false)
$this->setFiltersDisabled();
}
```

---

## setFiltersVisibilityStatus

**Enabled by default**, show/hide the filters dropdown.

```php
public function configure(): void
{
$this->setFiltersVisibilityStatus(true);
$this->setFiltersVisibilityStatus(false);
}
```

## setFiltersVisibilityEnabled

Show the filters dropdown for the component.

```php
public function configure(): void
{
// Shorthand for $this->setFiltersVisibilityStatus(true)
$this->setFiltersVisibilityEnabled();
}
```

## setFiltersVisibilityDisabled

Hide the filters dropdown for the component.

```php
public function configure(): void
{
// Shorthand for $this->setFiltersVisibilityStatus(false)
$this->setFiltersVisibilityDisabled();
}
```

---

## setFilterPillsStatus

**Enabled by default**, show/hide the filter pills.

```php
public function configure(): void
{
$this->setFilterPillsStatus(true);
$this->setFilterPillsStatus(false);
}
```

## setFilterPillsEnabled

Show the filter pills for the component.

```php
public function configure(): void
{
// Shorthand for $this->setFilterPillsStatus(true)
$this->setFilterPillsEnabled();
}
```

## setFilterPillsDisabled

Hide the filter pills for the component.

```php
public function configure(): void
{
// Shorthand for $this->setFilterPillsStatus(false)
$this->setFilterPillsDisabled();
}
```

---

## setFilterLayout

Set the filter layout for the component.

```php
public function configure(): void
{
$this->setFilterLayout('slide-down');
}
```

## setFilterLayoutPopover

Set the filter layout to popover.

```php
public function configure(): void
{
$this->setFilterLayoutPopover();
}
```

Set the filter layout to slide down.

## setFilterLayoutSlideDown

```php
public function configure(): void
{
$this->setFilterLayoutSlideDown();
}
```

## setFilterSlideDownDefaultStatusEnabled

Set the filter slide down to visible by default

```php
public function configure(): void
{
// Shorthand for $this->setFilterSlideDownDefaultStatus(true)
$this->setFilterSlideDownDefaultStatusEnabled();
}
```

## setFilterSlideDownDefaultStatusDisabled

Set the filter slide down to collapsed by default

```php
public function configure(): void
{
// Shorthand for $this->setFilterSlideDownDefaultStatus(false)
$this->setFilterSlideDownDefaultStatusDisabled();
}
```

## storeFiltersInSessionEnabled

Optional behaviour - stores filter values in the session (specific to table - based on the table name)

### Exercise Caution
If re-using the same Livewire Table Component multiple times in your site, with the same table name, this may cause clashes in filter values

```php
public function configure(): void
{
$this->storeFiltersInSessionEnabled();
}
```
## storeFiltersInSessionDisabled

Default behaviour - does not store filters in the session

```php
public function configure(): void
{
$this->storeFiltersInSessionDisabled();
}
```

## setFilterPopoverAttributes

Allows for the customisation of the appearance of the Filter Popover Menu.

Note the addition of a "default-width" boolean, allowing you to customise the width more smoothly without impacting other applied classes.

You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.

You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array.

```php
public function configure(): void
{
$this->setFilterPopoverAttributes(
[
'class' => 'w-96',
'default-width' => false,
'default-colors' => true,
'default-styling' => true,
'x-transition:enter' => 'transition ease-out duration-100',
]
);
}
```

## setFilterSlidedownWrapperAttributes

Allows for the customisation of the appearance of the Filter Slidedown Wrapper.

You may also replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.

You can also replace the default transition behaviours (Tailwind) by specifying replacement attributes in the array, for example to extend the duration of the transition effect from the default duration-100 to duration-1000:

```php
public function configure(): void
{
$this->setFilterSlidedownWrapperAttributes([
'x-transition:enter' => 'transition ease-out duration-1000',
'class' => 'text-black',
'default-colors' => true,
'default-styling' => true,
]);
}
```

## setFilterSlidedownRowAttributes

Allows for the customisation of the appearance of the Filter Slidedown Row. Note that this uses a callback, which receives the "rowIndex" of the Slidedown Row

You may replace default colors by setting "default-colors" to false, or default styling by setting "default-styling" to false, and specifying replacement classes in the "class" property.

```php
public function configure(): void
{
$this->setFilterSlidedownRowAttributes(fn($rowIndex) => $rowIndex % 2 === 0 ?
[
'class' => 'bg-red-500',
'default-colors' => true,
'default-styling' => true,
] : [
'class' => 'bg-blue-500',
'default-colors' => true,
'default-styling' => true,
]
);
}
```
Loading
Loading