# Init Grid Extensions

> Enable JavaScript grid extensions for a listing page. Extensions add sorting, filtering, bulk actions, column toggling, position reordering, and other interactive behaviors to the grid. Trigger: "add grid extensions for {Domain}", "enable grid extensions for {Domain}", "initialize grid JS for {Domain}".

- Skill: `gabrielmoreira/init-grid-extensions` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/init-grid-extensions`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/init-grid-extensions/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/init-grid-extensions

---


# init-grid-extensions

Read `@.ai/Component/Javascript/CONTEXT.md` for the grid component and extension system.

## Basic pattern

In the listing entry point (`index.ts`):

```typescript
const grid = new window.prestashop.component.Grid('{domain}');

grid.addExtension(new window.prestashop.component.GridExtensions.SortingExtension());
grid.addExtension(new window.prestashop.component.GridExtensions.FiltersResetExtension());
grid.addExtension(new window.prestashop.component.GridExtensions.SubmitRowActionExtension());
grid.addExtension(new window.prestashop.component.GridExtensions.SubmitBulkActionExtension());
grid.addExtension(new window.prestashop.component.GridExtensions.BulkActionCheckboxExtension());
grid.addExtension(new window.prestashop.component.GridExtensions.ColumnTogglingExtension());
```

The grid ID must match the `GRID_ID` const from the PHP grid definition factory.

## Available extensions

### Core extensions (most grids need these)

| Extension | Purpose |
|---|---|
| `SortingExtension` | Clickable column headers for sorting |
| `FiltersResetExtension` | Reset button for grid filters |
| `FiltersSubmitButtonEnablerExtension` | Enable/disable filter submit button |
| `BulkActionCheckboxExtension` | Select-all and per-row checkboxes |
| `SubmitBulkActionExtension` | Submit bulk action form (enable/disable/delete) |
| `SubmitRowActionExtension` | Handle row action link clicks |
| `LinkRowActionExtension` | Navigate to row action URLs |
| `ColumnTogglingExtension` | Show/hide columns via dropdown |

### Specialized extensions (add only when needed)

| Extension | Purpose | When to use |
|---|---|---|
| `AsyncToggleColumnExtension` | AJAX toggle for boolean columns | Entity has toggle status in grid |
| `PositionExtension` | Drag-and-drop row reordering | Entity has position column |
| `AjaxBulkActionExtension` | AJAX bulk actions (no page reload) | Performance-sensitive bulk ops |
| `ExportToSqlManagerExtension` | Export grid data to SQL manager | Grid needs SQL export |
| `ReloadListExtension` | Reload grid data without page refresh | AJAX-driven grid updates |
| `PreviewExtension` | Inline row preview expansion | Entity has preview/details panel |
| `ModalFormSubmitExtension` | Submit forms in modal dialogs | Delete confirmation modals |
| `BulkOpenTabsExtension` | Open multiple items in new tabs | Batch review workflows |
| `SubmitGridActionExtension` | Grid-level action buttons | Grid has toolbar actions (export, import) |

### Domain-specific extensions

Some domains have custom extensions in subdirectories:
- `column/catalog/` — catalog-specific column extensions
- `action/row/` — domain-specific row action extensions (e.g. customer delete with order check)

Check `admin-dev/themes/new-theme/js/components/grid/extension/` for the full list.

## Multiple grids on one page

For pages with multiple grids (e.g. Manufacturer with manufacturers + addresses):

```typescript
const manufacturerGrid = new window.prestashop.component.Grid('manufacturer');
manufacturerGrid.addExtension(new SortingExtension());
// ...

const addressGrid = new window.prestashop.component.Grid('manufacturer_address');
addressGrid.addExtension(new SortingExtension());
// ...
```

Each grid instance gets its own set of extensions.

## Rules

Conventions (multiple Grid instances pattern) are in [Javascript/CONTEXT.md](../../CONTEXT.md). Skill-specific reminders:

- Grid ID must match the PHP `GRID_ID` constant — mismatch means extensions don't bind
- Only add extensions that match the grid definition — don't add PositionExtension without a PositionColumn
- AsyncToggleColumnExtension requires a matching AJAX toggle route in the controller