Control table column width

[howdu]

Allow for column width to be controlled easily without writing custom CSS.

It would be useful to prevent a column from growing while also ability to set a maximum width.

E.g icon column with action needs this custom CSS:

.filament-table-header-cell-status {
    width: 1%
}
.filament-table-cell-status button {
    display: inline-block;
    width: auto;
}

[divdax]

I've the same problem. It would be great to have a simple ->width() option for a table column.

Already tried to add an class via

->extraAttributes(['class' => 'w-[8]'])

but the class is applied to a child element of <td> which has no effect.

[danharrin]

How reliable is the solution? In my prior experience, browsers still end up choosing column width, usually shrinking it to fit the content

[divdax]

It's a small detail, but here is an example of a table to illustrate why it matters. In my opinion, the second one looks significantly better.

[howdu]

When there's space and the browser doesn't need to do any funky shirnking. It works well for compressing less important columns.

[divdax]

Off-topic: May I inquire about the function of the icon positioned in the top-left section of your table? I am relatively new to Filament.

[howdu]

It's some Filament magic to reorder table add ->reorderable('orde_column') to your table.

[coffeeyoghurt]

@howdu it can be achieved with the ->extraHeaderAttributes() I think

TextColumn::make('your_column')->extraHeaderAttributes([
    'class' => 'w-8'
])

Or if you do not like typing, add a macro to your AppServiceProvider

// adds a ->with($value) method to your column. If you have laravel-ide helper installed your autocomplete will still work. 
\Filament\Tables\Columns\Column::macro('width', function ($value) {
    /** @var \Filament\Tables\Columns\Column $this */
    return $this->extraHeaderAttributes(
        array_merge(
            $this->getExtraHeaderAttributes(),
            ['class' => $value]
        )
    );
});

TextColumn::make('your_column')->width('w-8')

[danharrin]

TBH I prefer 'style' => 'width: 100px' as it doesn't require any Tailwind classes to be compiled

[coffeeyoghurt]

A similar macro could be made for the style. I don't like inline styles and sometimes even block inline styles via CSP headers.

I always have this class

.min-width {
    width: 1px !important;
    white-space: nowrap !important;
}

And apply it on small columns (e.g. a status or currency field). It uses the least amount of space possible for a column.

[danharrin]

Hmm, I don't think inline styles are evil really. They can be very handy when working in a utility-first context. I know it's an unpopular opinion though.

[howdu]

Cheers @divdax #11148

[AsmitNepali]

@howdu
https://filamentphp.com/plugins/asmit-nepali-resized-column