Allow icons in table header columns

[c-gross]

Sometimes a table column shows only a flag or something similar. Set a name is taking then much more space than the content of that column. It would be nice to be able to set icons as table header column names.

Right now it's not possible to pass HTML like <x-orchid-icon ...>. Orchid renders the code not the icon. So a flag or method to render HTML code would be nice. Or add the icon() method we have for Menu would also be ok.

[macit-emre]

you may override th.blade (fullpath is resources/views/vendor/platform/partials/layouts/th.blade.php) so you may change the
{{ $title }} to {!! $title !!} so you may write html inside $title.

[c-gross]

Ya might be a good workaround.
Still would like to see this feature in a later version.

[tabuna]

Hi @c-gross. Will the icon be understandable to your users?
I have the same problem, but I solve it with the ->popover() method.

For example, the column name is CTR, and the description:

TD::make('CTR')
   ->popover("The number of clicks that your ad receives divided by the number of times your ad is shown")

This adds a "question" icon where the user can always get clarification.

I also wrote a recommendation about this in the design section of the app available at the link: https://orchid.software/en/hig/naming/#terms

Can you please tell me if this approach will work for your application?

[c-gross]

It's a admin panel framework which is usually for internal use. So it's not such a big problem to make sure the internal users know what a column means. The popover method just needs more space and the reason to use icons in my case is, to save space and make it easier to read.

It's mainly for columns that just show a simple on/off status for example. Or the shipping country for orders in the order list. I could just show a small country flag icon instead of "country" (in our language it's longer name), since the content for that column is a 2 character country iso-code. The title is just taking so much more space than the content.

I'm already using icons for a small dynamic ajax JS generated table. Thats saving alot of space and also visually nice. (I know that I do the JS implementation in the wrong way but the docs about JS were to basic to build something complex with limited time.)

(item is in box, production label is printed, id, ...)

But I think workaround with the blade override will work for me. I just don't like to override too many core templates to have less isues with updates. Just saying that this feature could be nice in some cases.

[macit-emre]

a framework like orchid should consider using html a painkiller solution in such cases. Escaping html is mostly necessary to avoid silly issues, but an ->icon() method would be fine for every case.

[c-gross]

I just tested the workaround ({{ $title }} to {!! $title !!}) and seems not to work. The override is working but the icon is not rendered since the x-orchid-icon code is not getting replaced with the svg code.

[macit-emre]

You may write

$myIconHtml = (new IconComponent('bs.x'))->render()(); //double () () is for real as single () returns closure
//then assign 
TD::make('id', $myIconHtml);

[c-gross]

Sorry, had not much to to check the core by myself. Thank you, that snippet is working to replace it with the correct svg code.