Table
Show a structured set of data made up of rows and columns of table cells.
Get started with multiple variants and styles of these table components built with Tailwind CSS and Skewind components.
Default Table #
Add table class to a standard table element.
| Product | Customer | Amount |
|---|---|---|
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Bordered Table #
Just append table--bordered class to the existing table element.
| Product | Customer | Amount |
|---|---|---|
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Striped Table #
Just append table--striped class to the existing table element.
| Product | Customer | Amount |
|---|---|---|
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Dark Option #
Use the table-dark class to make some part of table elements darker, like the table, thead, tbody, or tr elements.
Here is the example if we set table-dark to thead:
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
table-dark on table element.
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Color Schemes #
As usual, apply the color scheme-{color} class to table elements. scheme-gray is the default.
Primary
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Primary Dark
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Bordered Success
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Bordered Success Dark
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Striped Danger
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Striped Danger Dark
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Within Card #
Sometimes, there are cases where you have to place a table inside the card. Just place the table inside the card element and add the card__table class to the table element. Here is how it looked.
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Table Sizes #
You can also choose the table size if you want to.
Table Small.table--sm
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Table Large.table--lg
| Product | Customer | Amount |
|---|---|---|
| Witchy | Dark Footballer | $674 |
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
More Examples #
Here are some more examples that show you how to make a customization.
Highlight Row when hovering #
Customization is quite easy. Here we can just append the [&>tbody>tr:hover]:bg-yellow-100 class to the table element.
| Product | Customer | Amount |
|---|---|---|
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |
Captioned Card #
You just need to insert other card elements like card__header or card__body.
Caption Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper urna vitae sem maximus, ut finibus nisi tincidunt. Suspendisse accumsan.
| Product | Customer | Amount |
|---|---|---|
| Nike | Lionel Messi | $187999 |
| Adidas | Cristiano Ronaldo | $177009 |