QTable bottom-left slot

[aleksander237]

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
There is this extra space on the bottom left of the QTable component. I know it is used for showing numbers of selected records, but maybe it could be used for seomething else when no records are selected. There is the "general" bottom slot but when used it overwrites pagination.

Describe alternatives you've considered
Just use bottom slot

[matejmohar]

Hi Quasar team,
is there any chance that this will be implemented in (near?) future? It would really speed up development when using QTable.

I would create a PR and try to help you, but I don't have enough knowledge to do this. :(

Thanks!

[bakbluelabel]

Yes, I need this feature as well. To show message on the table bottom (left) while co-exist with pagination on the right. Currently if using <template v-slot:bottom>, the pagination disappear 😞 ...

[downace]

I've solved this issue in my project by adding new bottom-left slot:

Patch

Index: ui/src/components/table/QTable.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ui/src/components/table/QTable.js b/ui/src/components/table/QTable.js
--- a/ui/src/components/table/QTable.js	(revision f2a136118468d8c26c0279d5309b31dc2434b3eb)
+++ b/ui/src/components/table/QTable.js	(date 1660879268786)
@@ -763,15 +763,19 @@
         return h('div', { class: bottomClass }, [ bottom(marginalsScope.value) ])
       }
 
-      const child = props.hideSelectedBanner !== true && hasSelectionMode.value === true && rowsSelectedNumber.value > 0
-        ? [
-            h('div', { class: 'q-table__control' }, [
-              h('div', [
-                (props.selectedRowsLabel || $q.lang.table.selectedRecords)(rowsSelectedNumber.value)
-              ])
-            ])
-          ]
-        : []
+      const bottomLeft = slots[ 'bottom-left' ]
+
+      const child = [];
+
+      if (bottomLeft !== void 0) {
+        child.push(h('div', { class: 'q-table__control' }, [ bottomLeft(marginalsScope.value) ]))
+      } else if (props.hideSelectedBanner !== true && hasSelectionMode.value === true && rowsSelectedNumber.value > 0) {
+        child.push(h('div', { class: 'q-table__control' }, [
+          h('div', [
+            (props.selectedRowsLabel || $q.lang.table.selectedRecords)(rowsSelectedNumber.value)
+          ])
+        ]))
+      }
 
       if (props.hidePagination !== true) {
         return h('div', {
Index: ui/src/components/table/QTable.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ui/src/components/table/QTable.json b/ui/src/components/table/QTable.json
--- a/ui/src/components/table/QTable.json	(revision f2a136118468d8c26c0279d5309b31dc2434b3eb)
+++ b/ui/src/components/table/QTable.json	(date 1660880342202)
@@ -1349,6 +1349,16 @@
       }
     },
 
+    "bottom-left": {
+      "desc": "Bottom left slot",
+      "scope": {
+        "cols": {
+          "type": "Object",
+          "desc": "Column definitions",
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
     "bottom-row": {
       "desc": "Slot to define how bottom extra row looks like",
       "scope": {

Maybe it will be useful for someone.

UPD: Using yarn patch feature to apply these changes to my project's Quasar instance.

[asdrubalp9]

I've solved this issue in my project by adding new bottom-left slot:

Patch

Index: ui/src/components/table/QTable.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ui/src/components/table/QTable.js b/ui/src/components/table/QTable.js
--- a/ui/src/components/table/QTable.js	(revision f2a136118468d8c26c0279d5309b31dc2434b3eb)
+++ b/ui/src/components/table/QTable.js	(date 1660879268786)
@@ -763,15 +763,19 @@
         return h('div', { class: bottomClass }, [ bottom(marginalsScope.value) ])
       }
 
-      const child = props.hideSelectedBanner !== true && hasSelectionMode.value === true && rowsSelectedNumber.value > 0
-        ? [
-            h('div', { class: 'q-table__control' }, [
-              h('div', [
-                (props.selectedRowsLabel || $q.lang.table.selectedRecords)(rowsSelectedNumber.value)
-              ])
-            ])
-          ]
-        : []
+      const bottomLeft = slots[ 'bottom-left' ]
+
+      const child = [];
+
+      if (bottomLeft !== void 0) {
+        child.push(h('div', { class: 'q-table__control' }, [ bottomLeft(marginalsScope.value) ]))
+      } else if (props.hideSelectedBanner !== true && hasSelectionMode.value === true && rowsSelectedNumber.value > 0) {
+        child.push(h('div', { class: 'q-table__control' }, [
+          h('div', [
+            (props.selectedRowsLabel || $q.lang.table.selectedRecords)(rowsSelectedNumber.value)
+          ])
+        ]))
+      }
 
       if (props.hidePagination !== true) {
         return h('div', {
Index: ui/src/components/table/QTable.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/ui/src/components/table/QTable.json b/ui/src/components/table/QTable.json
--- a/ui/src/components/table/QTable.json	(revision f2a136118468d8c26c0279d5309b31dc2434b3eb)
+++ b/ui/src/components/table/QTable.json	(date 1660880342202)
@@ -1349,6 +1349,16 @@
       }
     },
 
+    "bottom-left": {
+      "desc": "Bottom left slot",
+      "scope": {
+        "cols": {
+          "type": "Object",
+          "desc": "Column definitions",
+          "__exemption": [ "examples" ]
+        }
+      }
+    },
     "bottom-row": {
       "desc": "Slot to define how bottom extra row looks like",
       "scope": {

Maybe it will be useful for someone.

was this turned into a pull request to add it to the framework?

[sainf]

Hi, asdrubalp9.

Following the issues guides, downace made an discussion, please upvote it!

I also need the bottom left slot so i'm keeping a updated fork.

[Miosss]

This would be very helpfull and it doesn't seem like huge change.
Maybe just bottom-center slot to make use of the empty space between selection summary and pagination?