Basic Tables
Basic Tables
Show your datas with Kode Tables.
Make them simple and user-friendly. Also responsive.
- Responsive
- Style Options
- Based on Bootstrap Tables
Default Table
For basic styling—light padding and only horizontal dividers—add the base class .table
to any <table>
. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
Order ID | Product | Buyer | Date | Order Note | Payment | |
# 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. |
Credit Card | |
# 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. |
Paypal | |
# 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. |
Credit Card | |
# 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. |
Credit Card | |
# 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. |
Credit Card |
Striped rows
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
Order ID | Product | Buyer | Date | Order Note | Payment |
# 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Paypal |
# 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
Bordered table
Add .table-bordered
for borders on all sides of the table and cells.
Order ID | Product | Buyer | Date | Order Note | Payment |
# 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Paypal |
# 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
Contextual classes
Use contextual classes to color table rows or individual cells.
Class | Description |
---|---|
.active
|
Applies the hover color to a particular row or cell |
.success
|
Indicates a successful or positive action |
.info
|
Indicates a neutral informative change or action |
.warning
|
Indicates a warning that might need attention |
.danger
|
Indicates a dangerous or potentially negative action |
Order ID | Product | Buyer | Date | Order Note | Payment |
# 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Paypal |
# 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
# 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |