PHPackages mage/gridjs - 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. mage/gridjs ActiveMagento2-module[Utility & Helpers](/categories/utility) mage/gridjs =========== Magento 2 custom React GridJS integration 5.1.11(1y ago)44457[1 PRs](https://github.com/Genaker/magento_gridjs/pulls)MITJavaScript Since Feb 29Pushed 3mo ago3 watchersCompare [ Source](https://github.com/Genaker/magento_gridjs)[ Packagist](https://packagist.org/packages/mage/gridjs)[ RSS](/packages/mage-gridjs/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)DependenciesVersions (19)Used By (0) Mage Grid Module ================ [](#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 -------- [](#features) - **Flexible Data Sources**: Support for both collection-based and SQL-based data sources - **AJAX Support**: Built-in AJAX functionality for smooth data loading - **Customizable Fields**: Easy field configuration and management - **Built-in Filtering**: Advanced filtering capabilities - **Pagination**: Automatic pagination handling - **Frontend & Backend Support**: Works in both frontend and backend contexts - **Responsive Design**: Mobile-friendly grid layout - **Customizable Templates**: Easy to override and customize templates Why Our Grid is Better Than Magento's Legacy Grid ------------------------------------------------- [](#why-our-grid-is-better-than-magentos-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 ------------------------- [](#why-this-grid-is-ai-first) Mage Grid is designed from the ground up to be **AI-first**. This means: - The codebase is structured for easy understanding and modification by AI coding assistants (like Cursor, GitHub Copilot, or ChatGPT). - Naming conventions, modularity, and documentation are optimized for AI-driven code generation and extension. - The grid is built to be easily extensible and customizable with minimal manual intervention, making it ideal for rapid prototyping and iterative development with AI tools. - Simple strait forward architecture and access to code with examples and documenttion makes it straightforward for LLMs to read, understand, and even improve your components. AI-Ready: Open code for LLMs to read, understand, and improve. 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? [](#what-makes-it-ai-first) - **Consistent, clear naming**: Classes, methods, and templates are named for discoverability and semantic search. - **Separation of concerns**: Logic, templates, and configuration are cleanly separated, so AI can suggest or generate changes in isolation. - **Extensive inline documentation**: Comments and docblocks are written to help both humans and AI understand intent and usage. - **Configurable via XML and DI**: Most features (fields, processors, templates) are configured in XML or DI, so AI can suggest changes without deep PHP edits. - **Composable processors**: The data processor system is designed for easy extension and chaining, which is ideal for AI-driven code generation. - **Template-driven UI**: UI and JS are in templates, so AI can generate or modify UI logic without touching backend code. How to Extend Mage Grid Using Cursor or AI ------------------------------------------ [](#how-to-extend-mage-grid-using-cursor-or-ai) You can use AI tools like Cursor to: - Add new data processors (e.g., for custom formatting, badges, or links) - Add or modify grid fields and templates - Inject new JS/HTML for popups, modals, or custom actions - Refactor or optimize code for performance or maintainability ### Example: Adding a Custom Data Processor with Cursor [](#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 [](#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 [](#practical-steps-for-ai-driven-extension) - Use Cursor's semantic search to find relevant classes, templates, or config files. - Use inline comments and docblocks to guide AI suggestions. - Use the modular template and processor system to add or override features without deep code changes. - Test changes iteratively, letting AI suggest fixes or improvements. **Tip:** - The more you describe your intent (in comments, commit messages, or AI prompts), the better the AI can help you extend or refactor the grid. ### AI Assistant Integration [](#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: - **Natural Language Filtering**: Users can type queries in natural language (e.g., "show orders from last week", "find orders with status pending") and the AI will convert them into appropriate filters. - **Terminal-like Interface**: When users type "select" or similar SQL-like keywords, the input field transforms into a terminal-like interface with green text on black background and a blinking cursor. - **Smart Suggestions**: Provides alternative filter suggestions when the query is ambiguous or when multiple filtering options are available. - **Context-Aware**: Takes into account current filters, pagination, and sorting when suggesting new filters. - **Error Handling**: Gracefully handles unclear queries and asks for clarification when needed. - **Performance Optimized**: Caches frequent queries and optimizes filter combinations for better performance. Installation ------------ [](#installation) 1. Copy the module to your Magento installation: ``` cp -r app/code/Mage/Grid /path/to/magento/app/code/ ``` 2. Enable the module: ``` bin/magento module:enable Mage_Grid ``` 3. Run setup upgrade: ``` bin/magento setup:upgrade ``` 4. Clear cache: ``` bin/magento cache:clean ``` Usage ----- [](#usage) ### Basic Grid Setup [](#basic-grid-setup) 1. Create a layout file (e.g., `view/adminhtml/layout/your_module_grid_index.xml`): ``` Mage\Grid\ViewModel\GenericViewModelGrid Your\Module\Model\ResourceModel\YourCollection ID Name Created At ``` 2. Create a controller (e.g., `Controller/Adminhtml/YourGrid/Index.php`): ```