PHPackages                             wdev-rs/laravel-datagrid - 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. wdev-rs/laravel-datagrid

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

wdev-rs/laravel-datagrid
========================

Laravel integration for Grid.js server side processing

1.0.1(2y ago)548.4k↓34.6%17MITVuePHP >=7.4|^8.0

Since Mar 23Pushed 2y ago1 watchersCompare

[ Source](https://github.com/wdev-rs/laravel-datagrid)[ Packagist](https://packagist.org/packages/wdev-rs/laravel-datagrid)[ Docs](https://github.com/wdev-rs/laravel-datagrid)[ RSS](/packages/wdev-rs-laravel-datagrid/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (4)Versions (15)Used By (0)

LaravelDatagrid
===============

[](#laraveldatagrid)

[![Latest Version on Packagist](https://camo.githubusercontent.com/2ef662335173ecb07eec25a834d8368bd27a712a885f2a89af2afb46c5bcb35e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f776465762d72732f6c61726176656c2d64617461677269642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wdev-rs/laravel-datagrid)[![Build Status](https://github.com/wdev-rs/laravel-datagrid/actions/workflows/test.yml/badge.svg)](https://github.com/wdev-rs/laravel-datagrid/actions/workflows/test.yml)[![Quality Score](https://camo.githubusercontent.com/eaa8acd445033c143d4301d2785a25cb7ec08805806e069123e32f444f5e111c/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f776465762d72732f6c61726176656c2d64617461677269642e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/wdev-rs/laravel-datagrid)[![Total Downloads](https://camo.githubusercontent.com/7532c279450c7477e6155ea1bbecc70ce9300613895d529cea1f8d75fc11af03/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f776465762d72732f6c61726176656c2d64617461677269642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wdev-rs/laravel-datagrid)

This packages makes it easy to create data-grid for your Laravel application, for example admin panels, or any other searchable and sortable list. This package comes with 2 frontend options:

- [Grid.js](https://gridjs.io/)
- DataGrid's own Vue 3 frontend.

Both frontends offer server side functionalities like searching, sorting and pagination.

[![Laravel DataGrid](https://raw.githubusercontent.com/wdev-rs/laravel-datagrid/master/resources/img/laravel-datagrid.png)](https://raw.githubusercontent.com/wdev-rs/laravel-datagrid/master/resources/img/laravel-datagrid.png)

Demo
----

[](#demo)

Please find a demo application [here](https://laravel-datagrid.wdev.rs) and the source code of the demo application [here](https://github.com/wdev-rs/laravel-datagrid-demo);

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

[](#installation)

You can install the package via composer:

```
composer require wdev-rs/laravel-datagrid
```

Optional - if you use Grid.js install the package with npm

```
npm install gridjs@^6.0.0
```

Publish the vendor files by running the following command:

**Using Grid.js frontend**

```
php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider" --tag="gridjs"
```

Register the DataGrid fronted Vue.js component by adding the following lines to your `app.js`:

```
import DataGrid from "./vendor/laravel-datagrid/gridjs/Components/DataGrid.vue";

app.component('data-grid', DataGrid);
```

Use the component in your view file (or in another component):

```

```

**Using Datagrid Vue 3 frontend**

```
php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider" --tag="datagrid"
```

Register the DataGrid fronted Vue.js component by adding the following lines to your `app.js`:

```
import DataGrid from "./vendor/laravel-datagrid/datagrid/Components/DataGrid.vue";

app.component('data-grid', DataGrid);
```

Use the component in your view file (or in another component):

```

```

Usage
-----

[](#usage)

The base of this package is the `\WdevRs\LaravelDatagrid\DataGrid\DataGrid` class. This class is used to define the columns and the behavior of the datagrid. While you can use this class directly from the controller, I suggest extending it and create separate classes for each datagrid.

```
class CategoriesDataGrid extends DataGrid
{

    /**
     * CategoriesDataGrid constructor.
     */
    public function __construct()
    {
        $this->fromQuery(Category::query())
            ->column('id', 'ID', null, 50)
            ->column('name', 'Name', function ($category) {
                return view('admin.categories.actions.edit_link', ['category' => $category])->render();
            })
            ->key('id')
    }
}
```

Using the `fromQuery` method you can define what should be the base query for the DataGrid. It accepts a Laravel Query Builder object. The `column` method is used to define the columns of the DataGrid, the argument are as follows:

- `id` - the name of the field in the database
- `name` - the label which should appear in the DataGrid column header
- `formatter` - optional, callable allows you to format the display of the column. As you can see from the above example probably the most elegant way to do this is to include a blade view and render it.
- `width` - optional, the with of the column
- `sortable` - optional, boolean if the column should be sortable, default true
- `searchable` - optional, boolean if the column should be searchable, default true

The `key` method defines the unique identifier for the rows, usually id. Specifying the key is necessary for the mass actions to work when using datagrid frontend.

### Data sources

[](#data-sources)

You can create data grid from different data sources:

- Eloquent queries - use the fromQuery() method
- Collections - use the fromCollection() method
- Arrays - use the fromArray() method

When the DataGrid definition is ready, you can add it to the controller:

```
    public function index(CategoriesDataGrid $dataGrid, Request $request)
    {
        return $dataGrid->render();
    }
```

If the `render` method is called without arguments it will use the default view `resources/views/vendor/laravel-datagrid/datagrid.blade.php`, or you can pass your own view and use the DataGrid there:

```
    public function index(CategoriesDataGrid $dataGrid, Request $request)
    {
        return $dataGrid->render('admin.common.index');
    }
```

If you use Inertia for frontend, you can configire laravel-datagrid to use inertia for rendering instead of blade. First publish the config file:

```
php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider" --tag="config"
```

Change the rendering method in the published `config/laravel-datagrid.php`:

```
'render_with' => \WdevRs\LaravelDatagrid\LaravelDatagrid::RENDER_INERTIA
```

Now you can pass the name of the vue component to the `render` method, it is going to be rendered with Inertia.

Available commands
------------------

[](#available-commands)

###### Code related

[](#code-related)

- [**make**:datagrid](#make-datagrid) ~ Generates datagrid class
    --------------------------------------------------------------

    [](#makedatagrid---generates-datagrid-class)

`php artisan make:datagrid  `
------------------------------------------------------

[](#php-artisan-makedatagrid--m--model--f--fields)

Generates datagrid class, the generated class is placed in \\App\\DataGrids directory

- -M|--model name of the model to use
- -F|--fields the name of the fields of the comma separated: 'field1,field2,field3' or 'field1:label1,field2:label2,field3:label3'

Generated class

```
    class CategoriesDataGrid extends DataGrid
    {

        /**
         * CategoriesDataGrid constructor.
         */
        public function __construct()
        {
            $this->fromQuery(Category::query())
                ->column('id', 'ID', null, 50)
                ->column('name', 'Name')
        }
    }
```

#### Usage example

[](#usage-example)

![php artisan make datagrid command](docs/images/php_artisan_make_datagrid.png)

Frontend customisations
-----------------------

[](#frontend-customisations)

### Using Grid.js

[](#using-gridjs)

The frontend component of the DataGrid can be found in the `resources/js/vendor/laravel-datagrid/gridjs/Components/DataGrid.vue`By default DataGrid comes with one row action, which is the delete action. This action can be found in the following file: `resources/js/vendor/laravel-datagrid/gridjs/actions/delete.js`

You can extend it with more custom actions by creating them based on the existing one. To add the to the datagrid, extend the `cols` definition in the `DataGrid.vue`:

```
            cols: this.columns.map((col) => {col.formatter = (cell) => html(cell); return col;}).concat(
                [{
                    name: 'Actions',
                    sort: false,
                    width: 50,
                    formatter: (cell, row) => {
                        return h('div', {className: "text-center"},
                            deleteAction.call(this, row.cells[0].data,row.cells[1].data),
                            yourCustomAction.call(this, row.cells[0].data,row.cells[1].data)
                        )
                    }
                }]
            )
```

### Using Datagrid Vue3

[](#using-datagrid-vue3)

Datagrid's own vue 3 frontend offers extended functionality compared to grid.js, for example mass actions, filters and row action customisations.

#### Mass actions

[](#mass-actions)

Mass actions is a method to run specific action on multiple records. For example delete multiple records at once.

When using mass actions I suggest using datagrid in a wrapper component. Mass actions can be defined using the `mass-actions` prop in an array `[{'action' : 'massDelete', 'label': 'Delete'}]`

Datagrid will fire an event when the user selects rows and runs an action on them. The name of the event is what you defined in the `action` property, in this case `massDelete`. Handle the event on the usual way, the handler gets the array of `selectedIds` as an argument:

```
@massDelete="(selectedIds) => alert('Simulating mass delete on id(s): ' + selectedIds.join(','))"
```

Please find the code of the complete component below.

```

    import DataGrid from './../vendor/laravel-datagrid/datagrid/Components/DataGrid.vue'

    const props = defineProps({
        columns: Array,
        rows: Object,
    });

    const alert = (text) => {
        window.alert(text);
    }

```

#### Customising the row actions

[](#customising-the-row-actions)

DataGrid by default adds 2 row action to all rows: edit and delete. You can easily customise these actions using the `actions` slot:

```

                    Show

                    Export

```

#### Customising the search

[](#customising-the-search)

If you'd like to make a more detailed search function instead of the default search input field, use the `filters` slot.

```

                    Name

                    Code

                    Search

                    Reset

```

Add your custom logic on the frontend for collecting the data and submitting to the search endpoint, using the `ServerConfig` class, for example:

```

        import {ref} from "vue";
        import {ServerConfig} from "../vendor/laravel-datagrid/datagrid/ServerConfig";

        const dataColumns = ref(props.columns);
        const dataRows = ref(props.rows);

        const customFilteringEnabled = ref(false);

        const filters = ref({
        name: '',
        code: ''
        });

        const server = new ServerConfig();

        const filter = () => {
            const params = server.params();
            params.delete('search');
            params.delete('page');
            params.delete('limit');

            params.set('filters[name]', filters.value.name);
            params.set('filters[code]', filters.value.code)

            server.get(params).then((data) => {
                dataRows.value = data;
            });
        };

        const reset = () => {
            filters.value = {
                name: '',
                code: ''
            };

            const params = server.params();
            params.delete('filters[name]');
            params.delete('filters[code]');
            params.delete('page');
            params.delete('limit');

            server.get(params).then((data) => {
                dataRows.value = data;
            });
        }

```

On the backend override the `search` method of the base `DataGrid` class, to implement the custom filtering.

```
    public function search(?string $search): DataGrid
    {
        parent::search($search);

        $filters = collect(request()->get('filters'));

        $name = $filters->get('name');
        $code = $filters->get('code');

        $this->dataSource->query->when($name, fn ($query) => $query->where('name', 'like', '%'.$name.'%'));
        $this->dataSource->query->when($code, fn ($query) => $query->where('code', 'like', $code.'%'));

        return $this;
    }
```

Please check out the demo application's source code for a more details about how to implement these customisations here: [Laravel DataGrid demo](https://github.com/wdev-rs/laravel-datagrid-demo)

The demo app can be found [here](https://laravel-datagrid.wdev.rs/).

Upgrade from Laravel DataGrid 0.x
---------------------------------

[](#upgrade-from-laravel-datagrid-0x)

Update the vendor assets using --force option:

**Using Grid.js**

```
php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider" --tag="gridjs" --force
```

**Using datagrid frontend**

```
php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider" --tag="datagrid" --force
```

Update the import paths in the app.js to use correct DataGrid component (grid.js or datagrid), see the example above.

Update the usage of the data-grid component to pass the rows property:

```

```

### Testing

[](#testing)

```
composer test
```

### Changelog

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

### Security

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

Credits
-------

[](#credits)

- [Daniel Werner](https://github.com/wdev-rs)
- [All Contributors](../../contributors)

License
-------

[](#license)

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

Laravel Package Boilerplate
---------------------------

[](#laravel-package-boilerplate)

This package was generated using the [Laravel Package Boilerplate](https://laravelpackageboilerplate.com).

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity38

Limited adoption so far

Community17

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 95.2% 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 ~141 days

Recently: every ~79 days

Total

9

Last Release

750d ago

Major Versions

0.6.1-beta → 1.0.02024-03-22

PHP version history (3 changes)0.1.0PHP ^7.4

0.2.0PHP >=7.4

0.4.0PHP >=7.4|^8.0

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/38726367?v=4)[Daniel Werner](/maintainers/daniel-werner)[@daniel-werner](https://github.com/daniel-werner)

![](https://www.gravatar.com/avatar/f9d3224345657674b5199e36cc4cadc9d7d90e6d272bf004114254290d4c8007?d=identicon)[wdev-rs](/maintainers/wdev-rs)

---

Top Contributors

[![daniel-werner](https://avatars.githubusercontent.com/u/38726367?v=4)](https://github.com/daniel-werner "daniel-werner (80 commits)")[![nadj](https://avatars.githubusercontent.com/u/6311444?v=4)](https://github.com/nadj "nadj (2 commits)")[![Max-Hutschenreiter](https://avatars.githubusercontent.com/u/8393676?v=4)](https://github.com/Max-Hutschenreiter "Max-Hutschenreiter (1 commits)")[![SirousFakhri](https://avatars.githubusercontent.com/u/56381478?v=4)](https://github.com/SirousFakhri "SirousFakhri (1 commits)")

---

Tags

hacktoberfestwdev-rslaravel-datagrid

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/wdev-rs-laravel-datagrid/health.svg)

```
[![Health](https://phpackages.com/badges/wdev-rs-laravel-datagrid/health.svg)](https://phpackages.com/packages/wdev-rs-laravel-datagrid)
```

###  Alternatives

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[illuminate/pipeline

The Illuminate Pipeline package.

9346.6M213](/packages/illuminate-pipeline)[illuminate/pagination

The Illuminate Pagination package.

10532.5M862](/packages/illuminate-pagination)[spatie/laravel-pjax

A pjax middleware for Laravel 5

513371.8k11](/packages/spatie-laravel-pjax)[spatie/laravel-mix-preload

Add preload and prefetch links based your Mix manifest

169176.0k2](/packages/spatie-laravel-mix-preload)[mrmarchone/laravel-auto-crud

Laravel Auto CRUD helps you streamline development and save time.

28711.8k2](/packages/mrmarchone-laravel-auto-crud)

PHPackages © 2026

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