Bootstrap offers styling options for the thead element: .thead-light and .thead-dark.
However, there's no way to add these via the table.twig component:
{% if header %}
<thead>
<tr>
{% for cell in header %}
{%
set cell_classes = [
cell.active_table_sort ? 'is-active',
]
%}
<{{ cell.tag }}{{ cell.attributes.addClass(cell_classes) }}>
{{- cell.content -}}
</{{ cell.tag }}>
{% endfor %}
</tr>
</thead>
{% endif %}
It would be nice to have coverage for this Bootstrap feature.
Add the option, at least in table.twig.
{% if header %}
<thead{% if thead_style %} class="thead-{{ thead_style }}"{% endif %}>
<tr>
{% for cell in header %}
{%
set cell_classes = [
cell.active_table_sort ? 'is-active',
]
%}
<{{ cell.tag }}{{ cell.attributes.addClass(cell_classes) }}>
{{- cell.content -}}
</{{ cell.tag }}>
{% endfor %}
</tr>
</thead>
{% endif %}
{% embed "@radix/table/table.twig" with {
header: table.header,
rows: table.rows,
header_type: "dark"
} %}
{% endembed %}
| Comment | File | Size | Author |
|---|---|---|---|
| #12 | dark.png | 34.85 KB | angel_devoeted |
| #12 | light.png | 31 KB | angel_devoeted |
| #4 | add-table-header-options-3098900-4.patch | 518 bytes | kentr |
| Screen Shot 2019-12-04 at 3.23.03 PM.png | 48.44 KB | kentr |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
kentr commentedComment #3
kentr commentedComment #4
kentr commentedPatch attached.
Comment #5
doxigo commentedNo longer supported/outdated, closing - feel free to open a MR if applicable.
Comment #6
stefan.kornComment #8
stefan.kornWould actually like to see this in current version of Radix, like described at https://getbootstrap.com/docs/5.3/content/tables/#table-head
That said, I suppose the current fixed class of "bg-light" has no effect on the table header style, as it is always overwritten from the basic table style.
Comment #9
stefan.kornComment #10
doxigo commentedHey, thanks for the MR,
table-lightandtable-darkare Bootstrap 5 table variant classes, whilebg-light(which was removed in your MR) is a background utility. These aren't really equivalent,table-light/table-darkapply the proper table-specific styling.That aside,
{% if header_style %}is truthy for any non-empty string. That means if someone passes an invalid or arbitrary value like whatever, it will render class="table-foo" without any validation, which could be okay for utility classes but not for what you are trying to achieve. Ideally you'd want to validate against['light', 'dark']with SDC considerations as wellComment #11
stefan.kornThanks for super quick reply.
I added validation for "light" and "dark" in Twig and SDC, see updated MR.
As for "bg-light" I intentionally removed this. I suppose it has no effect in Bootstrap 5.3, as the color is always overridden by table classes (even if the table has no color classes) and on the otherhand it would be questionable why this should always be "bg-light".
Comment #12
angel_devoeted commentedManually tested the latest changes in
MR !166.Passing
header_style: 'dark'or'light'correctly applies the respective classes to the<thead>.I also passed an invalid value to test the schema constraint, and it properly throws an error as expected.
Comment #14
doxigo commentedperfect, thanks guys. Merged