Skip to content

Commit 5510a82

Browse files
luanfreitasdevluanfreitasdev
committed
wip
1 parent d320753 commit 5510a82

File tree

2 files changed

+163
-12
lines changed

2 files changed

+163
-12
lines changed

‎docs/release-notes-and-upgrade/release-notes.md‎

Lines changed: 91 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
The following items have been deprecated in this release:
88

99
* Using `dynamicProperties` in Button macros.
10-
* Remove support for `openspout/openspout` v3.
11-
* Remove `Cache::make()->forever()` method.
12-
* Cache `rememberForever` via config `cache_data` key.
13-
* Remove `Button::make()->method()` method.
14-
* Remove `Button::make()->target()` method (now in route method).
15-
* Remove `Button::make()->bladeComponent()` available only for `actionRules()`.
16-
* Remove `Button::make()->render()` You can work around this by using `bladeComponent` in `actionRules()` method.
17-
10+
* Drop support for `openspout/openspout` v3.
11+
* Removed `Cache::make()->forever()` method.
12+
* Removed Cache `rememberForever()` via config `cache_data` key.
13+
* Removed from `Button::make()->method()` method.
14+
* Removed `Button::make()->target()` method (now in route method).
15+
* Removed `Button::make()->bladeComponent()` method available only for `actionRules()`.
16+
* Removed `Button::make()->render()` method You can work around this by using `bladeComponent` in `actionRules()` method.
17+
* Removed `tom-select.css` from dist. Use native CSS instead of PowerGrid dist path
1818
---
1919

2020
### New Properties
@@ -43,7 +43,7 @@ The following items have been deprecated in this release:
4343

4444
### Improves & Features
4545

46-
**Refactored Actions Rendering**
46+
### ✨ Javascript Actions Rendering
4747

4848
::: info
4949
* Action rendering has been refactored for better performance and flexibility.
@@ -103,3 +103,85 @@ So, our setup will look like this:
103103
| allowed | Only the icons defined here will be processed. If empty, all will be loaded |
104104
| attributes | attributes that will be added by default to the SVG |
105105

106+
### ✨ Column Macros
107+
108+
* If you need to add different query logic when searching for example, you can create a new macro (let's assume `searchableDateFormat`):
109+
110+
`AppServiceProvider`, boot method.
111+
```php
112+
Column::macro('searchableDateFormat', function () {
113+
$this->rawQueries[] = [
114+
'method' => 'orWhereRaw',
115+
'sql' => 'DATE_FORMAT('.$this->dataField.', "%d/%m/%Y") like ?',
116+
'bindings' => ['%{search}%'],
117+
'enabled' => function (PowerGridComponent $component) {
118+
return filled($component->search);
119+
},
120+
];
121+
122+
return $this;
123+
});
124+
```
125+
126+
Now, in any PowerGrid table component:
127+
```php
128+
Column::make('Created At', 'created_at')
129+
->searchableDateFormat(),
130+
```
131+
132+
### Row Template
133+
134+
If you want to customize a record in the table without using Blade's processing, you can use the rowTemplate() method. This approach prevents the unnecessary creation of Blade components for the same field across different rows by leveraging JavaScript instead.
135+
136+
**Consider the following example:**
137+
138+
::: info
139+
For each rendered row in the 'name' field, a view will be created in PHP during the rendering process:
140+
:::
141+
142+
```php
143+
public function fields(): PowerGridFields
144+
{
145+
return PowerGrid::fields()
146+
->add('id')
147+
->add('name', function ($row) {
148+
return \Blade::render(<<<blade
149+
<div id="custom-\$id" class="bg-red-100 py-1 rounded px-3">\$name</div>
150+
blade, [
151+
'id' => $row->id,
152+
'name' => $row->name,
153+
]);
154+
})
155+
}
156+
```
157+
158+
We can simplify this by using JavaScript to handle the rendering, as shown below:
159+
160+
```php{5-11,15-20}
161+
public function fields(): PowerGridFields
162+
{
163+
return PowerGrid::fields()
164+
->add('id')
165+
->add('name', function ($row) {
166+
return [
167+
'template-name' => [
168+
'id' => $row->id,
169+
'name' => $row->name,
170+
],
171+
];
172+
});
173+
}
174+
175+
public function rowTemplates(): array
176+
{
177+
return [
178+
'template-name' => '<div id="custom-{{ id }}" class="bg-red-100 py-1 rounded px-3">{{ name }}</div>',
179+
];
180+
}
181+
```
182+
183+
In this setup, we instruct PowerGrid to look for 'template-name' and replace the HTML with the corresponding template during rendering.
184+
By doing so, the layout and styling are managed by JavaScript, which dynamically populates the fields with the appropriate data for each row.
185+
186+
This approach reduces the overhead associated with generating Blade views for each row, leading to improved performance and easier maintenance, especially when dealing with large datasets.
187+
Instead of repeatedly rendering Blade components, the JavaScript-based solution efficiently handles the customization directly in the browser, making your application more responsive and streamlined.

‎docs/table-component/component-columns.md‎

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,77 @@ Column::make('Dish Availability', 'availability')
477477
]);
478478
```
479479

480-
---
480+
### template
481+
482+
If you want to customize a record in the table without using Blade's processing, you can use the rowTemplate() method. This approach prevents the unnecessary creation of Blade components for the same field across different rows by leveraging JavaScript instead.
483+
484+
**Consider the following example:**
485+
486+
::: info
487+
For each rendered row in the 'name' field, a view will be created in PHP during the rendering process:
488+
:::
489+
490+
```php
491+
public function fields(): PowerGridFields
492+
{
493+
return PowerGrid::fields()
494+
->add('id')
495+
->add('name', function ($row) {
496+
return \Blade::render(<<<blade
497+
<div id="custom-\$id" class="bg-red-100 py-1 rounded px-3">\$name</div>
498+
blade, [
499+
'id' => $row->id,
500+
'name' => $row->name,
501+
]);
502+
})
503+
}
504+
```
505+
506+
We can simplify this by using JavaScript to handle the rendering, as shown below:
507+
508+
```php
509+
public function fields(): PowerGridFields
510+
{
511+
return PowerGrid::fields()
512+
->add('id')
513+
->add('name', function ($row) {
514+
return [
515+
'template-name' => [ // [!code ++]
516+
'id' => $row->id, // [!code ++]
517+
'name' => $row->name, // [!code ++]
518+
], // [!code ++]
519+
];
520+
});
521+
}
522+
523+
public function columns(): array
524+
{
525+
return [
526+
Column::make('ID', 'id')
527+
->searchable()
528+
->sortable(),
529+
530+
Column::make('Name', 'name')
531+
->template() // [!code ++]
532+
->searchable()
533+
->sortable(),
534+
];
535+
}
536+
537+
public function rowTemplates(): array // [!code ++]
538+
{ // [!code ++]
539+
return [ // [!code ++]
540+
'template-name' => '<div id="custom-{{ id }}" class="bg-red-100 py-1 rounded px-3">{{ name }}</div>', // [!code ++]
541+
]; // [!code ++]
542+
} // [!code ++]
543+
```
544+
545+
In this setup, we instruct PowerGrid to look for 'template-name' and replace the HTML with the corresponding template during rendering.
546+
By doing so, the layout and styling are managed by JavaScript, which dynamically populates the fields with the appropriate data for each row.
547+
548+
This approach reduces the overhead associated with generating Blade views for each row, leading to improved performance and easier maintenance, especially when dealing with large datasets.
549+
Instead of repeatedly rendering Blade components, the JavaScript-based solution efficiently handles the customization directly in the browser, making your application more responsive and streamlined.
550+
481551

482552
## Custom Macros
483553

@@ -510,5 +580,4 @@ Now, in any PowerGrid table component:
510580
| `method` | The method used to add a raw query to the query builder, in this case, `orWhereRaw`. |
511581
| `sql` | The SQL query that will be executed. It performs a case-insensitive search on the specified column of the table. |
512582
| `bindings`| An array containing a closure that processes the search term by converting it to lowercase and wrapping it with wildcard characters (`%`). The processed search term is bound to the query. |
513-
| `enabled` | A closure that determines whether the search should be applied, based on whether the search term is filled (`filled`).
514-
583+
| `enabled` | A closure that determines whether the search should be applied, based on whether the search term is filled (`filled`).

0 commit comments

Comments
 (0)