To add data to your own grid, you will need to supply a provider argument to the XML layout block definition. This provider is vital for the Loki AdminComponents to detect data and structure for building the grid.
The following XML layout shows a grid block that is created by pointing to a provider Magento\Catalog\Api\ProductRepositoryInterface.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
<update handle="loki_admin_components_grid"/>
<body>
<referenceContainer name="content">
<block
name="yireo-training.example-admin.grid"
template="Loki_AdminComponents::grid.phtml">
<arguments>
<argument name="provider" xsi:type="string">Magento\Eav\Model\ResourceModel\Entity\Type\Collection</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
Technically speaking, the collection provider is the easest to work with, because it gives easy access to both structure (via the resource model) and data (via the resource model and data model).
The following XML layout shows a grid block that is created by pointing to a provider Magento\Catalog\Api\ProductRepositoryInterface.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block
name="yireo-training.example-admin.grid"
template="Loki_AdminComponents::grid.phtml">
<arguments>
<argument name="provider" xsi:type="string">Magento\Catalog\Api\ProductRepositoryInterface</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
The provider class in this case is a repository class with a method getList(SearchCriteria $searchCriteria): SearchResults and this method is used by LokiAdminComponents to fill the grid.
If you have custom data which can not be retrieved by either using a collection or a provider, another option is to add a custom class for exactly that logic and which returns simply an array to the grid.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
<update handle="loki_admin_components_grid"/>
<body>
<referenceContainer name="content">
<block
name="yireo-training.example-admin.grid"
template="Loki_AdminComponents::grid.phtml">
<arguments>
<argument name="provider" xsi:type="string">YireoTraining\ExampleAdmin\Provider\ArrayProvider</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
Next, create the array provider class (in the example above, YireoTraining\ExampleAdmin\Provider\ArrayProvider. This class needs to implement the interface Loki\AdminComponents\Provider\ArrayProviderInterface. In the following example, composer packages are fetched from the Yireo Composer API and displayed in a grid.
<?php
declare(strict_types=1);
namespace YireoTraining\ExampleAdmin\Provider;
use GuzzleHttp\Client;
use Loki\AdminComponents\Provider\ArrayProviderInterface;
class ArrayProvider implements ArrayProviderInterface
{
public function __construct(
private Client $client
) {
}
public function getColumns(): array
{
return [
'package_name' => 'Composer package',
'version' => 'Version',
'release_date' => 'Release date'
];
}
public function getData(): array
{
$response = $this->client->get('https://composer.yireo.com/packages.json');
$composerData = json_decode($response->getBody()->getContents(), true);
$rows = [];
foreach ($composerData['packages'] as $packageName => $packageVersions) {
foreach ($packageVersions as $packageVersion) {
if (str_starts_with($packageVersion['version'], 'dev-')) {
continue;
}
$rows[] = [
'package_name' => $packageName,
'version' => $packageVersion['version'],
'release_date' => $packageVersion['release_date'],
];
}
}
return $rows;
}
}