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 |
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
|
Email
|
Gender
|
---|---|---|---|
1 | John Doe | john@doe.com | Male |
2 | Jane Doe | jane@doe.com | Female |
3 | Vladimir Kharlampidi | vladimir@google.com | Male |
4 | Jennifer Doe | jennifer@doe.com | Female |
Within card with title and actions
Nutrition
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
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
items selected
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
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
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 |