PHPackages iyogesharma/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. iyogesharma/vue-datatable ActiveLibrary[Utility & Helpers](/categories/utility) iyogesharma/vue-datatable ========================= package to help in handling server side 1.11(5y ago)101371MITPHPPHP >=7.0.0CI failing Since May 18Pushed 4y ago1 watchersCompare [ Source](https://github.com/iYogesharma/vue-datatable)[ Packagist](https://packagist.org/packages/iyogesharma/vue-datatable)[ RSS](/packages/iyogesharma-vue-datatable/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)Dependencies (3)Versions (7)Used By (0) [![Latest Stable Version](https://camo.githubusercontent.com/93e9da2f0f56c1c54ae233d8fa9c40c8d8464da7f0ee9c53f84c70601fd9cc36/68747470733a2f2f706f7365722e707567782e6f72672f69796f6765736861726d612f7675652d646174617461626c652f76)](//packagist.org/packages/iyogesharma/vue-datatable)[![Latest Unstable Version](https://camo.githubusercontent.com/d2de7e7c56cff141a00f7c177b0c8dd57db9236ce66b19b9fbf3b84bfd56a4ee/68747470733a2f2f706f7365722e707567782e6f72672f69796f6765736861726d612f7675652d646174617461626c652f762f756e737461626c65)](//packagist.org/packages/iyogesharma/vue-datatable)[![Total Downloads](https://camo.githubusercontent.com/e99557ac8bae87fd33bd888736b7d658fef5c2b60e97136ab17cc2b67176a0ed/68747470733a2f2f706f7365722e707567782e6f72672f69796f6765736861726d612f7675652d646174617461626c652f646f776e6c6f616473)](//packagist.org/packages/iyogesharma/vue-datatable)[![Daily Downloads](https://camo.githubusercontent.com/53c7ca8e6550c4e2f19bc5553a1d466cc195176b47682f4aa6bc4d37cb29e46b/68747470733a2f2f706f7365722e707567782e6f72672f69796f6765736861726d612f7675652d646174617461626c652f642f6461696c79)](//packagist.org/packages/iyogesharma/vue-datatable)[![License](https://camo.githubusercontent.com/a49c9e543c5c75e4c8063accbe615cfbd5bd9b63bc4ec2a3922d34aa1ec84904/68747470733a2f2f706f7365722e707567782e6f72672f69796f6765736861726d612f7675652d646174617461626c652f6c6963656e7365)](//packagist.org/packages/iyogesharma/vue-datatable) Vue DataTable For Laravel ========================= [](#vue-datatable-for-laravel) A simple package to ease DataTable server side handling This package is created to handle server-side rendring of DataTables by using Eloquent ORM, Query Builder or Collection.This package helps you to easily manage server side rendring of datatables if you are dealing with js libraries like [Vue](https://vuejs.org/) or [React](https://reactjs.org/). Currently [Element-UI](https://element.eleme.io/) is completely supported by this package. Soon some other populer libraries will also get supported. Using Helper Function --------------------- [](#using-helper-function) ``` return datatables(User::query()); return datatables(DB::table('users')->join1()->join2()->select(column1,column2,...columnK)); return datatables(DB::table('users')->get()); return datatables(User::all()); ``` function datatable also contain optional parameter $json with default value to true, set this param to false if you want to use instance of DataTable particular database driver class. eg, below code return instance of **YS\\vueDataTable\\Eloquent class** ``` return datatables(User::query(),false); ``` vue-datatables also includes some other helper funcions that you can use if you want to use a particular database driver ``` return eloquent(User::query()); return query_bulder(DB::table('users')->join1()->join2()->select(column1,column2,...columnK)); return collection(DB::table('users')->get()); return collection(User::all()); ``` Input Format ------------ [](#input-format) ``` let query = { page: 1, limit: 10, keyword: '', order: { column: '', direction: '', }, filters: {"users.role_id":2}, }; ``` You must send query object given above in the query parameter in order to use this package. - **page** represent page number in pagination - **limt** number of records be displayed on a single page - **keyword** key you want to search in table - **keyword** string you want to search in table - **order** handle ordering of columns in table. here key column represents name of ordering column and key direction represents direction. key direction can only have values ascending or descending. - **filters** filters table data eg, role\_id if you want to see users of a particular role only. Requirements ------------ [](#requirements) - [PHP >= 7.0](http://php.net/) - [Laravel 5.*|6.*|7.\*](https://github.com/laravel/framework) Quick Installation ------------------ [](#quick-installation) ``` $ composer require iyogesharma/vue-datatable:"1.*" ``` #### Service Provider & Facade (Optional on Laravel 5.5) [](#service-provider--facade-optional-on-laravel-55) Register provider and facade on your `config/app.php` file. ``` 'providers' => [ ..., YS\VueDatatable\DataTableServiceProvider::class, ] ``` Example(Element-UI) ------------------- [](#exampleelement-ui) ``` search {{ scope.row.name }} {{ scope.row.email }} {{ scope.row.role }} export default { name: 'vue-datatable-test', data() { return { data: null, total: 0, roles: [ { id:1, name: 'admin', }, { id:2, name:'sub-admin' } ], query: { page: 1, limit: 10, keyword: '', order: { column: '', direction: '', }, filters: {}, } } }, created () { this.getDataFromStorage(); }, methods: { async getDataFromStorage(){ let self = this; await axios.get('/testUrl', { params: self.query }) .then( res => { const { data, total } = res.data; self.data = data; self.total = total; }) }, /** * Handle tabel filter action * @param data value of current filter * * @return void */ handleFilter(data) { if (data === '') { this.resetFilters(); } this.query.page = 1; this.getDataFromStorage(); }, /** * Reset query filters to initial values * @return {void} */ resetFilters() { this.query.filters = {}; }, /** * Reset query search keyword to initial value * @return {void} */ resetKeyword() { this.query.keyword = ''; this.getDataFromStorage(); }, /** * Handle sort action of table * @param {object} data sort details * * @return {void} */ sortList(data) { const { prop, order } = data; if (order){ if (prop === 'index') { this.$refs['table'].data.sort(() => -1); } else { this.query.order['column'] = prop; this.query.order['direction'] = order; this.handleFilter(); } } } } } ``` ``` On server side use vueDataTable as function testData() { return datatable( User::join('roles','roles.id','=','users.role_id') ->select('users.name','users.email','users.id','users.role_id','roles.name as role') ); } ``` In the example given above you can also use component "el-pagination". **keys** total, query.limit and query.page can be used to create dynamic pagination. License ------- [](#license) The MIT License (MIT). Please see [License File](https://github.com/iYogesharma/datatables/blob/master/LICENSE.md) for more information. ### Health Score 28 — LowBetter than 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity17 Limited adoption so far Community8 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~43 days Total 5 Last Release 2010d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6df6c987f76f76f4d8e7873b6983b44e16d72d39b3adf711a8e13f74e5b6fe29?d=identicon)[iYogesharma](/maintainers/iYogesharma) --- Top Contributors [![iYogesharma](https://avatars.githubusercontent.com/u/44565761?v=4)](https://github.com/iYogesharma "iYogesharma (11 commits)") --- Tags elementuilaravelreactvuelaraveldatatableelement-uiiYogesharmavue-datatableelement-table ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/iyogesharma-vue-datatable/health.svg) ``` [![Health](https://phpackages.com/badges/iyogesharma-vue-datatable/health.svg)](https://phpackages.com/packages/iyogesharma-vue-datatable) ``` ### Alternatives [livewire/volt An elegantly crafted functional API for Laravel Livewire. 4195.3M84](/packages/livewire-volt)[gehrisandro/tailwind-merge-laravel TailwindMerge for Laravel merges multiple Tailwind CSS classes by automatically resolving conflicts between them 341682.2k18](/packages/gehrisandro-tailwind-merge-laravel)[whitecube/laravel-timezones Store UTC dates in the database and work with custom timezones in the application. 106106.2k](/packages/whitecube-laravel-timezones)[forxer/laravel-gravatar A library providing easy gravatar integration in a Laravel project. 4235.6k](/packages/forxer-laravel-gravatar)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid)[iteks/laravel-enum A comprehensive Laravel package providing enhanced enum functionalities, including attribute handling, select array conversions, and fluent facade interactions for robust enum management in Laravel applications. 2516.7k](/packages/iteks-laravel-enum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)