datatable csb example added

pull/1055/head
Tuğçe Küçükoğlu 2021-03-17 16:04:04 +03:00
parent 2f2d7adf75
commit 0d123ef9b6
2 changed files with 39 additions and 4 deletions

View File

@ -9,7 +9,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="products"> <DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>

View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc :sources="sources" service="ProductService" data="products-small" /> <AppDoc name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" />
</template> </template>
<script> <script>
@ -13,7 +13,7 @@ export default {
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<DataTable :value="products"> <DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -24,7 +24,7 @@ export default {
</template> </template>
<script> <script>
import ProductService from '../../service/ProductService'; import ProductService from './service/ProductService';
export default { export default {
data() { data() {
@ -42,6 +42,41 @@ export default {
} }
<\\/script> <\\/script>
` `
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import ProductService from './service/ProductService';
export default {
setup() {
onMounted(() => {
productService.value.getProductsSmall().then(data => products.value = data);
})
const products = ref();
const productService = ref(new ProductService());
return { products, productService }
}
}
<\\/script>
`
} }
} }
} }