@wmcadigital/ui-table

A table is used to make information easier for users to compare and scan

Usage

import { hello } from '@wmcadigital/ui-table';

This package provides a small runtime script that normalises HTML tables for consistent styling and accessibility.

## Installation

Using pnpm (monorepo/workspace):

```bash
pnpm add @wmcadigital/ui-table

Using npm:

npm install @wmcadigital/ui-table

Using yarn:

yarn add @wmcadigital/ui-table

What this package does

• Adds the wmcads-table class to all <table> elements (if not already present) to enable consistent styling across the design system.
• Removes inline style, border, and width attributes from the table, rows and cells to avoid presentation conflicts.
• Detects header-like rows (cells with <b>/<strong> or multiple <th> cells) and converts the first logical header row into a <thead> with proper <th scope="col"> cells.
• For tables without an obvious header, marks them with the class wmcads-table--without-header.
• Ensures cells have data-header attributes (e.g. data-header="Header 1") to assist responsive or CSS-based table patterns.

Note: this is a behaviour-focused helper — it does not ship styling. Apply your design system table styles (or import the related CSS) separately.

Usage

Import and run the module in a browser environment (recommended):

import tableJS from '@wmcadigital/ui-table';

// Run after DOM is available (e.g. in your client entry)
tableJS();

Or load the distributed script as an ES module in the browser:

<script type="module">
  import tableJS from '/node_modules/@wmcadigital/ui-table/dist/index.esm.js';
  tableJS();
</script>

If you prefer to run the helper only on specific pages, call tableJS() conditionally where appropriate.

Accessibility

• The script attempts to add semantic structure (<thead>, <th scope="col">, and row scope="row") to improve keyboard and screen reader navigation.
• Consumers should ensure the resulting headers are meaningful; the script will use visible text where possible but may fall back to generic labels like Header N when necessary.
• Provide descriptive caption or surrounding text when the table conveys complex information.

Customisation & Integration

• Styling is separate: add or import your table CSS that targets .wmcads-table and related modifiers.
• If you need a different header-detection heuristic or want to opt-out for certain tables, call the helper selectively or fork the small runtime.

Development

Build from the repository root:

pnpm -w -r run build

See the monorepo README.md and DOCS/ for contributing and publishing guidelines.