HTML-First UI
Components
Examples
Accordion
Alert
Autocomplete
Avatar
Badge
Blockquote
Box
Breadcrumb
Button
Card
Checkbox
Code Block
Code
Container
Details
Dialog
Dot
Form
Grid
Headings
Horizontal Rule
Input
Keyboard
Link
Lists
Loader
Menu
Radio
Range
Responsive Header
Responsive Sidebar
Select
Switch
Table
Tabs
Tag
Text
Textarea
Theme Menu
Theme Switch
Vertical Rule
Table
A component for displaying tabular data
<hf-table> <table striped> <thead> <tr> <th>Product</th> <th aria-sort="ascending"> <button aria-pressed="true">Price</button> </th> </tr> </thead> <tbody> <tr> <td>Socks</td> <td>$9.99</td> </tr> <tr> <td>Shorts</td> <td>$19.99</td> </tr> <tr> <td>Sweater</td> <td>$29.99</td> </tr> <tr> <td>Shoes</td> <td>$49.99</td> </tr> </tbody> </table> </hf-table>
Product
Price
Socks
$9.99
Shorts
$19.99
Sweater
$29.99
Shoes
$49.99
Notes
The table component provides styled tables with optional features.
Use the
striped
attribute for alternating row colors
Use
aria-sort
for sortable columns
Include proper table structure with
thead
and
tbody
Use button elements in headers for sortable columns