Skip to content

Commit 35f9acd

Browse files
lrljoelrljoe
committed
Further Tweaks & Docs
1 parent d78ad24 commit 35f9acd

33 files changed

+418
-304
lines changed

‎docs/columns/available-methods.md‎

Lines changed: 0 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -7,69 +7,7 @@ weight: 3
77

88
To change the CSS classes or other attributes assigned to a Column, use can use [setTdAttributes](../datatable/styling), which allows customising attributes based on column type, name or value.
99

10-
## Sorting
1110

12-
See also [component sorting configuration](../sorting/available-methods).
13-
14-
To enable sorting you can chain the `sortable` method on your column:
15-
16-
```php
17-
Column::make('Name')
18-
->sortable(),
19-
```
20-
21-
If you would like more control over the sort behavior of a specific column, you may pass a closure:
22-
23-
```php
24-
Column::make(__('Address'))
25-
->sortable(
26-
fn(Builder $query, string $direction) => $query->orderBy()
27-
),
28-
```
29-
30-
### [Multi-column sorting](../sorting/available-methods#setsinglesortingstatus)
31-
32-
Multi-column sorting is **disabled by default**. To enable it you can set the `setSingleSortingDisabled()` method on the component.
33-
34-
```php
35-
public function configure(): void
36-
{
37-
$this->setSingleSortingDisabled();
38-
}
39-
```
40-
41-
Multi-column sorting is now enabled in the order the column headers are clicked.
42-
43-
### [Default column sorting](../sorting/available-methods#setdefaultsort)
44-
45-
By default, there is no default column sorting and the table will be displayed in the order the query has it listed. To enable default sorting you can use this method on your component:
46-
47-
```php
48-
public function configure(): void
49-
{
50-
$this->setDefaultSort('name', 'desc');
51-
}
52-
```
53-
54-
## Searching
55-
56-
See also [component search configuration](../search/available-methods).
57-
58-
To enable searching you can chain the `searchable` method on your column:
59-
60-
```php
61-
Column::make('Name')
62-
->searchable(),
63-
```
64-
65-
You can override the default search query using a closure:
66-
67-
```php
68-
Column::make('Name')
69-
->searchable(
70-
fn(Builder $query, $searchTerm) => $query->orWhere()
71-
),
72-
```
7311

7412
## Formatting
7513

@@ -177,62 +115,7 @@ Column::make('My one off column')
177115
->html(),
178116
```
179117

180-
## Collapsing
181118

182-
The component has the ability to collapse certain columns at different screen sizes. It will add a plus icon as the left most column that will open up a view below the row with the information of the collapsed columns:
183-
184-
![Collapsing](https://imgur.com/z1rWHzP.png)
185-
186-
You have 3 options when it comes to collapsing.
187-
188-
Collapse Always:
189-
190-
```php
191-
Column::make('Name')
192-
->collapseAlways(),
193-
```
194-
The columns will always be collapsed
195-
196-
Collapse on tablet:
197-
198-
```php
199-
Column::make('Name')
200-
->collapseOnTablet(),
201-
```
202-
203-
The columns will collapse on tablet and mobile.
204-
205-
Collapse on mobile:
206-
207-
```php
208-
Column::make('Name')
209-
->collapseOnMobile(),
210-
```
211-
212-
The column will collapse on mobile only.
213-
214-
The view will be rendered with the order of the columns as they were initially shown.
215-
216-
## Customization
217-
218-
### Customizing sorting pill names
219-
220-
You can customize the name on the pill for the specific column that's being sorted:
221-
222-
```php
223-
Column::make('Name')
224-
->setSortingPillTitle('Full Name'),
225-
```
226-
227-
### Customizing sorting pill directions
228-
229-
You can customize the directions on the pill for the specific column that's being sorted:
230-
231-
```php
232-
Column::make('Name')
233-
// Instead of Name: A-Z it will say Name: Asc
234-
->setSortingPillDirections('Asc', 'Desc'),
235-
```
236119

237120
## Misc.
238121

‎docs/columns/collapsing.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
title: Collapsing
3+
weight: 7
4+
---
5+
6+
7+
## Collapsing
8+
9+
The component has the ability to collapse certain columns at different screen sizes. It will add a plus icon as the left most column that will open up a view below the row with the information of the collapsed columns:
10+
11+
![Collapsing](https://imgur.com/z1rWHzP.png)
12+
13+
You have 3 options when it comes to collapsing.
14+
15+
Collapse Always:
16+
17+
```php
18+
Column::make('Name')
19+
->collapseAlways(),
20+
```
21+
The columns will always be collapsed
22+
23+
Collapse on tablet:
24+
25+
```php
26+
Column::make('Name')
27+
->collapseOnTablet(),
28+
```
29+
30+
The columns will collapse on tablet and mobile.
31+
32+
Collapse on mobile:
33+
34+
```php
35+
Column::make('Name')
36+
->collapseOnMobile(),
37+
```
38+
39+
The column will collapse on mobile only.
40+
41+
The view will be rendered with the order of the columns as they were initially shown.

‎docs/columns/searching.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: Searching
3+
weight: 10
4+
---
5+
6+
## Searching
7+
8+
See also [component search configuration](../search/available-methods).
9+
10+
To enable searching you can chain the `searchable` method on your column:
11+
12+
```php
13+
Column::make('Name')
14+
->searchable(),
15+
```
16+
17+
You can override the default search query using a closure:
18+
19+
```php
20+
Column::make('Name')
21+
->searchable(
22+
fn(Builder $query, $searchTerm) => $query->orWhere()
23+
),
24+
```

‎docs/columns/sorting.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: Sorting
3+
weight: 10
4+
---
5+
6+
## Sorting
7+
8+
See also [component sorting configuration](../sorting/available-methods).
9+
10+
To enable sorting you can chain the `sortable` method on your column:
11+
12+
```php
13+
Column::make('Name')
14+
->sortable(),
15+
```
16+
17+
If you would like more control over the sort behavior of a specific column, you may pass a closure:
18+
19+
```php
20+
Column::make(__('Address'))
21+
->sortable(
22+
fn(Builder $query, string $direction) => $query->orderBy()
23+
),
24+
```
25+
26+
### [Multi-column sorting](../sorting/available-methods#setsinglesortingstatus)
27+
28+
Multi-column sorting is **disabled by default**. To enable it you can set the `setSingleSortingDisabled()` method on the component.
29+
30+
```php
31+
public function configure(): void
32+
{
33+
$this->setSingleSortingDisabled();
34+
}
35+
```
36+
37+
Multi-column sorting is now enabled in the order the column headers are clicked.
38+
39+
### [Default column sorting](../sorting/available-methods#setdefaultsort)
40+
41+
By default, there is no default column sorting and the table will be displayed in the order the query has it listed. To enable default sorting you can use this method on your component:
42+
43+
```php
44+
public function configure(): void
45+
{
46+
$this->setDefaultSort('name', 'desc');
47+
}
48+
```
49+
50+
51+
52+
## Customization
53+
54+
### Customizing sorting pill names
55+
56+
You can customize the name on the pill for the specific column that's being sorted:
57+
58+
```php
59+
Column::make('Name')
60+
->setSortingPillTitle('Full Name'),
61+
```
62+
63+
### Customizing sorting pill directions
64+
65+
You can customize the directions on the pill for the specific column that's being sorted:
66+
67+
```php
68+
Column::make('Name')
69+
// Instead of Name: A-Z it will say Name: Asc
70+
->setSortingPillDirections('Asc', 'Desc'),
71+
```

‎resources/js/partials/core/sortIcons.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*jshint esversion: 6 */
2+
3+
function sortIcons() {
4+
5+
6+
Alpine.data('sortIcons', () => ({
7+
isAsc(direction) { return direction == 'asc'; },
8+
isDesc(direction) { return direction == 'desc'; },
9+
isUnsorted(direction) { return (!this.isAsc(direction) && !this.isDesc(direction)); },
10+
checkSort(direction) {
11+
if(direction == 'asc')
12+
{
13+
return 'asc';
14+
}
15+
else if(direction == 'desc')
16+
{
17+
return 'desc';
18+
}
19+
else
20+
{
21+
return 'unsorted';
22+
}
23+
},
24+
nextSort(direction) {
25+
if (this.isAsc(direction)) {
26+
return 'desc';
27+
}
28+
else if (this.isDesc(direction)) {
29+
return 'none';
30+
}
31+
else {
32+
return 'asc';
33+
}
34+
},
35+
}));
36+
}
37+
38+
export default sortIcons;

‎resources/js/partials/core/table.min.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
function table() {
44
Alpine.data('laravellivewiretable', (wire) => ({
55
tableId: '',
6+
sorts: wire.entangle('sorts'),
67
paginationTotalItemCount: wire.entangle('paginationConfig.paginationTotalItemCount'),
78
selectedItems: wire.entangle('selected'),
89
hideBulkActionsWhenEmpty: wire.entangle('bulkActionConfig.hideBulkActionsWhenEmpty'),

‎resources/views/components/icons/sort/clear.blade.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@aware(['direction' => 'none', 'customIconAttributes', 'isTailwind', 'isTailwind4', 'isBootstrap'])
2+
<x-heroicon-c-x-mark {{ $attributes->merge($customIconAttributes)
3+
->class($isTailwind ? [
4+
'absolute opacity-0 group-hover:opacity-100' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
5+
] : [])
6+
->class($isTailwind4 ? [
7+
'absolute opacity-0 group-hover:opacity-100' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
8+
] : [])
9+
->class($isBootstrap ? [
10+
'laravel-livewire-tables-btn-smaller ms-1' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
11+
] : [])
12+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />

‎resources/views/components/icons/sort/down.blade.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@aware(['direction' => 'none', 'customIconAttributes', 'isTailwind', 'isTailwind4', 'isBootstrap'])
2+
<x-heroicon-c-chevron-down {{ $attributes->merge($customIconAttributes)
3+
->class($isTailwind ? [
4+
'absolute opacity-100 group-hover:opacity-0' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
5+
] : [])
6+
->class($isTailwind4 ? [
7+
'absolute opacity-100 group-hover:opacity-0' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
8+
] : [])
9+
->class($isBootstrap ? [
10+
'laravel-livewire-tables-btn-smaller ms-1' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
11+
] : [])
12+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />

‎resources/views/components/icons/sort/down_hover.blade.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@aware(['direction' => 'none', 'customIconAttributes', 'isTailwind', 'isTailwind4', 'isBootstrap'])
2+
<x-heroicon-c-chevron-down {{ $attributes->merge($customIconAttributes)
3+
->class($isTailwind ? [
4+
'absolute opacity-0 group-hover:opacity-100' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
5+
] : [])
6+
->class($isTailwind4 ? [
7+
'absolute opacity-0 group-hover:opacity-100' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
8+
] : [])
9+
->class($isBootstrap ? [
10+
'laravel-livewire-tables-btn-smaller ms-1' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
11+
] : [])
12+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />

‎resources/views/components/icons/sort/unsorted.blade.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@aware(['direction' => 'none', 'customIconAttributes', 'isTailwind', 'isTailwind4', 'isBootstrap'])
2+
<x-heroicon-c-chevron-up-down {{ $attributes->merge($customIconAttributes)
3+
->class($isTailwind ? [
4+
'absolute opacity-100 group-hover:opacity-0' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
5+
] : [])
6+
->class($isTailwind4 ? [
7+
'absolute opacity-100 group-hover:opacity-0' => ($customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true)),
8+
] : [])
9+
->class($isBootstrap ? [
10+
'laravel-livewire-tables-btn-smaller ms-1' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true),
11+
] : [])
12+
->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} />

0 commit comments

Comments
 (0)