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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.