diff --git a/ui/dev/src/pages/components/data-table-part5.vue b/ui/dev/src/pages/components/data-table-part5.vue
index 30fdad52463d..c4f7c885daec 100644
--- a/ui/dev/src/pages/components/data-table-part5.vue
+++ b/ui/dev/src/pages/components/data-table-part5.vue
@@ -15,6 +15,7 @@
+ {{ props.rowIndex }} / {{ props.pageIndex }} -
{{ props.row.name }}
diff --git a/ui/src/components/table/QTable.json b/ui/src/components/table/QTable.json
index 44856f54887b..5aa00554e4ab 100644
--- a/ui/src/components/table/QTable.json
+++ b/ui/src/components/table/QTable.json
@@ -637,6 +637,16 @@
"desc": "Row object",
"__exemption": [ "examples" ]
},
+ "rowIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
+ "pageIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the current page of the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
"cols": {
"type": "Object",
"desc": "Column definitions",
@@ -678,6 +688,16 @@
"desc": "Row object",
"__exemption": [ "examples" ]
},
+ "rowIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
+ "pageIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the current page of the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
"cols": {
"type": "Object",
"desc": "Column definitions",
@@ -714,6 +734,16 @@
"desc": "Row object",
"__exemption": [ "examples" ]
},
+ "rowIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
+ "pageIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the current page of the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
"col": {
"type": "Object",
"desc": "Column definition for column associated with table cell",
@@ -735,6 +765,16 @@
"desc": "Row object",
"__exemption": [ "examples" ]
},
+ "rowIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
+ "pageIndex": {
+ "type": "Number",
+ "desc": "Row's index (0 based) in the current page of the filtered and sorted table",
+ "__exemption": [ "examples" ]
+ },
"col": {
"type": "Object",
"desc": "Column definition for column associated with table cell",
diff --git a/ui/src/components/table/table-body.js b/ui/src/components/table/table-body.js
index b22cc04e22c8..654db1f40cc0 100644
--- a/ui/src/components/table/table-body.js
+++ b/ui/src/components/table/table-body.js
@@ -2,7 +2,7 @@ import QCheckbox from '../checkbox/QCheckbox.js'
export default {
methods: {
- getTableRowBody (row, body) {
+ getTableRowBody (row, body, pageIndex) {
const
key = this.getRowKey(row),
selected = this.isRowSelected(key)
@@ -10,23 +10,24 @@ export default {
return body(this.addBodyRowMeta({
key,
row,
+ pageIndex,
cols: this.computedCols,
colsMap: this.computedColsMap,
__trClass: selected ? 'selected' : ''
}))
},
- getTableRow (h, row) {
+ getTableRow (h, row, pageIndex) {
const
bodyCell = this.$scopedSlots['body-cell'],
key = this.getRowKey(row),
selected = this.isRowSelected(key),
child = bodyCell
- ? this.computedCols.map(col => bodyCell(this.addBodyCellMetaData({ row, col })))
+ ? this.computedCols.map(col => bodyCell(this.addBodyCellMetaData({ row, pageIndex, col })))
: this.computedCols.map(col => {
const slot = this.$scopedSlots[`body-cell-${col.name}`]
return slot !== void 0
- ? slot(this.addBodyCellMetaData({ row, col }))
+ ? slot(this.addBodyCellMetaData({ row, pageIndex, col }))
: h('td', {
class: col.__tdClass,
style: col.__tdStyle
@@ -76,8 +77,8 @@ export default {
topRow = this.$scopedSlots['top-row'],
bottomRow = this.$scopedSlots['bottom-row'],
mapFn = body !== void 0
- ? row => this.getTableRowBody(row, body)
- : row => this.getTableRow(h, row)
+ ? (row, pageIndex) => this.getTableRowBody(row, body, pageIndex)
+ : (row, pageIndex) => this.getTableRow(h, row, pageIndex)
let child = this.computedRows.map(mapFn)
@@ -95,11 +96,13 @@ export default {
const body = this.$scopedSlots.body
return body !== void 0
- ? props => this.getTableRowBody(props.item, body)
- : props => this.getTableRow(h, props.item)
+ ? (props, pageIndex) => this.getTableRowBody(props.item, body, pageIndex)
+ : (props, pageIndex) => this.getTableRow(h, props.item, pageIndex)
},
addBodyRowMeta (data) {
+ data.rowIndex = this.firstRowIndex + data.pageIndex
+
this.hasSelectionMode === true && Object.defineProperty(data, 'selected', {
get: () => this.isRowSelected(data.key),
set: adding => {
@@ -132,6 +135,8 @@ export default {
},
addBodyCellMetaData (data) {
+ data.rowIndex = this.firstRowIndex + data.pageIndex
+
Object.defineProperty(data, 'value', {
get: () => this.getCellValue(data.col, data.row),
configurable: true,
diff --git a/ui/src/components/table/table-grid.js b/ui/src/components/table/table-grid.js
index a5aeb8d26f61..2c40537db68b 100644
--- a/ui/src/components/table/table-grid.js
+++ b/ui/src/components/table/table-grid.js
@@ -69,7 +69,7 @@ export default {
staticClass: 'q-table__grid-content row',
class: this.cardContainerClass,
style: this.cardContainerStyle
- }, this.computedRows.map(row => {
+ }, this.computedRows.map((row, pageIndex) => {
const
key = this.getRowKey(row),
selected = this.isRowSelected(key)
@@ -77,6 +77,7 @@ export default {
return item(this.addBodyRowMeta({
key,
row,
+ pageIndex,
cols: this.computedCols,
colsMap: this.computedColsMap,
__trClass: selected ? 'selected' : ''