Filament•4mo ago

Set the max width of viewColumn and wrap the text

I'm using viewColumn in my table resource, and i've tried using extraHeaderAttributes but i got no luck. I called the component like this

ViewColumn::make('judul')->searchable()
  ->view('tables.columns.kolom-judul')
  ->extraHeaderAttributes(['style' => 'width: 10px']),

ViewColumn::make('judul')->searchable()
  ->view('tables.columns.kolom-judul')
  ->extraHeaderAttributes(['style' => 'width: 10px']),

the script in the blade view:

<div class="">
    <style>
        .text-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;

        }

        .text-ellipsis:hover {
            cursor: pointer;
        }
    </style>
    
    <div class="flex" style="margin-left:8px;">
        <img src="{{ $getRecord()->image ? asset('storage/' . $getRecord()->image) : null }}" alt=""
           class="object-center overflow-hidden w-10 border-2 border-inherit rounded"
            onerror="this.src='{{ asset('img/sample-campaign.png') }}';"
        >

        <span class="text-ellipsis" style="margin-left: 10px;">{{ $getState() }}</span>
    </div>
</div>

<div class="">
    <style>
        .text-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;

        }

        .text-ellipsis:hover {
            cursor: pointer;
        }
    </style>
    
    <div class="flex" style="margin-left:8px;">
        <img src="{{ $getRecord()->image ? asset('storage/' . $getRecord()->image) : null }}" alt=""
           class="object-center overflow-hidden w-10 border-2 border-inherit rounded"
            onerror="this.src='{{ asset('img/sample-campaign.png') }}';"
        >

        <span class="text-ellipsis" style="margin-left: 10px;">{{ $getState() }}</span>
    </div>
</div>

can someone help me..

2 Replies

dyo•4mo ago

can someone help me?

Maris•2mo ago

I also struggle with this. I don’t understand why docs says that to change column width you can do that with ->width() but actually it’s not working. My workaround is to use limit(50) and wrap(). Also adjusting table width

Gaming

Programming

Set the max width of viewColumn and wrap the text