Grids and Listings

Complete Listing Configuration

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <settings>
        <spinner>listingColumns</spinner>
        <deps>
            <dep>listing.listing_columns</dep>
            <dep>listing.listing_filters</dep>
            <dep>listing.listing_paging</dep>
        </deps>
    </settings>

    <!-- Data Source -->
    <dataSource name="listing_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/data/provider</item>
            </item>
        </argument>
        <settings>
            <updateUrl path="mui/index/render"/>
        </settings>
        <dataProvider class="Magento\Ui\Model\DataProvider" name="listing_data_source"/>
    </dataSource>

    <!-- Mass Actions -->
    <massactions name="listing_massactions">
        <action name="delete">
            <settings>
                <url path="*/delete"/>
            </settings>
        </action>
    </massactions>

    <!-- Paging -->
    <paging name="listing_paging">
        <settings>
            <perPageOptions>
                <option name="20" xsi:type="string">20</option>
                <option name="50" xsi:type="string">50</option>
                <option name="100" xsi:type="string">100</option>
            </perPageOptions>
            <defaultPerPage>20</defaultPerPage>
        </settings>
    </paging>

    <!-- Columns -->
    <listingColumns name="listing_columns"/>

    <!-- Filters -->
    <listingFilters name="listing_filters"/>
</listing>

Listing JavaScript

// Magento_Ui/js/grid/listing
define([
    'Magento_Ui/js/grid/listing',
    'mage/url'
], function (Listing, url) {
    'use strict';

    return Listing.extend({
        defaults: {
            provider: 'listing_data_source',
            colsProvider: 'listing.listing_columns',
            controlStr: 'listing.listing_columns.controls',
            templates: {
                record: 'Magento_Ui/grid/record'
            }
        },

        getData: function () {
            return this.elems();
        }
    });
});

Column Types and Classes

<!-- Text column -->
<column name="name" class="Magento\Ui\Component\Listing\Columns\Column">
    <settings>
        <filter>text</filter>
        <dataType>text</dataType>
        <label translate="true">Name</label>
    </settings>
</column>

<!-- Select column -->
<column name="status" class="Magento\Ui\Component\Listing\Columns\Column\Select">
    <settings>
        <filter>select</filter>
        <dataType>select</dataType>
        <label translate="true">Status</label>
        <options>
            <option name="1" xsi:type="array">
                <item name="value" xsi:type="string">1</item>
                <item name="label" xsi:type="string">Enabled</item>
            </option>
            <option name="0" xsi:type="array">
                <item name="value" xsi:type="string">0</item>
                <item name="label" xsi:type="string">Disabled</item>
            </option>
        </options>
    </settings>
</column>

<!-- Date column -->
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
    <settings>
        <filter>dateRange</filter>
        <dataType>date</dataType>
        <label translate="true">Created At</label>
    </settings>
</column>

<!-- Price column -->
<column name="price" class="Magento\Ui\Component\Listing\Columns\Price">
    <settings>
        <filter>textRange</filter>
        <dataType>number</dataType>
        <label translate="true">Price</label>
        <bodyTmpl>ui/grid/cells/price</bodyTmpl>
    </settings>
</column>

<!-- Actions column -->
<column name="actions" class="Magento\Ui\Component\Listing\Columns\Column\ActionColumn">
    <settings>
        <bodyTmpl>ui/grid/cells/actions</bodyTmpl>
    </settings>
    <action name="edit">
        <settings>
            <url path="*/*/edit"/>
            <label translate="true">Edit</label>
        </settings>
    </action>
</column>

Filter Types

<listingFilters name="listing_filters">
    <filterType name="text" class="Magento\Ui\Component\Filters\Type\Text"/>
    <filterType name="select" class="Magento\Ui\Component\Filters\Type\Select"/>
    <filterType name="dateRange" class="Magento\Ui\Component\Filters\Type\DateRange"/>
    <filterType name="numberRange" class="Magento\Ui\Component\Filters\Type\NumberRange"/>
    <filterType name="boolean" class="Magento\Ui\Component\Filters\Type\Boolean"/>
</listingFilters>

Custom Filter

namespace Vendor\Module\Ui\Component\Filter;

class CustomFilter extends \Magento\Ui\Component\Filter
{
    public function getFilterData(): array
    {
        $value = $this->request->getParam($this->getData('name'));

        if ($value) {
            return [
                'field' => $this->getData('dataScope'),
                'value' => ['like' => '%' . $value . '%'],
                'condition_type' => 'like'
            ];
        }

        return [];
    }
}

Sorting Configuration

<listingColumns>
    <column name="name" class="Magento\Ui\Component\Listing\Columns\Column">
        <settings>
            <sorting>asc</sorting>
            <sortable>true</sortable>
        </settings>
    </column>
</listingColumns>

Pagination Component

<paging name="listing_paging">
    <settings>
        <Component>
           Magento_Ui\js\grid\paging</component>
        <perPageOptions>
            <option name="20" xsi:type="string">20</option>
            <option name="50" xsi:type="string">50</option>
            <option name="100" xsi:type="string">100</option>
        </perPageOptions>
        <defaultPerPage>20</defaultPerPage>
    </settings>
</paging>

Data Source with Join

namespace Vendor\Module\Ui\DataProvider;

class JoinDataProvider extends \Magento\Ui\Model\DataProvider
{
    public function getData(): array
    {
        $collection = $this->getCollection();

        // Join additional tables
        $collection->getSelect()->join(
            ['additional' => 'additional_table'],
            'main_table.id = additional.entity_id',
            ['additional_field']
        );

        $items = $collection->getItems();

        $result = [];
        foreach ($items as $item) {
            $result[$item->getId()] = $item->getData();
        }

        return [
            'totalRecords' => $collection->getSize(),
            'items' => $result,
        ];
    }
}

Grid Data Refresh

// Refresh grid data programmatically
var grid = registry.get('listing');
grid.reload();

// Or via data provider
var dataSource = registry.get('listing_data_source');
datasource.refresh();