The answer just a concept and i don't have enough time to provide full example, but hope this will help to understand a concept.
1. Custom Column Ui Component
You need to create a custom column element for your second filter and extend for example Magento_Ui/js/grid/columns/select
. You still can use native template.
define([
'Magento_Ui/js/grid/columns/select',
'uiRegistry',
'underscore'
], function (Select, registry, _) {
'use strict';
return Select.extend({
defaults: {
sourceFilter: '', // the name of primary filter
sourceFilterUi: null,
allOptions: [], // all available options
},
initConfig: function () {
this._super();
// maybe in some cases need to use defer for wait for element
this.sourceFilterUi = registry.get(this.parent + '.' + this.sourceFilter);
// store all options and reset applicable
this.allOptions = this.options;
this.options = [];
// track source changes
if (this.sourceFilterUi) {
this.sourceFilterUi.value.subscribe(this.sourceChanged.bind(this));
}
// here you can add logic check source value and rebuild options (loaded from bookmark, etc)
},
sourceChanged: function(value) {
// value might be undefined, string or array depends on parent source
// store current value
let old_value = this.values(), value;
// generate applicable options
let new options = [];
_.each(this.allOptions, function(option) {
if (option.parent == value) {
options.push(option);
}
if (old_value == option.value) {
value = option.value;
}
});
// update options
this.options(options);
// restore value after update options
if (value) {
this.value(value);
}
}
});
});
2. Filter in listing
You need to define custom filter for listing and disable original filter
<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<listingToolbar name="listing_top">
<filters name="listing_filters">
<filterSelect name="second_filter" provider="${ $.parentName }"
component="Acme_StackExchange/js/grid/filters/elements/select-deps">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sourceFilter" xsi:type="string" translate="true">first_filter</item>
</item>
</argument>
<settings>
<options class="Acme\StackExchange\Ui\Component\Listing\Columns\Second\Options"/>
<!-- ... -->
</settings>
</filters>
</listingToolbar>
</listing>
3. Create custom options with relations
// ...
class Options implements OptionSourceInterface
{
// ...
public function toOptionArray(): array
{
return [
[
'label' => __('Label'),
'value' => 'value',
'parent' => 'parent',
],
// ...
];
}
}