skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-table

Convey best-practice guidance for Canopy Table usage in Angular apps.

23|46|Updated Sep 7, 2020
Search Tags:#angular#best-practices#responsive-design#ui-components#table#canopy#table-accessibility
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-table
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-table
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/table
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-table

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides structured, reusable guidance for implementing Canopy Table components in Angular projects, reducing misconfiguration and inconsistencies across apps.

Core Features & Use Cases

  • Clear guidance on when and how to use LgTableComponent and related table directives (head, body, cells, row toggles, and expanded detail components) to build accessible, responsive tables.
  • Do's and Don'ts for table design, including guidance on alignment, responsive behavior, and visual variants (striped, bordered).
  • Design constraints and recommended input patterns to ensure consistency with Canopy styling and accessibility requirements.

Quick Start

Follow these best practices when implementing a Canopy table in an Angular project to ensure accessible, responsive tables.

Frequently Asked Questions about canopy-table

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

FAQPage Schema
What are the best practices for building accessible Angular tables?▼

Accessible Angular tables require using LgTableComponent directives for head, body, and cells, following structural constraints, and applying correct component inputs to ensure scalable, responsive implementations.

How do I implement expandable detail rows in an Angular table?▼

To implement expandable detail rows in an Angular table, use the designated row toggle and expanded detail components provided by the Canopy table directives to manage the expansion state.

When should I use striped or bordered variants for tabular data?▼

Use striped variants for tabular data to improve row readability, and apply bordered variants when you need clear visual separation between cells to support comparison table layouts.

Does Canopy table guidance cover responsive design constraints?▼

Yes, Canopy table guidance specifies responsive design constraints and outlines Do's and Don'ts for responsive behavior to ensure table implementations adapt correctly across different screen sizes.

What are the limitations when configuring UI components for Angular tables?▼

Limitations include adhering to strict structural requirements and design constraints to maintain Canopy styling, meaning you must avoid misconfiguring component inputs that break accessibility or visual consistency.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-colour-directive

Standardize colour modes and themes using the Canopy lgColour directive in Angular.

Official
Intermediate
spqwspqw

observable-framework-input-table

Renders sortable, filterable tabular data with row selection and customizable columns in Observable Framework projects.

Community
Intermediate
kdinevkdinev

igniteui-angular-components

Import Ignite UI for Angular standalone components into Angular 20+ projects.

Community
Advanced
ai-enhanced-engineerai-enhanced-engineer
3

frontend-material-design-3

Implement Material Design 3 components and CSS tokens for Angular and Svelte.

Official
Intermediate