mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-15 18:53:12 +00:00
55 lines
1.8 KiB
Vue
55 lines
1.8 KiB
Vue
<template>
|
|
<demo-page label="Components - Table">
|
|
<div slot="examples">
|
|
<demo-example label="Default">
|
|
<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-row-selection md-sort="calories">
|
|
<thead>
|
|
<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-head md-sort-by="sodium" md-numeric>Sodium (mg)</md-table-head>
|
|
<md-table-head md-sort-by="calcium" md-numeric>Calcium (%)</md-table-head>
|
|
<md-table-head md-sort-by="iron" md-numeric>Iron (%)</md-table-head>
|
|
</md-table-row>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<md-table-row v-for="(row, index) in 10" :key="index">
|
|
<md-table-cell v-for="(col, index) in 8" :key="index" :md-numeric="index > 0">Cell</md-table-cell>
|
|
</md-table-row>
|
|
</tbody>
|
|
</md-table>
|
|
</md-table-card>
|
|
</demo-example>
|
|
</div>
|
|
|
|
<div slot="code">
|
|
|
|
</div>
|
|
|
|
<div slot="api">
|
|
|
|
</div>
|
|
</demo-page>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
};
|
|
</script>
|