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

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

pull/104/head
cagataycivici 2019-11-01 13:45:49 +03:00
parent 319a1bc67a
commit f1f9a236be
6 changed files with 229 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/datatable/DataTable.d.ts vendored
View File

@ -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;

20
src/components/datatable/DataTable.vue
View File

@ -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;

7
src/router.js
View File

@ -200,7 +200,12 @@ 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',
name: 'dataview',

67
src/views/datatable/DataTableDoc.vue
View File

@ -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>

138
src/views/datatable/DataTableStyleDemo.vue Normal file
View File

@ -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>

1
src/views/datatable/DataTableSubMenu.vue
View File

@ -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>