canvas-table-integration

Integrates the @qfei-design/canvas-table package into consumer apps with schema-driven columns and cell editing.

5|Updated Apr 1, 2026
One-click install
npx skills add https://github.com/qfeius/make-platform-skills --skill canvas-table-integration-qfeius
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas-table-integration
Source: https://github.com/qfeius/make-platform-skills/tree/main/skills/canvas-table-integration
Command: npx skills add https://github.com/qfeius/make-platform-skills --skill canvas-table-integration-qfeius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @qfei-design/canvas-table, and includes references (resource) components.

What problem does it solve? Integrating a canvas-based table into an application involves many failure modes: SSR instantiation errors, dropped rows arriving before the table instance, lost scroll positions, broken cell editors, and incorrect Make schema field rendering. This Skill provides a structured, track-based workflow for correctly consuming @qfei-design/canvas-table using only documented public APIs. ## Core Features & Use Cases - Track-based integration: Choose Track A for non-Make local/virtual tables, Track C for Make schema-driven field display, and layer Track B for controlled cell editing with popup editors, rollback, and commit contracts. - Make schema field rendering: Convert schema fields into IColumn[] with normalized values, field-type renderers, precision validation, and overflow tooltips for select, user, department, file, lookup, and URL fields. - Virtual loading and large data: Apply paginated virtual loading patterns with request identity, stale-request cancellation, and bounded scheduling for fast-scroll scenarios. - Use Case: When building a Make record list page, use this Skill to create a schema-driven editable table with sequence numbers, row-head detail actions, selection routed to make-app-actions, and cell editors that follow the platform's edit contract. ## Quick Start Ask the AI to integrate @qfei-design/canvas-table into the current page with Make schema-driven columns and editable cells.

Frequently Asked Questions about canvas-table-integration

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

FAQPage Schema
How do I integrate @qfei-design/canvas-table into a React app?

Install the package, read its package.ai.json readOrder docs, then create the table in a client-side lifecycle hook with a real measured container size. Convert your schema or meta into IColumn[] before instantiation and destroy the instance on unmount.

How do I add cell editing to a canvas table?

Use editType custom with a host customEdit bridge, split editing into controller, container, field-editor, and save layers, and set editApplyMode to controlled when a save or draft layer owns writes. Popup editors must open on mount and declare popup roots via relatedElements().

Does canvas-table support Make schema-driven columns?

Yes, Track C covers Make schema tables: load schema fields first, normalize values, and build IColumn[] from field types with a shared field-display registry. Never infer columns from row object keys or initialize before schema is ready.

Why does my canvas table show empty after data loads?

Rows often arrive before the table instance exists, so the update is dropped. Store latest rows in a ref, call setData whenever the instance exists, and call setData again immediately after creation; never gate table creation on row count.

When should I not use canvas-table-integration?

Do not use it for publishing or editing the table library itself, substituting Ant Design or other UI-library tables, designing Make DSL schemas, or building Service routes. Those belong to makedsl, make-app-service, or the table library repo.