diff --git a/components/lib/datatable/BodyRow.vue b/components/lib/datatable/BodyRow.vue index 227413575..d76d5d56d 100644 --- a/components/lib/datatable/BodyRow.vue +++ b/components/lib/datatable/BodyRow.vue @@ -33,6 +33,7 @@ @dragend="onRowDragEnd" @drop="onRowDrop" v-bind="getBodyRowPTOptions('bodyRow')" + :data-p-index="rowIndex" :data-p-selectable-row="selectionMode ? true : false" :data-p-highlight="selection && isSelected" :data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu" @@ -482,7 +483,7 @@ export default { } } - return [this.cx('row', { rowData: this.rowData }), rowStyleClass]; + return [this.cx('row', { rowData: this.rowData, index: this.rowIndex }), rowStyleClass]; }, rowTabindex() { if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) { diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js index ae45cb41a..199c749e5 100644 --- a/components/lib/datatable/style/DataTableStyle.js +++ b/components/lib/datatable/style/DataTableStyle.js @@ -368,7 +368,7 @@ const classes = { rowgroupHeader: 'p-rowgroup-header', rowGroupToggler: 'p-row-toggler p-link', rowGroupTogglerIcon: 'p-row-toggler-icon', - row: ({ instance, props }) => { + row: ({ instance, props, index }) => { let rowStyleClass = []; if (props.selectionMode) { @@ -387,6 +387,8 @@ const classes = { }); } + rowStyleClass.push(index % 2 === 0 ? 'p-row-even' : 'p-row-odd'); + return rowStyleClass; }, rowExpansion: 'p-datatable-row-expansion',