knockoutjs can I use a component as a table row

Question

I want to use a component as a table row template, but can't seem to find a way, is this possible?

When I do the below, it doesn't put the component in the tbody, it puts it above the table.

Component

<table>
  <tbody>
     <reportingline params='name: "Phil"'></reportingline>
  </tbody>
</table>

Template

<tr>
    <td data-bind="text: col1"></td>
</tr>

Answer 1

Use the virtual component binding. This approach allows you to use your component without a wrapper element.

<table>
  <tbody>
    <!-- ko component: { name:"reportingline", params: { name: 'Phil' } } --><!-- /ko -->
  </tbody>
</table>

Answer 2

I am afraid that does not look to be possible. From the Polymer FAQ:

Until the addition of HTML <template>, certain elements like <select>, <table>, and others had special parser rules to prevent anything other than <option> and <tr> from being their children, respectively. Because of these legacy rules, browsers that don’t support <template> will lift unexpected elements out of context and make them siblings [..]

So the only way to treat custom elements as table rows — at least in some modern browsers — would be to use the HTML <template> tag, which Knockout components do not use.

Allowed elements inside <table> according to the WHATWG HTML standard document are

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total), optionally intermixed with one or more script-supporting elements.

("script-supporting elements" being <script> and <template>)

The best workaround might be to make up your own custom <table> tag as well and give it proper styling through display: table. If you do so, please consider giving it semantic meaning as well through ARIA roles such as grid.