Bootstrap-vue table with :filter-included-fields not working

Question

I need help in bootstrap-vue table, if im filtering field 'created_by' , filter-included-fields is working, but if im filtering 'memberinfo.age' , filter-included-fields is not working

Table code:

<b-table id="my-table"
  :items="allMember.data"
  :per-page="perPage"
  :current-page="currentPage"
  :fields="fields"
  :filter="filter"
  @filtered="onFiltered"
  :filter-included-fields="['memberinfo.age']"
>
</b-table>

This is my fields

  fields: [
    'selected',
    { key: 'memberinfo.fullname', label: 'Full Name' },
    { key: 'memberinfo.address', label: 'address' },
    { key: 'memberinfo.age', label: 'age' },
    { key: 'memberinfo.gender', label: 'gender' }
    {
      key: 'created_at',
      label: 'Date register',
      formatter: value => {
        return value.substring(0, 10)
      }
    }

This is my allMember.data

[
   {
      "id":1,
      "email_address":"[email protected]",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Kade Heidenreich MD",
         "address":"42316 Elvie Mission Suite 938\nNorth Johnathan, IL 50463-0481",
         "age":27
         "gender":"Female"
      }
   },
   {
      "id":2,
      "email_address":"[email protected]",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Jovan Beatty II",
         "address":"1996 Olson Highway\nKubport, ID 35064-7977",
         "age":27,
         "gender":"Female"
      }
   },
   {
      "id":3,
      "email_address":"[email protected]",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Sheila Emmerich",
         "address":"88080 Ed Corner Apt. 702\nKrajcikton, OK 50658-1519",
         "age":27,
         "gender":"Male"
      }
   },
   {
      "id":4,
      "email_address":"[email protected]",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Yesenia Rau",
         "address":"776 Hilpert Club Suite 853\nStreichberg, MA 78250",
         "age":23,
         "gender":"Male"
      }
   },
   {
      "id":5,
      "email_address":"[email protected]",
      "created_at":"2020-10-11T05:09:17.000000Z",
      "memberinfo":{
         "fullname":"Junior Eichmann IV",
         "address":"61705 Watsica Motorway Suite 816\nStrackeside, VA 61128-8080",
         "age":27,
         "gender":"Male"
      }
   }
]

Answer 1

Just use the member info object

 :filter-included-fields="['memberinfo']">

Answer 2

The filter-include-fields and filter-ignored-fields props only work on top level properties, as mentioned on the docs here

You would have to write a custom filter function, to accomplish what you're trying to do.