Semantic structure
A semantic table preserves relationships between column headers and cells.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Components / Component reference
Data tables
Responsive striped tables, sticky headings and semantic headers.
LIVE COMPONENT REFERENCE
Striped data table
The same semantic table with the striped modifier. Horizontal scrolling is handled by the wrapper on narrow viewports.
Actual Xshna CSSResize to test wrapping
| Name | Status | Updated |
|---|---|---|
| Northstar | Active | Today |
| Orion | Review | Yesterday |
| Atlas | Draft | Oct 20 |
HTML · COPY AND USE
<div class="xsh-table-wrap"><table class="xsh-table xsh-table-striped"><thead><tr><th scope="col">Name</th><th scope="col">Status</th><th scope="col">Updated</th></tr></thead><tbody><tr><td>Northstar</td><td><span class="xsh-badge xsh-badge-success">Active</span></td><td>Today</td></tr><tr><td>Orion</td><td><span class="xsh-badge xsh-badge-warning">Review</span></td><td>Yesterday</td></tr><tr><td>Atlas</td><td><span class="xsh-badge">Draft</span></td><td>Oct 20</td></tr></tbody></table></div>LIVE COMPONENT REFERENCE
Hover data table
The same semantic table with the hover modifier. Horizontal scrolling is handled by the wrapper on narrow viewports.
Actual Xshna CSSResize to test wrapping
| Name | Status | Updated |
|---|---|---|
| Northstar | Active | Today |
| Orion | Review | Yesterday |
| Atlas | Draft | Oct 20 |
HTML · COPY AND USE
<div class="xsh-table-wrap"><table class="xsh-table xsh-table-hover"><thead><tr><th scope="col">Name</th><th scope="col">Status</th><th scope="col">Updated</th></tr></thead><tbody><tr><td>Northstar</td><td><span class="xsh-badge xsh-badge-success">Active</span></td><td>Today</td></tr><tr><td>Orion</td><td><span class="xsh-badge xsh-badge-warning">Review</span></td><td>Yesterday</td></tr><tr><td>Atlas</td><td><span class="xsh-badge">Draft</span></td><td>Oct 20</td></tr></tbody></table></div>LIVE COMPONENT REFERENCE
Compact data table
The same semantic table with the compact modifier. Horizontal scrolling is handled by the wrapper on narrow viewports.
Actual Xshna CSSResize to test wrapping
| Name | Status | Updated |
|---|---|---|
| Northstar | Active | Today |
| Orion | Review | Yesterday |
| Atlas | Draft | Oct 20 |
HTML · COPY AND USE
<div class="xsh-table-wrap"><table class="xsh-table xsh-table-compact"><thead><tr><th scope="col">Name</th><th scope="col">Status</th><th scope="col">Updated</th></tr></thead><tbody><tr><td>Northstar</td><td><span class="xsh-badge xsh-badge-success">Active</span></td><td>Today</td></tr><tr><td>Orion</td><td><span class="xsh-badge xsh-badge-warning">Review</span></td><td>Yesterday</td></tr><tr><td>Atlas</td><td><span class="xsh-badge">Draft</span></td><td>Oct 20</td></tr></tbody></table></div>LIVE COMPONENT REFERENCE
Sticky data table
The same semantic table with the sticky modifier. Horizontal scrolling is handled by the wrapper on narrow viewports.
Actual Xshna CSSResize to test wrapping
| Name | Status | Updated |
|---|---|---|
| Northstar | Active | Today |
| Orion | Review | Yesterday |
| Atlas | Draft | Oct 20 |
HTML · COPY AND USE
<div class="xsh-table-wrap"><table class="xsh-table xsh-table-sticky"><thead><tr><th scope="col">Name</th><th scope="col">Status</th><th scope="col">Updated</th></tr></thead><tbody><tr><td>Northstar</td><td><span class="xsh-badge xsh-badge-success">Active</span></td><td>Today</td></tr><tr><td>Orion</td><td><span class="xsh-badge xsh-badge-warning">Review</span></td><td>Yesterday</td></tr><tr><td>Atlas</td><td><span class="xsh-badge">Draft</span></td><td>Oct 20</td></tr></tbody></table></div>Overview
Wrap xsh-table in xsh-table-responsive for overflow. Add xsh-table-striped, xsh-table-hover or xsh-table-sticky for variants.
Live example
Interactive · Real framework| Project | Owner | Status |
|---|---|---|
| Aurora | Alex | Active |
| Orion | Taylor | Draft |
Example markup
<div class="xsh-table-responsive"><table class="xsh-table xsh-table-striped xsh-table-hover"><thead><tr><th scope="col">Project</th><th scope="col">Owner</th><th scope="col">Status</th></tr></thead><tbody><tr><td>Aurora</td><td>Alex</td><td><span class="xsh-badge">Active</span></td></tr><tr><td>Orion</td><td>Taylor</td><td><span class="xsh-badge">Draft</span></td></tr></tbody></table></div>Production guidance
Dense data tables may need mobile column prioritization. Always use table headings and scope.
Customize this component through --xsh-* CSS tokens, data-xsh-* configuration attributes and documented xsh-* utilities. Use the optional JavaScript distribution only when an interactive behavior is needed.
Build with confidenceOpen interactive design playground →
Complete selector inventory
These selectors exist in the current distribution. An entry in this table does not imply that arbitrary modifier combinations are meaningful; use the examples above for the intended composition.
| Class | Purpose | Delivery |
|---|---|---|
.xsh-table | Core component | CSS-only |
.xsh-table-compact | Composable modifier / structure class | CSS-only |
.xsh-table-hover | Composable modifier / structure class | CSS-only |
.xsh-table-responsive | Composable modifier / structure class | CSS-only |
.xsh-table-sticky | Composable modifier / structure class | CSS-only |
.xsh-table-striped | Composable modifier / structure class | CSS-only |
.xsh-table-wrap | Composable modifier / structure class | CSS-only |
Implementation details
Interactive behavior
For wide tables provide scrolling instead of clipping data.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Sortable columns need descriptive button labels and current sort direction.
Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.
Theme and customization
Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.
Prefer design tokens over hard-coded overrides so components remain coherent across personalities.
What to verify before shipping
- Confirm every documented class used by the feature exists in the release CSS.
- Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
- Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
- Verify disabled, loading, empty, error and long-content states where relevant.
- Check actual application behavior independently of the preview: these examples use illustrative data.