# naughty-vue-laravel-table

> A simple vue table plugin

Latest version **1.0.6** (published 2019-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install naughty-vue-laravel-table
pnpm add naughty-vue-laravel-table
yarn add naughty-vue-laravel-table
bun add naughty-vue-laravel-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2019-07-25 |
| First published | 2019-07-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 (+25 in 2 direct dependencies) |
| Install scripts | no |
| Author | Sajid Javed |
| Maintainers | maliksajid1992 |

## Links

- npm: https://www.npmjs.com/package/naughty-vue-laravel-table
- npm.io page: https://npm.io/package/naughty-vue-laravel-table

## Dependencies (3)

- [axios](https://npm.io/package/axios.md) ^0.18.1
- [bootstrap](https://npm.io/package/bootstrap.md) ^4.3.1
- [sweetalert2](https://npm.io/package/sweetalert2.md) ^8.14.0

## Recent versions

- 1.0.6 (latest) — 2019-07-25
- 1.0.5 — 2019-07-25
- 1.0.4 — 2019-07-25
- 1.0.3 — 2019-07-25
- 1.0.2 — 2019-07-25
- 1.0.1 — 2019-07-25
- 1.0.0 — 2019-07-25

## README

# Naughty Vue Laravel Table
This is a simple package of vuejs which enables you to handle the default pagination of laravel in vuejs. This is intial version of this package and may contain bugs and i'm actively working on it and will upload the newest version soon.

## Configuration
This package is designed for axios. Paste below snippets in your app.js. Remove the authentication line if you don't work with token based authentication.

```
// axios header
axios.defaults.headers.common = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': '*',
    'Authorization': 'Bearer ' + sessionStorage.getItem('token')
};
```

## Import the plugin in app.js

```
//NaughtyVueLaravelTable
import Vue from 'vue';
import NaughtyVueLaravelTable from "naughty-vue-laravel-table";
Vue.use(NaughtyVueLaravelTable);
```

## Usage
Paste the below code in template of your component

```
<naughty-vue-laravel-table
    :tableConfiguration="tableConfiguration"
    :pagination="pagination"
    :perPage="perPage"
    :columns="columns"
    :apiURL="apiURL"
  ></naughty-vue-laravel-table>
```

## Paste the below code inside the return object of your data function and change according to your need.

```
 apiURL: "api/campus",
      tableConfiguration: {
        defaultLength: 10,
        searchGlobal: null,
        searchColumnName: "name",
        searchColumnText: null,
        column: 0,
        direction: "desc",
        specificPage: null,
        sortColumn: "email",
        sortOrder: "asc"
      },
      pagination: {
        lastPage: null,
        currentPage: null,
        total: null,
        lastPageUrl: null,
        nextPageUrl: null,
        prevPageUrl: null,
        from: null,
        to: null
      },
      perPage: ["10", "20", "30"],
      columns: [
        { width: "20%", label: "Name", name: "name" },
        { width: "20%", label: "Email", name: "email" },
        { width: "20%", label: "Phone", name: "phone" },
        { width: "20%", label: "City", name: "city" },
        { width: "20%", label: "Action", name: "action" }
      ]
      
```

## Laravel Function

```
 public function index(Request $request)
 {
  $columns = ['name', 'phone', 'email', 'city'];
  $defaultLength   = $request->input('defaultLength');
  $column   = $request->input('column');
  $direction      = $request->input('direction');
  $searchColumnName = $request->input('searchColumnName');
  $searchColumnText = $request->input('searchColumnText');
  $searchGlobal     = $request->input('searchGlobal');

  $specificPage = $request->input('specificPage');

  if ($specificPage) {
   Paginator::currentPageResolver(function () use ($specificPage) {
    return $specificPage;
   });
  }
  $query = Campus::select('id', 'name', 'phone', 'email', 'city')->orderBy($columns[$column], $direction);

  if ($searchGlobal) {
   $query->where(function ($query) use ($searchGlobal) {
    $query->where('name', 'like', '%' . $searchGlobal . '%')
     ->orWhere('email', 'like', '%' . $searchGlobal . '%');
   });
  }

  if ($searchColumnName) {
   $query->where(function ($query) use ($searchColumnName, $searchColumnText) {
    $query->where($searchColumnName, 'like', '%' . $searchColumnText . '%');
   });
  }

  $daata = $query->paginate($defaultLength);
  return ['data' => $daata];
 }

```

---
_Source: https://npm.io/package/naughty-vue-laravel-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._