Fixed #81 - Ability to style certain rows and cells in Table

src/components/datatable/DataTable.d.ts

@@ -46,6 +46,7 @@ export declare class DataTable extends Vue {
     stateKey?: string;
     editMode?: string;
     editingRows?: any[];
+    rowClass?: any;
     $emit(eventName: 'page', event: Event): this;
     $emit(eventName: 'sort', event: Event): this;
     $emit(eventName: 'filter', event: Event): this;

src/components/datatable/DataTable.vue

@@ -314,6 +314,10 @@ export default {
         editingRows: {
             type: Array,
             default: null
+        },
+        rowClass: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -901,14 +905,22 @@ export default {
             return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
         },
         getRowClass(rowData) {
+            let rowStyleClass = ['p-datatable-row'];
             if (this.selection) {
-                return ['p-datatable-row', {
+                rowStyleClass.push({
                     'p-highlight': this.isSelected(rowData)
-                }];
+                });
             }
-            else {
+
-                return 'p-datatable-row';
+            if (this.rowClass) {
+                let rowClassValue = this.rowClass(rowData);
+
+                if (rowClassValue) {
+                    rowStyleClass.push(rowClassValue);
                 }
+            }
+
+            return rowStyleClass;
         },
         selectRange(event) {
             let rangeStart, rangeEnd;

src/router.js

@@ -200,6 +200,11 @@ export default new Router({
 			path: '/datatable/crud',
 			name: 'datatablecrud',
 			component: () => import('./views/datatable/DataTableCrudDemo.vue')
+        },
+        {
+			path: '/datatable/style',
+			name: 'datatablestyle',
+			component: () => import('./views/datatable/DataTableStyleDemo.vue')
         },
 		{
 			path: '/dataview',

src/views/datatable/DataTableDoc.vue

@@ -1344,6 +1344,67 @@ export default {
 }
 </CodeHighlight>
 
+                <h3>Row and Cell Styling</h3>
+                <p>Certain rows or cells can easily be styled based on conditions. Cell styling is implemented with templating whereas row styling utilizes the <i>rowClass</i> property which takes the 
+                row data as a parameter and returns the style class as a string.</p>
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars" :rowClass="rowClass"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
+            &lt;template #body="slotProps"&gt;
+            &lt;div :class="['year-cell', {'old-car': slotProps.data.year &lt; 2010}]"&gt;
+                &#123;&#123;slotProps.data.year&#125;&#125;
+            &lt;/div&gt;
+        &lt;/template&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;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        rowClass(data) {
+            return data.color === 'Orange' ? 'orange-car': null;
+        }
+    }
+}
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.year-cell {
+    padding: 0.429em 0.857em;
+
+    &amp;.old-car {
+        background-color: #41b783;
+        font-weight: 700;
+        color: #ffffff;
+    }
+}
+
+/deep/ .orange-car {
+    background-color: #344b5f !important;
+    color: #ffffff !important; 
+}
+</CodeHighlight>
 
                 <h3>Properties</h3>
                 <div class="doc-tablewrapper">
@@ -1630,6 +1691,12 @@ export default {
                                 <td>null</td>
                                 <td>A collection of rows to represent the current editing data in row edit mode.</td>
                             </tr>
+                            <tr>
+                                <td>rowClass</td>
+                                <td>function</td>
+                                <td>null</td>
+                                <td>A function that takes the row data and returns a string to apply a particular class for the row.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>

src/views/datatable/DataTableStyleDemo.vue

@@ -0,0 +1,138 @@
+<template>
+	<div>
+        <DataTableSubMenu />
+
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable - Style</h1>
+				<p>Certain rows or cells can easily be styled based on conditions.</p>
+			</div>
+		</div>
+
+		<div class="content-section implementation">
+			<DataTable :value="cars" :rowClass="rowClass">
+                <Column field="vin" header="Vin"></Column>
+                <Column field="year" header="Year" bodyStyle="padding: 0">
+                     <template #body="slotProps">
+                        <div :class="['year-cell', {'old-car': slotProps.data.year < 2010}]">
+                            {{slotProps.data.year}}
+                        </div>
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand"></Column>
+                <Column field="color" header="Color"></Column>
+            </DataTable>
+		</div>
+
+        <div class="content-section documentation">
+            <TabView>
+                <TabPanel header="Source">
+<CodeHighlight>
+<template v-pre>
+&lt;DataTable :value="cars" :rowClass="rowClass"&gt;
+    &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
+            &lt;template #body="slotProps"&gt;
+            &lt;div :class="['year-cell', {'old-car': slotProps.data.year &lt; 2010}]"&gt;
+                &#123;&#123;slotProps.data.year&#125;&#125;
+            &lt;/div&gt;
+        &lt;/template&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;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        rowClass(data) {
+            return data.color === 'Orange' ? 'orange-car': null;
+        }
+    }
+}
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.year-cell {
+    padding: 0.429em 0.857em;
+
+    &amp;.old-car {
+        background-color: #41b783;
+        font-weight: 700;
+        color: #ffffff;
+    }
+}
+
+/deep/ .orange-car {
+    background-color: #344b5f !important;
+    color: #ffffff !important; 
+}
+</CodeHighlight>
+                </TabPanel>
+            </TabView>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+import DataTableSubMenu from './DataTableSubMenu';
+
+export default {
+    data() {
+        return {
+            columns: null,
+            cars: null
+        }
+    },
+    carService: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.carService.getCarsSmall().then(data => this.cars = data);
+    },
+    methods: {
+        rowClass(data) {
+            return data.color === 'Orange' ? 'orange-car': null;
+        }
+    },
+    components: {
+        'DataTableSubMenu': DataTableSubMenu
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.year-cell {
+    padding: 0.429em 0.857em;
+
+    &.old-car {
+        background-color: #41b783;
+        font-weight: 700;
+        color: #ffffff;
+    }
+}
+
+/deep/ .orange-car {
+    background-color: #344b5f !important;
+    color: #ffffff !important; 
+}
+</style>

src/views/datatable/DataTableSubMenu.vue

@@ -18,6 +18,7 @@
             <li><router-link to="/datatable/responsive">&#9679; Responsive</router-link></li>
             <li><router-link to="/datatable/export">&#9679; Export</router-link></li>
             <li><router-link to="/datatable/state">&#9679; State</router-link></li>
+            <li><router-link to="/datatable/style">&#9679; Style</router-link></li>
             <li><router-link to="/datatable/crud">&#9679; Crud</router-link></li>
         </ul>
     </div>