FEAT: Table component

[Arnimag]

User Story

In order to use a consistent and accessible UI building block
As a customer or content manager
I want to see tables in card layout, scrollable, or data-comparison layouts with correct semantics and responsive behavior.

Acceptance Criteria

• Table follows a "Zebra" styling pattern: odd rows are white, while even rows are gray.
• Table uses semantic <table>, <thead>, <tbody>, <th>, and <td> elements.
• Header cells (<th>) use scope or id so screen readers correctly associate headers with cell data.
• Standard Card Layout:
  • Mobile: Transforms into a label-value pair view for each row.
  • Desktop: Displays as a traditional table with visible headers.
• Simplified Card Layout:
  • Displays two-column data without headers.
  • Mobile: Stacked layout with each cell on a new line.
  • Desktop: Single-row pairs.
• Scrollable Layout:
  • Mobile: Standard table format that enables horizontal scrolling when content overflows the viewport.
• Data Comparison Layout:
  • Mobile: Sticky headers with the primary body cell positioned at the top; subsequent cells are separated by borders in a single-row format.
  • Desktop: Displays as a traditional table with visible headers.
• Looks and works consistent across all supported browsers and devices.
• Can be viewed and manipulable in Storybook.

Background & Resources

https://demo.shopin.dev/storybook/?path=/story/ui-table--sprint-board-table&args=type:flex