Type to search columns, filters, options, and extensions.

to navigate · Enter to open · Esc to close

Documentation

AI-Assisted Development

Use the bundled AI agent skill to build DataTables correctly with Claude Code, Cursor, and other coding agents

AI coding agents like Claude Code, Cursor, and GitHub Copilot can significantly accelerate your development — but only if they understand the bundle’s API. To help them get it right, this repository ships a dedicated agent skill that teaches them exactly how UX DataTables works.

What the Skill Teaches

The skill captures the conventions you would otherwise have to explain to an agent yourself. It covers:

TopicWhat the agent learns
Defining a DataTableExtending AbstractDataTable, the #[AsDataTable(Entity::class)] attribute, and the configure*() hooks
ColumnsThe available column types and shared AbstractColumn methods
Processing modeWhen to use client-side vs server-side rendering
ExtensionsButtons, Select, Responsive, RowGroup, ColumnControl, Scroller, KeyTable, ColReorder, FixedColumns, FixedHeader
Row actionsEdit/delete actions, permissions, and conditional display
IntegrationsAPI Platform and Mercure (both opt-in)
GotchasCommon mistakes and their fixes

How It Is Organized

The skill follows a progressive-disclosure layout: a concise entry point plus reference files the agent reads only when needed.

    Entry point

    skills/ux-datatables/SKILL.md gives the agent an overview, a decision tree for client-side vs server-side, and a minimal working example.

    On-demand references

    The skills/ux-datatables/references/ directory holds focused guides the agent pulls in as the task requires:

    • defining-a-datatable.md
    • columns.md
    • server-side.md
    • extensions.md
    • actions.md
    • api-platform.md
    • gotchas.md

Using the Skill

Claude Code

When you open the project in Claude Code, the skill is auto-discovered and the agent invokes it through its Skill mechanism whenever you ask it to build, configure, or debug a DataTable. No manual setup is required — it is a plain skill directory committed to the repository.

Cursor / Copilot / Others

Agents without native skill support can still benefit. Point them at skills/ux-datatables/SKILL.md (and the files under references/) as context, and they will follow the same conventions the bundle expects.