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

DataTable conditional style demo updated

pull/3743/head
Tuğçe Küçükoğlu 2023-03-13 10:58:59 +03:00
parent 25e442a6a4
commit 2b3ccffed7
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
doc/datatable/ConditionalStyleDoc.vue
View File

@ -3,7 +3,7 @@
<p>Particular rows and cells can be styled based on conditions. The <i>rowClass</i> receives a row data as a parameter to return a style class for a row whereas cells are customized using the <i>body</i> template.</p> <p>Particular rows and cells can be styled based on conditions. The <i>rowClass</i> receives a row data as a parameter to return a style class for a row whereas cells are customized using the <i>body</i> template.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<DataTable :value="products" :rowClass="rowClass" tableStyle="min-width: 50rem"> <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
<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>
@ -28,7 +28,7 @@ export default {
products: null, products: null,
code: { code: {
basic: ` basic: `
<DataTable :value="products" :rowClass="rowClass" tableStyle="min-width: 50rem"> <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
<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>
@ -43,7 +43,7 @@ export default {
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<DataTable :value="products" :rowClass="rowClass" tableStyle="min-width: 50rem"> <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
<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>
@ -74,6 +74,11 @@ export default {
rowClass(data) { rowClass(data) {
return [{ 'bg-primary': data.category === 'Fitness' }]; return [{ 'bg-primary': data.category === 'Fitness' }];
}, },
rowStyle(data) {
if (data.quantity === 0) {
return { fontWeight: 'bold', fontStyle: 'italic' };
}
},
stockClass(data) { stockClass(data) {
return [ return [
'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm', 'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
@ -90,7 +95,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<DataTable :value="products" :rowClass="rowClass" tableStyle="min-width: 50rem"> <DataTable :value="products" :rowClass="rowClass" :rowStyle="rowStyle" tableStyle="min-width: 50rem">
<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>
@ -118,6 +123,11 @@ const products = ref();
const rowClass = (data) => { const rowClass = (data) => {
return [{ 'bg-primary': data.category === 'Fitness' }]; return [{ 'bg-primary': data.category === 'Fitness' }];
}; };
const rowStyle = (data) => {
if (data.quantity === 0) {
return { fontWeight: 'bold', fontStyle: 'italic' };
}
};
const stockClass = (data) => { const stockClass = (data) => {
return [ return [
'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm', 'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',
@ -154,6 +164,11 @@ const stockClass = (data) => {
rowClass(data) { rowClass(data) {
return [{ 'bg-primary': data.category === 'Fitness' }]; return [{ 'bg-primary': data.category === 'Fitness' }];
}, },
rowStyle(data) {
if (data.quantity === 0) {
return { fontWeight: 'bold', fontStyle: 'italic' };
}
},
stockClass(data) { stockClass(data) {
return [ return [
'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm', 'border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm',