e8-table
Updated on Sep 18, 2025 36 minutes to readA feature-rich table component supporting variants, sticky headers, responsive stacking, and custom styling.
Overview
e8-table is a flexible table component with built-in support for:
- Responsive tables (
responsive/stackedmodes) - Striped, bordered, borderless, hoverable, small, dark, and outlined variants
- Sticky headers (
sticky-header) - Custom maximum height (
height) - Table variants for rows, cells, and header styling
- Easy integration with slots for headers, body, footer, and custom cells
It wraps the <table> element and optionally a responsive wrapper <div> when sticky headers or responsiveness is enabled.
<e8-table
hover
small
responsive="always"
>
<caption>
Items sold in August, grouped by Country and City:
</caption>
<colgroup>
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
</colgroup>
<colgroup>
<col />
<col />
</colgroup>
<e8-table-header head-variant="dark">
<e8-table-row>
<e8-table-cell colspan="2">Region</e8-table-cell>
<e8-table-cell colspan="3">Clothes</e8-table-cell>
<e8-table-cell colspan="2">Accessories</e8-table-cell>
</e8-table-row>
<e8-table-row>
<e8-table-cell>Country</e8-table-cell>
<e8-table-cell>City</e8-table-cell>
<e8-table-cell>Trousers</e8-table-cell>
<e8-table-cell>Skirts</e8-table-cell>
<e8-table-cell>Dresses</e8-table-cell>
<e8-table-cell>Bracelets</e8-table-cell>
<e8-table-cell>Rings</e8-table-cell>
</e8-table-row>
</e8-table-header>
<e8-table-body>
<e8-table-row>
<e8-table-cell rowspan="3">Belgium</e8-table-cell>
<e8-table-cell class="text-right">Antwerp</e8-table-cell>
<e8-table-cell>56</e8-table-cell>
<e8-table-cell>22</e8-table-cell>
<e8-table-cell>43</e8-table-cell>
<e8-table-cell variant="success">72</e8-table-cell>
<e8-table-cell>23</e8-table-cell>
</e8-table-row>
<e8-table-row>
<e8-table-cell class="text-right">Gent</e8-table-cell>
<e8-table-cell>46</e8-table-cell>
<e8-table-cell variant="warning">18</e8-table-cell>
<e8-table-cell>50</e8-table-cell>
<e8-table-cell>61</e8-table-cell>
<e8-table-cell variant="danger">15</e8-table-cell>
</e8-table-row>
<e8-table-row>
<e8-table-cell class="text-right">Brussels</e8-table-cell>
<e8-table-cell>51</e8-table-cell>
<e8-table-cell>27</e8-table-cell>
<e8-table-cell>38</e8-table-cell>
<e8-table-cell>69</e8-table-cell>
<e8-table-cell>28</e8-table-cell>
</e8-table-row>
<e8-table-row>
<e8-table-cell rowspan="2">The Netherlands</e8-table-cell>
<e8-table-cell class="text-right">Amsterdam</e8-table-cell>
<e8-table-cell variant="success">89</e8-table-cell>
<e8-table-cell>34</e8-table-cell>
<e8-table-cell>69</e8-table-cell>
<e8-table-cell>85</e8-table-cell>
<e8-table-cell>38</e8-table-cell>
</e8-table-row>
<e8-table-row>
<e8-table-cell class="text-right">Utrecht</e8-table-cell>
<e8-table-cell>80</e8-table-cell>
<e8-table-cell variant="danger">12</e8-table-cell>
<e8-table-cell>43</e8-table-cell>
<e8-table-cell>36</e8-table-cell>
<e8-table-cell variant="warning">19</e8-table-cell>
</e8-table-row>
</e8-table-body>
<e8-table-footer>
<e8-table-row>
<e8-table-cell
colspan="7"
variant="secondary"
class="text-right"
>
Total Rows: <b>5</b>
</e8-table-cell>
</e8-table-row>
</e8-table-footer>
</e8-table>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| stacked | Enable stacked layout for smaller screens. Can be boolean or breakpoint string. | boolean / string | false |
| bordered | Adds table borders. | boolean | false |
| borderless | Removes table borders. | boolean | false |
| caption-top | Places <caption> above the table. | boolean | false |
| dark | Enables dark variant. | boolean | false |
| fixed | Enables table-layout: fixed for columns. | boolean | false |
| hover | Adds hover effect on rows. | boolean | false |
| no-border-collapse | Disables border-collapse for custom layouts. | boolean | false |
| outlined | Adds outer borders around the table. | boolean | false |
| responsive | Wraps the table in a responsive container. Can be boolean or breakpoint string. | boolean / string | false |
| small | Adds table-sm for smaller cells. | boolean | false |
| sticky-header | Enables sticky header rows. | boolean | false |
| height | Maximum height for sticky/responsive wrapper. Accepts any valid CSS heigh value. | string | — |
| striped | Adds striped row styling. | boolean | false |
| css-class | Custom CSS class(es) for the table. | E8CssClassType | — |
| variant | Background variant for table rows/cells. | E8TableColorVariants | —` |