mds-component-table-html

Select Maersk mds-table modifiers for styling and accessibility.

Updated Apr 15, 2026

Search Tags:#accessibility #tokens #modifier #table-styling #mds-table #maersk

Ready to run

npx skills add https://github.com/obaDev95/myf-agent-skills --skill mds-component-table-html

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mds-component-table-html
Source: https://github.com/obaDev95/myf-agent-skills/tree/main/skills/mds-component-table-html
Command: npx skills add https://github.com/obaDev95/myf-agent-skills --skill mds-component-table-html

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a centralized reference of Maersk .mds-table modifiers, tokens, and accessibility rules to help teams apply consistent, accessible table styling without re-implementing the design system.

Core Features & Use Cases

Catalogue of size variants, divider options, zebra patterns, and sticky/header behaviors for .mds-table.
Guidance on wrapping, alignment, truncation, scrolling, and interactive columns to align with MDS practices.
Use Case: when integrating a third-party grid or server-rendered tables to match Maersk's design tokens and accessibility requirements.

Quick Start

Consult this skill when you need to choose an appropriate .mds-table modifier for a given table in UI code.

Frequently Asked Questions about mds-component-table-html

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

FAQPage Schema

How do I apply consistent table styling using Maersk mds-table modifiers?▼

Maersk mds-table modifiers are reference tokens that standardize HTML table styling and accessibility. They codify required modifier tokens for size, divider, zebra, and sticky header behaviors to guide UI implementation.

When do I need to use mds-table modifier tokens for HTML tables?▼

You need mds-table modifier tokens when integrating third-party grids or server-rendered HTML tables. They ensure your UI components match Maersk design tokens and accessibility requirements without re-implementing the design system.

Can I use mds-table modifiers with third-party grid components?▼

Yes, you can use mds-table modifiers with third-party grid components. This skill provides guidance on applying wrapping, alignment, truncation, scrolling, and interaction tokens to align external grids with Maersk's design system.

What is the best way to handle sticky headers and zebra patterns in Maersk tables?▼

The best way to handle sticky headers and zebra patterns in Maersk tables is to apply the specific modifier tokens catalogued in this skill. It provides guidance on these behaviors alongside accessibility rules for UI components.

How do I ensure my HTML tables meet accessibility requirements using Maersk design tokens?▼

To ensure HTML tables meet accessibility requirements using Maersk design tokens, you apply the documented accessibility rules codified in the mds-table reference. This includes selecting appropriate interaction tokens and alignment behaviors.