Add column type rendered as a badge

[Kreyu]

Currently, we have BooleanColumnType that is rendered as a badge. Adding separate BadgeColumnType to display text as a badge would be useful.

For example, with Bootstrap 5: https://getbootstrap.com/docs/5.3/components/badge/#examples

There's no "badges" in HTML5, so I would render them as a text in the base theme.

[alexandre-castelain]

What if we want to use a badge with a DateColumnType or a NumberColumnType ? Creating a BadgeColumnType wouldn't help in those case.

Don't you think a BadgeTypeExtension would be better ?

[Kreyu]

Right, haven't thought about it. Maybe just a badge option for some columns?

Don't you think a BadgeTypeExtension would be better ?

I wouldn't add type extensions to the bundle. Instead, adding the option directly to the type would be:

• easier to maintain;
• easier to look-up in the source code when using the bundle, e.g. move to definition -> look at options -> no need for opening docs;

However, badges can be styled in multiple ways. For example, with bootstrap, there's primary, secondary, danger, etc. Maybe it should accept a false (to not render a badge at all), true (to render default color) or just a string that will be handled by theme itself? For example:

$builder->addColumn('foo', TextColumnType::class, [
    'badge' => 'primary',
]);

Bootstrap 5 theme would then translate that to badge text-bg-primary class. Some other UI library, like UIKit, contains just a single badge: https://getuikit.com/docs/badge#tm-main

This could be used even for the BooleanColumnType, which is currently rendered as a badge, but here it would properly need two options - badge_true and badge_false, similar to label_true and label_false options, so we can use different color depending on the value. Alternatively it could use a callback:

$builder->addColumn('foo', BooleanColumnType::class, [
    'label' => fn (bool $value) => 'Yes' : 'No',
    'badge' => fn (bool $value) => 'primary' : 'danger',
]);

But using two different options may be useful in some cases, since you can overwrite one option without repeating the other.

[alexandre-castelain]

I wouldn't add type extensions to the bundle. Instead, adding the option directly to the type would be:

• easier to maintain;
• easier to look-up in the source code when using the bundle, e.g. move to definition -> look at options -> no need for opening docs;

I totally agree with you, the idea of the extension was to use the same code everywhere for each ColumnType.

Which ColumnType should have this badge option ? DateColumnType, DateTimeColumnType, EnumColumnType, LinkColumnType (?), MoneyColumnType, NumberColumnType, TextColumnType ?

I fear that's a lot of duplicated code. Do I miss something ?

However, badges can be styled in multiple ways. For example, with bootstrap, there's primary, secondary, danger, etc. Maybe it should accept a false (to not render a badge at all), true (to render default color) or just a string that will be handled by theme itself? For example:

Yes, the same way the label is used in the forms.

This could be used even for the BooleanColumnType, ... But using two different options may be useful in some cases, since you can overwrite one option without repeating the other.

Honnestly, I prefer the callback option, it's smoother

[2mx]

Hello guys, you should have a look how Omines DataTables Bundle tackle this kind of stuff :

# Some example columns
$table
    ->add('firstName', TextColumn::class, ['label' => 'customer.name', 'className' => 'bold'])
    ->add('lastName', TextColumn::class, ['render' => '<strong>%s</strong>', 'raw' => true])
    ->add('email', TextColumn::class, ['render' => function($value, $context) {
        return sprintf('<a href="%s">%s</a>', $value, $value);
    }])
;

https://github.com/omines/datatables-bundle/tree/master

[alexandre-castelain]

Hello,

What do you mean exactly ? The render part ?

[Kreyu]

Thanks for the suggestion @2mx. Currently, we can render anything as a badge by setting the class to the value cell:

$builder->addColumn('foo', TextColumnType::class, [
    'value_attr' => [
        'class' => 'badge text-bg-primary',
    ],
]);

I was just wondering whether we can simplify this... without complicating it too much by accident 😁

If you mean the render and raw part - I generally discourage passing raw HTML to columns, but I can see it helpful in some cases (like already formatted and sanitized HTML coming from database or API), but that should be handled as a separate column type maybe HtmlColumnType.

[2mx]

Okay thank you, I should have read more your documentation before posting and take you time !

[Kreyu]

Okay thank you, I should have read more your documentation before posting and take you time !

No worries! Thanks to your suggestion I've added new column type that renders the html directly for some edge cases 😁

[2mx]

By the way there is no mention to 'value_attr'' in the documentation. Would be worth it to document it :)

[Kreyu]

By the way there is no mention to 'value_attr'' in the documentation. Would be worth it to document it :)

True, header and value attributes are explained only in the reference section of the documentation. I've created an issue to improve that (Improve documentation about setting column header and value attributes #171). Thanks!