Having trouble with virtual sp-table

[lschierer]

I am trying to extend sp-table to take a data source with the virtual items, currently a csv file hosted in the same s3 bucket as the site. I'm having trouble translating the examples given that use a script on the html page consuming the element into how a lit element extending sp-table could update the items attribute to create the rows. An example that used this within another web component instead of manipulating it from a script would be greatly appreciated.

Right now I have

private initTable() {
    console.log(`init table called, we have ${this._items.length} rows`);
    const t = (this.tableRef as Table);
    t.items = this._items;
    t.renderItem = (item, index) => {
      let cells = [];
      for (let i = 0; i < this._ids.length; i++) {
        let cell = document.createElement("sp-table-cell");
        cell.textContent = `$this._items[i].${this._ids[i]}`;
        console.log(`created context ${cell.textContent}`);
        cells.push(cell);
      }
      return cells;
    };
  }

and am getting a linting error that
Type '(item: Record<string, unknown>, index: number) => TableCell[]' is not assignable to type '(item: Record<string, unknown>, index: number) => TemplateResult' on the t.renderItem = line. Both my code and the example code on the website return an array of TableCell, I am beginning to believe that the example code on the documentation site wouldn't work.

[Westbrook]

Would be great to see a repro in something like webcomponents.dev to have a better idea as to what you’re up to here.

[lschierer]

It is somewhat embarrassing how many times I have started over, but what I have is currently at https://github.com/lschierer/EvonyTKRTips.sst the components are in packages/web/src and rhe whole thing barely does anything at all right now.

[lschierer]

the version at a10671a displays the table, probably in a massively inefficient though functional way, but also massively ugly way. the table header row is not at all aligned with the rest of the table, not being constrained by the window size the way the rest of the table is.

[lschierer]

Interestingly, I accidentally rendered it outside the sp-theme tag at c5d71fb352 and the bug with the display of the header does not surface when not subject to sp-theme. As soon as I put the sp-table back inside the sp-theme, the header stopped being constrained by the size of the table again.

[lschierer]

in 70c64fc61 I finally got it to render using the items attribute and the renderItems api. It required some sideways thinking to understand what I was doing wrong, but eventually I realized that while I am extending Table, for the purposes of rendering, I have a Table, I am not a Table. I need to call renderItems from the child table. That's line 156 of projects/web/lib/components/mayor_table.ts

[lschierer]

I am still having a lot of trouble with this. in 552736406e I have constrained everything to the same size, but nothing is at all aligned. each row has its own independent spacing, so the result is confusing rather than informative. I've got some temporary colors in place to help prove to myself that the CSS is in fact reaching the components, as I'm also a bit confused about the CSS interaction with the children of the top level table. It is treating the body and the header differently and I don't understand why yet. that's not necessarily related though because even different rows in the body of the table aren't aligned to each other.

Is there a way to force it to use the same column sizes in every row?

[Westbrook]

If you happened to have a live version of this code running somewhere, I could maybe take a look. You could also get some insight from our consumption of the Table generally as part of our API tables: https://opensource.adobe.com/spectrum-web-components/components/picker/api/

[lschierer]

That revision is up at https://luke.evonytkrtips.net/generals/mayors however because of the way Astro build & deploy uses vite, none of the generated filenames make any sense.

[lschierer]

I'm attaching two screenshots. The first has the browser window very wide, and the problem is barely noticeable. However, look what happens in the second one when I narrow the window such that scroll bars appear. All the columns are very out of alignment.

[lschierer]

If I'm finding the right place in the repository, it looks like rather than attempt a virtual table the way I did, you are doing a multi-level map on the data structure that contains the rows and directly rendering them yourself for both the header row and the body rows much the same way I used map for generating the header row. I'm looking at projects/documentation/scripts/component-template-parts.js

That might be easier for me than the levels of indirection that the virtual table is causing me to try to wrap my inexperienced mind around.

[lschierer]

okay, so I found the css for that table in ./projects/documentation/src/components/styles.css tonight.
once I set

sp-table-cell,
sp-table-head-cell {
  box-sizing: border-box;
  word-break: break-word;
}

the contents of the body magically started to align.

I already had

sp-table-head-cell{
  writing-mode: vertical-rl;
}

which turns the text in the header sideways and gives me more space to work with.

Adding

  min-width: var(--spectrum-global-dimension-size-150);

to the block controlling both header and body cells got rid of a horizontal scroll bar on the table header. I'm not quite sure which bit of css changed them from an overflow to the horizontal scroll bar. I do know that when the header changed to a scroll bar, the body started squishing differently. Its hard to describe the difference in behavior. The labels in the header still do not line up with the columns they are headers for.

Still your advice to look at that file was immensely helpful and I feel much closer to the solution than I was. This screenshot shows the browser page small enough to show the remaining problem with the header alignment.

[lschierer]

I am curious about one thing I see that you all did with the tables on the website. You put them in a div with class table-container and then set the margins of that div to negative , calc(-1 * var(--spectrum-global-dimension-size-700));

Then to compensate for that, you put a corresponding positive padding of --spectrum-global-dimension-size-700 on the table itself. Why do that? I'm sure there is a reason that is beyond my current level to grok.

[lschierer]

Interestingly your table doesn't do this. Shrink yours down and first a few other things (like the side bar) disappear, then keep shrinking the browser window and eventually the table starts to simply get cut off on the right instead of continuing to squish. I haven't figured out where in the CSS this is controlled. So it is clearly something I'm doing, or rather, not doing.

[lschierer]

So after continued comparison to your site, I came up with 208d4cbb0 which is probably good enough. I am still curious about the negative margin and padding offset. I copied it, despite not understanding it on the theory that wiser heads than I put it in place.

Thanks again for the direction.

[lschierer]

updates to the sp-table component have largely fixed the issues I was having.