DataBrowse data components
Table
Native table styling with uppercase headers, hover row, sort, and density modes.
Live preview
| Status | Spend | |
|---|---|---|
| Atlas Finance | Active | $84,200 |
| Northstar Health | Review | $52,910 |
| Vector Labs | Trial | $12,480 |
Usage
Adapters:React stableVue stable
index.html
<table class="lm-table">
<thead><tr><th><button class="lm-table-sort" aria-sort="ascending">Name</button></th></tr></thead>
<tbody>…</tbody>
</table>CSS classes (6)
| Class | Description |
|---|---|
lm-table | Native <table> |
lm-table-striped | Zebra rows |
lm-table-compact | Smaller padding |
lm-table-spacious | Larger padding |
lm-table-toolbar | Title + actions row |
lm-table-sort | Header sort button (aria-sort) |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
striped | boolean | — | — |
density | compact | comfortable | spacious | — | — |
Accessibility
- Prefer semantic <thead><tbody>.
- Use scope='col' on header cells; <caption> when complex.
- Mirror sort with aria-sort='ascending|descending|none'.
Spotted something wrong? Edit this entry on GitHub.