digitalinyuk/laravel-datagrid

Digitalinyuk DataTables & DataGrid Component Package for Laravel

Maintainers

Package info

github.com/digitalinyuk-id/laravel-datagrid

Language:JavaScript

pkg:composer/digitalinyuk/laravel-datagrid

Transparency log

Statistics

Installs: 6

Dependents: 0

Suggesters: 0

Stars: 1

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

v1.0.8 2026-08-25 18:25 UTC

Requires

MIT 6a627b930cb494d7f72ba74468ee42f28eea4490

  • Digitalinyuk <admin.woop@digitalinyuk.com>

Published on Packagist.org on 2026-08-25 18:25 UTC

This package is auto-updated.

Last update: 2026-08-25 18:25:58 UTC

README

Latest Version on Packagist Total Downloads Software 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

🚀 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

Step 1: Install Package via Composer

composer require digitalinyuk/laravel-datagrid

Step 2: Publish Vendor Assets

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

💻 Quick Start & Usage

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

<head>
  ...
  <!-- Include DataGrid Styles inside <head> -->
  @digitalinyukDataGridStyles
</head>
<body>
  ...
  <!-- Include DataGrid Scripts after jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  @digitalinyukDataGridScripts
</body>

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

<!-- Provide an empty container for the Grid cards -->
<div id="user-grid-cards"></div>

<!-- Standard DataTables table -->
<table id="mytable" class="table data align-middle w-100 mb-0">
  ...
</table>

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 `
      <a href="${urlEdit}" class="btn digitalinyuk-grid-card__btn-edit">
        <i class="bi bi-pencil-fill"></i> Edit
      </a>
      <button type="button" class="btn digitalinyuk-grid-card__btn-delete delete-btn" data-url="${urlDelete}">
        <i class="bi bi-trash-fill"></i>
      </button>
    `;
  }
});

⚙️ Configuration Options (options)

Option Type Default Description
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

This package is open-sourced software licensed under the MIT License. Developed with ❤️ by Digitalinyuk.