fundamental-ngx: Skill for Claude Code

Build Table: $ARGUMENTS

If $ARGUMENTS is empty, ask: (1) what data the table displays, (2) which features are needed.

Phase 1: Determine Scope

Parse from $ARGUMENTS or ask:

• Table name (PascalCase, e.g., Users, Orders)
• Data model: field names + TypeScript types (used for column definitions and the data interface). If not provided in $ARGUMENTS, ask explicitly: "What columns should the table have? Please list field name and type, e.g.: id:number, customerName:string, status:string"
• Base component: fdp-table (platform, feature-rich — default) | fd-table (core, markup-level, use only for purely presentational tables)
• Features (check all that apply):
  • sort — sortable column headers
  • filter — per-column or global search filter
  • paginate — page size picker + page navigation
  • select — row selection (single | multiple)
  • toolbar — title bar with action buttons
• Data source: static array | observable | HTTP service (lazy)

Default to fdp-table with sort + paginate unless the user specifies otherwise.

Phase 2: Gather Component Context

Call the @fundamental-ngx/mcp MCP server:

1. get_usage_guide('table') — DataSource patterns, variant decision tree, pitfalls
2. get_component_api('fdp-table') — all inputs/outputs, selection mode options, page size inputs
3. If filter requested: get_component_api('fdp-table-toolbar') for filter toolbar wiring
4. If custom cell rendering needed: look for fdpTableCell template directive API

If MCP is unavailable, read libs/mcp-server/src/data/usage-guides.ts.

Phase 3: Present Plan

Output this summary before writing any code:

## Table Plan: [TableName]

**Component:** fdp-table
**DataSource type:** FdpTableDataSource (wraps observable)
**Features:** sort ✓ | filter ✓ | paginate ✓ | select(multiple) ✓

| Column key | Label | Type | Sortable | Filterable | Width |
|------------|-------|------|----------|------------|-------|
| name | Name | string | yes | yes | auto |
| status | Status | string | yes | yes | 120px |
| createdAt | Created | date | yes | no | 160px |

**Toolbar actions:** Add, Delete selected