Quick start · Grids
Create an admin grid
A Nebula listing is a JSON file bound to a Magento collection plus one layout block. Columns, filters, sorting, paging, mass actions and row actions come for free — no data-provider PHP for the standard case.
Quick Start
Create a grid in 2 steps
A working admin listing is a JSON file and a layout block — no UI-component XML, no KnockoutJS, no JavaScript build step.
Shortcut
bin/magento nebula:generate:gridscaffolds both files for you1
Define the grid
view/adminhtml/grid/blog_post_listing.json
Columns, filters, sorting, paging and row actions — bound straight to a Magento collection via the built-in grid.collection provider. No PHP.
{
"id": "blog_post_listing",
"acl": "Acme_Blog::post",
"dataSource": {
"provider": "grid.collection",
"config": { "collection": "Acme\\Blog\\Model\\ResourceModel\\Post\\Collection" }
},
"settings": {
"pageSize": 20,
"defaultSort": { "field": "post_id", "direction": "desc" },
"addButton": { "label": "Add New Post", "url": "blog/post/new" }
},
"columns": {
"post_id": { "label": "ID", "type": "text", "sortable": true, "filter": "range", "position": 10 },
"title": { "label": "Title", "type": "text", "sortable": true, "filter": "text", "position": 20 },
"is_active": {
"label": "Status",
"type": "badge",
"options": { "1": { "label": "Published", "class": "success" }, "0": { "label": "Draft", "class": "error" } },
"filter": "select",
"filterOptions": { "1": "Published", "0": "Draft" },
"position": 30
},
"actions": {
"label": "",
"type": "actions",
"actions": [ { "label": "Edit", "url": "blog/post/edit/id/{{post_id}}" } ],
"position": 999
}
}
}Schema-backed · grid.schema.json (Draft 2020-12)
2
Wire it into a layout
view/adminhtml/layout/blog_post_index.xml
Drop the NebulaGrid block onto your controller’s layout handle and pass the grid_id. Add <referenceBlock name="legacy_grid" remove="true"/> to replace an old grid.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="Qoliber\NebulaGrid\Block\Grid" name="nebula.blog_post_listing">
<arguments>
<argument name="grid_id" xsi:type="string">blog_post_listing</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>Run bin/magento nebula:lint and refresh the admin — you're done.