Using QTable Row Actions with 0.15

snezhkois

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'
                }
            ],

benoitranque

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

Also please use an appropriately descriptive title

snezhkois

@benoitranque without results

snezhkois

@benoitranque

And why not work

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

QTable still display default 5 rows

Max

moved post to help & fixed title

benoitranque

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>

snezhkois

@benoitranque thanks!

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

snezhkois

@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
                }
            ]

snezhkois

@benoitranque solved problems, thanks

ydl

@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>

snezhkois

@ydl show your code, please

ydl

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:

update the amount of food (KG) for each row, and
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: ‘תירס יבש מזוקק דגנים + סול’
}, {

ydl

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

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

snezhkois

@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

ydl

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.

No More Posting New Topics!

Using QTable Row Actions with 0.15