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

Migration to Core attribute management #1943

Merged
merged 21 commits into from
Sep 12, 2024
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
2 changes: 1 addition & 1 deletion .github/workflows/run-phpstan.yml
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ jobs:
matrix:
os: [ubuntu-latest]
php: [8.3]
laravel: [10]
laravel: [11]
stability: [prefer-dist]

name: PHPStan - P${{ matrix.php }} - L${{ matrix.laravel }} - ${{ matrix.stability }} - ${{ matrix.os }}
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/run-tests-pcov-pull.yml
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ jobs:
run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"

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

- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@v4
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/run-tests-pull.yml
Original file line number Diff line number Diff line change
Expand Up @@ -163,4 +163,4 @@ jobs:
run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"

- name: Run Unit Tests
run: php ./vendor/bin/paratest --no-coverage --processes=4
run: php ./vendor/bin/paratest --no-coverage
4 changes: 2 additions & 2 deletions .github/workflows/run-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ jobs:
run: echo "::add-matcher::${{ runner.tool_cache }}/phpunit.json"

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


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

- name: Run Unit Tests
run: php ./vendor/bin/paratest --no-coverage --processes=4
run: php ./vendor/bin/paratest --no-coverage
4 changes: 4 additions & 0 deletions docs/columns/available-methods.md
Original file line number Diff line number Diff line change
Expand Up @@ -302,3 +302,7 @@ Labels are visible by default, but should you wish to override a previous "hideC
Column::make('Name')
->setColumnLabelStatusEnabled()
```

## See Also
[Column Styling](./styling)

292 changes: 292 additions & 0 deletions docs/columns/styling.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
---
title: Styling
weight: 10
---

## Keeping Defaults
To allow simpler customisation on a per-table basis, there are numerous methods available to over-ride the default CSS classes.
Historically, this was provided by a simple toggleable "default" flag. However - in many cases, the original "default" has been expanded to include:

### Keep Default Colors And Default Styles
- set default flag to true
or
- set default-colors flag to true
- set default-styling flag to true

### Keep Default Colors Only
- set default flag to false
- set default-colors flag to true
- set default-styling flag to false

### Keep Default Styling Only
- set default flag to false
- set default-colors flag to false
- set default-styling flag to true

## Styling The Column Label

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:

For example:
```php
Column::make('Name')
->setLabelAttributes(['class' => 'text-2xl'])
```
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.

## Styling Table Elements

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.
This allows you to customise attributes based on the value of the table as well!

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.

## setThAttributes

Set a list of attributes to override on the th elements.

```php
public function configure(): void
{
// Takes a callback that gives you the current column.
$this->setThAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'class' => 'bg-green-500',
];
}

return [];
});
}
```

### Keeping Default Colors and Default Styling
```php
public function configure(): void
{
$this->setThAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'default' => true,
'class' => 'bg-green-500',
];
}

return ['default' => true];
});
}
```

### Keeping Default Styling Only For the "Name" Column
```php
public function configure(): void
{
$this->setThAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'default' => false,
'default-styling' => true,
'class' => 'text-black bg-green-500 dark:text-white dark:bg-green-900',
];
}

return ['default' => true];
});
}
```

### Reorder Column
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

You can also use the "title" of the Column, which will be "reorder" for the "reorder" Column:
```php
public function configure(): void
{
$this->setThAttributes(function(Column $column) {
if ($column->getTitle() == 'reorder')
{
return [
'class' => 'bg-green-500 dark:bg-green-800',
'default' => false,
'default-colors' => false,
];

}

return ['default' => true];
});
}
```

### Bulk Actions Column
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

You can also use the "title" of the Column, which will be "bulkactions" for the "Bulk Actions" Column:
```php
public function configure(): void
{
$this->setThAttributes(function(Column $column) {
if ($column->getTitle() == 'bulkactions')
{
return [
'class' => 'bg-yellow-500 dark:bg-yellow-800',
'default' => false,
'default-colors' => false,
];

}

return ['default' => true];
});
}
```

## setThSortButtonAttributes

Set a list of attributes to override on the th sort button elements

```php
public function configure(): void
{
// Takes a callback that gives you the current column.
$this->setThSortButtonAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'class' => 'bg-green-500',
];
}

return [];
});
}
```

## setTrAttributes

Set a list of attributes to override on the tr elements

```php
public function configure(): void
{
// Takes a callback that gives you the current row and its index
$this->setTrAttributes(function($row, $index) {
if ($index % 2 === 0) {
return [
'class' => 'bg-gray-200',
];
}

return [];
});
}
```

By default, this replaces the default classes on the tr, if you would like to keep them, set the appropriate default flag (see above)

```php
public function configure(): void
{
$this->setTrAttributes(function($row, $index) {
if ($index % 2 === 0) {
return [
'default' => true,
'class' => 'bg-gray-200',
];
}

return ['default' => true];
});
}
```

## setTdAttributes

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.

```php
public function configure(): void
{
// Takes a callback that gives you the current column, row, column index, and row index
$this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
if ($column->isField('total') && $row->total < 1000) {
return [
'class' => 'bg-red-500 text-white',
];
}
elseif ($column->isField('total') && $row->total >= 1000) {
return [
'class' => 'bg-green-500 text-white',
];
}

return [];
});
}
```

By default, this replaces the default classes on the td, if you would like to keep them, set the appropriate default flag (see above).

```php
public function configure(): void
{
// Takes a callback that gives you the current column, row, column index, and row index
$this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
if ($column->isField('total') && $row->total < 1000) {
return [
'default' => true,
'class' => 'bg-red-500 text-white',
];
}

return ['default' => true];
});
}

```

### Reorder Column
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

You can use the "title" of the Column, which will be "reorder" for the "reorder" Column:
```php
public function configure(): void
{
$this->setTdAttributes(function(Column $column) {
if ($column->getTitle() == 'reorder')
{
return [
'class' => 'bg-green-500 dark:bg-green-800',
'default' => false,
'default-colors' => false,
];

}

return ['default' => true];
});
}
```

### Bulk Actions Column
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

You can use the "title" of the Column, which will be "bulkactions" for the "Bulk Actions" Column:
```php
public function configure(): void
{
$this->setTdAttributes(function(Column $column) {
if ($column->getTitle() == 'bulkactions')
{
return [
'class' => 'bg-yellow-500 dark:bg-yellow-800',
'default' => false,
'default-colors' => false,
];

}

return ['default' => true];
});
}
```
Loading