Allow TextInputColumn to expand full width of table column

tanthammar commented 6 days ago

Description

This PR makes all text input columns, expand full with of the table cell, by default. Which in my opinion is the expected behaviour.
Using TextInput::make('foo')->inline(), disables full width.

I think I've tried every possible option to make a TextInputColumn expand full width of its table column.

TextInputColumn::make('foo')->searchable()
            ->grow(),
            ->extraInputAttributes(['class' => 'w-full min-w-fit'])
            ->extraInputAttributes(['style' => 'width: 100%'])
            // and more...

Visual changes

Before, no matter how I tried to expand the column width

After, just added ->grow() to the column

Functional changes

[ x ] Code style has been fixed by running the composer cs command.
[ x ] Changes have been tested to not break existing functionality.
[ x ] Documentation is up-to-date.

Additional css suggestion

/* auto grow width of table cell inputs to fit its content */
td.fi-ta-cell :is(input.fi-input), td.fi-ta-cell :is(select.fi-select-input) {
    field-sizing: content;
}

danharrin commented 4 days ago

@zepfietje wdyt about the additional suggestion? I think it's pretty smart, the way the text input column overflows is weird ATM I think. Prob also needs similar treatment on Select?

zepfietje commented 4 days ago

The field-sizing CSS API is amazing, but browser support isn't there yet unfortunately... Been wanting to use that for our autosizing textarea too. 🥺

danharrin commented 4 days ago

Well it would use the existing behaviour if that property is not available, right? And at the moment we have no autosizing on input columns. So I guess it doesn't hurt?

zepfietje commented 3 days ago

Inconsistent behavior across browsers could still be a concern as devs/users may not be aware that the feature isn't supported on Firefox and Safari yet.

Apart from that, what would the UX be like exactly? Would the field grow in width when typing?

tanthammar commented 2 days ago

It would be great if you could accept the PR to solve the main purpose, to allow textInputColumns to expand full width of the cell.

The additional css stuff can easily be added to local proj css for those who wants it. It does no harm. The browser simply ignores it. And yes, it grows when typing.

filamentphp / filament