Partials and Hot Zones
PowerGrid uses power-components/partials to isolate DOM updates. A sort, search, filter, page change, or tab switch renders only the affected fragments (Hot Zones) server-side, and the browser morphs only those elements instead of the whole Livewire component.
If partials() is not available, PowerGrid falls back to a full-component render. There is no enable / disable flag.
Hot Zones
Names include the table's $tableName.
| Hot Zone | Partial name | Updated when |
|---|---|---|
| Table head | pg-thead-{tableName} | Sort (header indicators) |
| Table body | pg-tbody-{tableName} | Search, sort, filter, paginate, per-page change |
| Pagination | pg-pagination-{tableName} | Search, sort, filter, paginate, per-page change |
| Filter fields | pg-filter-fields-{tableName} | Filter panel contents (dropdown / flyout mode) |
| Filter trigger | pg-filter-trigger-{tableName} | Filter button / badge in flyout mode |
| Enabled filters | pg-enabled-filters-{tableName} | Active filter pills |
| Tabs | pg-tabs-{tableName} | Tab change, search, filter (badge counts) |
Zone Update Map
| User action | Zones updated |
|---|---|
| Search | tbody + pagination + tabs |
| Sort | thead + tbody + pagination |
| Filter | tbody + pagination + filter fields / trigger + enabled filters + tabs |
| Paginate | tbody + pagination |
| Per-page change | tbody + pagination |
| Tab change | tabs + tbody + pagination |
How Partials Preserve User Input
The search input uses wire:partial.ignore="pg-search-{tableName}" so it is not overwritten during a partial morph. Cursor position and typed text stay intact when other zones update.
Inline filters use wire:partial.ignore="pg-inline-filters-{tableName}" for the same reason.
Requirements
power-components/partials is a Composer dependency of PowerGrid. No extra configuration is needed beyond the installation guide.
INFO
Partials require Livewire 4+ and work with all PowerGrid themes.