ApexCharts

ApexGrid Skill

AI models routinely get web-component grid code wrong: they treat <apex-grid> like a class with a constructor, forget to register the custom element, set columns as a stringified attribute, return strings (not Lit TemplateResults) from cellTemplate, or expect events from programmatic sort() calls.

The ApexGrid Skill is a context file you add to your project once. Your AI assistant reads it and generates correct apex-grid code from the start.

Naming heads-up. The npm package is apex-grid (with a hyphen), the custom-element tag is <apex-grid>, and the exported class is ApexGrid<T>.

→ GitHub: apexcharts/apexgrid-skill

Install

Claude Code

mkdir -p .claude/skills
cd .claude/skills
git clone https://github.com/apexcharts/apexgrid-skill.git

Cursor / Windsurf

curl -o .cursorrules https://raw.githubusercontent.com/apexcharts/apexgrid-skill/main/.cursorrules

GitHub Copilot

Reference the skill file in Copilot Chat:

@workspace #file:SKILL.md How do I add a sortable column?

Or paste the contents of .cursorrules into your Copilot custom instructions so it applies to all conversations.

Generic AI (ChatGPT, Gemini, etc.)

Paste the contents of SKILL.md into your system prompt or attach it as context at the start of the conversation.

As an npm dependency

npm install apexgrid-skill

import { skillFile, referencePath } from 'apexgrid-skill';
import { readFile } from 'node:fs/promises';

const skill = await readFile(skillFile, 'utf8');
const cols  = await readFile(referencePath('columns-and-templates.md'), 'utf8');

What the skill covers

  • Custom-element registration — import 'apex-grid/define' vs ApexGrid.register()
  • Generic ColumnConfiguration<T> — key, type, templates, sort, filter
  • Lit cell & header templates with the right context shapes
  • Sort & filter — programmatic API, UI events, operands, multi-column
  • Server-side data — dataPipelineConfiguration async hooks
  • Virtualization — grid.rows vs grid.dataView vs grid.totalItems
  • Framework integration — Lit, React, Vue, Angular

Repository structure

├── SKILL.md                           # Main entry point
├── .cursorrules                       # Self-contained Cursor / Windsurf version
├── references/
│   ├── columns-and-templates.md       # ColumnConfiguration, types, Lit templates
│   ├── sort-and-filter.md             # operands, expressions, events, multi-column
│   ├── data-pipeline.md               # async hooks, server-side, virtualization
│   └── framework-integration.md       # Lit, React, Vue, Angular
└── install/
    ├── claude-code.md
    ├── cursor.md
    └── copilot.md

Repository

https://github.com/apexcharts/apexgrid-skill

See also: ApexCharts Skill for the core charting library.