© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•9mo ago
potz1024

Custom table column - sizing

Hi all,

Trying to get my skill set up-to-date with TALL stack and Filament at present, so many different technologies to learn together!

I've created a custom table column to show a user avatar and name alongside each other. Its working fine, apart from a small problem where the table column isn't quite growing enough to hold the content.

I've attached an image, and below is the view code for my column. Is anyone able to suggest why the name is flowing outside of the table column? I think its something to do with the image, whoes width is somehow not being accounted for, but i could be wrong.

<div class="flex w-full items-center gap-3 my-1 mx-1">
    @if ($getAvatar() !== null)
    <x-filament::avatar
        src="{{ $getAvatar() }}"
        alt="{{ $getDisplayName() ?? ''}}"
    />
    @endif

    @if ($getDisplayName() !== null)
        <div class="text-sm font-medium text-gray-900 dark:text-white">
            {{ $getDisplayName() }}
        </div>
    @endif
</div>
<div class="flex w-full items-center gap-3 my-1 mx-1">
    @if ($getAvatar() !== null)
    <x-filament::avatar
        src="{{ $getAvatar() }}"
        alt="{{ $getDisplayName() ?? ''}}"
    />
    @endif

    @if ($getDisplayName() !== null)
        <div class="text-sm font-medium text-gray-900 dark:text-white">
            {{ $getDisplayName() }}
        </div>
    @endif
</div>


And the render HTML for a table cell is:

<td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-partner.avatar" wire:key="hlssh2B4VxCJacc6bDgm.table.record.11.column.partner.avatar">
    <div class="fi-ta-col-wrp">
    <!--[if BLOCK]><![endif]-->        <div class="flex w-full disabled:pointer-events-none justify-start text-start">
            <div class="flex w-full items-center gap-3 my-1 mx-1">
    <!--[if BLOCK]><![endif]-->    
    <img class="fi-avatar object-cover object-center fi-circular rounded-full h-8 w-8" src="https://ui-avatars.com/api/?name=JD" alt="John Joe Doe">
    
        
    <!--[if ENDBLOCK]><![endif]-->

    <!--[if BLOCK]><![endif]-->        <div class="text-sm font-medium text-gray-900 dark:text-white">
            John Joe Doe
        </div>
    <!--[if ENDBLOCK]><![endif]-->
</div>
        </div>
    <!--[if ENDBLOCK]><![endif]-->
</div>
</td>
<td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 fi-table-cell-partner.avatar" wire:key="hlssh2B4VxCJacc6bDgm.table.record.11.column.partner.avatar">
    <div class="fi-ta-col-wrp">
    <!--[if BLOCK]><![endif]-->        <div class="flex w-full disabled:pointer-events-none justify-start text-start">
            <div class="flex w-full items-center gap-3 my-1 mx-1">
    <!--[if BLOCK]><![endif]-->    
    <img class="fi-avatar object-cover object-center fi-circular rounded-full h-8 w-8" src="https://ui-avatars.com/api/?name=JD" alt="John Joe Doe">
    
        
    <!--[if ENDBLOCK]><![endif]-->

    <!--[if BLOCK]><![endif]-->        <div class="text-sm font-medium text-gray-900 dark:text-white">
            John Joe Doe
        </div>
    <!--[if ENDBLOCK]><![endif]-->
</div>
        </div>
    <!--[if ENDBLOCK]><![endif]-->
</div>
</td>


Many thanks for any pointers.

:wq
image.png
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Table Custom Column Update.
FilamentFFilament / ❓┊help
2y ago
Custom Column In Table
FilamentFFilament / ❓┊help
3y ago
Custom query for table column text
FilamentFFilament / ❓┊help
3y ago
Action button within Custom Table Column
FilamentFFilament / ❓┊help
3y ago