Contributing with a Tailwind theme

[davidnectarestudio]

My customer wants to render tables based on a Tailwind CSS theme called Tailadmin. So I'm doing a lot of work trying to adapt a custom template that I hope at the end I'll share with you. But meanwhile, I need to solve some sort of problems related with Tailadmin DOM structure.

[davidnectarestudio]

My first question is related with table header. I need to generate this 3 kind of table headers (left, center & right aligned)

<table class="min-w-full">
    {# table head #}
    <thead class="border-gray-100 border-y bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
    <tr>
        <th class="px-6 py-3 whitespace-nowrap">
            <div class="flex items-center">
                <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Status</p>
            </div>
        </th>
        <th class="px-6 py-3 whitespace-nowrap">
            <div class="flex items-center justify-center">
                <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Enabled</p>
            </div>
        </th>
        <th class="px-6 py-3 whitespace-nowrap text-right">
            <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Actions</p>
        </th>
    </tr>
    </thead>

[davidnectarestudio]

Can you recommend me a strategy to set this 3 kind of alignments in data table builder, and read the values in theme? I'm looking for something like this example:

final class NewsDataTableType extends AbstractDataTableType
{
    public function buildDataTable(DataTableBuilderInterface $builder, array $options): void
    {
        $builder
            // columns
            ->addColumn(
                'title',
                TextColumnType::class,
                [
                    'alignment' => 'center',
                    'sort' => true,
                    'export' => true,
                ]
            )

{# @see Kreyu\Bundle\DataTableBundle\Column\Type\ColumnType #}
{% block column_header %}
    {% set label_attr = label_attr | default({}) %}
    {% if data_table.vars.sorting_enabled and sortable %}
        {% set active_attr = active_attr | default({}) %}
        {% set inactive_attr = inactive_attr | default({}) %}
        {% set sorted_attr = sorted ? active_attr : inactive_attr %}
        {# Merge the sorted attr with column header attr, but merge its classes. #}
        {# The column header attr class is added after the sorted attr class. #}
        {% set attr = attr | merge(sorted_attr | merge({'class': (sorted_attr.class | default('') ~ ' ' ~ attr.class | default('')) | trim})) %}
        
        {% if alignment == 'left' %}
            <th class="px-6 py-3 whitespace-nowrap">
               <div class="flex items-center">
                   <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">{{- block('column_header_label', theme, _context) -}}</p>
               </div>
           </th>
        {% elseif alignment == 'center' %}
            <th class="px-6 py-3 whitespace-nowrap">
               <div class="flex items-center justify-center">
                   <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">{{- block('column_header_label', theme, _context) -}}</p>
               </div>
           </th>
        {% elseif alignment == 'right' %}
            <th class="px-6 py-3 whitespace-nowrap text-right">
               <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">{{- block('column_header_label', theme, _context) -}}</p>
           </th>

[davidnectarestudio]

It is possible to add a new ColumnType option 'alignment' to affect all other inherit column types?

[Kreyu]

Sure! You can create a column type extension that adds a alignment option and passes its value to column view. You should provide ColumnType in getExtendedTypes method - because all column types extend from it. It should look something like this:

use Kreyu\Bundle\DataTableBundle\Column\Extension\AbstractColumnTypeExtension;
use Kreyu\Bundle\DataTableBundle\Column\Type\ColumnType;
use Kreyu\Bundle\DataTableBundle\Column\ColumnInterface;
use Kreyu\Bundle\DataTableBundle\Column\ColumnHeaderView;
use Kreyu\Bundle\DataTableBundle\Column\ColumnValueView;
use Symfony\Component\OptionsResolver\OptionsResolver;

class AlignmentColumnTypeExtension extends AbstractColumnTypeExtension
{
    public function buildHeaderView(ColumnHeaderView $view, ColumnInterface $column, array $options): void
    {
        $view->vars['alignment'] = $options['alignment'];
    }

    public function buildValueView(ColumnValueView $view, ColumnInterface $column, array $options): void
    {
        $view->vars['alignment'] = $options['alignment'];
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver
            ->setDefault('alignment', 'left')
            ->setAllowedValues('alignment', ['left', 'center', 'right'])
        ;
    }
    
    public static function getExtendedTypes(): iterable
    {
        return [ColumnType::class];
    }
}

[davidnectarestudio]

Ok, thanks for your help @Kreyu

Then, If I'm writing a custom view template, I must override these blocks names?

{% block column_header %}
    ...
{% endblock %}

{% block column_value %}
    ...
{% endblock %}

Or It's better to create new block names? To keep parent template blocks untouched and alone?

{% block alignment_column_header %}
    ...
{% endblock %}

[Kreyu]

I think in your case you'd want to override the column_header like you suggested in comment above.

[davidnectarestudio]

This is how I'm getting the Tailwind result. You can see "+ Add", "Filters" (opened) & "Export" action buttons. Active filters are shown as badges with right icon to clear. Example screenshot table footer is only showing items per page and is not showing pagination section, but is working well too (I've placed into right corner).

How can I remove "Value" label from input filter field? I only need to show one label (Title).

[Kreyu]

You can either:

• render filter form value field with {{ form_row(form.value, { label: false }) }}
• render widget alone with {{ form_widget(form.value) }}

In bootstrap 5 theme there's this block:

{% block kreyu_data_table_filter_data_row %}
    <div class="row">
        {{ form_label(form) }}

        <div class="col-12">
            <div class="{{ row_class|default(row_attr.class|default('mb-3')|trim) }} input-group">
                {% if form.operator is defined %}
                    {{ form_widget(form.operator) }}
                {% endif %}
                {{ form_widget(form.value) }} {# widget only - so there's no label #}
            </div>
        </div>
    </div>
{% endblock %}

This block belongs to the form theme and renders the Kreyu\Bundle\DataTableBundle\Filter\Form\Type\FilterDataType fields. Since this is form theme, we have to tell filtration form to use it. In bootstrap 5 theme we're doing this:

{% block kreyu_data_table_filters_form %}
    {% with { form_themes: [_self, 'bootstrap_5_layout.html.twig'] } %}
        {{ parent() }}
    {% endwith %}
{% endblock %}

bootstrap_5_layout.html.twig is the built-in form theme from Symfony

[davidnectarestudio]

@Kreyu I'm extending from @KreyuDataTable/themes/base.html.twig but it seems that my custom block is not working

{% block kreyu_data_table_filter_data_row %}
    {% if form.operator is defined %}
        {{ form_widget(form.operator) }}
    {% endif %}
    {{ form_widget(form.value) }}
{% endblock %}

[Kreyu]

This is form theme block, not for data table, so you should either:

• add template with this block as form theme in config/packages/twig.yaml under the form_themes
• override kreyu_data_table_filters_form block and pass _self as form theme

The base theme calls the form_theme with given form themes for convenience:

data-table-bundle/src/Resources/views/themes/base.html.twig

Lines 329 to 330 in 5b2693d

	{% block kreyu_data_table_filters_form %}
	{% form_theme form with form_themes|default([_self]) %}

In you case, it will probably look like this:

{% block kreyu_data_table_filters_form %}
    {% with { form_themes: [_self] } %}
        {{ parent() }}
    {% endwith %}
{% endblock %}

{% block kreyu_data_table_filter_data_row %}
    {% if form.operator is defined %}
        {{ form_widget(form.operator) }}
    {% endif %}
    {{ form_widget(form.value) }}
{% endblock %}

Since you're using Tailwind, maaaybe you want to use the Symfony Form tailwind_2_layout theme - not sure about that, but if that's so, you can pass it as form_themes as well.

[davidnectarestudio]

I've made my custom template to adjust the following stack:

1. https://tailadmin.com (pro license)
2. Tailwind CSS v4
3. AlpineJS v3

But is very difficult to reuse.