ThFilter {handler} only filters on current page causing "undefined" error message

[mapl]

I have a json array with around 200 json items inside the array. Each of these json object has another lvl1 json objects defined, but it is empty ({}) if there is a not an additional lvl2 json object underneath.

I want to filter on the nested lvl2 element, and I needed to write an each block to filter out the "undefined" objects.

The global filter works fine, but when I use the column filter (rowsPerPage is set to 50), I get an undefined message.

When I browser through all possible pages first, the filtering works

Code Example

    <tr>
          <ThFilter {handler} filterBy={'lvl2'}/>
    </tr>
          </thead>
          <tbody>
              {#each $rows as row}
              <tr>
        {#if row.lvl1.lvl2?.value === undefined}
              <td>{row.lvl2 = ""}</td>
                {:else }
                  <td>{row.lvl2 = row.lvl1.lvl2.value}</td>
        {/if}
             </tr>
            {/each}

Is there a better way to accomplish my goal to filter on nested json objects without getting an undefined error message?

[vincjo]

You can use a callback function as a filterBy argument. Then you have access to each row object.

It could look like this :

<ThFilter
    {handler} 
    filterBy={ row => row.lvl1.lvl2 ? row.lvl1.lvl2.value : '' } 
/>

[mapl]

Thank you, that works!