PHPackages                             sagaryonjan/vue-datatable - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. sagaryonjan/vue-datatable

ActiveLibrary[Utility & Helpers](/categories/utility)

sagaryonjan/vue-datatable
=========================

Bootstrap Table with vue js.

1.0.3(8y ago)11805[1 issues](https://github.com/sagaryonjan/vue-datatable/issues)MITPHPPHP >=7.1.3

Since Oct 2Pushed 8y ago2 watchersCompare

[ Source](https://github.com/sagaryonjan/vue-datatable)[ Packagist](https://packagist.org/packages/sagaryonjan/vue-datatable)[ Docs](https://github.com/sagaryonjan/vue-datatable)[ RSS](/packages/sagaryonjan-vue-datatable/feed)WikiDiscussions master Synced today

READMEChangelog (4)Dependencies (1)Versions (6)Used By (0)

Laravel Vue Js Datatable.
=========================

[](#laravel-vue-js-datatable)

The `sagaryonjan/vue-datatable` package provides easy to create table with vue js. It makes easy to customize your table.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require sagaryonjan/vue-datatable
```

You can publish the migration with:

```
php artisan vendor:publish --tag="vue-datatable"
```

Register Vue-datable in resources app.js

```
Vue.component('data-table', require('./components/datatable/DataTable.vue'));
```

Create Datatable Controller.

```
php artisan datatable:controller CategoryController App\Model\Category
```

View Table

```
renderDatable($data)
```

Pagination Limit

```
 public $pagination = 20;
```

Show Quick Search default false

```
 protected $quick_search = true;
```

Display column

```
  public $displayColumn = [
        'name',
        'email',
        'full_name',
        'profession',
        'status',
        'action',
    ];
```

Rename Column

```
  public $displayColumn = [
          'name'       => 'Name',
          'email'      => 'Email',
          'full_name'  => 'Full Name',
          'profession' => 'Profession',
          'status'     => 'Status',
          'action'     => 'Action',
      ];
```

Customizing Table Let status field be boolean if you want to show your status active or inactive instead of boolean add this function to your datatable controller

```
public function status($value) {

        if($value->status == 1)
            return "Active";
        else
            return "Warning";

}
```

Using join

```
public function query() {

        $this->query = $this->builder
                            ->select(
                                'users.name',
                                'users.email',
                                'users.status',
                                'user_details.full_name',
                                'user_details.profession'
                            )
                            ->leftjoin(
                                'user_details',
                                'user_details.user_id',
                                '=',
                                'users.id'
                            );
    }
```

Quick Search filter for join

```
  public $quick_search_filter = ['users.name', 'users.email'];
```

Adding Action Column

```
  public function addColumn() {

        $this->add_column = [
            "action" =>[
                'edit' => [
                    "a" =>[
                        'href'      => [ 'route' => 'admin.user.edit', 'param' => ['id'] ],
                        'title'     => 'Edit',
                        'class'     => 'hero starter massive',
                        'id'        => 'stranger-{id}',
                        'data-attr' => 'mistake-{id}'
                    ],
                    "i" => [ 'class' => 'glyphicon glyphicon-edit'],
                ],

                'delete' => [
                    "a" =>[
                        'href'      => [ 'route' => 'admin.user.delete', 'param' => ['id'] ],
                        'title'     => 'Edit',
                        'class'     => 'hero starter massive',
                        'id'        => 'stranger-{id}-{slug}',
                        'data-attr' => 'mistake-{id}'
                    ],
                    "i" => [ 'class' => 'glyphicon glyphicon-trash']
                ]
            ],
        ];
    }
```

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance18

Infrequent updates — may be unmaintained

Popularity18

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity62

Established project with proven stability

 Bus Factor1

Top contributor holds 86.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~60 days

Total

4

Last Release

3011d ago

PHP version history (2 changes)1.0.0PHP ^7.0

1.0.2PHP >=7.1.3

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/18110209?v=4)[Sagar Yonjan](/maintainers/sagaryonjan)[@sagaryonjan](https://github.com/sagaryonjan)

---

Top Contributors

[![sagaryonjan](https://avatars.githubusercontent.com/u/18110209?v=4)](https://github.com/sagaryonjan "sagaryonjan (13 commits)")[![gsusanj](https://avatars.githubusercontent.com/u/10201315?v=4)](https://github.com/gsusanj "gsusanj (2 commits)")

---

Tags

laraveltableresourcesdata tablevuedata-route

### Embed Badge

![Health badge](/badges/sagaryonjan-vue-datatable/health.svg)

```
[![Health](https://phpackages.com/badges/sagaryonjan-vue-datatable/health.svg)](https://phpackages.com/packages/sagaryonjan-vue-datatable)
```

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3345.1M337](/packages/psalm-plugin-laravel)[renatomarinho/laravel-page-speed

Laravel Page Speed

2.5k1.7M11](/packages/renatomarinho-laravel-page-speed)[awes-io/table-builder

A component that allows creating responsive HTML tables or lists from data object

4726.1k4](/packages/awes-io-table-builder)[santigarcor/laravel-vuetable

Vuetable laravel backend package

2750.3k](/packages/santigarcor-laravel-vuetable)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

119.2k](/packages/tomshaw-electricgrid)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)