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

Custom table column - sizing

<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

Custom table column - sizing

Custom table column - sizing

Similar Threads

Similar Threads

Similar Threads