Filament•2y ago

Table width in widget?

Any ideas how to make this table widget full width? I'm also looking to widen the "notes" : TextInputColumn It would be great if that particular column expanded to make the table full width. Relevant code below:

use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Columns\TextInputColumn;
use Filament\Widgets\TableWidget;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Collection;
use Illuminate\Database\Eloquent\Builder;

class ClientDocumentsList extends TableWidget {
    protected static string $view = 'filament.resources.qb-client-resource.widgets.client-documents-list';

    public ?Model $record = null;
    public Collection $documents;
    protected int | string | array $columnSpan = 'full';


    protected function getTableColumns(): array {
        return [
            TextColumn::make('public_basename'),
            TextColumn::make('type'),
            TextColumn::make('created_at')->dateTime(config('app.datetime_format'))->label('Date')->sortable(),
            TextInputColumn::make('notes')->rules(['max:255']),
        ];
    }
...

use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Columns\TextInputColumn;
use Filament\Widgets\TableWidget;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Collection;
use Illuminate\Database\Eloquent\Builder;

class ClientDocumentsList extends TableWidget {
    protected static string $view = 'filament.resources.qb-client-resource.widgets.client-documents-list';

    public ?Model $record = null;
    public Collection $documents;
    protected int | string | array $columnSpan = 'full';


    protected function getTableColumns(): array {
        return [
            TextColumn::make('public_basename'),
            TextColumn::make('type'),
            TextColumn::make('created_at')->dateTime(config('app.datetime_format'))->label('Date')->sortable(),
            TextInputColumn::make('notes')->rules(['max:255']),
        ];
    }
...

1 Reply

bionaryOP•2y ago

Well it turns out I had {{$this->table}} sitting inside a card. Table is now full width. yay. Now for that slim "notes" column. I know adding ->attributes() and setting pixel width explicitly works but as a bad hack...the responsiveness falls apart that way.

Gaming

Programming

Table width in widget?