SGDS Table Component Skill

<sgds-table> renders a structured data table from arrays. Headers and data are passed as JavaScript property arrays — not as HTML slot content. Use headerPosition to control whether headers appear on rows, columns, or both.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Column headers on top (most common)? → headerPosition="horizontal" (default); set columnHeader

Row headers on the left? → headerPosition="vertical"; set rowHeader

Both row and column headers? → headerPosition="both"; set both rowHeader and columnHeader

Horizontal scrolling for wide tables? → responsive="always" or a breakpoint like responsive="sm"