Download the PHP package mage/gridjs without Composer
On this page you can find all versions of the php package mage/gridjs. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package gridjs
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
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: