Component shown out of table

components

#1

Everything in the code shown below works great , except that rows shown by the component are show out of the table that encapsulates the component. I read the documentation which says use ‘is=transaction-brief’. I tried using it in all

tags but did not works.
How can I show from the component inside the table.
In HTML I have
<table>
        <tr >
            <th>Date</th>
        </tr>
       <transaction-brief  v-for = "post in all_trans"  v-bind:ip1="post"></transaction-brief>
    </table>

In JS I have a component:

 Vue.component('transaction-brief', {
      data: function () {
                return {
                  boolean1: false
                }
            },
        props:['ip1'],
            template: `
                      <tr >
                          <td>{{ip1.created_at}} </td>
                    </tr>
                      `
           })

Thanks


#2
<tr is="transaction-brief" v-for = "post in all_trans"  v-bind:ip1="post">
</tr>