Download the PHP package mage/grid without Composer

On this page you can find all versions of the php package mage/grid. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of mage/grid

Informations about the package grid

Mage Grid Module

A powerful and flexible grid system for Magento 2 that provides an easy way to create and manage data grids in the admin panel.

Features

Why Our Grid is Better Than Magento's Legacy Grid

Our grid implementation offers several advantages over Magento's legacy grid system:

  1. Modern Technology Stack:

    • Uses GridJS, a modern JavaScript grid library
    • Built with Preact for efficient rendering
    • Supports modern JavaScript features and async/await

  2. Better Performance:

    • Lighter weight than Magento's legacy grid
    • Faster rendering and data loading
    • Reduced server load with client-side processing

  3. Enhanced Flexibility:

    • Easy to customize columns and cells
    • Support for both collection and SQL-based data sources
    • Simple integration with Magento's UI components

  4. Improved Developer Experience:

    • Cleaner code structure
    • Better separation of concerns
    • Easier to extend and maintain

  5. Better User Experience:

    • Smoother interactions
    • More responsive interface
    • Better mobile support

  6. Advanced Features:

    • Built-in AJAX support
    • Advanced filtering capabilities
    • Custom cell renderers
    • Dynamic data loading
  7. Integration with Magento:
    • Seamless integration with Magento's admin panel
    • Support for Magento's UI components
    • Compatible with Magento's theming system

Why This Grid is AI-First

Mage Grid is designed from the ground up to be AI-first. This means:

The design of the Mage Grids makes it easy for AI tools to work with your code. Its open code and simple API allow AI models to read, understand, and generate new components.

What Makes It AI-First?

How to Extend Mage Grid Using Cursor or AI

You can use AI tools like Cursor to:

Example: Adding a Custom Data Processor with Cursor

  1. Describe your goal in Cursor:
    • "Add a processor that renders the 'priority' field as a colored badge."
  2. Let Cursor search for DataProcessorInterface and StatusProcessor.
  3. Cursor generates a new PriorityProcessor.php:
    • Implements the interface, adds color logic, and registers in di.xml.
  4. Update your layout XML to map the 'priority' field to the new processor.

Example: Adding a Popup with AI

  1. Describe your goal:
    • "Add a popup that shows full row details when the 'Order Number' cell is clicked."
  2. AI suggests a new JS function and a template snippet.
  3. Add the JS to an additional-html.phtml template and configure it in layout XML.
  4. AI updates the grid template to include the new popup logic.

Practical Steps for AI-Driven Extension

Tip:

AI Assistant Integration

The Mage Grid module includes an advanced AI Assistant that helps users interact with the grid using natural language queries. The AI Assistant:

Installation

  1. Copy the module to your Magento installation:

  2. Enable the module:

  3. Run setup upgrade:

  4. Clear cache:

Usage

Basic Grid Setup

  1. Create a layout file (e.g., view/adminhtml/layout/your_module_grid_index.xml):

  2. Create a controller (e.g., Controller/Adminhtml/YourGrid/Index.php):

Custom Column Cells with Preact

The module uses GridJS with Preact for rendering custom column cells. Here's how to create custom column cells:

  1. Basic Custom Column:

  2. Complex Custom Column with Magento Integration:

  3. Custom Column with AJAX Data:

  4. Custom Column with Magento UI Components:

  5. Custom Column with Magento Form Elements:

Configuration Options

The grid supports various configuration options:

  1. Collection-based Grid:

  2. SQL-based Grid:

  3. Field Configuration:

  4. Pagination:

  5. Filters:

Customization

  1. Override Template: Create your own template at view/adminhtml/templates/grid/grid-component.phtml

  2. Custom ViewModel: Extend GenericViewModelGrid to add custom functionality:

Customizing the Grid Component Template

The module uses a template file at view/adminhtml/templates/grid/grid-component.phtml that you can customize. Here are some examples:

  1. Basic Custom Column with Formatter:

  2. Custom Column with Actions:

  3. Custom Column with Magento UI Components:

  4. Custom Column with Dynamic Data Loading:

  5. Custom Column with Form Elements:

  6. Custom Column with Filtering:

Security

The module includes built-in security features:

Support

For support, please contact:

License

This module is licensed under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Magento 2 Data GridsJS

GridJS and DataTable integration with Magento 2

Grid.js(https://gridjs.io/) is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.

Grid.js uses Preact to render the elements and that means that you can take advantage of Preact's Virtual DOM and render complex cells.

DataTable integration with magento

DataTables (https://datatables.net/) is a Javascript HTML table-enhancing library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

At First, GridJS was integrated, but after DataTable was added.

All extensions come as jQuery plugins but can work independently.

I also have AG Grid integration for Magento 2 but it is not part of this open source solution. The Best JavaScript Grid in the World The professional choice for developers building enterprise applications

This and all other magento extensions based on this revolutionary extension: https://github.com/Genaker/reactmagento2 it allows running magento without MAgento broken JS and uses better modern solutions

Installation:

usage in Admin Area:

Examples: After installation, examples will be embedded at the bottom of the admin dashboard

image

image

Source code of the grid

More Examples GridJS

In this examples, we load the data from an existing HTML table

Grid.js can also convert an HTML table. Simply select the table with jQuery and call Grid:

$("table#myTable").Grid();

You can pass all Grid.js configs to the Grid function. See Grid.js Config for more details.

HTML in cells

Then you can use that in formatter function or directly in data array:

Import server-side data

You can use the server property to load data from a remote server and populate the table:

Server Side Pagination

Add server property to the pagination config to enable server-side pagination. Also, make sure the total property is correctly defined in the main server config block

DataTable example

Loading data

Ajax data is loaded by DataTables simply by using the ajax option to set the URL for where the Ajax request should be made. For example, the following shows a minimal configuration with Ajax sourced data:

JSON data source

When considering Ajax loaded data for DataTables we almost always are referring to a JSON payload - i.e. the data that is returned from the server is in a JSON data structure. This is because the JSON is derived from Javascript and it therefore naturally plays well with Javascript libraries such as DataTables.

Non-jQuery options

If you are initialising DataTables through the new DataTable() option available in DataTables 1.11, you can pass configuration options in using the second parameter of the constructor:

Data rendering

Data within DataTables can be easily rendered to add graphics or colour to your tables, as demonstrated in the example on this page. These examples make use of columns.render to customise the cells in three ways: image

Data Processors System

Mage Grid uses a flexible and extensible data processor system to transform and format grid cell values before rendering. This allows you to easily customize how each field is displayed, including adding HTML, formatting dates, prices, statuses, and more.

Dual Processor Configuration

The module supports two ways to configure data processors:

  1. Layout XML Configuration (grid_grid_index.xml):

  2. DI Configuration (di.xml):

Processor Resolution Order

  1. Layout XML processors take precedence over DI configuration
  2. If no processor is found in either location, the default processor is used
  3. Processors can be chained using the ChainProcessor

Example: Combined Configuration

Processor Types

  1. Default Processors:

    • DefaultProcessor: Basic HTML escaping
    • StatusProcessor: Status badge rendering
    • PriceProcessor: Price formatting
    • DateProcessor: Date/time formatting
    • ObfuscateProcessor: Data obfuscation
  2. Custom Processors:
    • Implement Mage\Grid\Api\DataProcessorInterface
    • Register in either layout XML or DI configuration
    • Can be grid-specific or global

Example: Custom Processor

Chain Processor

The ChainProcessor allows you to combine multiple processors:

Best Practices

  1. Use layout XML processors for grid-specific customizations
  2. Use DI configuration for global processors
  3. Keep processors focused on a single responsibility
  4. Use the chain processor for complex transformations
  5. Document processor behavior and dependencies

Additional HTML/JS Templates (Popups, Custom Scripts, etc.)

Mage Grid allows you to inject additional HTML or JavaScript into your grid page using configurable template files. This is useful for adding custom popups, event handlers, or any extra markup/scripts you need for your grid.

How to Use

  1. Create your additional template(s):

    • Place your custom HTML/JS in .phtml files, e.g.:
      • view/adminhtml/templates/grid/additional-html.phtml
      • view/adminhtml/templates/grid/another-additional-html.phtml

  2. Configure in layout XML:

    • You can specify one or more additional templates using the additional_html_templates argument:

    • The block will render each template in order. If a template is missing, an error message will be shown for that template.
  3. Access in your main grid template:
    • In your main grid template (e.g. grid-component.phtml), output the additional HTML:

Example: Popup Event Handler Integration

If you want to add a popup that shows row details when a status badge is clicked, your additional-html.phtml might look like:

Important:

Error Handling

Filter Types

The Mage Grid module supports several types of filters that can be configured via layout XML:

Available Filter Types

  1. Text Input Filter
  1. Select Filter
  1. Multiselect Filter

Filter Features

Example Configuration

Full example of filter configuration in layout XML:

Custom Source Model

Example of a custom source model for filters:

JavaScript Events

The grid filters emit several events that you can listen to:

Replacing GridJS with Alternative Grid Systems

The Mage Grid module is designed to be flexible and allows you to replace GridJS with any other grid system. Here's how to implement alternative grid solutions:

1. DataTables Integration

To use DataTables instead of GridJS:

  1. Create a new template (view/adminhtml/templates/grid/datatable-component.phtml):

  2. Update your layout XML to use the new template:

2. Simple HTML Table

For a basic HTML table without JavaScript:

  1. Create a new template (view/adminhtml/templates/grid/simple-table.phtml):

3. Custom Grid System

To implement your own grid system:

  1. Create a new template with your preferred grid library

  2. Use the block's methods to get data and configuration:

    • getFieldsNames(): Get field labels
    • getGridJsonData(): Get grid data as JSON
    • getFieldsConfig(): Get field configurations
    • getProcessedFields(): Get processed field data
    • getFiltersHtml(): Get rendered filters
  3. Implement your own JavaScript to handle:
    • Data loading
    • Pagination
    • Sorting
    • Filtering

Key Components to Override

When replacing GridJS, you mainly need to focus on:

  1. Template File: Create your own grid-component.phtml
  2. JavaScript: Implement your grid initialization
  3. CSS: Add your grid styling
  4. Data Processing: Use the existing processor system

The rest of the module (data loading, filtering, processing) remains unchanged.

Example: Using AG Grid

Best Practices

  1. Keep Data Processing: Use the existing processor system for consistent data formatting
  2. Maintain Filter Integration: Keep the filter system for consistent filtering
  3. Preserve Field Configuration: Use the existing field configuration system
  4. Handle Server-Side Operations: Implement proper server-side pagination and filtering
  5. Maintain Responsiveness: Ensure your grid works well on all devices

Performance Monitoring & Optimization

The module includes built-in performance metrics to help you monitor and optimize your grid's performance:

Performance Metrics Panel

The grid displays real-time performance metrics including:

These metrics are displayed in the performance panel below the grid and are color-coded:

Performance Optimization

If you notice performance issues (red indicators), here are some steps to optimize:

  1. Query Optimization

    • Review your SQL queries using the Magento profiler
    • Add appropriate indexes to frequently filtered columns
    • Consider implementing query caching

  2. Data Loading

    • Implement server-side pagination
    • Use lazy loading for large datasets
    • Consider implementing data caching
  3. Grid Configuration
    • Reduce the number of columns if possible
    • Use efficient column formatters
    • Implement proper filtering strategies

AI-Powered Optimization

For advanced optimization, you can ask our AI assistant:

The AI will:

AI will provide specific recommendations based on your metrics

Remember: Regular performance monitoring and optimization is key to maintaining a responsive and efficient grid system.

API Endpoints

The module provides REST API endpoints for accessing grid data programmatically:

Available Endpoints

  1. Get Grid Data

    Parameters:

    • gridId: Identifier of the grid
    • filters: Array of filter criteria (optional)
    • page: Page number (default: 1)
    • pageSize: Items per page (default: 20)

    Response:

  2. Get Grid Configuration

    Returns the grid's configuration including:

    • Column definitions
    • Default settings
    • Available filters

  3. Get Grid Fields

    Returns the list of available fields and their configurations.

  4. Get Grid Filters

    Returns the available filter options for the grid.

Authentication

All API endpoints require authentication using Magento's standard authentication methods:

Example Usage

Performance Monitoring

The API response includes performance metrics to help monitor and optimize grid performance:

Error Handling

The API uses standard HTTP status codes and returns detailed error messages:

Rate Limiting

To protect the server, API requests are rate-limited:

Best Practices

  1. Caching

    • Cache responses when possible
    • Use ETags for conditional requests
    • Implement client-side caching

  2. Pagination

    • Always use pagination for large datasets
    • Keep page size reasonable (20-50 items)
    • Use cursor-based pagination for large datasets

  3. Filtering

    • Use specific filters to reduce data size
    • Combine multiple filters when needed
    • Cache common filter combinations
  4. Error Handling
    • Implement proper error handling
    • Use exponential backoff for retries
    • Log errors for monitoring

All versions of grid with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package mage/grid contains the following files

Loading the files please wait ....