Skip to content

Commit 530b0bf

Browse files
lrljoelrljoe
authored
Migration to Core attribute management (rappasoft#1943)
* Migration to Core attribute management * Fix styling * Fix missing type hint, update tests * Fix styling * Remove defaults from being output * Fix styling * Adjust defaults * Adjust behaviour for Bulk Actions TH * Add "styling" to Columns docs * Docs Adjust, add missing test * Fix styling * Adjust workflows - use L11 for PHPStan, use PHPUnit for L10 * Add missing test for thSortIconAttributes * Fix styling * Add CustomAttributesTest * Fix styling * Add missing tests - correct attribute to respect defaults * Fix styling * Remove defined processes in workflows * Add test for setShouldBeHidden and setShouldBeDisplayed * Fix styling --------- Co-authored-by: lrljoe <[email protected]>
1 parent 90d6ffb commit 530b0bf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1261
-378
lines changed

‎.github/workflows/run-phpstan.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ jobs:
2020
matrix:
2121
os: [ubuntu-latest]
2222
php: [8.3]
23-
laravel: [10]
23+
laravel: [11]
2424
stability: [prefer-dist]
2525

2626
name: PHPStan - P${{ matrix.php }} - L${{ matrix.laravel }} - ${{ matrix.stability }} - ${{ matrix.os }}

‎.github/workflows/run-tests-pcov-pull.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ jobs:
8888
run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"
8989

9090
- name: Run Unit Tests
91-
run: php ./vendor/bin/paratest --cache-directory=".phpunit.cache/code-coverage" --strict-coverage --coverage-clover ./coverage.xml --processes=4
91+
run: php ./vendor/bin/paratest --cache-directory=".phpunit.cache/code-coverage" --strict-coverage --coverage-clover ./coverage.xml
9292

9393
- name: Upload coverage reports to Codecov
9494
uses: codecov/codecov-action@v4

‎.github/workflows/run-tests-pull.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,4 +163,4 @@ jobs:
163163
run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"
164164

165165
- name: Run Unit Tests
166-
run: php ./vendor/bin/paratest --no-coverage --processes=4
166+
run: php ./vendor/bin/paratest --no-coverage

‎.github/workflows/run-tests.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ jobs:
8585
run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"
8686

8787
- name: Run Unit Tests
88-
run: php ./vendor/bin/paratest --no-coverage --processes=4
88+
run: php ./vendor/bin/phpunit --no-coverage
8989

9090

9191
test-laravel11:
@@ -164,4 +164,4 @@ jobs:
164164
run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"
165165

166166
- name: Run Unit Tests
167-
run: php ./vendor/bin/paratest --no-coverage --processes=4
167+
run: php ./vendor/bin/paratest --no-coverage

‎docs/columns/available-methods.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,3 +302,7 @@ Labels are visible by default, but should you wish to override a previous "hideC
302302
Column::make('Name')
303303
->setColumnLabelStatusEnabled()
304304
```
305+
306+
## See Also
307+
[Column Styling](./styling)
308+

‎docs/columns/styling.md‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
---
2+
title: Styling
3+
weight: 10
4+
---
5+
6+
## Keeping Defaults
7+
To allow simpler customisation on a per-table basis, there are numerous methods available to over-ride the default CSS classes.
8+
Historically, this was provided by a simple toggleable "default" flag. However - in many cases, the original "default" has been expanded to include:
9+
10+
### Keep Default Colors And Default Styles
11+
- set default flag to true
12+
or
13+
- set default-colors flag to true
14+
- set default-styling flag to true
15+
16+
### Keep Default Colors Only
17+
- set default flag to false
18+
- set default-colors flag to true
19+
- set default-styling flag to false
20+
21+
### Keep Default Styling Only
22+
- set default flag to false
23+
- set default-colors flag to false
24+
- set default-styling flag to true
25+
26+
## Styling The Column Label
27+
28+
The Column itself provides the capability to style the Label shown in the "th" element. You can set custom attributes to pass to the Column Label on a per-Column basis:
29+
30+
For example:
31+
```php
32+
Column::make('Name')
33+
->setLabelAttributes(['class' => 'text-2xl'])
34+
```
35+
By default, this replaces the default classes on the label, if you would like to keep them, set the default/default-styling/default-colors flags to true as appropriate.
36+
37+
## Styling Table Elements
38+
39+
It is important to note that you can also customise the parent TH and TD elements, customising both classes and attributes for each Column's header (using setThAttributes) and each row of that Column (using setTdAttributes), these are available in the configure() method of the table.
40+
This allows you to customise attributes based on the value of the table as well!
41+
42+
Below is a copy of the relevant sections from [datatable styling](../datatable/styling) to ensure visibility of the options. More are documented on the main datatable styling page.
43+
44+
## setThAttributes
45+
46+
Set a list of attributes to override on the th elements.
47+
48+
```php
49+
public function configure(): void
50+
{
51+
// Takes a callback that gives you the current column.
52+
$this->setThAttributes(function(Column $column) {
53+
if ($column->isField('name')) {
54+
return [
55+
'class' => 'bg-green-500',
56+
];
57+
}
58+
59+
return [];
60+
});
61+
}
62+
```
63+
64+
### Keeping Default Colors and Default Styling
65+
```php
66+
public function configure(): void
67+
{
68+
$this->setThAttributes(function(Column $column) {
69+
if ($column->isField('name')) {
70+
return [
71+
'default' => true,
72+
'class' => 'bg-green-500',
73+
];
74+
}
75+
76+
return ['default' => true];
77+
});
78+
}
79+
```
80+
81+
### Keeping Default Styling Only For the "Name" Column
82+
```php
83+
public function configure(): void
84+
{
85+
$this->setThAttributes(function(Column $column) {
86+
if ($column->isField('name')) {
87+
return [
88+
'default' => false,
89+
'default-styling' => true,
90+
'class' => 'text-black bg-green-500 dark:text-white dark:bg-green-900',
91+
];
92+
}
93+
94+
return ['default' => true];
95+
});
96+
}
97+
```
98+
99+
### Reorder Column
100+
Note: If you are using Reorder, then the th for Reorder can be [styled separately](../reordering/available-methods). However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6
101+
102+
You can also use the "title" of the Column, which will be "reorder" for the "reorder" Column:
103+
```php
104+
public function configure(): void
105+
{
106+
$this->setThAttributes(function(Column $column) {
107+
if ($column->getTitle() == 'reorder')
108+
{
109+
return [
110+
'class' => 'bg-green-500 dark:bg-green-800',
111+
'default' => false,
112+
'default-colors' => false,
113+
];
114+
115+
}
116+
117+
return ['default' => true];
118+
});
119+
}
120+
```
121+
122+
### Bulk Actions Column
123+
Note: If you are using Bulk Actions, then the th for Bulk Actions can be [styled separately](../bulk-actions/customisations). However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6
124+
125+
You can also use the "title" of the Column, which will be "bulkactions" for the "Bulk Actions" Column:
126+
```php
127+
public function configure(): void
128+
{
129+
$this->setThAttributes(function(Column $column) {
130+
if ($column->getTitle() == 'bulkactions')
131+
{
132+
return [
133+
'class' => 'bg-yellow-500 dark:bg-yellow-800',
134+
'default' => false,
135+
'default-colors' => false,
136+
];
137+
138+
}
139+
140+
return ['default' => true];
141+
});
142+
}
143+
```
144+
145+
## setThSortButtonAttributes
146+
147+
Set a list of attributes to override on the th sort button elements
148+
149+
```php
150+
public function configure(): void
151+
{
152+
// Takes a callback that gives you the current column.
153+
$this->setThSortButtonAttributes(function(Column $column) {
154+
if ($column->isField('name')) {
155+
return [
156+
'class' => 'bg-green-500',
157+
];
158+
}
159+
160+
return [];
161+
});
162+
}
163+
```
164+
165+
## setTrAttributes
166+
167+
Set a list of attributes to override on the tr elements
168+
169+
```php
170+
public function configure(): void
171+
{
172+
// Takes a callback that gives you the current row and its index
173+
$this->setTrAttributes(function($row, $index) {
174+
if ($index % 2 === 0) {
175+
return [
176+
'class' => 'bg-gray-200',
177+
];
178+
}
179+
180+
return [];
181+
});
182+
}
183+
```
184+
185+
By default, this replaces the default classes on the tr, if you would like to keep them, set the appropriate default flag (see above)
186+
187+
```php
188+
public function configure(): void
189+
{
190+
$this->setTrAttributes(function($row, $index) {
191+
if ($index % 2 === 0) {
192+
return [
193+
'default' => true,
194+
'class' => 'bg-gray-200',
195+
];
196+
}
197+
198+
return ['default' => true];
199+
});
200+
}
201+
```
202+
203+
## setTdAttributes
204+
205+
Set a list of attributes to override on the td elements. For example, changing the background color between red/green based on whether the "total" field is over or under 1000.
206+
207+
```php
208+
public function configure(): void
209+
{
210+
// Takes a callback that gives you the current column, row, column index, and row index
211+
$this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
212+
if ($column->isField('total') && $row->total < 1000) {
213+
return [
214+
'class' => 'bg-red-500 text-white',
215+
];
216+
}
217+
elseif ($column->isField('total') && $row->total >= 1000) {
218+
return [
219+
'class' => 'bg-green-500 text-white',
220+
];
221+
}
222+
223+
return [];
224+
});
225+
}
226+
```
227+
228+
By default, this replaces the default classes on the td, if you would like to keep them, set the appropriate default flag (see above).
229+
230+
```php
231+
public function configure(): void
232+
{
233+
// Takes a callback that gives you the current column, row, column index, and row index
234+
$this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
235+
if ($column->isField('total') && $row->total < 1000) {
236+
return [
237+
'default' => true,
238+
'class' => 'bg-red-500 text-white',
239+
];
240+
}
241+
242+
return ['default' => true];
243+
});
244+
}
245+
246+
```
247+
248+
### Reorder Column
249+
Note: If you are using Reorder, then the td for Reorder can be [styled separately](../reordering/available-methods). However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6
250+
251+
You can use the "title" of the Column, which will be "reorder" for the "reorder" Column:
252+
```php
253+
public function configure(): void
254+
{
255+
$this->setTdAttributes(function(Column $column) {
256+
if ($column->getTitle() == 'reorder')
257+
{
258+
return [
259+
'class' => 'bg-green-500 dark:bg-green-800',
260+
'default' => false,
261+
'default-colors' => false,
262+
];
263+
264+
}
265+
266+
return ['default' => true];
267+
});
268+
}
269+
```
270+
271+
### Bulk Actions Column
272+
Note: If you are using Bulk Actions, then the td for Bulk Actions can be [styled separately](../bulk-actions/customisations). However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6
273+
274+
You can use the "title" of the Column, which will be "bulkactions" for the "Bulk Actions" Column:
275+
```php
276+
public function configure(): void
277+
{
278+
$this->setTdAttributes(function(Column $column) {
279+
if ($column->getTitle() == 'bulkactions')
280+
{
281+
return [
282+
'class' => 'bg-yellow-500 dark:bg-yellow-800',
283+
'default' => false,
284+
'default-colors' => false,
285+
];
286+
287+
}
288+
289+
return ['default' => true];
290+
});
291+
}
292+
```

0 commit comments

Comments
 (0)