anoneemo-laravel-table v0.1.1

anoneemo-laravel-table

Very simple to use vue single-file-component that will take laravel data that has the pagination included and turn it into a table that is stylized with BS4. Read instructions below. It even has a loading animation!

Requirements

Bootstrap 4 Laravel 7 or higher. Axios (this probably comes with Laravel, see app.js or bootstrap.js resource in a new Laravel project).

Installing

npm install anoneemo-laravel-table After installing the package you would import the component into your Vue setup register the component

Usage

Example:

app.js
    import LaravelTable from './LaravelTable';
    const app = new Vue({
        el: '#app',
        components: {
	      LaravelTable
        }
    });


Some view file...

<vue-laravel-table
    laravel-data-url="http://table-test.test/datatable/users"
    :laravel-data-resource="{  name:  'users',  prefix:  'dashboard'  }"
    :show-actions="['create', 'show', 'edit', 'delete']"
    :hide-columns="['id', 'created_at']"
    csrf-token="your_csrf_token_here_if_you_have_delete_in_show_actions"
/>

Parameters:

• String laravel-data-url Required

  • Pretty self explanatory. You just pass the url where you have the resource you want in this table.
  • A simple example could be that you wanted to list users. So give the URL where you do that. The response from the URL has to be JSON though.
  • All columns will be shown if not stated otherwise in hide-columns (explained further down).

• Object :laravel-data-resource Required

  • This object contains what type of resource it is that we're getting data from.
  • The object should containe both a name and a prefix (last one is optional).
  • The name should be users if that is the resource you are grabbing. And the prefix is just in case you may have a prefix for your resource controller in Laravel. No slashes needs to be added.

• Array :hide-columns

  • Pretty self explanatory. Just add the columns you do not want the table to render. But the columns and the data will still be there, just not rendered to the table.

• String csrf-token

  • This is the csrf-token that Laravel uses. If you have decided to show the delete action in the show-actions prop, you should provide the csrf-token.

• Array show-actions

  • This is the kind of actions you want to show in the table.
  • You can only choose from create, show, edit and delete.
  • The three first ones will be shown as links to the correspondent resource. The delete however will be shown as a form with the hidden _method as DELETE
  • It's worth mentioning all url's here are generated with the resource controller standard that can be found in the Laravel documentation.

Other stuff

The component is styled using BS4 for both the table and the vue-pagination. There is also a minimalistic loading spinner when the data is retrieved. This can be seen at the right side of the pagination links. And trust me, that the tables will look absolutly awfull without BS4 in your application.