npm build fails because of slot inside table

[thepill]

Error

The build fails with the error

ERROR in ./src/DataTable.vue

  64 | 					</td>
  65 | 					<slot name="tbody-tr" :row="row"></slot>
    |      ^
  66 | 				</tr>

  Tag <slot> cannot appear inside <table> due to HTML content restrictions. It will be hoisted out of <table> by the browser.

Reproduce

1. run npm install
2. run npm run build

Discussion

Are the slots actually in use? Can't find something in the documentation.

[MicroDroid]

I did not expect people to actually use this library so I have hardcoded some functions oriented to my needs. Now that it's becoming more popular and this should be removed.

The purpose of those slots were to add the ability of putting buttons in the datatable, so to manage rows.

See how I actually used those slots:

What do you think yourself?

[thepill]

Putting a <th> / <td> around the slots solves the build error. Do the slots work for you with this change as expected?

[MicroDroid]

That would work but that would take up a column space even when the user does rather prefer to not use the slots at all (right?).

If the <th>/<td> happens to take up space when empty then that would be a purposed solution.

[rodrigoAbril]

this could be fixed wrapping the slot inside a <td/th> as proposed by @thepill and checking if the slot has data with a v-if?

like this

[MicroDroid]

@rodrigoAbril Yeah sounds well. This bug should be closed, regardless of how I use it in my project. The problem is that one needs to be able to add multiple th/tds, not just one.

Other than that, the solution looks good, I think. The reason for this weird feature is to able to add things like buttons and such inside the datatable in each row. I also suggest documentation that, as it's entirely undocumented now, and that needs a concrete example on how to get buttons to work, because I remember that not being so easy.

[MicroDroid]

Does this bug still exist