-
Notifications
You must be signed in to change notification settings - Fork 128
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
vscode-data-grid
with grid-template-columns
is not respected
#473
Comments
Figured out I need to apply a value for each column in that property. Silly me. |
Perhaps a different issue, but I will reuse this in case it's related. I apply let result = {
html: `<vscode-data-grid id="${id}" grid-template-columns="${columns.map(c => `max-content`).join(` `)}"></vscode-data-grid>`
}; But now when I use this, my column don't align at all D: I tested this in CodeSandbox provided in the readme and I change this example to use <vscode-data-grid
id="custom-column-grid"
grid-template-columns="max-content max-content max-content max-content"
aria-label="With Custom Column Widths"
></vscode-data-grid> I can't see what I am doing wrong, would love any ideas |
Further digging: I created my issue in a sandbox and it's led me to this finding.
|
Hey @worksofliam! Just chiming in to say I'm a bit swamped for the next 2 weeks so it might take a second for me to circle back this, but I have definitely seen this and will get back to you as soon as I can :) p.s. thanks for all the thorough notes, super helpful to follow!! |
Hey! Finally found a touch of time to do some initial snooping and it looks like this may be an issue we have to bubble up to FAST. Specifically, I can at least speak to your last bullet point:
It looks like the FAST foundation data grid component will automatically assign grid-template-columns for each row with a value of This should also hopefully give insight into the original issue you were seeing –– when you remove With that said, I'm still trying to figure out why other valid |
@hawkticehurst I think I'm experiencing the same issue Here's the sandbox with reproduction |
BTW, a quick question, @hawkticehurst - is that intentional, that top-level |
Overall, I ended up with grid |
Thanks for looking into this. I let your comment slip! So really what is the suggested fix? Do you think waiting until July for a new FAST version will solve this issue? |
Setting the const table = document.createElement("vscode-data-grid");
...
table.style.display = "grid"; |
Hello! Back again with more updates and I thinkkk I finally understand what's going on here. Sad news, I'm like 98% sure what you're hoping to achieve is impossible given how the FAST data grid has been architected and built 🥲. Less sad news, there seems to be a theoretical workaround but I'm not sure if it will in fact work and what the consequences of that are yet 😅 The gist of the problem is that the
The problemBecause the data grid component is split into distinctly separate sub-components (i.e. This becomes a problem when using This is also why using a simple Also, @joacoc I'm curious what your specific issue was because changing A solution (?)With all that said, a casual workaround solution is, in fact, to change <!--
Note: Third and fourth columns are not included for brevity,
but they repeat the same pattern as columns one/two
-->
<vscode-data-grid
generate-header="none"
style="grid-template-columns: repeat(4, max-content);"
>
<vscode-data-grid-cell grid-column="1" cell-type="columnheader">
A Custom Header Title
</vscode-data-grid-cell>
<vscode-data-grid-cell grid-column="2" cell-type="columnheader">
Another Custom Title
</vscode-data-grid-cell>
<vscode-data-grid-cell grid-column="1">
Cell Data Boop
</vscode-data-grid-cell>
<vscode-data-grid-cell grid-column="2">
Cell Data Yummy cool stuff
</vscode-data-grid-cell>
<vscode-data-grid-cell grid-column="1">
Cell Data Wee waa
</vscode-data-grid-cell>
<vscode-data-grid-cell grid-column="2">
Cell Data
</vscode-data-grid-cell>
<vscode-data-grid-cell grid-column="1">
Cell Data Deloop vee
</vscode-data-grid-cell>
<vscode-data-grid-cell grid-column="2">
Cell Data
</vscode-data-grid-cell>
</vscode-data-grid> In doing this, you will actually be able to achieve a proper table-like data-grid component where columns are aligned, and applying *You can try out this code now, but the only remaining problem seems to be the issue where FAST data grids will automatically assign grid-template-columns for each row with a value of The only way I've been able to confirm that it works is by opening the developer tools and toggling the style declaration for Toggle on/off: Before: After: The real solutionThe real/proper solution is to bring this to FAST as an upstream issue or (in all honesty) think about just building a brand new I'm actually keen to have a discussion about this and see if any of you in the community have any thoughts/suggestions/preferences for how to move forward. I'm all ears to any thoughts :) |
Version defined in package.json:
Describe the bug
vscode-data-grid
withgrid-template-columns
is not respected(?)I am trying to build a data grid where it can fit more than 4 columns in one view.
The data set gets in fine, but there is just so much white space in columns and I assumed
grid-template-columns
might be able to solve this.But as you can see, it's generating code with the same attribute, but full of
1fr
.To reproduce
^1.0.0
The text was updated successfully, but these errors were encountered: