vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Export and Table Style

pull/358/head
cagataycivici 2020-06-30 15:05:06 +03:00
parent 38ca903f3f
commit d57cc67ac6
2 changed files with 92 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/datatable/DataTableExportDemo.vue
View File

@ -2,23 +2,23 @@
<div> <div>
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable - Export</h1> <h1>DataTable <span>Export</span></h1>
<p>DataTable can export its data to CSV format.</p> <p>DataTable can export its data to CSV format.</p>
</div> </div>
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars" ref="dt"> <DataTable :value="products" ref="dt">
<template #header> <template #header>
<div style="text-align: left"> <div style="text-align: left">
<Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" /> <Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" />
</div> </div>
</template> </template>
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable> </DataTable>
</div> </div>
</div> </div>
@ -28,35 +28,35 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars" ref="dt"&gt; &lt;DataTable :value="products" ref="dt"&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;div style="text-align: left"&gt; &lt;div style="text-align: left"&gt;
&lt;Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" /&gt; &lt;Button icon="pi pi-external-link" label="Export" @click="exportCSV($event)" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
exportCSV() { exportCSV() {
@ -72,20 +72,20 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null products: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
exportCSV() { exportCSV() {

108
src/views/datatable/DataTableStyleDemo.vue
View File

@ -9,17 +9,17 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars" :rowClass="rowClass"> <DataTable :value="products" :rowClass="rowClass">
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year" bodyStyle="padding: 0"> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity">
<template #body="slotProps"> <template #body="slotProps">
<div :class="[{'old-car': slotProps.data.year < 2010}]"> <div :class="stockClass(slotProps.data)">
{{slotProps.data.year}} {{slotProps.data.quantity}}
</div> </div>
</template> </template>
</Column> </Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable> </DataTable>
</div> </div>
</div> </div>
@ -29,55 +29,72 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars" :rowClass="rowClass"&gt; &lt;DataTable :value="products" :rowClass="rowClass"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;template #body="slotProps"&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;div :class="[{'old-car': slotProps.data.year &lt; 2010}]"&gt; &lt;Column field="quantity" header="Quantity"&gt;
&#123;&#123;slotProps.data.year&#125;&#125; &lt;template #body="slotProps"&gt;
&lt;div :class="stockClass(slotProps.data)"&gt;
{{slotProps.data.quantity}}
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
columns: null, products: null
cars: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
rowClass(data) { rowClass(data) {
return data.color === 'Gray' ? 'gray-car': null; return data.category === 'Accessories' ? 'row-accessories': null;
},
stockClass(data) {
return [
{'outofstock': data.quantity === 0,
'lowstock': data.quantity > 0 && data.quantity < 10,
'instock': data.quantity > 10}
];
} }
} }
} }
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.old-car { .outofstock {
font-weight: 700; font-weight: 700;
color: #FF5252;
text-decoration: line-through; text-decoration: line-through;
} }
/deep/ .gray-car { .lowstock {
background-color: #607D8B !important; font-weight: 700;
color: #ffffff !important; color: #FFA726;
}
.instock {
font-weight: 700;
color: #66BB6A;
}
/deep/ .row-accessories {
background-color: rgba(0,0,0,.15) !important;
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
@ -87,38 +104,55 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
columns: null, products: null
cars: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
rowClass(data) { rowClass(data) {
return data.color === 'Gray' ? 'gray-car': null; return data.category === 'Accessories' ? 'row-accessories': null;
},
stockClass(data) {
return [
{'outofstock': data.quantity === 0,
'lowstock': data.quantity > 0 && data.quantity < 10,
'instock': data.quantity > 10}
];
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.old-car { .outofstock {
font-weight: 700; font-weight: 700;
color: #FF5252;
text-decoration: line-through; text-decoration: line-through;
} }
/deep/ .gray-car { .lowstock {
background-color: #607D8B !important; font-weight: 700;
color: #ffffff !important; color: #FFA726;
}
.instock {
font-weight: 700;
color: #66BB6A;
}
/deep/ .row-accessories {
background-color: rgba(0,0,0,.15) !important;
} }
</style> </style>