Incorrect representation of a table

This issue has been tracked since 2022-11-21.

Hello, I'm trying to use arrow-js (1.0.0 alpha 1) to display a table with the tagged templates, and I'm having some trouble on getting it to work, not sure if it's a bug or it's a wrong interpretation of the docs from my side. I have the following code:

import { t } from "https://cdn.jsdelivr.net/npm/@arrow-js/core";
import table from "./js/components/table.js";

let table_header = ["Name", "State"];
let table_data = [
    ["John", "Subscribed"],
    ["Ashley", "Unsubscribed"],
];

console.log(table(table_header, table_data)());

And then, in table.js:

import { t } from "https://cdn.jsdelivr.net/npm/@arrow-js/core";

export default function table(header, rows) {
	return t`
    <table class="table table-hover">
        <thead><tr>${header.map(column => t`<th>${column}</th>`)}</tr></thead>
        <tbody>
            ${rows.map(columns => t`<tr>${columns.map(column => t`<td>${column}</td>`)}</tr>`)}
        </tbody>
    </table>`;
}

I would expect this to generate the following HTML:

<table class="table table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Subscribed</td>
    </tr>
    <tr>
      <td>Ashley</td>
      <td>Unsubscribed</td>
    </tr>
  </tbody>
</table>

Instead, I'm getting the following, which is not correct. As you can see, the <th> and <td> elements show outside, and before the <table> element:

<th>Name</th>
<th>State</th>
<td>John</td>
<td>Subscribed</td>
<td>Ashley</td>
<td>Unsubscribed</td>
<table class="table table-hover">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

Is this a known issue? Am I doing something wrong?

justin-schroeder wrote this answer on 2022-11-21

Youre not doing anything wrong — this should work, but I get why it doesn't. When the template is initially parsed it parses it with replacements for the sub-templates, meaning it has malformed html so it tries to "fix" it (the wayrowsers do) — and then when Arrow performs the dynamic binding the structure is out of wack.

Interesting problem....very much part of the "experimental" nature of this tool. So the crux of this issue is how can we get a proper "parse" from something like:

<table>
  <thead>
    🎉
    🎉
  </thead>
</table>

Obviously if the template parser was context aware it could use <tr> or similar, but it would be nice to not be context aware for size/performance reasons.

justin-schroeder wrote this answer on 2022-11-21

So — probably talking to an echo chamber of my own thoughts here — but it strikes me that if our placeholder tokens were comments they would not be shifted in position. 🤔

justin-schroeder wrote this answer on 2022-11-22

This should be fixed now in alpha.2!

nbgraham wrote this answer on 2022-11-23

Nice, I had a similar issue and this fixed it!
But I think it broke the click handlers #25

Your Name

Your Comment

More Details About Repo

Owner Name	justin-schroeder
Repo Name	arrow-js
Full Name	justin-schroeder/arrow-js
Language	TypeScript
Created Date	2022-11-08
Updated Date	2023-03-28
Star Count	1240
Watcher Count	21
Fork Count	22
Issue Count	7

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date