Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · table

Native table

A responsive overflow shell for native data tables with explicit captions and header relationships.

Install with npx @madojs/ui@latest add table.

Block

Native table

Active projects
Project Team Last deployment Runtime Releases
Documentation Platform Mado 0.13.1 128
Storefront Commerce Mado 0.13.1 86
Account portal Product Mado 0.13.0 74
Internal tools Operations Mado 0.13.0 41

Composition

  • Place a native table with caption, scoped headers and body rows inside the overflow shell. Add an optional footer outside the table.

Public API

class mado-ui-table-shell / table / caption / header / body / row / head / cell / footer
Overflow, native table and footer presentation.
attribute data-align
Optional start, center or end cell alignment.
attribute role="region" / aria-labelledby / tabindex="0"
Optional keyboard-reachable labelled overflow contract.

Detected public classes

  • .mado-ui-table
  • .mado-ui-table-body
  • .mado-ui-table-caption
  • .mado-ui-table-cell
  • .mado-ui-table-footer
  • .mado-ui-table-head
  • .mado-ui-table-header
  • .mado-ui-table-row
  • .mado-ui-table-shell

Detected public CSS properties

  • --mado-ui-color-action
  • --mado-ui-color-border
  • --mado-ui-color-surface
  • --mado-ui-color-surface-soft
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-focus-ring
  • --mado-ui-radius-md
  • --mado-ui-space-3
  • --mado-ui-space-4
  • --mado-ui-table-background
  • --mado-ui-table-border
  • --mado-ui-table-caption-color
  • --mado-ui-table-caption-padding
  • --mado-ui-table-cell-padding
  • --mado-ui-table-color
  • --mado-ui-table-focus-ring
  • --mado-ui-table-font-size
  • --mado-ui-table-footer-background
  • --mado-ui-table-header-background
  • --mado-ui-table-header-color
  • --mado-ui-table-min-inline-size
  • --mado-ui-table-radius
  • --mado-ui-table-row-border
  • --mado-ui-table-row-hover-background
  • --mado-ui-table-shadow

Accessibility contract

  • Use caption and th scope relationships; visual alignment never replaces header structure.
  • Make the shell a labelled focusable region only when it actually overflows, so it does not create a redundant Tab stop.

Keyboard

  • Native links and controls keep their keys. A focusable overflow shell scrolls with normal browser scrolling keys.

Focus

  • When horizontal overflow is absent, remove tabindex from the shell; do not add per-cell focusability.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.