How can I add filter row in customer grid just like fixed PHP grid using UI component? I don't want to change any other things of UI component grid.
3 Answers
You can try below code, it's not tested though
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="displayArea" xsi:type="string">dataGridFilters</item>
<item name="dataScope" xsi:type="string">filters</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
</item>
</item>
</item>
</argument>
<filterRange name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">id</item>
<item name="label" xsi:type="string" translate="true">ID</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
</item>
</item>
</argument>
<filterInput name="from">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">from</item>
<item name="label" xsi:type="string" translate="true">from</item>
<item name="placeholder" xsi:type="string" translate="true">From</item>
</item>
</argument>
</filterInput>
<filterInput name="to">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">to</item>
<item name="label" xsi:type="string" translate="true">to</item>
<item name="placeholder" xsi:type="string" translate="true">To</item>
</item>
</argument>
</filterInput>
</filterRange>
<filterInput name="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">title</item>
<item name="label" xsi:type="string" translate="true">Title</item>
</item>
</argument>
</filterInput>
<filterRange name="created_at" class="Magento\Ui\Component\Filters\Type\DateRange">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">created_at</item>
<item name="label" xsi:type="string" translate="true">Created</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">test_lists_listing.test_lists_listing.listing_top.listing_filters</item>
</item>
</item>
</argument>
<filterDate name="from">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">from</item>
<item name="label" xsi:type="string" translate="true">From</item>
<item name="placeholder" xsi:type="string" translate="true">From</item>
<item name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
</item>
</argument>
</filterDate>
<filterDate name="to">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">to</item>
<item name="label" xsi:type="string" translate="true">To</item>
<item name="placeholder" xsi:type="string" translate="true">To</item>
<item name="dateFormat" xsi:type="string" translate="true">MM/dd/YYYY</item>
</item>
</argument>
</filterDate>
</filterRange>
<filterSelect name="status">
<argument name="optionsProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Sugarcode\Test\Model\Status</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">status</item>
<item name="caption" xsi:type="string" translate="true">Select...</item>
<item name="label" xsi:type="string" translate="true">Status</item>
</item>
</argument>
</filterSelect>
</filters>
Hope it helps.
-
1
Add below code in view/adminhtml/ui_component/yourxmlfile
Add this code below closing of </datasource>
Then run cache flush, and upgrade commands
<listingToolbar name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sticky" xsi:type="boolean">true</item>
</item>
</argument>
<bookmark name="bookmarks"/>
<columnsControls name="columns_controls"/>
<exportButton name="export_button"/>
<filters name="listing_filters" />
<filterSearch name="fulltext"/>
<paging name="listing_paging"/>
</listingToolbar>
This is not possible to add a filter like a block grid in the UI grid. Ui Component has its own filters. You can enable that by adding <filters name="listing_filters"/>
in the <listingToolbar>
Ui grid.
<listingToolbar name="listing_top"> .... <filters name="listing_filters"/> ------ </listingToolbar>