Name
Type
Description
md-sort
String
Property name to match for sorting.
md-sort-type
String
The order to apply on the sort:
Values: asc | desc
Name
Value
Description
sort
Receive the sort object. Example:
{ name: 'calories', type: 'asc' }
Triggered when a column is sorted.
select
Receive the all the selected rows as a Object
Triggered every time a row is selected.
Used to create tables inside cards. Optional.
No options available
Used like a regular thead. Required.
No options available
Used like a regular tbody. Required.
No options available
Used like a regular tr. Required.
Name
Type
Description
md-selection
Boolean
Enable selection inside a particular row. Only works inside md-table-body. Default false
md-auto-select
Boolean
Click in any area of the row to select it. Only works inside md-table-body. Default false
md-item
Object
The single item to be returned when the row is selected. Only works inside md-table-body.
Used like a regular th. Required.
Name
Type
Description
md-numeric
Boolean
Align the header content to the right. Default false
md-sort-by
String
The property name to be returned after applying the sort order on that particular column.
md-tooltip
String
Text displayed inside a tooltip to provide definitions to column headers.
Used like a regular td. Required.
Name
Type
Description
md-numeric
Boolean
Align the cell content to the right. Default false
The pagination element doesn't accept any content inside.
Name
Type
Description
md-size
Number
Set the amount of rows displayed. Required. Default 10
md-page-options
Array | Boolean
Set the values inside the page amout selector. Default [10, 25, 50, 100]
When false this flag will hide the page selector.
md-page
Number
Current page of the table pagination. Required. Default 1
md-total
Number
Total of items in the collection. This will be used to calculate the amount of pages left. Default Many
md-label
String
Text to be shown on the left of the page selector. Default Rows per page
md-separator
String
Text to be shown on the left of the page selector. Default of
Name
Type
Description
md-selected-label
String
The text to be shown after the amount of items selected.
Dessert (100g serving)
Calories (g)
Fat (g)
Carbs (g)
Protein (g)
Dessert Name
10
<md-table v-once>
<md-table-header>
<md-table-row>
<md-table-head>Dessert (100g serving)</md-table-head>
<md-table-head md-numeric>Calories (g)</md-table-head>
<md-table-head md-numeric>Fat (g)</md-table-head>
<md-table-head md-numeric>Carbs (g)</md-table-head>
<md-table-head md-numeric>Protein (g)</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, index) in 5" :key="index">
<md-table-cell>Dessert Name</md-table-cell>
<md-table-cell v-for="(col, index) in 4" :key="index" md-numeric>10</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
Dessert (100g serving)
Calories (g)
Fat (g)
Carbs (g)
Protein (g)
Dessert Name
10
<md-table md-sort="calories">
<md-table-header>
<md-table-row>
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
<md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
<md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
<md-table-head md-sort-by="carbs" md-numeric>Carbs (g)</md-table-head>
<md-table-head md-sort-by="protein" md-numeric>Protein (g)</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, index) in 5" :key="index">
<md-table-cell>Dessert Name</md-table-cell>
<md-table-cell v-for="(col, index) in 4" :key="index" md-numeric>10</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
Nutrition
filter_list
search
Dessert (100g serving)
Calories (g)
Fat (g)
message
Comments
{{ column }}
Selected Data
{{ selectedData }}
Current Pagination
{{ page }}
<md-table-card>
<md-toolbar>
<h1 class="md-title">Nutrition</h1>
<md-button class="md-icon-button">
<md-icon>filter_list</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>search</md-icon>
</md-button>
</md-toolbar>
<md-table md-sort="dessert" md-sort-type="desc" @select="onSelect" @sort="onSort">
<md-table-header>
<md-table-row>
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
<md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
<md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
<md-table-head>
<md-icon>message</md-icon>
<span>Comments</span>
</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, rowIndex) in nutrition" :key="rowIndex" :md-item="row" md-auto-select md-selection>
<md-table-cell v-for="(column, columnIndex) in row" :key="columnIndex" :md-numeric="columnIndex !== 'dessert' && columnIndex !== 'comment'" v-if="columnIndex !== 'type'">
{{ '{{ column }\}' }}
</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
<md-table-pagination
md-size="5"
md-total="10"
md-page="1"
md-label="Rows"
md-separator="of"
:md-page-options="[5, 10, 25, 50]"
@pagination="onPagination"></md-table-pagination>
</md-table-card>
export default {
data: () => ({
nutrition: [
{
dessert: 'Frozen yogurt',
type: 'ice_cream',
calories: '159',
fat: '6.0',
comment: 'Icy'
},
{
dessert: 'Ice cream sandwich',
type: 'ice_cream',
calories: '237',
fat: '9.0',
comment: 'Super Tasty'
},
{
dessert: 'Eclair',
type: 'pastry',
calories: '262',
fat: '16.0',
comment: ''
},
{
dessert: 'Cupcake',
type: 'pastry',
calories: '305',
fat: '3.7',
comment: ''
},
{
dessert: 'Gingerbread',
type: 'other',
calories: '356',
fat: '16.0',
comment: ''
}
],
})
}
Nutrition
filter_list
search
delete
more_vert
Dessert (100g serving)
Type
Calories (g)
Fat (g)
message
Comments
{{ column }}
edit
Ice Cream
Pastry
Other
{{ column }}
<md-table-card>
<md-toolbar>
<h1 class="md-title">Nutrition</h1>
<md-button class="md-icon-button">
<md-icon>filter_list</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>search</md-icon>
</md-button>
</md-toolbar>
<md-table-alternate-header md-selected-label="selected">
<md-button class="md-icon-button">
<md-icon>delete</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</md-table-alternate-header>
<md-table md-sort="calories">
<md-table-header>
<md-table-row>
<md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
<md-table-head md-sort-by="type" width="100px">Type</md-table-head>
<md-table-head md-sort-by="calories" md-numeric md-tooltip="The total amount of food energy and the given serving size">Calories (g)</md-table-head>
<md-table-head md-sort-by="fat" md-numeric>Fat (g)</md-table-head>
<md-table-head>
<md-icon>message</md-icon>
<span>Comments</span>
</md-table-head>
</md-table-row>
</md-table-header>
<md-table-body>
<md-table-row v-for="(row, rowIndex) in nutrition" :key="rowIndex" :md-item="row" md-selection>
<md-table-cell v-for="(column, columnIndex) in row" :key="columnIndex" :md-numeric="columnIndex !== 'dessert' && columnIndex !== 'comment' && columnIndex !== 'type'">
<span v-if="columnIndex === 'comment'">{{ '{{ column }\}' }}</span>
<md-button class="md-icon-button" v-if="columnIndex === 'comment'">
<md-icon>edit</md-icon>
</md-button>
<md-select
placeholder="Type"
:name="'type' + columnIndex"
:id="'type' + columnIndex"
v-model="nutrition[rowIndex].type"
v-if="columnIndex === 'type'">
<md-option value="ice_cream">Ice Cream</md-option>
<md-option value="pastry">Pastry</md-option>
<md-option value="other">Other</md-option>
</md-select>
<span v-if="columnIndex !== 'type' && columnIndex !== 'comment'">{{ '{{ column }\}' }}</span>
</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</md-table-card>
export default {
data: () => ({
nutrition: [
{
dessert: 'Frozen yogurt',
type: 'ice_cream',
calories: '159',
fat: '6.0',
comment: 'Icy'
},
{
dessert: 'Ice cream sandwich',
type: 'ice_cream',
calories: '237',
fat: '9.0',
comment: 'Super Tasty'
},
{
dessert: 'Eclair',
type: 'pastry',
calories: '262',
fat: '16.0',
comment: ''
},
{
dessert: 'Cupcake',
type: 'pastry',
calories: '305',
fat: '3.7',
comment: ''
},
{
dessert: 'Gingerbread',
type: 'other',
calories: '356',
fat: '16.0',
comment: ''
}
],
})
}