Adding a grid simply requires you to add a block with pre-built PHTML template to your own XML layout file and adding a few arguments to it.
Within the layout file view/adminhtml/layout/example.xml, add the following:
<?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\Catalog\Api\ProductRepositoryInterface</argument>
</arguments>
</block>
</referenceContainer>
</body>
</page>
As a block name, we strongly recommend to prefix your own block (grid) with a vendor yireo-training) and module name example-admin. There are perhaps other things that you want to add to the page, like a title. But that's not needed for this scope.
By using the XML layout handle loki_admin_components_grid (as shown in the code above), the behaviour for admin grids is imported into your own layout.
As you can see, you define your own grid block, while reusing the PHTML template of the Loki_AdminComponents module. The provider needs to point a class or a classname. In this example, the repository is inserted as a classname (so a string), because the product repository class does not implement the required ArgumentInterface. A provider could be either repository, collection or array. The underlying logic tries its best to guess the right provider handle for the given provider. If this does not work, a friendly exception is thrown. Just see what happens.
Next, we will need to transform the grid block into a Loki Component, allowing for magic to happen on the JavaScript-level (using Alpine.js) and the PHP-level. For this, we create a file etc/loki_components.xml with the following content:
<?xml version="1.0" encoding="UTF-8" ?>
<components xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Yireo_LokiComponents:etc/loki_components.xsd">
<component
name="yireo-training.example-admin.grid"
viewModel="Loki\AdminComponents\Component\Grid\GridViewModel"
repository="Loki\AdminComponents\Component\Grid\GridRepository">
</component>
</components>
The default behaviour detects columns by looking at the first item that your provider provides. Either this includes too many fields, too few or the labels are not good enough. For this, it is normal to add additional configurations as arguments to the XML layout or to create your own ViewModel class, extending it from Loki\AdminComponents\Component\Grid\GridViewModel.
In most cases, you do not need to extend the repository class. If you want to do this, let us know first via an GitHub Issue.
If you refresh the cache, you should now have a workable grid.