У меня есть b-таблица, заголовок которой я пытаюсь преобразовать в кнопку разделения, где левая часть кнопки может сортировать строки, в то время как правая часть кнопки имеет раскрывающийся список.Вот изображение, показывающее, чего я пытаюсь достичь
Моя проблема в том, что раскрывающийся список вообще не открывается. Как сделать неупорядоченный список открытым вместо сортировки строк?когда я нажимаю на заголовок
<b-table :fields="columnDefinitions" :items="rows">
<template slot="HEAD_name" slot-scope="data">
<div class="btn-group d-flex">
<button type="button" class="btn btn-light w-100 btn-sort">
<i class="fa fa-sort-up"></i>
<span>{{data.label}}</span>
</button>
<button
type="button"
class="btn btn-light dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fa fa-filter"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<form class="px-4 py-3">
<div class="form-group">
<select class="custom-select filter-options">
<option value="1" selected>Above</option>
<option value="-1">Below</option>
<option value="0">Equal</option>
<option value="2">Between</option>
</select>
</div>
</form>
</ul>
</div>
</template>
</b-table>