Column grow doesn't work outside of Split/Stack
Hi, I'm new to Filament, and I'm building my first table. With the help of the documentation and the generated code, I figured out how to add columns, set labels, and make columns sortable and searchable. I've configured a Position TextColumn, containing a number and the source of the default sort; a Title column, containing a string, and I have the Edit column on the far right.
In the documentation, there's a reference to a
grow
function that, when set to false
, is supposed to shrink that column to a minimum width, while the other columns that, with this defaulted to true, will take up the extra space left behind. Unfortunately, even with ->grow(true)
on the Position column, both the Position and Title columns are taking up the same width in the table.
I've also tried using extraAttributes
to try to set max-width:10%
on the Position column, just to see if that would have an effect, but it doesn't; it does get applied to the div containing the value, but then that is wrapped in an anchor tag (linking to the Edit form), and that anchor tag is what seems to be what's so wide (Because it has the w-full class?).
I don't mind being able to click anywhere on the record to access the Edit form, but, assuming this is what's preventing grow
from working, I'm not sure how to fix it, nor is it clear how to disable it in the meantime. Any help or insight would be appreciated.
I'm using Filament 3.x on Laravel 10.x.9 Replies
Do TextColumns not support
grow
?
No, they do, through the parent and the CanGrow concernI could be wrong but I think grow only applies to splits and stacks, because a table isn’t a flex thing where as splits and stacks are.
When you tell it to use splits and stacks it is no longer an html table.
I'll try encapsulating everything in a Split, then.
I dug into what
grow
is supposed to apply, and I found that it simply determines whether a layout component for a column gets flex-1 w-full
classes; and, if I manually apply those to the th
element of the column I want to grow, it has the effect I want.
Ok, well, that works, but now I don't have column headings 🤦♂️
And Split doesn't support label
Right. If you use split then it is technically not an html table anymore so it won’t have headings. And if you don’t use split then it can’t use css flex properties, because html tables don’t use those.
You’re trying to mix and match concepts that aren’t physically possible based on the html spec.
I guess I'm not understanding why adding the grow classes on the HTML table works if it's not compatible
Would have to look at the actual html output.
I'll see about putting together the kind of example the bug report form asks for.
https://github.com/nmalinoski/filament-grow-column-not-working This is the example project I put together for my bug report https://github.com/filamentphp/filament/issues/9933; and this is my branch of 3.x with the change that makes column grow work for me: https://github.com/filamentphp/filament/compare/3.x...nmalinoski:filament:9933-apply-column-grow-to-html-column
Unfortunately, I'm not familiar enough with the code to tell if this change negatively impacts anything else, nor if it's comprehensive enough to apply everywhere it needs to.
PR submitted
PR was accepted an merged; just waiting on a new release to include it.
Good job.
Thank you
Marking this as done, as it was rolled into v3.1.