@cceo/vue-index-table NPM

Index table

📄 Index table for Vue It has been created to accelerate the task of creating a table to index a resource and add buttons for its administration.

Features

Cancel requests

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Installing

Using npm:

$ npm install @cceo/vue-index-table --save

Example

<template>
    <div>
        <Index
            :title="title"
            :subtitle="subtitle"
            :homeURL="homeURL"
            :addButton="addButton"
            :columns="columns"
            :data="data"
            :buttons="buttons"
        ></Index>
    </div>
</template>

<script>
    import Index from 'vue-index-table';

    export default {
        name: 'FieldsPage',
        components: {Index},
        data() {
            return {
                title: 'Fields',
                subtitle: 'Index of Fields',
                homeURL: '/',
                addButton: {
                    title: 'New',
                    URL: '/system/field/create'
                },
                columns: ['id', 'nombre', 'direccion', 'responsable', 'actions'],
                data: [
                    {
                        id: 1,
                        nombre: 'Canchita 1',
                        direccion: 'Juarez #123',
                        responsable: 'David Martínez'
                    },
                    {
                        id: 2,
                        nombre: 'Canchita 2',
                        direccion: 'Las lomas #45',
                        responsable: 'Roberto López'
                    },
                    {
                        id: 3,
                        nombre: 'Canchita 3',
                        direccion: 'Av. Universidad #565',
                        responsable: 'María Gutierrez'
                    }
                ],
                buttons: [
                    {
                        name: 'show',
                        icon: 'fa fa-eye',
                        URL: 'fields/show',
                        method: 'get',
                        variant: 'success'
                    },
                    {
                        name: 'edit',
                        icon: 'fa fa-pencil',
                        URL: 'fields/edit',
                        method: 'get',
                        variant: 'primary',
                        visible : (canchita) => canchita.isEditable
                    },
                    {
                        name: 'delete',
                        icon: 'fa fa-trash',
                        URL: '',
                        method: 'delete',
                        variant: 'danger',
                        modal: {
                            title: 'Eliminar',
                            text: 'Si se elimina no se podrá recuperar después.'
                        }
                    },
                ]
            };
        },
    };
</script>