Basic example
Basic table example with least configuration.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Peter | Torres | @torres |
| 2 | Jacob | Maldonado | @maldonado |
| 2 | Logan | Simon | @simon |
Colored Rows
Below are the color variations that can be used in the table component.
| Default | Cell | Cell | Cell |
| Primary | Cell | Cell | Cell |
| Success | Cell | Cell | Cell |
| Danger | Cell | Cell | Cell |
| Warning | Logan | Simon | @simon |
| Info | Logan | Simon | @simon |
Striped Rows
Use this example to increase the readability of the data sets by alternating the background colors of every second table row.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Peter | Torres | @torres |
| 2 | Jacob | Maldonado | @maldonado |
| 2 | Logan | Simon | @simon |
| 3 | Cora | Henderson | @henderson |
Hoverable
Use the hover:[bg-*] utility class from to change the background color of a data row when hovering over the element with the cursor.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Peter | Torres | @torres |
| 2 | Jacob | Maldonado | @maldonado |
| 2 | Logan | Simon | @simon |
| 3 | Cora | Henderson | @henderson |
Bordered
Add the .border class for borders on all sides of the table and cells.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Peter | Torres | @torres |
| 2 | Jacob | Maldonado | @maldonado |
| 2 | Logan | Simon | @simon |
| 3 | Cora | Henderson | @henderson |