Magento 2 - Custom Grid Admin Error

Question

I'm trying to display a very simple grid in Magento 2 just for practice, but it keeps giving me the same error, and I can't find where the mistake is. The grid is displayed but no records are found. The console throws the error:

Uncaught TypeError: Cannot create property '_rowIndex' on number '1'

. When I check the request http://localhost/index.php/admin/mui/index/render/key/[myKey]/?namespace=comment_listing&isAjax=true, it shows a bad formed json response:

{
"totalRecords":1,
"items":[
1,[{"comment_id":"26","product_id":"6","customer_id":"2","customer":"Pablo","comment":"test","created_at":"2017-06-12 12:44:54","updated_at":"2017-06-12 12:44:54"}]
]
}

The "1" in "items" is producing the error. I check the catalog response, and is not formed liked that, in "items" there are no numbers alone, just the records of the table. Any ideas? My listing is:

<!-- Data Config -->

<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">comment_listing.comment_listing_data_source</item>
        <item name="deps" xsi:type="string">comment_listing.comment_listing_data_source</item>
    </item>
    <item name="spinner" xsi:type="string">comment_listing_columns</item>
</argument>

<!-- Data Source -->

<dataSource name="comment_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Summa\Comment\Ui\DataProvider\Comment\CommentDataProvider</argument>
        <argument name="name" xsi:type="string">comment_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">comment_id</argument>
        <argument name="requestFieldName" xsi:type="string">comment_id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>

<!-- Columns -->

<columns name="comment_listing_columns">
    <selectionsColumn name="ids">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="indexField" xsi:type="string">comment_id</item>
            </item>
        </argument>
    </selectionsColumn>
    <column name="customer">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Customer</item>
            </item>
        </argument>
    </column>
    <column name="comment">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Comment</item>
            </item>
        </argument>
    </column>
</columns>

Answer 1

The problem seems to be in your dataprovider in file Summa\Comment\Ui\DataProvider\Comment\CommentDataProvider

You can refer method in product dataprovider.

public function getData()
{
    if (!$this->getCollection()->isLoaded()) {
        $this->getCollection()->load();
    }
    $items = $this->getCollection()->toArray();

    return [
        'totalRecords' => $this->getCollection()->getSize(),
        'items' => array_values($items),
    ];
}

Answer 2

Define your DataProvider as virtual type

<!-- This is required to use default data_provider in listing. -->
<!-- This Virtual Type MUST be declared in etc/di.xml but not in etc/adminhtml/di.xml -->
<virtualType name="VendorCollection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
    <arguments>
        <argument name="mainTable" xsi:type="string">mytable_vendor</argument>
        <argument name="resourceModel" xsi:type="string">CustomVendor\Vendors\Model\ResourceModel\Vendor</argument>
    </arguments>
</virtualType>
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="vendors_listing_data_source" xsi:type="string">VendorCollection</item>
        </argument>
    </arguments>
</type>

Use base data provider in your UI component (view/adminhtml/ui_component/vendors_listing.xml):

<dataSource name="vendors_listing_data_source" component="Magento_Ui/js/grid/provider">
    <settings>
        <storageConfig>
            <param name="indexField" xsi:type="string">vendor_id</param>
        </storageConfig>
        <updateUrl path="mui/index/render"/>
    </settings>
    <dataProvider class="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider" name="vendors_listing_data_source">
        <settings>
            <primaryFieldName>vendor_id</primaryFieldName>
            <requestFieldName>vendor_id</requestFieldName>
        </settings>
    </dataProvider>
</dataSource>