Can't get action icons to display

[8cris2]

Hello @ratiw

Currently trying to insert the action icons but have no success to get this working. Not even getting any errors.

            <template>
                <vue-table 
                    ref="vuetable"
                    :per-page="5"
                    :fields="fields"
                    api-url="http://localhost:3000/js/users.json"
                    :sort-order="sortOrder"
                    :css="css.table"
                    pagination-path="" 
                    @vuetable:pagination-data="onPaginationData">

                    <template slot="actions" scope="props">
                        <div class="table-button-container">
                            <button class="ui button" @click="editRow(props.rowData)">
                                <i class="fa fa-edit"></i> 
                                View
                            </button>
                        </div>
                    </template>
                  </vue-table>

              </template>

                  <script type="text/javascript">
                      import Vuetable from './Vuetable.vue'

                      export default {

                      name: 'dashboard',
                      mounted() {
                          console.log('Dashboard Component mounted.')
                      },
                      data: function() {
                          return {
                              fields: [{
                                  name: 'date'
                              },
                          {
                              name: 'email'
                          },
                {
                    name: 'description'
                },
                {
                    name: 'gross'
                },
                {
                    name: 'fee'
                },
                {
                    name: 'net'
                },
                {
                    name: 'balance'
                },
                {
                    name: 'view-transaction',
                    title: '',
                    dataClass: 'text-center'
                }],
            css: {
                table: {
                    tableClass: 'table table-bordered table-striped table-hover',
                    ascendingIcon: 'glyphicon glyphicon-chevron-up',
                    descendingIcon: 'glyphicon glyphicon-chevron-down'
                }
            },
            sortOrder: [{
                field: 'email',
                sortField: 'email',
                direction: 'asc'
            }],
            moreParams: {},
        }
    },
    components: {
        'vue-table': Vuetable
    },
    methods: {

    },
    computed: {

    }

}

[ratiw]

Have you modified anything in Vuetable source code that you've copied? Mine is still working, see this example

[8cris2]

@ratiw I think my version is outdated. I see you have slot-scope attribute which is new and your version is 1.7.2. I have 1.6.5 in my package.json

[8cris2]

Hi @ratiw I am currently still having issues getting the icons as well as the pagination to work. I have removed and reinstalled the vuetable-2 module in package.json on my local setup. And since I cannot get it to work. I am using Laravel 5.4 installation.

                <vue-table 
                    ref="vuetable"
                    :per-page="5"
                    :fields="fields"
                    api-url="http://localhost:3000/js/users.json" 
                    :css="css.table"
                    pagination-path="" 
                    @vuetable:pagination-data="onPaginationData"
                    @vuetable:loading="onLoading"        
                    @vuetable:loaded="onLoaded">
                </vue-table>

                <vuetable-pagination
                    ref="pagination"
                    :css="css.pagination"
                    @vuetable-pagination:change-page="onChangePage">
                </vuetable-pagination>

``

[ratiw]

@Gemini12 Something a bit curious to me.

• Why are you still importing from ../Vuetable.vue? Why not importing it from vuetable-2/src/components/Vuetable.vue?
• You incorrectly specify the pagination css prop. You declared it as pagination in the data section, but you obviously refer to css.pagination.
• If the pagination does not seem to work, you should carefully inspect your JSON data structure if it conforms to what Vuetable is expected. You didn't show it here, so I can't be sure.

[matiasperrone]

Cheout: https://github.com/FortAwesome/vue-fontawesome

You need to do this:

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick of the initial replacement of i to svg tags and configure a MutationObserver

This will solve the issue.