How to open QMenu for every QTable row by button click #17210

rubymongoose · 2024-05-19T08:03:31Z

rubymongoose
May 19, 2024

Hello, I'm trying to make Quasar table with button on every row, that open fit QMenu:

It works but I need to open QMenu only by button click.

<template v-slot:body-cell-name="props" >
    <q-td :props="props">
        <q-btn icon="menu" @click="" dense flat></q-btn>
    </q-td>
    <q-menu fit>
        Blah Blah Blah<br>
        Blah Blah Blah<br>
        Blah Blah Blah
    </q-menu>
</template>

Here's my code - https://codepen.io/TwentySix26/pen/BaejQGP

If QMenu placed inside a button it's opening without fit to current table row.

Answered by rubymongoose

May 20, 2024

I found a solution:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="q-app">
            <div class="q-pa-md">
                <q-table title="Treats" :rows="rows" :columns="columns" row-key="name" >
                    <template v-slot:body-cell-menu="props" >
                        <q-td :props="props">
                            <q…

View full answer

rubymongoose · 2024-05-20T09:49:53Z

rubymongoose
May 20, 2024
Author

I found a solution:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
        <link href="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.prod.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="q-app">
            <div class="q-pa-md">
                <q-table title="Treats" :rows="rows" :columns="columns" row-key="name" >
                    <template v-slot:body-cell-menu="props" >
                        <q-td :props="props">
                            <q-btn icon="menu" @click="props.row.open = true" dense flat></q-btn>
                        </q-td>
                        <q-menu v-model = "props.row.open" no-parent-event fit>
                            Blah Blah Blah<br>
                            Blah Blah Blah<br>
                            Blah Blah Blah
                        </q-menu>
                    </template>
                </q-table>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/quasar@2.11.5/dist/quasar.umd.prod.js"></script>
        <script>
            const app = Vue.createApp({
                data() {
                    return {
                        columns: [
                            { name: "menu", align: "left", label: "Menu" },
                            { name: 'name', align: "left", label: "Name", field: "name", sortable: true },
                            { name: 'size', align: "left", label: 'Size', field: 'size', sortable: true },
                            { name: 'date', align: "left", label: 'Date', field: 'date', sortable: true }
                        ],
                        rows: [
                            { open: false, name: 'aaa', size: 1, date: "01.01.01" },
                            { open: false, name: 'bbb', size: 2, date: "02.02.02" },
                            { open: false, name: 'ccc', size: 3, date: "03.03.03" }
                        ]
                    }
                }
            })
            app.use(Quasar)
            app.mount('#q-app')
            app.config.devtools = true;
        </script>
    </body>
</html>

Maybe it helps someone 🙂

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to open QMenu for every QTable row by button click #17210

{{title}}

Replies: 1 comment

{{title}}

Select a reply

How to open QMenu for every QTable row by button click #17210

rubymongoose May 19, 2024

Replies: 1 comment

rubymongoose May 20, 2024 Author

rubymongoose
May 19, 2024

rubymongoose
May 20, 2024
Author