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


Log in to reply
 

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