Compact table
Hi. How to make tables compact? (filament way)
-reduce font size
-decrease vertical paddiong
-etc
15 Replies
CSS
rly? 😄
Yea. There’s no method for it, so you’d have to use CSS to restyle it.
And What if I just want to change from py-4 to py-2 ? Just for compacting?
I tried to play (in a custom them) with fi-ta-cell, fi-ta-text, fi-ta-toggle ... but there is something else which is keeping the py-4 active.
Thank you for the help
I tied changin the spacing inside theme in tailwind.config.js and it's working... but... but... than there are other problems with icons in the action column (edit delete,...)
fwiw, try doing something like
.fi-ta-cell.py-4: padding: 2em; or something similar ¯\_(ツ)_/¯No I already tried.
BTW:
.fi.ta.cell has by default (orignal them) padding=0.
It's inside that div that you have .fi-ta-text or .fi-ta-toggle, but even changig them is not working.
IMHO the problem is with the first column, the one of selection.
Infact there is a div with no name with "hard-coded" py-4. Changing this to py-2 with the modification written before is working:
But because the div has no name is not possible to change it via theme/css
Did it!!!!!
Following my idea to add a class.
In
components\selection\cell.blade.php I added the .fi-ta-sel-col:
<div class="fi-ta-sel-col px-3 py-4">
{{ $slot }}
</div>
Then in my theme file:
.fi-ta-text,.fi-ta-icon,.fi-ta-toggle,.fi-ta-number,.fi-ta-sel-col{
@apply py-1;
}
A good idea should be to have a properties:
->tablePadding(1) and then using it.
Better to just use CSS instead of overwriting blade files.
.fi-ta-cell > divCan you provide an example? I see from the documentation that it is recommended to use the hook classes, "applying styles" to them. But, it doesn't say where one should/could do this.
Also, when I inspect the elements, it seems like
fi-ta-cell, for example, isn't the class that has all of the "extra" padding. It seems like inner divs have explicit padding classes, e.g., px-3 py-4.
I have attached a screenshot that shows that the padding for this cell is on the div inside the div with the fi-ta-cell class applied.
This is 101 CSS to target it:
But, it doesn't say where one should/could do this.In a CSS file. That would be a "custom theme" in Filament language
Thx. So this will overwrite any previous rules...?
It depends how specific they are, it should but worse case you ccan do: 1rem !important; to ensure it does override but it's best to avoid important where possible.
MDN Web Docs
Specificity - CSS: Cascading Style Sheets | MDN
Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.
Thx, gentlemen. I'll give this a try when I have some time and try to return with an update on how it went. 🤓