A data table is any display of information in a tabular form with rows and columns. The table has a header area with titles for each column.
Use the class euaa-responsive-table to get this type of table
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Actions | |
|---|---|---|---|---|---|---|
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | Cell 5 | Actions | |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | Cell 5 | Actions | |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | Cell 5 | Actions |
<table class="euaa-responsive-table">
<thead>
<tr>
<th>
<span>
<label class="euaa-chkbox">
<input type="checkbox">
<span class="euaa-chkbox__checkmark"></span>
</label>
</span>
</th>
<th><span>Header 1</span></th>
<th><span>Header 2</span></th>
<th><span>Header 3</span></th>
<th><span>Header 4</span></th>
<th><span>Header 5</span></th>
<th><span>Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>Select</label>
<span>
<label class="euaa-chkbox">
<input type="checkbox">
<span class="euaa-chkbox__checkmark"></span>
</label>
</span>
</td>
<td>
<label>Header 1</label>
<span>Cell 1</span>
</td>
<td>
<label>Header 2</label>
<span>Cell 2</span>
</td>
<td>
<label>Header 3</label>
<span>Cell 3</span>
</td>
<td>
<label>Header 4</label>
<span>Cell 4</span>
</td>
<td>
<label>Header 5</label>
<span>Cell 5</span>
</td>
<td>
<label>Actions</label>
<span><a href="#">Actions</a></span>
</td>
</tr>
</tbody>
</table>Use this class euaa-responsive-table--hover in the table tag
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Actions | |
|---|---|---|---|---|---|---|
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | Cell 5 | Actions | |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | Cell 5 | Actions | |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 | Cell 5 | Actions |