feat(QTable): Add rowIndex and pageIndex in the scoped slot propertie…

…s for item, body, body-cell and body-cell-[name] quasarframework#6828
pdanpdan · Apr 26, 2020 · ffddd14 · ffddd14
1 parent d4dc54c
commit ffddd14
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 9 deletions.
diff --git a/ui/dev/src/pages/components/data-table-part5.vue b/ui/dev/src/pages/components/data-table-part5.vue
@@ -15,6 +15,7 @@
             <q-toggle dense v-model="props.selected" />
           </q-td>
           <q-td key="desc" :props="props" no-hover>
+            {{ props.rowIndex }} / {{ props.pageIndex }} -
             {{ props.row.name }}
             <q-btn dense round flat :icon="props.expand ? 'arrow_drop_up' : 'arrow_drop_down'" @click="props.expand = !props.expand" />
           </q-td>

diff --git 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
@@ -2,31 +2,32 @@ 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)
 
       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
@@ -69,14 +69,15 @@ 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)
 
         return item(this.addBodyRowMeta({
           key,
           row,
+          pageIndex,
           cols: this.computedCols,
           colsMap: this.computedColsMap,
           __trClass: selected ? 'selected' : ''