How is a backend grid implemented?

dmitrii_fediuk · April 2, 2016, 4:47pm

magento/magento2/blob/1f7a63dc97/app/code/Magento/Ui/view/base/web/templates/grid/listing.html#L7-L22


<div class="admin__data-grid-wrap" data-role="grid-wrapper">
<table class="data-grid" data-role="grid">
   <thead>
        <tr each="data: getVisible(), as: '$col'" render="getHeader()"/>
    </thead>
    <tbody>
        <tr class="data-row" repeat="foreach: rows, item: '$row'" css="'_odd-row': $index % 2">
            <td outerfasteach="data: getVisible(), as: '$col'"
                css="getFieldClass($row())" click="getFieldHandler($row())" template="getBody()"/>
        </tr>
        <tr ifnot="hasData()" class="data-grid-tr-no-data">
            <td attr="colspan: countVisible()" translate="'We couldn\'t find any records.'"/>
        </tr>
    </tbody>
</table>
</div>

github.com

magento/magento2/blob/1f7a63dc97/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml#L109-L127


<columns class="Magento\Ui\Component\Listing\Columns">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/listing</item>
            <item name="componentType" xsi:type="string">columns</item>
            <item name="storageConfig" xsi:type="array">
                <item name="provider" xsi:type="string">ns = ${ $.ns }, index = bookmarks</item>
                <item name="namespace" xsi:type="string">current</item>
            </item>
            <item name="childDefaults" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">ns = ${ $.ns }, index = bookmarks</item>
                    <item name="root" xsi:type="string">columns.${ $.index }</item>
                    <item name="namespace" xsi:type="string">current.${ $.storageConfig.root }</item>
                </item>
            </item>
        </item>
    </argument>
</columns>

Further reading: How is the a backend product grid implemented?