Skip to content

Integrate the Laravel datatables with your Vue app without using JQuery.

License

Notifications You must be signed in to change notification settings

HELMAB/lv2-datatable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue2 - Laravel Datatables

Integrate the Laravel datatables with your Vue app without using JQuery. It can handle listing data locally and remote.

Installation

npm install lv2-datatable

Usage

Client Side

import Vue from 'vue'
import Datatable from 'lv2-datatable'

Vue.use('Datatable', Datatable)
<template>
  <!--  HTTP Request -->
  <DataTable
      table-id="datatable-01"
      ref="datatable"
      url="http://127.0.0.1:8000/api/v1/posts/datatable"
      :axios="axios"
      :columns="columns"
      :locale="locale"
      server-side
      saved-state
  >
    <template #action="{ row }">
      <ButtonActions :row="row" />
    </template>
  </DataTable>

  <!--  Local Data -->
  <DataTable
      table-id="datatable-02"
      ref="datatable"
      :columns="columns"
      :data-rows="dataRows"
      :locale="locale"
      saved-state
  >
    <template #action="{ row }">
      <ButtonActions :row="row" />
    </template>
  </DataTable>
</template>

<script>
import axios from 'axios'
import ButtonActions from '@/components/ButtonActions.vue'

export default {
  components: {
    ButtonActions
  },
  data () {
    return {
      axios,
      locale: 'en',
      dataRows: [],
    }
  },
  computed: {
    columns() {
      return [
        {
          data: "title",
          name: "title",
          title: "Title",
          orderable: true,
          searchable: true,
        },
        {
          data: "user.name",
          name: "user.name",
          title: "User",
          orderable: true,
          searchable: false,
        },
        {
          data: "created_at",
          name: "created_at",
          title: "Creation Date",
          orderable: true,
          searchable: false,
          width: "210px",
        },
        {
          data: "action",
          name: "action",
          title: "Action",
          orderable: false,
          searchable: false,
          slot: "action",
          width: "100px",
        },
      ];
    },
  },
  created() {
    this.dataRows = Array(10000)
        .fill(1, 0, 10000)
        .map((_, i) => {
          return {
            id: i + 1,
            title: `Title ${i + 1}`,
            user: {
              id: i + 1,
              name: `User ${i + 1}`,
            },
            created_at: new Date().toLocaleString(),
          };
        });
  },
}
</script>

Server Side

For server side, we need to use Laravel Datatables package.

<?php

namespace App\Http\Controllers\Api\V1;

use App\Http\Controllers\Controller;
use App\Models\Post;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use Yajra\DataTables\Facades\DataTables;

class PostController extends Controller
{
    public function datatable(Request $request): JsonResponse
    {
        $posts = Post::query()
            ->with(['user'])
            ->select('posts.*');

        return DataTables::of($posts)
            ->editColumn('title', fn(Post $post) => Str::limit($post->title, 20))
            ->editColumn("created_at", function (Post $post) {
                return $post->created_at->format('Y-m-d H:i:s A');
            })
            ->make();
    }
}

Props

Prop Type Description
axios Object Axios instance
url String The url to fetch data
columns Array Columns to show
locale String Localization code ("en", "km")
data-rows Array Static data of the table
table-id String The table ID
saved-state Boolean Save state of datatable
server-side Boolean Flag to switch handle between local & remote
lengthOptions Array Dropdown length option
order Array Order column and direction
design String ["bootstrap3", "bootstrap4", "bootstrap5"]

Methods

To refresh the datatable, you can call this method.

this.$refs.datatable.refresh()

Slots

Every of columns can have a slot, and it defines by adding the slot attribute inside columns. it has row and column as props data.

<template>
  <DataTable>
    <template #action="{ row, column }">
      <span>{{ row.title }} - {{ column.data }}</span>
    </template>
  </DataTable>
</template>

Support

If you like this plugin and want to support me, you can buy me a coffee ☕

License

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

About

Integrate the Laravel datatables with your Vue app without using JQuery.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published