DEV Community: Gugulethu Nyoni

Implementing Formique in Vue.js: A Comprehensive Guide

Gugulethu Nyoni — Sat, 22 Feb 2025 04:52:02 +0000

Formique is a powerful and flexible form-building library that simplifies the process of creating well styled (themed) dynamic and interactive forms in web applications. With Formique, you can easily define form schemas, handle form validation, and manage form submissions without having to fiddle with html and css. In this guide, we'll walk you through the steps to integrate Formique into a Vue.js project.

What is Formique?

Formique is a lightweight, framework-agnostic library designed to streamline the creation of forms in web applications. It provides a declarative way to define form structures, supports dynamic form fields, and includes built-in validation and theming capabilities. Whether you're building simple contact forms or complex multi-step forms, Formique makes the process intuitive and efficient.

Key Formique Features

Declarative Syntax: Define forms using a simple and intuitive schema.
Wide Range of Inputs: Supports text, email, number, password, date, time, file uploads, and more.
Dynamic Form Generation: Generate forms dynamically based on your schema.
Accessibility Compliance: Ensures all form elements meet WCAG and WAI-ARIA standards.
Mobile Responsiveness: Forms are mobile-friendly out of the box.
JavaScript-Driven Themes: Apply themes dynamically for a customizable UI.
Nested Conditional Logic: Show or hide fields based on user input.
Dynamic Dropdowns: Create dropdowns with options that change dynamically.
Framework Agnostic: Works with Svelte, React, Vue, Angular, and Vanilla JS.

Step 1: Install a Vue.js Project

To get started, create a new Vue.js project using the Vue CLI. If you don't have the Vue CLI installed, you can install it globally by running:

npm install -g @vue/cli

Then, create a new Vue project:

npm create vue@latest myapp

Follow the prompts to set up your project. Once the project is created, navigate to the project directory:

cd myapp

Note: For the latest instructions, refer to the official Vue.js installation guide.

Step 2: Include Formique CSS

To ensure that your Formique forms are styled correctly, include the Formique CSS file in your project. Add the following CDN link inside the <head> tag of your index.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.6/formique.min.css" formique-style>

This will apply Formique's default styles to your forms.

Step 3: Install Formique

Next, install Formique in your Vue project using npm:

npm install formique

This will add Formique to your project's dependencies.

Step 4: Create a Form Component

Now, let's create a Vue component for your form. Inside the src/components directory, create a new file called RegForm.vue. This component will define the form schema, parameters, and settings.

Template Section

In the <template> section, define the structure of your form:

<template>
  <div>
    <h1>Registration Form</h1>
    <div id="formique"></div>
  </div>
</template>

The div with the ID formique is where Formique will render the form. You can customize this ID if needed.

Script Section

In the <script> section, import Formique and define the form schema, parameters, and settings:

<script>
import { ref, onMounted } from 'vue';
import Formique from 'formique';

export default {
  setup() {
    // Define the form schema
    const formSchema = ref([
      ['text', 'name', 'Name', { required: true }, {}],
      ['text', 'surname', 'Surname', { required: true }],
      ['email', 'email', 'Email', { required: true }, {}],
      ['singleSelect', 'title', 'Title', { required: true }, { dependents: ['status'] }, [
        { value: 'mr', label: 'Mr' },
        { value: 'ms', label: 'Ms' },
        { value: 'mrs', label: 'Mrs' },
        { value: 'dr', label: 'Dr' },
        { value: 'prof', label: 'Prof' }
      ]],
      ['singleSelect', 'status', 'Status', { required: true }, { dependsOn: 'title', condition: (value) => value === 'prof' }, [
        { value: 'full professor', label: 'Full Professor' },
        { value: 'associate professor', label: 'Associate Professor' }
      ]],
      ['submit', 'submit', 'Submit', {}, { style: 'width: 100%;' }]
    ]);

    // Define form parameters
    const formParams = ref({
      method: 'post',
      id: 'myForm',
      class: 'form',
      style: 'width: 100%; font-size: 14px;'
    });

    // Define form settings
    const formSettings = ref({
      requiredFieldIndicator: true,
      framework: 'vue',
      placeholders: true,
      theme: 'dark-blue',
      submitOnPage: true
    });

    // Initialize Formique when the component is mounted
    onMounted(() => {
      new Formique(formSchema.value, formParams.value, formSettings.value);
    });

    return {};
  }
};
</script>

Explanation:

Form Schema: The formSchema array defines the fields in your form. Each field is represented as an array with properties like type, name, label, validation rules, and options.
Form Parameters: The formParams object defines attributes for the form element, such as method, id, and class.
Form Settings: The formSettings object configures Formique's behavior, such as enabling placeholders, setting the theme, and specifying the framework.

Step 5: Import and Use Your Component

To display the form in your application, import and use the RegForm component in your App.vue file:

<template>
  <div id="app">
    <RegForm />
  </div>
</template>

<script>
import RegForm from './components/RegForm.vue';

export default {
  components: { RegForm }
};
</script>

Step 6: Run and View Your Form

Finally, start the development server to view your form in the browser:

npm run serve

Open your browser and navigate to http://localhost:8080. You should see your Formique form rendered and ready to use.

Additional Resources

For more advanced features and customization options, refer to the official Formique GitHub repository.

Contributing

Formique is an open-source project, and contributions are welcome! If you'd like to contribute, fork the repository and submit a pull request.

License

Formique is licensed under the MIT License.

By following this guide, you've successfully integrated Formique into your Vue.js project. Formique's simplicity and flexibility make it an excellent choice for building forms in modern web applications. Happy coding! 🚀

For more options, configurations, and details on how Formique works, please visit the following resources:

Fixing Escodegen 'Cannot read properties of null (reading 'length')' Error In Acorn Generated JS Abstract Syntax

Gugulethu Nyoni — Fri, 21 Feb 2025 12:37:29 +0000

Working on the compiler pipeline for a JavaScript framework I am building the workflow requires parsing JavaScript code from pages and components into an Abstract Syntax Tree (AST), then transforming the code back to regular code after conducting static analysis to implement specific transformations. In my case, I was using Acorn to generate AST from JS Code and Escodegen to generate code from the transformed AST. In that process, I was consistently getting this error from Escodegen:

Error importing module: TypeError: Cannot read properties of null (reading 'length')
    at CodeGenerator.generateFunctionParams (.../node_modules/escodegen/escodegen.js:912:42)
    at CodeGenerator.generateFunctionBody (.../node_modules/escodegen/escodegen.js:941:23)
    at CodeGenerator.MethodDefinition (.../node_modules/escodegen/escodegen.js:2158:26)
    at CodeGenerator.generateExpression (.../node_modules/escodegen/escodegen.js:2516:28)
    at .../node_modules/escodegen/escodegen.js:1133:38
    at withIndent (.../node_modules/escodegen/escodegen.js:581:9)
    at CodeGenerator.ClassBody (.../node_modules/escodegen/escodegen.js:1128:13)
    at CodeGenerator.generateStatement (.../node_modules/escodegen/escodegen.js:2529:33)
    at CodeGenerator.ClassDeclaration (.../node_modules/escodegen/escodegen.js:1159:30)
    at CodeGenerator.generateStatement (.../node_modules/escodegen/escodegen.js:2529:33)

The error message is not very helpful because it doesn’t indicate where in the processed file Escodegen is encountering issues. However, what we can glean from the message is that the problem relates to how the AST is formatted.

So, the first thing I did was scan through the AST to figure out whether the file might contain incomplete JSON or if the AST itself was malformed. Without banking much on it, the quick scan satisfied me that the AST content and structure were complete and correct. I then headed over to an online JSON validator (https://jsonlint.com) pasted the AST there—and voilà! I got the message: "JSON is Valid."

But this did little to ease my woes, as I now had valid JSON that still couldn’t be processed as an AST.

Hesitant to dive into Escodegen’s scripts, I went back to the error message and paid attention to the part that says:
Cannot read properties of null (reading 'length')
at CodeGenerator.generateFunctionParams.

I figured the issue had to do with the structure Escodegen expects in the AST, specifically regarding function parameters. The "Cannot read properties of null (reading 'length')" part strongly suggested an array-related problem.

To provide context, let’s look at the raw JavaScript code that triggered this error:

Real-World Example: The `RegistrationForm` Class

In my file I had a RegistrationForm class that creates a simple registration form in the DOM. Here’s the raw JavaScript code:

class RegistrationForm {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        if (!this.container) {
            console.error(`Container with ID '${containerId}' not found.`);
            return;
        }
        this.createForm();
    }

    createForm() {
        const form = document.createElement('form');
        form.id = 'registrationForm';
        form.addEventListener('submit', this.handleSubmit.bind(this));

        const nameLabel = this.createLabel('Name:', 'nameInput');
        const nameInput = this.createInput('text', 'nameInput', 'name');

        const surnameLabel = this.createLabel('Surname:', 'surnameInput');
        const surnameInput = this.createInput('text', 'surnameInput', 'surname');

        const submitBtn = document.createElement('button');
        submitBtn.type = 'submit';
        submitBtn.textContent = 'Register';

        form.appendChild(nameLabel);
        form.appendChild(nameInput);
        form.appendChild(document.createElement('br'));

        form.appendChild(surnameLabel);
        form.appendChild(surnameInput);
        form.appendChild(document.createElement('br'));

        form.appendChild(submitBtn);

        this.container.appendChild(form);
    }

    createLabel(text, forId) {
        const label = document.createElement('label');
        label.htmlFor = forId;
        label.textContent = text;
        return label;
    }

    createInput(type, id, name) {
        const input = document.createElement('input');
        input.type = type;
        input.id = id;
        input.name = name;
        input.required = true;
        return input;
    }

    handleSubmit(event) {
        event.preventDefault();
        const name = document.getElementById('nameInput').value;
        const surname = document.getElementById('surnameInput').value;
        alert(`Registered: ${name} ${surname}`);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new RegistrationForm('regForm');
});

Parsing the Code with Acorn

Let's deal with installing and setting up Acorn first.

🔧 1. Install Acorn
Install Acorn via npm or yarn:

npm install acorn
 or
yarn add acorn

📥 2. Import Acorn
In your JavaScript file:

import  as acorn from 'acorn';

⚙️ 3. Parse JavaScript Code Use acorn.parse() to convert code into an Abstract Syntax Tree (AST):

 // code is the raw js code we referred to above. 
const ast = acorn.parse(code, { ecmaVersion: 2023 });

console.log(ast);

When we parse this code with Acorn, we get an AST. However, if the AST is incomplete or malformed (at least according to the format expected by Escodegen, we will encounter errors when using Escodegen to regenerate the code.

For example, consider the handleSubmit method in the AST:

{
    "type": "MethodDefinition",
    "start": 1361,
    "end": 1569,
    "static": false,
    "computed": false,
    "key": {
        "type": "Identifier",
        "start": 1361,
        "end": 1373,
        "name": "handleSubmit"
    },
    "kind": "method",
    "value": {
        "type": "FunctionExpression",
        "start": 1373,
        "end": 1569,
        "id": null,
        "expression": false,
        "generator": false,
        "async": false,
        "params": [
            {
                "type": "Identifier",
                "start": 1374,
                "end": 1379,
                "name": "event"
            }
        ],
        "body": {
            "type": "BlockStatement",
            "start": 1381,
            "end": 1569,
            "body": [
                {
                    "type": "ExpressionStatement",
                    "start": 1383,
                    "end": 1406,
                    "expression": {
                        "type": "CallExpression",
                        "start": 1383,
                        "end": 1405,
                        "callee": {
                            "type": "MemberExpression",
                            "start": 1383,
                            "end": 1403,
                            "object": {
                                "type": "Identifier",
                                "start": 1383,
                                "end": 1388,
                                "name": "event"
                            },
                            "property": {
                                "type": "Identifier",
                                "start": 1389,
                                "end": 1403,
                                "name": "preventDefault"
                            },
                            "computed": false,
                            "optional": false
                        },
                        "arguments": null, // Right here is the bug! Problem: This should be an empty array []
                        "optional": false
                    }
                }
            ]
        }
    }
}

The Issue: `arguments: null`

In the CallExpression node, the arguments property is null instead of an empty array ([]). This causes Escodegen to throw the error:

TypeError: Cannot read properties of null (reading 'length')

The Solution: Ensure Proper AST Structure

To fix this issue, we need to ensure that all required properties in the AST are properly defined. Specifically:

Check for null or undefined Values:
- Replace null values with their expected defaults (e.g., arguments: [] for CallExpression nodes).
- Validate the AST:
- Use a validation function to traverse the AST and fix malformed nodes.

Here’s how we can fix the arguments issue:

function fixAST(ast) {
    if (ast.type === 'CallExpression' && ast.arguments === null) {
        ast.arguments = [];
    }
    for (const key in ast) {
        if (ast[key] && typeof ast[key] === 'object') {
            fixAST(ast[key]);
        }
    }
    return ast;
}

Applying the Fix

Before passing the AST to Escodegen, we apply the fixAST function:

const fixedAST = fixAST(originalAST);
const code = escodegen.generate(fixedAST);

In my case I had "null" value (object) coming up in MethodDefinition nodes having a FunctionExpression with params: null as well. So I needed to extend my ast fixer function to handle these as well.

Null params for FunctionExpression and ArrowFunctionExpression.
Null params in MethodDefinition nodes.
Null arguments in CallExpression nodes.

Here’s the complete code:

function fixAST(node) {
    if (!node || typeof node !== 'object') return node;

    // Handle CallExpression argument null issue
    if (node.type === 'CallExpression' && node.arguments === null) {
        node.arguments = [];
    }

    // Handle null params in FunctionExpression, ArrowFunctionExpression, and MethodDefinition
    if ((node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && node.params === null) {
        node.params = [];
    }

    if (node.type === 'MethodDefinition' && node.value && node.value.type === 'FunctionExpression' && node.value.params === null) {
        node.value.params = [];
    }

    // Recursively clean child nodes
    for (const key in node) {
        if (node.hasOwnProperty(key)) {
            const value = node[key];

            if (Array.isArray(value)) {
                node[key] = value.filter(Boolean).map(fixAST);
            } else if (typeof value === 'object' && value !== null) {
                fixAST(value);
            }
        }
    }

    return node;
}

🔍 Key Changes:

Function Expressions: If params is null, it gets replaced with an empty array [].
Method Definitions: Ensures params exists inside node.value for method definitions.
Call Expressions: Ensures arguments is never null.

✅ Example AST Before and After:

Before:

{
    "type": "MethodDefinition",
    "key": { "type": "Identifier", "name": "createForm" },
    "value": {
        "type": "FunctionExpression",
        "params": null,
        "body": { "type": "BlockStatement", "body": [] }
    }
}

After Cleaning:

{
    "type": "MethodDefinition",
    "key": { "type": "Identifier", "name": "createForm" },
    "value": {
        "type": "FunctionExpression",
        "params": [],
        "body": { "type": "BlockStatement", "body": [] }
    }
}

Conclusion

When working with ASTs, it’s crucial to ensure that the structure is complete and consistent. Errors like Unknown node type: undefined and Cannot read properties of null often stem from malformed nodes, such as arguments: null in CallExpression nodes. By validating and fixing the AST before passing it to Escodegen, we can avoid these issues and generate valid JavaScript code.

Key Takeaways

Validate the AST: Always check for null or undefined values in critical properties.
Use Defaults: Replace null values with their expected defaults (e.g., arguments: []).
Test Thoroughly: After modifying the AST, test it with Escodegen to ensure it generates valid code.
A more sustainable long-term solution would be to fix how Acorn handles empty array items. Alternatively, we could consider using other parsers, such as Esprima, that may handle these cases more effectively, ensuring the final AST is compatible with ESTree-compliant code generators.

Thank you for reading this far!!

P.S. I headed over to AST Explorer and pasted the same JavaScript code to get the Acorn-generated AST. The AST was well-formatted with the expected empty arrays, as we have explored in the article. So, I need to figure out why the Acorn implementation in my framework is producing a different AST output. It could be a version issue or some config that I am missing. I will come back to this post with feedback.

Mastering Obect Relational Mapping In Laravel: Spotlight On AnyGrid JS

Gugulethu Nyoni — Thu, 20 Feb 2025 12:22:18 +0000

In this article, we'll explore how to handle rendering relational data in Laravel. Imagine an e-commerce scenario where products are linked to categories. When displaying product details, you'd want to show the category name alongside them in a clean, user-friendly way. Or think of a blog where each post includes its comments right below the content.

This is where Object-Relational Mapping (ORM) comes in. In this guide, I'll walk you through how to implement it seamlessly and elegantly in Laravel, using AnyGridJS.

Project Setup: Laravel Installation

Before integrating AnyGrid, ensure Laravel is installed. Follow the latest official installation guide here:

👉 Laravel Installation Guide

Basic Installation (For Laravel 10+):

Ensure you have PHP (≥ 8.1), Composer, and Node.js installed.

Create a new Laravel project:

composer create-project --prefer-dist laravel/laravel anygrid-laravel

Navigate into the project folder:

cd anygrid-laravel

Start the local development server:

php artisan serve

🎨 Your Laravel app will be accessible at http://127.0.0.1:8000.

Install AnyGrid JS (CDN Method)

We’ll use the CDN method to quickly integrate AnyGrid JS into our Laravel Blade views.

In your resources/views/layouts/app.blade.php or any other Blade layout file you want to use, add the following inside the <head> tag:

<!-- AnyGrid CSS -->
<link rel="stylesheet" href="https://unpkg.com/anygridcss@1.0.1/anyGrid.css" anygrid-style>

<!-- AnyGrid JS -->
<script src="https://cdn.jsdelivr.net/npm/anygridjs@1.0.9/anyGrid.global.min.js"></script>

💡 Ensure you are using the latest of these packages.

🟡 3. Set Up Table Schema and Model Relationships

In this section, we'll create the database structure for an e-commerce scenario with Product and ProductCategory models, demonstrating a One-to-Many relationship.

Create Models with Migrations

Generate ProductCategory and Product Models:

Run the following commands to create models with migrations:

php artisan make:model ProductCategory -m
php artisan make:model Product -m

Update Migrations:

ProductCategory Migration: (database/migrations/YYYY_MM_DD_create_product_categories_table.php)

public function up()
{
    Schema::create('product_categories', function (Blueprint $table) {
        $table->id();
        $table->string('name')->unique();
        $table->text('description')->nullable();
        $table->timestamps();
    });
}

Product Migration: (database/migrations/YYYY_MM_DD_create_products_table.php)

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->text('description')->nullable();
        $table->decimal('price', 10, 2);
        $table->foreignId('product_category_id')->constrained()->onDelete('cascade');
        $table->timestamps();
    });
}

Model Relationships

ProductCategory Model: (app/Models/ProductCategory.php)

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class ProductCategory extends Model
{
    protected $fillable = ['name', 'description'];

    public function products()
    {
        return $this->hasMany(Product::class);
    }
}

Product Model: (app/Models/Product.php)

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = ['name', 'description', 'price', 'product_category_id'];

    public function category()
    {
        return $this->belongsTo(ProductCategory::class, 'product_category_id');
    }
}

Run Migrations

Apply the database changes:

php artisan migrate

✅ This creates two tables: product_categories and products.

💡 Next Step: With the database schema and relationships set up, we'll move on to the controller logic for rendering products.

🟢 4. Controller Logic for Rendering Products

With our models and database ready, we'll now build a controller to retrieve and render products efficiently while avoiding the N+1 query problem using Laravel's eager loading.

The N+1 query problem occurs when a database query retrieves a list of records, and then for each record, it runs additional queries to retrieve related data. This results in one query to fetch the main data (the "1" query) and then one additional query for each related record (the "N" queries). The N+1 query is non performant and inefficient because it leads to a large number of database queries, which increases the load on the database and slows down performance.

Create Product Controller

Generate the controller:

php artisan make:controller ProductController

Open app/Http/Controllers/ProductController.php and add the following:

namespace App\Http\Controllers;

use App\Models\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    // Fetch all products with categories
    public function index()
    {
        // Eager loading to avoid N+1 problem
        $products = Product::with('category')->get();

        return response()->json($products);
    }
}

N+1 Query Problem: Without Eager Loading

If you fetch products without eager loading:

$products = Product::all();
foreach ($products as $product) {
    echo $product->category->name;
}

🔴 Generated SQL (Inefficient):

-- Fetch products (1 query)
SELECT  FROM products;

-- Separate query for each product's category (N queries)
SELECT  FROM product_categories WHERE id = 1;
SELECT  FROM product_categories WHERE id = 2;
SELECT  FROM product_categories WHERE id = 3;

📦 Resulting Data (Without Eager Loading):

[
    {
        "id": 1,
        "name": "Smartphone",
        "description": "Latest Android smartphone.",
        "price": "699.99",
        "product_category_id": 1
    },
    {
        "id": 2,
        "name": "Laptop",
        "description": "High-performance laptop.",
        "price": "1299.99",
        "product_category_id": 1
    }
]

Problem: To access $product->category->name, Laravel runs a separate query for each product, causing multiple database hits.

Solution: With Eager Loading

Update the controller to use Eager Loading:

$products = Product::with('category')->get();

Generated SQL (Efficient):

-- Single query for products
SELECT  FROM products;

-- Single query for all related categories
SELECT  FROM product_categories WHERE id IN (1, 2, 3);

📦 Resulting Data (With Eager Loading):

[
    {
        "id": 1,
        "name": "Smartphone",
        "description": "Latest Android smartphone.",
        "price": "699.99",
        "product_category_id": 1,
        "category": {
            "id": 1,
            "name": "Electronics",
            "description": "Gadgets and devices"
        }
    },
    {
        "id": 2,
        "name": "Laptop",
        "description": "High-performance laptop.",
        "price": "1299.99",
        "product_category_id": 1,
        "category": {
            "id": 1,
            "name": "Electronics",
            "description": "Gadgets and devices"
        }
    }
]

🟣 Performance Comparison:

Aspect	Without Eager Loading	With Eager Loading
Number of Queries	1 + N (1 per product)	2 (Products + Categories)
Query Efficiency	Slow (multiple hits)	Fast (batched)
Result Structure	Flat (No relations)	Nested (Relations loaded)
Memory Usage	Higher	Lower

Loading multiple relationships:

Product::with(['category', 'supplier'])->get();

💡 Next Step: Now that products load efficiently, we'll move on to Integrating AnyGridJS to display this data in the frontend.

🟢 5. Creating the Product View with AnyGridJS

Update Controller to Pass Data to View

In ProductController.php, update the index method to pass products to the view:

public function index()
{
    $products = Product::with('category')->get();
    return view('shop.products', compact('products'));
}

Create the Blade View for Displaying Products

Create the resources/views/shop/products.blade.php file:

@extends('layouts.app')
@section('content')
    <h1>Product Listings</h1>

    <!-- AnyGrid Container:: The data table will be rendered here -->
    <div id="anygrid"></div>

    <script type="module">
        // Pass Laravel data to JavaScript
        const data = @json($products);

        // Define columns for AnyGrid
        const columns = [
    { name: 'id', header: 'ID', sortable: true },
    { name: 'name', header: 'Product Name', sortable: true },
    { name: 'price', header: 'Price', render: (value) => `R ${value}` },
    { name: 'category_id', header: 'Category', render: (value, row) => row.category ? row.category.name : 'N/A' },
    { name: 'created_at', header: 'Created Date', sortable: true,
    {
        name: 'actions',
        header: 'Actions',
        actions: [
            {
                label: 'EDIT',
                url: 'products/edit/{id}',
                class: 'edit',
                id: 'edit-{id}',
            },
            {
                label: 'DELETE',
                url: 'products/delete/{id}',
                class: 'delete',
                id: 'delete-{id}',
                confirm: true,
            },
            {
                label: 'VIEW',
                url: 'products/view/{id}',
                class: 'view',
                id: 'view-{id}',
            },

            },

        ]
    }
];


        // AnyGrid features and settings
        const features = {
            initialItemsPerPage: 20,
            csvExport: true,
            excelExport: true,
            theme: 'dark'
        };

        // Initialize AnyGrid
        new AnyGrid(data, columns, features);
    </script>


@endsection

Update Routes to Load the View

In routes/web.php:

use App\Http\Controllers\ProductController;

Route::get('/products', [ProductController::class, 'index']);

Final Result

Conclusion:

In this tutorial, we covered the essentials of integrating AnyGridJS with a Laravel application to display relational data dynamically. We walked through:

Setting up Laravel with the required models and migrations for an ecommerce scenario (products and categories).
Using eager loading to efficiently fetch related data and avoid the N+1 query problem.
Integrating AnyGridJS to display data in a user-friendly grid with features like pagination, sorting, and export options.
Configuring action buttons for editing, deleting, and viewing products directly within the grid.

With these foundational steps, you can now build more interactive and performant data tables for your Laravel applications.

Learn More

To learn more about AnyGridJS, visit our GitHub repository.

You can also visit the AnyGridJS website for further documentation and resources.