### Differnt types of Links

```vue
 <div>
    <template>
        <div>
            <div class="card">
                <div class="card-header">
                    <center><h5>Appup listgrid component with listType is datatable.</h5></center>
                </div>
                <div class="card-body">
                    <appup-listgrid
                        defaultView="list"
                        listType="datatable"
                        url="http://0.0.0.0:3000/datatable"
                        :columns=columns
                    />
                </div>
            </div>
            <br />
            <div class="card">
                <div class="card-header">
                    <center><h5>Appup listgrid component with listType is table.</h5></center>
                </div>
                <div class="card-body">
                    <appup-listgrid
                        defaultView="grid"
                        listType="table"
                        url="http://0.0.0.0:3000/datatable"
                        :columns=columns
                    />      
                </div>
            </div>  
        </div>
    </template>
    <script>
    export default {
        data () {
            return {
                id: '1',
                fieldsTable: [
                { label: 'Avatar', key: 'picture', sortable: false },
                { label: 'Last Name', key: 'last_name', sortable: true },
                { label: 'First Name', key: 'first_name', sortable: true },
                { label: 'Age', key: 'age', sortable: true },
                { label: 'Address', key: 'address'},
                { label: 'Action', 
                key: 'actions', 
                sortable: false, 
                }
                ],
                sortBy: 'age',
                sortDesc: false,
                items: [],
                formFieldsDatatable: [],
                columns:[
                    {
                        name: "Avatar",
                        field: "picture",
                        type: "image",
                    },{
                        name: "First Name",
                        field: "first_name",
                        type: "text"
                    },{
                        name: "Last Name",
                        field: "last_name",
                        type: "text"
                    },{
                        name: "Age",
                        field: "age",
                        type: "number"
                    },{
                        name: "Gender",
                        field: "gender",
                        type: "text"
                    },{
                        name: "Department",
                        field: "department",
                        type: "text"
                    },{
                        name: "Email",
                        field: "email",
                        type: "text"
                    },{
                        name: "Phone",
                        field: "phone",
                        type: "text"
                    },{
                        name: "Address",
                        field: "address",
                        type: "text"
                    },{
                        name: "Status",
                        field: "isActive",
                        type: "text"
                    },{
                        name: "Actions",
                        type: "actions",
                        actions: [{
                            type: "appup-button",
                            size: "small",
                            label: "View",
                            buttonStyle: "success",
                            icon: "eye",
                            action: "modal",
                            modal: "viewModal"
                        }, {
                            type: "appup-link",
                            label: "View",
                            icon: "eye",
                            title: "click to navigate",
                            action: "navigate",
                            url: ":/employee/edit"
                        }]
                    }
                ]
            }
        },
        computed: {

        },
        methods: {
        
        }
    }
    </script>
</div>
 ```