skills.rest
pimcore
pimcoreOFFICIAL
Explore all skills by this author →
Website𝕏@pimcoreGitHub

pimcore-studio-ui-tables-grids

Create type-safe interactive data tables with Grid and TanStack Table in Pimcore Studio UI.

13|Updated Apr 2, 2026
Search Tags:#react#sorting#grid#selection#tanstack-table#datatable#pimcore-studio
One-click install
npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-tables-grids
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pimcore-studio-ui-tables-grids
Source: https://github.com/pimcore/skills/tree/main/skills/pimcore-studio-ui-tables-grids
Command: npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-tables-grids

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pimcore Studio UI projects often struggle to create consistent, interactive data tables; this skill provides a standardized pattern using the Grid component and TanStack Table to render sortable, selectable grids with robust states.

Core Features & Use Cases

  • Grid component: Pimcore's wrapper around TanStack Table with Studio UI styling and features for data presentation
  • TanStack Table integration: robust, type-safe table definitions via createColumnHelper and column definitions
  • Column definitions: type-safe, reusable patterns for accessor, display, and actions
  • Features: sorting, row selection, loading/empty states, and responsive sizing for grids
  • Real-world patterns: metadata tables, selectable lists with actions, and complex data grids in admin UIs

Quick Start

Create a Grid by defining columns with createColumnHelper and render it with your data to display a sortable, searchable table.

Frequently Asked Questions about pimcore-studio-ui-tables-grids

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build consistent data tables in Pimcore Studio UI?▼

You build data tables in Pimcore Studio UI using the Grid component, a standardized wrapper around TanStack Table that enforces consistent styling and interactive features across admin views.

How do I define type-safe columns for a TanStack Table grid in Pimcore?▼

Define type-safe columns for a TanStack Table grid using the createColumnHelper utility, which allows reusable accessor, display, and action column definitions for your Pimcore data.

Can I add sorting and row selection to admin data grids in Pimcore Studio?▼

Yes, admin data grids in Pimcore Studio support sorting and row selection natively through the Grid component's TanStack Table integration, enabling interactive list management.

Does the Pimcore Studio Grid component support loading and empty states?▼

Yes, the Pimcore Studio Grid component supports loading and empty states, along with responsive sizing, to handle dynamic data presentation robustly within admin views.

What is the best way to create a selectable metadata list with actions in Pimcore Studio?▼

The best way to create a selectable metadata list with actions in Pimcore Studio is using the Grid component with type-safe column definitions to handle complex data grids and row actions.

Related Skills

Explore More Software Engineering Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
yonetim258852yonetim258852

data-display-and-selection

Organize multi-item data collections with grid, list, and table views.

Community
Advanced
IgniteUIIgniteUI
47

igniteui-angular-components

Provide UI components for Angular applications with reactive forms support.

Official
Intermediate
qazuorqazuor

tanstack-table-patterns

Provides reusable TanStack Table patterns for building headless, type-safe React tables.

Community
Intermediate