3

As you can see in the below image, it is not working out for me. The template html appears above the table and not below the header as I expected.

enter image description here

What I am trying to do is create an optional filter component that works with the table data. When adding the component it should display an extra row below the header columns with inputs/button which allow you to put filters on specific columns.

So obviously I am doing something wrong, or doing something that I shouldn't. If so, how do I properly inject the template of the filter-table component?

My app.html.

   <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>City</th>
                <th>Username</th>
                <th>Email</th>
                <th>Nationality</th>
            </tr>
            <table-filter containerless></table-filter>
        </thead>
        <tbody>
            <tr>
                <td>??</td>
                <td>Name</td>
                <td>City</td>
                <td>Username</td>
                <td>Email</td>
                <td>Nationality</td>
            </tr>
        </tbody>
    <table>

My table-filter component.

// Viewmodel
@customElement('table-filter')
export class TableFilterComponent {
    // Nothing here    
}

// Template
<template>
    <tr>
        <th>Filter header 1</th>
        <th>Filter header 2</th>
        <th>Filter header 3</th>
        <th>Filter header 4</th>
        <th>Filter header 5</th>
        <th>Filter header 6</th>
    </tr>
</template>
Tom Aalbers
  • 4,574
  • 5
  • 29
  • 51
  • That's really odd. What you're trying to do makes sense to me. I repro'd the problem. I would have expected the `` to be injected directly under the header row. Will be interested to see what solutions are suggested – Sean Hunter Sep 07 '17 at 20:32

1 Answers1

7

I bet this is because <table-filter /> is not a valid element inside of a <thead /> element.

Try this and see if it works: 

<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>City</th>
        <th>Username</th>
        <th>Email</th>
        <th>Nationality</th>
    </tr>
    <tr as-element="table-filter" containerless></table-filter>
</thead>

And then just remove the <tr /> element in your custom element's template.

<template>
   <th>Filter header 1</th>
   <th>Filter header 2</th>
   <th>Filter header 3</th>
   <th>Filter header 4</th>
   <th>Filter header 5</th>
   <th>Filter header 6</th>
</template>

Finally, there are some good tips in this Github issue: https://github.com/aurelia/binding/issues/409

Ashley Grant
  • 10,879
  • 24
  • 36
  • Nice, good suggestion :D. The `as-element` is a good idea (although it generates the row without the wrapping `tr` element and just injects the `th` items directly). I'm curious why using adding `containerless` doesn't avoid the problem. I would have thought it would inject the `tr` directly. – Sean Hunter Sep 08 '17 at 06:44
  • Added a Gistrun for this as well https://gist.run/?id=0c25464002656ab1632b42c578cb04a7&sha=e551e129f678853db8dc90a1ff8aae06c34a1d13, though removing the `containerless` and using `as-element` gives the desired result :D – Sean Hunter Sep 08 '17 at 06:50
  • Yeah, take the `containerless` out, it's ignored by the browser. – Ashley Grant Sep 08 '17 at 13:43
  • Awesome. This works like a charm. Thanks Ashley! Would have met you at the Amsterdam Aurelia Event if the date didn't change ;) – Tom Aalbers Sep 08 '17 at 15:54