data-grid: cells are not aligned

[atanasster]

Describe the bug

The datagrid cells are sometimes not aligned

To reproduce

In the following example witness the Type column - rows y and ...props

<vscode-data-grid>
  <vscode-data-grid-row row-type="header">
    <vscode-data-grid-cell grid-column="1" cell-type="columnheader"> Name </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2" cell-type="columnheader"> Type </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="3" cell-type="columnheader"> Parent </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="4" cell-type="columnheader"> Value </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="5" cell-type="columnheader">
      Description
    </vscode-data-grid-cell>
  </vscode-data-grid-row>
  <vscode-data-grid-row>
    <vscode-data-grid-cell grid-column="1">
      <a href="#">
        <code>y*</code>
      </a>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2">
      <code>number</code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="3">
      <a href="#">
        <code>CandlestickChartLineProps</code>
      </a> </vscode-data-grid-cell
    >\n<vscode-data-grid-cell grid-column="4">
      <code></code> </vscode-data-grid-cell
    >\n<vscode-data-grid-cell grid-column="5"> </vscode-data-grid-cell>
  </vscode-data-grid-row>
  <vscode-data-grid-row>
    <vscode-data-grid-cell grid-column="1">
      <code>...props</code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="2">
        <code>LineProps</code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="3"> </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="4">
      <code></code>
    </vscode-data-grid-cell>
    <vscode-data-grid-cell grid-column="5"> </vscode-data-grid-cell>
  </vscode-data-grid-row>
</vscode-data-grid>

Expected behavior

Expected all cells from the same column to be the same size

Screenshots

[hawkticehurst]

Whoops! Looks like an update to the data grid documentation got lost in the lead-up to the public preview.

The issue I believe you're running into is that, by default, the data grid does not set equal width column sizing and it is something that has to be set manually with the grid-template-columns attribute.

You can achieve equal width columns by setting the aforementioned attribute on the <vscode-data-grid> element and the 1fr CSS grid unit for the total number of columns in your data grid. So in your case, since you have 5 columns you can add the following attribute and it should fix your problem.

<vscode-data-grid grid-template-columns="1fr 1fr 1fr 1fr 1fr">
    ... other code ...
</vscode-data-grid>

With all that said, changing this behavior so equal-width columns are default is actually on our backlog and should hopefully land in the next couple of weeks. In the meantime, I can make a quick update to the docs so others don't find themselves navigating the same issue.

Thank you for the catch!

[hawkticehurst]

cc @chrisdholt

If I recall correctly, this is inherited behavior from the FAST data grid correct?

This isn't the first time I've gotten this feedback about data grids (thus this item already being on our backlog) and this could be something we discuss changing upstream within FAST if that aligns with how you all want the data grid to function?

But if not, it should be easy enough to add some custom logic to the data that figures out how many columns exist on a data grid and add the grid-template-columns attribute programmatically.

[atanasster]

Thank you very much, I had indeed missed that. Added your suggestion and the columns are not mis-aligned, but I hope also that the columns could be auto size at some point, here is the new layout where some of the small columns retain too much space compared to other columns with large (description) content:

[atanasster]

But if not, it should be easy enough to add some custom logic to the data that figures out how many columns exist on a data grid and add the grid-template-columns attribute programmatically.

I did this already: https://github.com/ccontrols/structured-types/blob/deb37541336b25d6661c837495c3520dddda8a73/packages/vscode-plugin/src/nodeToHTML.ts#L74

So the number of columns is not so much the issue as having the auto size if possible at some point?

[hawkticehurst]

Oh no! That was totally on me––the current documentation is actually wrong so it's no wonder you missed this detail 😅.

Also thank you for the feedback!

As an immediate stop-gap solution (assuming you haven't tried it yet), you can actually use that same column-grid-template attribute with different CSS sizing units to manually create column widths that fit the sizing of your content. For example, the following would be valid:

column-grid-template="1fr 20% 30vw 10% 1fr"

You'll have to do some guessing and checking to get it right and I would suggest using variable sizing units (i.e. vw, %, fr) versus more static ones (px, rem, etc.) so that the data grid can adapt to different screen sizes.

But again, I think this is great feedback (i.e. column widths that automatically adjust to the max-width of the column content) that would be well worth exploring and adding to either the toolkit or upstream in FAST (again cc @chrisdholt).

[hawkticehurst]

Also cc @daviddossett

[atanasster]

Thank you very much, guessing the size might be an issue - since the columns are not fixed - for example some components might not have jsdocs descriptions at all, while others can have very long property names etc. I was hoping something similar to the html <table> auto sizing, to avoid the guesswork? Maybe even a different table component instead of a data grid?

[daviddossett]

Thanks for the feedback and discussion here!

I hope also that the columns could be auto size at some point,

Shot in the dark here, but would something like 1fr 1fr 1fr 1fr auto work for this purpose? It could be strange in this context since I'm not sure how the text will react. It may end up trying to stick it all on a single line w/o wrapping. Or it may not work at all—I'd need to tinker with this myself :)

[atanasster]

@daviddossett , just tried grid-template-columns="1fr 1fr 1fr 1fr auto" and it doesn't seem to work for my use case:

[daviddossett]

Ha, no kidding! The table has five columns, correct? Interesting that it isn't aligned if so.

[atanasster]

yes, 5 columns, I took the screenshot a bit below as the top rows do not have a description and they are aligned fine:

[daviddossett]

Ok, thanks. I'll try this + some other options in a sample extension environment and will get back to you if I uncover an obvious solution here. Ideally we can use auto to not prescribe column widths. I was surprised to see that break the layout above.

By the way, @worksofliam, you may want to check out this thread. I noticed some column header/cell alignment issues in your screenshot from the other day.