Question on highlighting with nested props

[paulocr]

Hello,

Thanks for your great library! I have a question when using filters and nested props.

I am using data from GraphQL so every row data is wrapped in a node object like this:

    "node": {
            "id": 6,
            "name": "Customer 123",
            "customerNo": 8,
            "active": true,
    },
    ...

I am using a structure similar to your Hello World example trying to leverage my own version of the THFilter component.

{#each table.rows as row}
    {@const {
        name,
        customerNo
    } = row.node}
    <tr class="border shadow-xl m-2 w-full">
        <td>{@html customerNo}</td>
        <td>{@html name}</td>
    </tr>
{/each}

and

<ThFilter {table} field="customerNo" />
<ThFilter {table} field="name" />

in ThFilter.svelte I am setting up the filter like this:

let filter: any = table.createFilter((row) => row['node'][field] );

Filtering works but the highlight does not kick in, I assume the node object wrapper messes things up but I am curious if you have any ideas.

I am using the runes version and Svelte 5 by the way.

Thanks!

[vincjo]

Hello, Currently it works with litteral paths such as row.node.customerNo or row['node']['customerNo'] I parse the callback with a string convesion + regex to retrieve the path of the nested value to highlight. In your example, it returns "row['node'][field]" instead of "row['node']['customerNo']"

Highlighting is still experimental, and this is a good example of limitation.

I'm going to work on it.

[vincjo]

Finally, I didn't find a way to reconstruct the path and highlight filter results when Field definition contains variables.

For highlighting, we'll need to use a callback in ThFilter instead:

<ThFilter {table} field={row => row.node.customerNo} />
<ThFilter {table} field={row => row.node.name} />