This package has been deprecated

Author message:

not updated

vue-laravel-table-component

A straightforward Vue & Laravel component to filter and sort tables

This repo is forked from spatie/vue-table-component

Here's an example of how you can use it:

<table-component
     :data="[
          { firstName: 'John', lastName: 'Lennon', instrument: 'Guitar', editUrl: '<a href='#john'>Edit</a>', birthday: '04/10/1940', songs: 72 },
          { firstName: 'Paul', lastName: 'McCartney', instrument: 'Bass', editUrl: '<a href='#paul'>Edit</a>', birthday: '18/06/1942', songs: 70 },
          { firstName: 'George', lastName: 'Harrison', instrument: 'Guitar', editUrl: '<a href='#george'>Edit</a>', birthday: '25/02/1943', songs: 22 },
          { firstName: 'Ringo', lastName: 'Starr', instrument: 'Drums', editUrl: '<a href='#ringo'>Edit</a>', birthday: '07/07/1940', songs: 2 },
     ]"
     sort-by="songs"
     sort-order="asc"
>
     <table-column show="firstName" label="First name"></table-column>
     <table-column show="lastName" label="Last name"></table-column>
     <table-column show="instrument" label="Instrument"></table-column>
     <table-column show="songs" label="Songs" data-type="numeric"></table-column>
     <table-column show="birthday" label="Birthday" data-type="date:DD/MM/YYYY"></table-column>
     <table-column show="editUrl" label="" :sortable="false" :filterable="false"></table-column>
 </table-component>

Installation

You can install the package via yarn:

yarn add vue-laravel-table-component

or npm:

npm install vue-laravel-table-component --save

Next you must register the component. The most common use case is to do that globally.

//in your app.js or similar file
import Vue from 'vue';
import { TableComponent, TableColumn } from 'vue-laravel-table-component';
 
Vue.component('table-component', TableComponent);
Vue.component('table-column', TableColumn);

Alternatively you can do this to register the components:

import TableComponent from 'vue-laravel-table-component';
 
Vue.use(TableComponent);

Usage

Here's a simple example on how to use the component.

<template>
   <div id="app">
       <table-component :data="fetchData"
                         sort-by="name" sort-order="asc"
                         :table-class="'table'"
                         :filter-input-class="'form-control'"
                         :loading="true"
                         :loading-color="'red'"
        >
            <table-column show="name" label="First"></table-column>
            <table-column show="email" label="Email"></table-column>
        </table-component>
   </div>
</template>
 
<script>
    import axios from 'axios';
 
    export default {
        methods: {
            async fetchData({ page, filter, sort }) {
                const response = await axios.get('/my-endpoint', { page, filter, sort });
            
//          {
//              current_page: 1,
//              data: [],
//              from: 1,
//              last_page: 11,
//              next_page_url: "/data?page=2",
//              path: "/data",
//              per_page: 10,
//              prev_page_url: null,
//              to: 10,
//              total: 100
//          }
                return response;
            }
        }
    }
</script> 

Formatting values

You can format the values before they get displayed by passing a function to the formatter prop. Here's an example Vue component that uses the feature.

<template>
    <table-component
        :data="[{ firstName: 'John' },{ firstName: 'Paul' }]">
        <table-column show="firstName" label="First name" :formatter="formatter"></table-column>
    </table-component>
</template>
 
<script>
export default {
    methods: {
        formatter(value, row) {
            return `<a href="${row.id}">${value}</a>`;
        },
    },
}
</script>

This will display values Hi, I am John and Hi, I am Paul.

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). Please see License File for more information.