Filament•12mo ago

How can i set max width for text column in table

Hi filament community, how can i set max width for column 'name'. i try to add class max-w-xs, but if below description is too long will break ui. I want when below description is too long, it will go next line. How can i solve this case? I dont want to set limit words to below description Here is my code

                Tables\Columns\TextColumn::make('name')
                ->description(function ($record) {
                    return 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
                })
                ->searchable()
                ->wrap()
                ->limit(2)
                ->extraAttributes([
                    'class' => 'max-w-xs'
                ]),

                Tables\Columns\TextColumn::make('name')
                ->description(function ($record) {
                    return 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
                })
                ->searchable()
                ->wrap()
                ->limit(2)
                ->extraAttributes([
                    'class' => 'max-w-xs'
                ]),

12 Replies

LeandroFerreira•12mo ago

->extraAttributes([
    'class' => 'break-words'
])

->extraAttributes([
    'class' => 'break-words'
])

jack5mOP•12mo ago

it not work

                Tables\Columns\TextColumn::make('name')
                ->description(function ($record) {
                    return 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
                })
                ->searchable()
                ->limit(2)
                ->extraAttributes([
                    'class' => 'max-w-xs break-words'
                ])

                Tables\Columns\TextColumn::make('name')
                ->description(function ($record) {
                    return 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
                })
                ->searchable()
                ->limit(2)
                ->extraAttributes([
                    'class' => 'max-w-xs break-words'
                ])

LeandroFerreira•12mo ago

break-all ?

jack5mOP•12mo ago

not work too. result same as break-words

LeandroFerreira•12mo ago

->extraAttributes([
    'class' => 'max-w-xs',
    'style' => 'word-break: break-all',
])

->extraAttributes([
    'class' => 'max-w-xs',
    'style' => 'word-break: break-all',
])

ChesterS•12mo ago

Try word-wrap: anywhere;

jack5mOP•12mo ago

both above way not work @Leandro Ferreira @ChesterS

jack5mOP•12mo ago

ChesterS•12mo ago

Hmm that might be a limitation with tables, but I'm not an expert on CSS so... If you wrap your table columns in a Split::make([...]) it should work (but then you're losing some of the features so it's up to you if it's worth it)

LeandroFerreira•12mo ago

I don't know why.. Maybe you could use another way https://filamentphp.com/docs/3.x/tables/layout#controlling-column-width-using-a-grid

Layout - Table Builder - Filament

DrByte•12mo ago

Your 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' is 70 characters. Not many words are actually that long. Highly unusual to have no white-space or punctuation which would cause normal wrapping to function with ->wrap() I"m not saying your use-case isn't valid. Just unusual IMO. Are you actually displaying non-breaking content that you're trying to force-wrap? I'm trying to understand your use-case better. Maybe there's another approach available by re-thinking? On all the tables I've used TextColumns in I've always been able to just use wrap() ... whether that's for the column's normal state value, or for a ->description(fn ($record):string....) that is often long as well. That said, you're right: there's no (er, I haven't found a) settable max-width for said columns.

jack5mOP•12mo ago

thank you guys, for some reason it worked as my expectation

->extraAttributes([
                'style' => 'max-width:260px'
            ])
->wrap();

->extraAttributes([
                'style' => 'max-width:260px'
            ])
->wrap();

Gaming

Programming

How can i set max width for text column in table