From ffddd14e25af2c980dc1f580e97fb64ad647f454 Mon Sep 17 00:00:00 2001 From: Dan Popescu Date: Sun, 19 Apr 2020 12:21:50 +0300 Subject: [PATCH] feat(QTable): Add rowIndex and pageIndex in the scoped slot properties for item, body, body-cell and body-cell-[name] #6828 --- .../src/pages/components/data-table-part5.vue | 1 + ui/src/components/table/QTable.json | 40 +++++++++++++++++++ ui/src/components/table/table-body.js | 21 ++++++---- ui/src/components/table/table-grid.js | 3 +- 4 files changed, 56 insertions(+), 9 deletions(-) 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' : ''