Skip to content

Commit eb2fbcd

Browse files
lrljoelrljoe
committed
Doc Fixes
1 parent 4470951 commit eb2fbcd

File tree

32 files changed

+722
-754
lines changed

32 files changed

+722
-754
lines changed

‎docs/column-select/_index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: Column Select
3+
weight: 6
4+
---

‎docs/column-select/about.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: About
3+
weight: 1
4+
---
5+
6+
## Introduction
7+
8+
Column Selection allows the end-user to customise which Columns they wish to be visible.
9+
10+
As a developer, you can customise the behaviour of each Column [Column Selection Methods](../columns/column-selection).
11+
12+
There are also several methods for customising the behaviour & styling of the Column Select button & menu.
13+
- [Available Methods](./available-methods.md)
14+
- [Events](./events.md)
15+
- [Styling](./styling.md)

‎docs/column-select/available-methods.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
title: Available Methods
3+
weight: 2
4+
---
5+
6+
7+
## setColumnSelectDelay
8+
9+
Set the delay when selecting Columns
10+
```php
11+
public function configure(): void
12+
{
13+
// Defaults to 1500
14+
$this->setColumnSelectDelay(500);
15+
}
16+
```
17+
18+
## setDataTableFingerprint
19+
20+
In order to idenfify each table and prevent conflicts on column selection, each table is given a unique fingerprint.
21+
This fingerprint is generated using the static::class name of the component. If you are reusing
22+
the same component in different parts of your application, you may need to set your own custom fingerprint.
23+
24+
```php
25+
public function configure(): void
26+
{
27+
// Default fingerprint is output of protected method dataTableFingerprint()
28+
// Below will prepend the current route name
29+
$this->setDataTableFingerprint(route()->getName() . '-' . $this->dataTableFingerprint());
30+
}
31+
```
32+
33+
## Enabling/Disabling Column Select
34+
35+
You can enable/disable Column Select on a per-table basis:
36+
37+
### setColumnSelectStatus
38+
39+
**Enabled by default**, enable/disable column select for the component.
40+
41+
```php
42+
public function configure(): void
43+
{
44+
$this->setColumnSelectStatus(true);
45+
$this->setColumnSelectStatus(false);
46+
}
47+
```
48+
49+
### setColumnSelectEnabled
50+
51+
Enable column select on the component.
52+
53+
```php
54+
public function configure(): void
55+
{
56+
// Shorthand for $this->setColumnSelectStatus(true)
57+
$this->setColumnSelectEnabled();
58+
}
59+
```
60+
61+
### setColumnSelectDisabled
62+
63+
Disable column select on the component.
64+
65+
```php
66+
public function configure(): void
67+
{
68+
// Shorthand for $this->setColumnSelectStatus(false)
69+
$this->setColumnSelectDisabled();
70+
}
71+
```
72+
73+
## Responsive Visibility
74+
75+
You can show/hide the Column Select based on the device in use:
76+
77+
### setColumnSelectHiddenOnTablet
78+
79+
Hide column select menu when on tablet or mobile
80+
81+
```php
82+
public function configure(): void
83+
{
84+
$this->setColumnSelectHiddenOnTablet();
85+
}
86+
```
87+
88+
### setColumnSelectHiddenOnMobile
89+
90+
Hide column select menu when on mobile.
91+
92+
```php
93+
public function configure(): void
94+
{
95+
$this->setColumnSelectHiddenOnMobile();
96+
}
97+
```
98+
99+
## Remember Column Select
100+
101+
You can configure whether or not to persist the Column Selection for this table:
102+
103+
### setRememberColumnSelectionStatus
104+
105+
**Enabled by default**, whether or not to remember the users column select choices.
106+
107+
```php
108+
public function configure(): void
109+
{
110+
$this->setRememberColumnSelectionStatus(true);
111+
$this->setRememberColumnSelectionStatus(false);
112+
}
113+
```
114+
115+
### setRememberColumnSelectionEnabled
116+
117+
Remember the users column select choices.
118+
119+
```php
120+
public function configure(): void
121+
{
122+
// Shorthand for $this->setRememberColumnSelectionStatus(true)
123+
$this->setRememberColumnSelectionEnabled();
124+
}
125+
```
126+
127+
### setRememberColumnSelectionDisabled
128+
129+
Forget the users column select choices.
130+
131+
```php
132+
public function configure(): void
133+
{
134+
// Shorthand for $this->setRememberColumnSelectionStatus(false)
135+
$this->setRememberColumnSelectionDisabled();
136+
}
137+
```

‎docs/column-select/events.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Events
3+
weight: 3
4+
---
5+
6+
7+
## ColumnsSelected
8+
9+
If using column selection, an event is triggered when a user is changing selection. This can for example be used to store the selected columns in database for the user. When the user is accessing same page with the table, read som database and set the session key to initialize selected columns.
10+
11+
### Here is an example
12+
13+
```php
14+
use Rappasoft\LaravelLivewireTables\Events\ColumnsSelected;
15+
16+
class EventServiceProvider extends ServiceProvider
17+
{
18+
/**
19+
* The event listener mappings for the application.
20+
*
21+
* @var array
22+
*/
23+
protected $listen = [
24+
ColumnsSelected::class => [
25+
DataTableColumnsSelectedListener::class
26+
]
27+
]
28+
}
29+
```
30+
31+
```php
32+
33+
class DataTableColumnsSelectedListener
34+
{
35+
/**
36+
* Create the event listener.
37+
*
38+
* @return void
39+
*/
40+
public function __construct()
41+
{
42+
//
43+
}
44+
45+
/**
46+
* Handle the event.
47+
*
48+
* @param object $event
49+
* @return void
50+
*/
51+
public function handle($event)
52+
{
53+
Setting::setCurrentUserTableColumns($event->key, $event->columns);
54+
}
55+
56+
}
57+
```

‎docs/column-select/styling.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Styling
3+
weight: 4
4+
---
5+
6+
The Menu utilises the AlpineJS Anchor plugin (which uses the Floating UI project), to ensure correct responsive behaviour of the menu.
7+
8+
## setColumnSelectButtonAttributes
9+
Allows for customisation of the appearance of the "Column Select" button
10+
11+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
12+
13+
### default-colors
14+
Setting to false will disable the default colors for the Column Select button, the default colors are:
15+
16+
Bootstrap: None
17+
18+
Tailwind: `text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600`
19+
20+
### default-styling
21+
Setting to false will disable the default styling for the Column Select button, the default styling is:
22+
23+
Bootstrap: `btn dropdown-toggle d-block w-100 d-md-inline`
24+
25+
Tailwind: `inline-flex justify-center px-4 py-2 w-full text-sm font-medium rounded-md border shadow-sm focus:ring focus:ring-opacity-50`
26+
27+
```php
28+
public function configure(): void
29+
{
30+
$this->setColumnSelectButtonAttributes([
31+
'class' => 'focus:border-rose-300 focus:ring-1 focus:ring-rose-300 focus-visible:outline-rose-300', // Add these classes to the column select button
32+
'default-colors' => false, // Do not output the default colors
33+
'default-styling' => true // Output the default styling
34+
]);
35+
}
36+
```
37+
38+
39+
## setColumnSelectMenuAttributes
40+
Allows for customisation of the appearance of the "Column Select" menu
41+
42+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
43+
44+
```php
45+
public function configure(): void
46+
{
47+
$this->setColumnSelectMenuAttributes([
48+
'class' => 'text-rose-300 focus:border-rose-300 focus:ring-rose-300', // Add these classes to the column select menu option checkbox
49+
'default-colors' => false, // Do not output the default colors
50+
'default-styling' => true // Output the default styling
51+
]);
52+
}
53+
```
54+
55+
## setColumnSelectMenuAttributes Transition Behaviour
56+
57+
To modify the transition behaviour, you can customise any of the x-transition properties, which by default are:
58+
```php
59+
'x-transition:enter' => 'transition ease-out duration-100',
60+
'x-transition:enter-start' => 'transform opacity-0 scale-95',
61+
'x-transition:enter-end' => 'transform opacity-100 scale-100',
62+
'x-transition:leave' => 'transition ease-in duration-75',
63+
'x-transition:leave-start' => 'transform opacity-100 scale-100',
64+
'x-transition:leave-end' => 'transform opacity-0 scale-95',
65+
```
66+
By replacing the relevant attribute, for example, this would slow the "enter" behaviour to 3000ms instead of the default 100ms.
67+
68+
```php
69+
public function configure(): void
70+
{
71+
$this->setColumnSelectMenuAttributes([
72+
'x-transition:enter' => 'transition ease-out duration-200',
73+
'default-colors' => true, // Output the default colors
74+
'default-styling' => true // Output the default styling
75+
]);
76+
}
77+
```
78+
79+
## setColumnSelectMenuOptionCheckboxAttributes
80+
Allows for customisation of the appearance of the "Column Select" menu option checkbox
81+
82+
Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.
83+
84+
### default-colors
85+
Setting to false will disable the default colors for the Column Select menu option checkbox, the default colors are:
86+
87+
Bootstrap: None
88+
89+
Tailwind: `text-indigo-600 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600`
90+
91+
### default-styling
92+
93+
Setting to false will disable the default styling for the Column Select menu option checkbox, the default styling is:
94+
95+
Bootstrap 4: None
96+
97+
Bootstrap 5: `form-check-input`
98+
99+
Tailwind: `transition duration-150 ease-in-out rounded shadow-sm focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-wait`
100+
101+
```php
102+
public function configure(): void
103+
{
104+
$this->setColumnSelectMenuOptionCheckboxAttributes([
105+
'class' => 'text-rose-300 focus:border-rose-300 focus:ring-rose-300', // Add these classes to the column select menu option checkbox
106+
'default-colors' => false, // Do not output the default colors
107+
'default-styling' => true // Output the default styling
108+
]);
109+
}
110+
```

0 commit comments

Comments
 (0)