Using QTable Row Actions with 0.15



  • Hi, can somebody help me to display actions in QTable?

    <q-table
          class="shadow-1"
          ref="server"
          :data="items"
          :columns="columns"
          :loader="loader"
          row-key="name"
          filter=""
          :pagination.sync="serverPagination"
          @request="getLogList"
    >
            <template slot="right" scope="cell">
                      <q-btn flat @click="goToViewLog(cell.row)">
                             <q-icon name="pageview" />
                     </q-btn>
           </template>
    </q-table>
    
    columns: [
                    {
                        label: 'Date',
                        field: 'created_at',
                        format (value, row) {
                            return value.date
                        },
                        sort (a, b) {
                            return (new Date(a)) - (new Date(b))
                        }
                    },
                    {
                        label: 'User',
                        field: 'user',
                        format (value, row) {
                            return value.data.name + ' ' + value.data.family
                        },
                        sort: false
                    },
                    {
                        label: 'Action',
                        field: 'log_name',
                        sort: false
                    },
                    {
                        label: 'Description',
                        field: 'description',
                        sort: false
                    },
                    {
                        label: '',
                        field: 'action'
                    }
                ],
    


  • You probably want slot="body-cell-action"

    Also please use an appropriately descriptive title



  • @benoitranque without results 😞



  • @benoitranque

    And why not work

    serverPagination: {
            page: 1,
            rowsNumber: 10
          },
    

    QTable still display default 5 rows



  • moved post to help & fixed title



  • Try this:

    <q-table
      :data="tableData"
      :columns="columns"
      row-key="name"
      color="secondary"
    >
      <!-- slot name syntax: body-cell-<column_name> -->
      <q-td slot="body-cell-action" slot-scope="props" :props="props">
        <q-btn flat icon="pageview" @click="goToViewLog(cell.row)" />
      </q-td>
    </q-table>
    


  • @benoitranque thanks!

    What about default table rows? I try to set 25 but still 5 sets



  • @benoitranque

    Still no result 😞

    <q-table
                                class="shadow-1"
                                :data="items"
                                :columns="columns"
                                row-key="name"
                                :pagination.sync="serverPagination"
                                @request="getLogList"
                        >
                            <q-td slot="body-cell-action" slot-scope="props" :props="props">
                                <q-btn flat icon="pageview" @click="goToViewLog(props.row)" />
                            </q-td>
                        </q-table>
    
    

    After this code I see td in table. But with empty content

    columns: [
                    {
                        label: '',
                        field: 'action'
                    },
                    {
                        label: 'Date',
                        field: 'created_at',
                        format (value, row) {
                            return value.date
                        },
                        sortable: true
                    },
                    {
                        label: 'User',
                        field: 'user',
                        format (value, row) {
                            return value.data.name + ' ' + value.data.family
                        },
                        sort: false
                    },
                    {
                        label: 'Action',
                        field: 'log_name',
                        sort: false
                    },
                    {
                        label: 'Description',
                        field: 'description',
                        align: 'left',
                        sort: false
                    }
                ]
    
    


  • @benoitranque solved problems, thanks



  • @snezhkois - can you explain you solution?
    i have tried something like this BUT I am not getting the button and not the input field…

    <q-td slot=“body-cell-id” slot-scope=“props” :props=“props”>
    <q-btn @click=‘removeFromList(props.id)’ icon=“delete” />
    </q-td>
    <q-td slot=‘body-cell-weight’ slot-scope=‘cell’>
    <q-input color=“white” inverted type=‘number’ v-model=“cell.data” @change=“doCalculate(cell.row.id, cell.data)” />
    </q-td>



  • @ydl show your code, please



  • Thanks in advance…
    part of the text (string ) are in Hebrew.
    The table, on the beginning, is empty. The row are added dynamically by selecting food type.
    I need to operation:

    1. update the amount of food (KG) for each row, and
    2. the ability to remove a row

    <q-table
    dark
    hide-bottom
    row-key=“id”
    :data=“selectedFoodArray”
    :columns=“selectedFoodFields”
    :no-data-label=“emptyFoodTable”
    >
    <q-td slot=“body-cell-action” slot-scope=“props” :props=“props”>
    {<q-btn @click=‘removeFromList(props.id)’ icon=“delete” />}
    </q-td>
    <q-td slot=‘body-cell-weight’ slot-scope=‘cell’>
    <q-input color=“white” inverted type=‘number’ v-model=“cell.data” @change=“doCalculate(cell.row.id, cell.data)” />
    </q-td>
    </q-table>

    … now functions …

    doCalculate: function (id, value) {
    this.selectedFoodArray[id].weight = value
    this.$root.$emit(‘calculatedFeed’, this.selectedFoodArray)
    },
    removeFromList: function (id) {
    console.log('removeFromList… id: ’ + id)
    console.log('removeFromList… length before remove: ’ + this.selectedFoodArray.length)
    this.selectedFoodArray.splice(id, 1)
    console.log('removeFromList… length after remove: ’ + this.selectedFoodArray.length)
    }

    … field definitions…

    selectedFoodFields: [
    {
    label: ‘’,
    field: ‘id’,
    width: ‘0’,
    sort: false
    },
    {
    label: ‘’,
    field: ‘action’,
    width: ‘50px’,
    sort: false
    },
    {
    label: ‘שם המזון’,
    field: ‘name’,
    width: ‘300px’,
    sort: true
    },
    {
    label: ‘כמות (kg)’,
    field: ‘weight’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘DM (%)’,
    field: ‘feedDM’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘DE (Mcal/kg)’,
    field: ‘feedDE’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘CP (%)’,
    field: ‘feedCP’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘Lys (%)’,
    field: ‘feedLys’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘Ca (%)’,
    field: ‘feedCa’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘P (%)’,
    field: ‘feedP’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘Na (%)’,
    field: ‘feedNa’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘Cl (%)’,
    field: ‘feedCl’,
    width: ‘70px’,
    sort: false
    },
    {
    label: ‘K (%)’,
    field: ‘feedK’,
    width: ‘70px’,
    sort: false
    }
    ],

    … and the data (partial TOO long) …
    foodTypesOptions: [
    {
    value: 0,
    label: ‘מזון מרוכז-גרעינים’
    }, {
    value: 1,
    label: ‘מזון מרוכז תוצרת איטליה’
    }, {
    value: 2,
    label: ‘מזון גס- מספוא’
    }, {
    value: 3,
    label: ‘מזון גס תוצרת איטליה’
    }, {
    value: 4,
    label: ‘שומנים’
    }, {
    value: 5,
    label: ‘מינרלים/ויטמינים’
    }
    ],
    foodOptionsArray: [
    [{
    value: 0,
    label: ‘Bakery Byproduct Meal’
    }, {
    value: 1,
    label: ‘שעורה לחוצה’
    }, {
    value: 2,
    label: ‘נבטי שעורה מאלט’
    }, {
    value: 3,
    label: ‘סלק סוכר זול - מולסה (3%)’
    }, {
    value: 4,
    label: ‘סלק סוכר זול - unmolassed’
    }, {
    value: 5,
    label: ‘לחם - פסולת’
    }, {
    value: 6,
    label: ‘ברואר דגנים - יבשים’
    }, {
    value: 7,
    label: ‘ברואר דגנים - רטוב’
    }, {
    value: 8,
    label: ‘קנולה ארוחה - תמצית mech’
    }, {
    value: 9,
    label: ‘תוצר לוואי של דגנים’
    }, {
    value: 10,
    label: ‘עיסת הדרים מיובשת’
    }, {
    value: 11,
    label: ‘תירס יבש מזוקק דגנים + סול’
    }, {



  • This line:
    {<q-btn @click=‘removeFromList(props.id)’ icon=“delete” />}

    is a mistake - I want:
    <q-btn @click=‘removeFromList(props.id)’ icon=“delete” />



  • @ydl i see that you set row-key=“id” but your columns has not this row

    in my example i use row-key=“name” and set columns object to

    {
         **name: 'feedNa'**
         label: ‘Na (%)’,
         **field: ‘feedNa’,**
         width: ‘70px’,
         sort: false
    }
    

    for example



  • Thanks for the quick reply.
    I parallel I found out that in the fields declaration it is needed to add a ‘name’ (or replace the ‘field’ to ‘name’) and than it started to works.