Dynamic columns not showing when render a html table about hybrids HOT 4 CLOSED

Please look at this section of the documentation: https://hybrids.js.org/#/component-model/templates?id=limitations

This is a platform (basically some of the browser implementation) limitation, that template engine cannot use it's internal way to mark place where the expression should be putted.

In short, you cannot use:

html`<th>BBB_${it}</th>`

You must write:

html`<th>${`BBB_${it}`}</th>`

The difference here is that whole content of the <th> element is an expression, which contains a string value.

BTW, to avoid making a set/get property with default value of an array (in v9 it will be possible by value option) you may try this pattern:

  items: undefined,
  render: ({ items = [1,2] }) => html`...`,

from hybrids.

I have changed my codes as you mentioned limitation section, but, still have a confused problem:

	 <table>
	 	<thead>
		 	<tr>
				  ${html`<th>AAA</th>`}
					${items && items.map(it=>html`
					   <th>${`BBB_${it}`}</th>
					`)}
			</tr>
	 	</thead>
	 	<tbody>
			<tr>
			${html`<td>aaa</td>`}
			${items.map(it=>html`
			<td>${`bbb_${it}`}</td>
			`)}
			</tr>
			</tbody>
	 </table>

The `AAA' column is rendered fine, but 'td' parts only show the 'aaa', the other 'td' are missing.
I've removed the whitespaces between tr tag, just not work, pls help.

from hybrids.

I got it. the problem this the tbody still have tr tag not included in a html`` function, so change to following will work:

	 	<tbody>
			${html`
			<tr>
			${html`<td>aaa</td>`}
			${items.map(it=>html`
			<td>${`bbb_${it}`}</td>
			`)}
			</tr>
			`}
			</tbody>

Everything works fine now, except a little verbose. 😁

from hybrids.

You can avoid one of the ${}:

html`
  <tr>
    ${html`
      <td>aaa</td>
      ${items.map(it=>html`<td>${`bbb_${it}`}</td>`)}
    `}
  </tr>
`

I wish it could be simpler, but nowadays I strongly suggest using CSS Grid over tables - they have so many limitations.

Feel free to re-open if you have other issues with the subject.

from hybrids.