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

ActiveLibrary

digitalinyuk/laravel-datagrid
=============================

Digitalinyuk DataTables & DataGrid Component Package for Laravel

v1.0.6(today)10MITJavaScriptPHP ^8.2

Since Aug 21Pushed todayCompare

[ Source](https://github.com/digitalinyuk-id/laravel-datagrid)[ Packagist](https://packagist.org/packages/digitalinyuk/laravel-datagrid)[ RSS](/packages/digitalinyuk-laravel-datagrid/feed)WikiDiscussions main Synced today

READMEChangelog (2)Dependencies (2)Versions (8)Used By (0)

Digitalinyuk DataGrid for Laravel
=================================

[](#digitalinyuk-datagrid-for-laravel)

[![Latest Version on Packagist](https://camo.githubusercontent.com/2a32a124d6051dc8ed48af82c38881ded50bd38dab42d570c4bf98733112d0a6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6469676974616c696e79756b2f6c61726176656c2d64617461677269642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/digitalinyuk/laravel-datagrid)[![Total Downloads](https://camo.githubusercontent.com/514267a4ea4f94768ebdfa707b55d6ea2507c44088da4892efb0c5cb4d7f4066/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6469676974616c696e79756b2f6c61726176656c2d64617461677269642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/digitalinyuk/laravel-datagrid)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE)

An official component package by **Digitalinyuk** to seamlessly transform Laravel Server-Side DataTables into **Responsive Card Grids (`DataGrid`)** automatically, quickly, and with 100% flexibility.

📖 **[Baca Dokumentasi dalam Bahasa Indonesia](README.id.md)**

---

🚀 Key Features
--------------

[](#-key-features)

- ⚡ **Auto-Dependency Installation:** Automatically installs `yajra/laravel-datatables-oracle`.
- 🌐 **Multi-Version Laravel Support:** Fully compatible with **Laravel 10, 11, 12, and Laravel 13** (PHP 8.2+).
- 🎨 **Digitalinyuk BEM Design System:** Modern, clean, and responsive grid card layout (1–5 cards per row).
- 🔄 **Auto-Injected DOM View Switcher:** Automatically renders List/Grid toggle buttons without manual HTML markup.
- 🛠️ **100% Flexible Columns & Actions:** Supports DataTables `columns.render()` and custom callback `footer: function(row)`.
- 💾 **LocalStorage State Persistence:** Remembers user view preferences (List/Grid) seamlessly across page refreshes.

---

📦 Installation
--------------

[](#-installation)

### Step 1: Install Package via Composer

[](#step-1-install-package-via-composer)

```
composer require digitalinyuk/laravel-datagrid
```

### Step 2: Publish Vendor Assets

[](#step-2-publish-vendor-assets)

```
php artisan vendor:publish --tag=digitalinyuk-assets
```

---

💻 Quick Start & Usage
-------------------------

[](#-quick-start--usage)

### 1. Include Directives in Main Layout (`resources/views/layouts/app.blade.php`)

[](#1-include-directives-in-main-layout-resourcesviewslayoutsappbladephp)

```

  ...

  @digitalinyukDataGridStyles

  ...

  @digitalinyukDataGridScripts

```

### 2. Add Target Container in Your View (`resources/views/user/index.blade.php`)

[](#2-add-target-container-in-your-view-resourcesviewsuserindexbladephp)

```

  ...

```

### 3. Initialize DataGrid in JavaScript

[](#3-initialize-datagrid-in-javascript)

```
let table = $('#mytable').DataTable({
  processing: true,
  serverSide: true,
  ajax: "{{ route('user.index') }}",
  columns: [ ... ]
});

// Initialize DataGrid Plugin
$('#user-grid-cards').DataGrid(table, {
  storageKey: 'user-table-view',
  gridCols: 4,                  // Cards per row on desktop (number or object {xs:2, sm:3, md:4, lg:5})
  avatar: true,                 // Show card cover/avatar (Optional, default: false)
  avatarField: 'avatar_url',    // Property key for avatar/image URL (Optional)
  badgeActive: true,            // Show active/inactive status dot (Optional, default: false)
  activeField: 'is_active',     // Boolean property key for status (Optional)
  titleField: 'name',           // Main title property key (name / title)
  columns: [
    {
      data: 'id',
      icon: 'bi bi-credit-card-2-front',
      render: function(data, type, row) {
        return `#${data} – Member`;
      }
    },
    {
      data: 'email',
      icon: 'bi bi-envelope',
      render: function(data, type, row) {
        return data || '-';
      }
    }
  ],
  footer: function(row) {
    let urlEdit = "{{ route('user.edit', ':id') }}".replace(':id', row.id);
    let urlDelete = "{{ route('user.destroy', ':id') }}".replace(':id', row.id);

    return `

         Edit

    `;
  }
});
```

---

⚙️ Configuration Options (`options`)
------------------------------------

[](#️-configuration-options-options)

OptionTypeDefaultDescription`storageKey``String``'user-table-view'`Unique `localStorage` key to persist the user's active view mode.`gridCols``Number|Object``5`Cards per row. Can be a number (`4`) or a responsive object `{xs:2, sm:3, md:4, lg:4}`.`avatar``Boolean``false`Display cover image / avatar on each card.`avatarField``String``'avatar_url'`Property key for avatar / image URL.`badgeActive``Boolean``false`Display active/inactive status dot indicator beside card title.`activeField``String``'is_active'`Boolean property key indicating active state.`titleField``String``'name'`Main property key used for the card title header.`columns``Array``[]`Meta items definition array (supports `data`, `icon`, `render(data, type, row)`).`footer``Function``null`Custom render callback function for card action buttons `footer: function(row)`.---

📄 License
---------

[](#-license)

This package is open-sourced software licensed under the [MIT License](LICENSE). Developed with ❤️ by **[Digitalinyuk](https://digitalinyuk.com)**.

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance100

Actively maintained with recent releases

Popularity2

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity50

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 ~1 days

Total

7

Last Release

0d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/48552558?v=4)[Lukmanul Hakim](/maintainers/lukman-dev)[@lukman-dev](https://github.com/lukman-dev)

---

Top Contributors

[![lukman-dev](https://avatars.githubusercontent.com/u/48552558?v=4)](https://github.com/lukman-dev "lukman-dev (9 commits)")

### Embed Badge

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

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

###  Alternatives

[psalm/plugin-laravel

Psalm plugin for Laravel

3345.4M354](/packages/psalm-plugin-laravel)

PHPackages © 2026

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