kitchen-sink/core/pages/data-table.html
Plain table
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) |
|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 |
| Eclair | 262 | 16.0 | 24 | 6.0 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
Within card
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) |
|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 |
| Eclair | 262 | 16.0 | 24 | 6.0 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
With Footer Pagination
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) |
|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 |
| Eclair | 262 | 16.0 | 24 | 6.0 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
Rows per page: 51025All
1-5 of 10
Selectable rows
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) | In Stock | |
|---|---|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 | ||
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 | ||
| Eclair | 262 | 16.0 | 24 | 6.0 | ||
| Cupcake | 305 | 3.7 | 67 | 4.3 |
Tablet-only columns
"Comments" column will be visible only on devices with screen width >= 768px (tablets)
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) | ${commentsIcon} Comments | |
|---|---|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 | I like frozen yogurt | |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 | But like ice cream more | |
| Eclair | 262 | 16.0 | 24 | 6.0 | Super tasty | |
| Cupcake | 305 | 3.7 | 67 | 4.3 | Don't like it |
With inputs
Such tables are widely used in admin interfaces for filtering or search data
| ID
| Name
| Gender AllMaleFemale | | --- | --- | --- | --- | | 1 | John Doe | [email protected] | Male | | 2 | Jane Doe | [email protected] | Female | | 3 | Vladimir Kharlampidi | [email protected] | Male | | 4 | Jennifer Doe | [email protected] | Female |
Within card with title and actions
Nutrition
${sortIcon}${moreIcon}
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) | ${commentsIcon} Comments | |
|---|---|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 | I like frozen yogurt | |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 | But like ice cream more | |
| Eclair | 262 | 16.0 | 24 | 6.0 | Super tasty | |
| Cupcake | 305 | 3.7 | 67 | 4.3 | Don't like it |
Sortable columns
Nutrition
${sortIcon}${moreIcon}
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) | ${commentsIcon} Comments | |
|---|---|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 | I like frozen yogurt | |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 | But like ice cream more | |
| Eclair | 262 | 16.0 | 24 | 6.0 | Super tasty | |
| Cupcake | 305 | 3.7 | 67 | 4.3 | Don't like it |
With title and different actions on select
Nutrition
${sortIcon}${moreIcon}
items selected
${trashIcon}${moreIcon}
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) | ${commentsIcon} Comments | |
|---|---|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 | I like frozen yogurt | |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 | But like ice cream more | |
| Eclair | 262 | 16.0 | 24 | 6.0 | Super tasty | |
| Cupcake | 305 | 3.7 | 67 | 4.3 | Don't like it |
Alternate header with actions
AddRemove
${sortIcon}${moreIcon}
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) | ${commentsIcon} Comments | ||
|---|---|---|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 | I like frozen yogurt | ${composeIcon}${trashIcon} | |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 | But like ice cream more | ${composeIcon}${trashIcon} | |
| Eclair | 262 | 16.0 | 24 | 6.0 | Super tasty | ${composeIcon}${trashIcon} | |
| Cupcake | 305 | 3.7 | 67 | 4.3 | Don't like it | ${composeIcon}${trashIcon} |
Collapsible
The following table will be collapsed to kind of List View on small screens:
Nutrition
${sortIcon}${moreIcon}
| Dessert (100g serving) | Calories | Fat (g) | Carbs | Protein (g) |
|---|---|---|---|---|
| Frozen yogurt | 159 | 6.0 | 24 | 4.0 |
| Ice cream sandwich | 237 | 9.0 | 37 | 4.4 |
| Eclair | 262 | 16.0 | 24 | 6.0 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |