a styled native table. semantics and keyboard come for free; cells hold any content.
Example
| Member | Role | Seats |
|---|---|---|
| Ada Lovelace | Owner | 0 |
| Grace Hopper | Admin | 3 |
| Alan Turing | Member | 1 |
<table class="lucent-table">
<thead>
<tr>
<th>Member</th>
<th>Role</th>
<th class="lucent-table__cell--right">Seats</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ada Lovelace</td>
<td>Owner</td>
<td class="lucent-table__cell--right">0</td>
</tr>
<tr class="is-selected">
<td>Grace Hopper</td>
<td>Admin</td>
<td class="lucent-table__cell--right">3</td>
</tr>
<tr>
<td>Alan Turing</td>
<td>Member</td>
<td class="lucent-table__cell--right">1</td>
</tr>
</tbody>
</table><table lucentTable> <thead><tr><th>Member</th><th>Role</th></tr></thead> <tbody>…</tbody> </table>
Using it
| Angular | table[lucentTable] import { LucentTable } from '@design-foundry/lucent-angular'; |
| Stylesheet | .lucent-table @design-foundry/lucent-styles/core.css |
Theming