Tables
Accessible, responsive table components.
Basic table
| Name | Count |
|---|---|
| Alpha | 10 |
| Beta | 20 |
HTML
<div class="ms-table-responsive"><table class="ms-table ms-table--striped">...</table></div>Compact table
| ID | Name | Status |
|---|---|---|
| 1 | Alpha | Active |
| 2 | Beta | Pending |
| 3 | Gamma | Error |
HTML
<table class="ms-table ms-table--compact">...</table>Log list table ms-table--log-list
Two rows per entry: a compact metadata row (timestamp, badges, actions) and a full-width message row that wraps. Hovering highlights both rows as a group.
| Timestamp | Source | Level | Project | Category | User | Actions |
|---|---|---|---|---|---|---|
| 2026-04-01 14:35:22 | SDK | ERROR | McGowanSDK | Upload | chris | Detail Delete |
| 2026-04-01 14:33:10 | SDK | WARNING | McGowanSDK | Auth | - | Detail Delete |
| 2026-04-01 14:30:05 | GAME | INFO | GameManager | Startup | alex | Detail Delete |
HTML
<table class="ms-table ms-table--compact ms-table--log-list" style="table-layout:fixed;width:100%;">
<thead>...</thead>
<!-- One <tbody class="ms-log-group"> per entry -->
<tbody class="ms-log-group">
<tr class="ms-log-meta">
<td>2026-04-01 14:35:22</td>
<td><span class="ms-badge ms-badge--danger ms-badge--sm">ERROR</span></td>
<td>McGowanSDK</td>
<td class="u-text-right"><a class="ms-btn ms-btn--sm">Detail</a></td>
</tr>
<tr class="ms-log-message">
<td colspan="7">Full message text wraps here...</td>
</tr>
</tbody>
</table>Sortable table ms-table--sortable
Add ms-table--sortable to the table and ms-table__sort-header to any sortable <th>. Click a header to sort ascending; click again to sort descending.
HTML
<table class="ms-table ms-table--sortable">
<thead>
<tr>
<th class="ms-table__sort-header">Name</th>
<th class="ms-table__sort-header">Count</th>
</tr>
</thead>
<tbody>...</tbody>
</table>