How to Add a Custom Grid Column

Overview

This example adds a custom progress bar column to the Pimcore Studio grid. Custom grid columns display element data using a custom cell renderer that goes beyond the built-in frontend types (input, checkbox, select, etc.).

Files Overview

Layer	File	Purpose
Backend	ProgressBarDefinition.php	Column definition
Backend	ProgressBarResolver.php	Column value resolver
Backend	ProgressBarCollector.php	Available columns provider
Backend	services.yaml	Service registration
UI	progress-bar-cell.tsx	React cell component
UI	dynamic-type-grid-cell-progress-bar.tsx	Grid cell dynamic type
UI	progress-bar-grid-column-module.tsx	Registry module
UI	index.ts	Plugin entry point
UI	plugins.ts	Plugin export

Details

Adding a custom grid column with a custom cell renderer requires work across two layers:

Studio Backend:

• A ColumnDefinitionInterface tagged with pimcore.studio_backend.grid_column_definition that declares the column type and returns a custom getFrontendType() value
• A ColumnResolverInterface tagged with pimcore.studio_backend.grid_column_resolver that fetches the column value for each element
• A ColumnCollectorInterface tagged with pimcore.studio_backend.grid_column_collector that lists the column in available configurations

Studio UI (Frontend):

• A DynamicTypeGridCellAbstract subclass whose id matches the backend getFrontendType() return value
• A React component for the custom cell rendering
• Registration of the dynamic type via a module and plugin

The getFrontendType() string is the key that connects backend and frontend. If you use a built-in frontend type (e.g. input, checkbox, select), no frontend work is needed.

For the step-by-step guide, see Custom Grid Columns in the Pimcore core documentation. For backend details (interfaces, constructor signatures, predefined columns, transformers), see Extending Grid with Custom Columns in the Studio Backend documentation.