Plain table
| Desert (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
| Desert (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
| Desert (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
| Desert (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 large screen devices (tablets)
| Desert (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
| Desert (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
| Desert (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
| Desert (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
| Desert (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
| Desert (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 |