Table
Tables display sets of data. They can be fully customized.
Basic Table
Dessert
Calories
Fat (g)
Carbs (g)
Protein (g)
Frozen yoghurt
159
6
24
4
Ice cream sandwich
237
9
37
4.3
Eclair
262
16
24
6
Cupcake
305
3.7
67
4.3
<me-table>
<me-table-head>
<me-table-row>
<me-table-cell variant="head">Name</me-table-cell>
<me-table-cell variant="head" align="right">Value</me-table-cell>
</me-table-row>
</me-table-head>
<me-table-body>
<me-table-row hover>
<me-table-cell>Row 1</me-table-cell>
<me-table-cell align="right">42</me-table-cell>
</me-table-row>
</me-table-body>
</me-table>
Dense Table
Name
Calories
Fat
Frozen yoghurt1596g
Ice cream2379g
Eclair26216g
API — me-table
| Attribute | Type | Default | Description |
|---|
size | medium | small | medium | Reduces cell padding. |
stickyHeader | boolean | false | Makes the header sticky. |
API — me-table-row
| Attribute | Type | Default | Description |
|---|
hover | boolean | false | Highlights row on hover. |
selected | boolean | false | Shows selected state. |
API — me-table-cell
| Attribute | Type | Default | Description |
|---|
variant | body | head | footer | body | Cell type. |
align | left | center | right | justify | left | Text alignment. |
padding | normal | checkbox | none | normal | Cell padding. |
