I can't center the column header

[smmodules]

Hey, guys

Can you help me with this? I can't center the column headers.

Likewise, I can't center the toggle button.

Column::make('Peso', 'weight') ->withSum('Soma dos Pesos', header: true, footer: false) ->bodyAttribute('!text-center') ->headerAttribute('!text-end') ->editOnClick( hasPermission: true,fallback: 0,saveOnMouseOut: true ),

Column::add() ->headerAttribute('!text-center') ->title('Habilitado?') ->field('enabled') ->toggleable( hasPermission: true, trueLabel: 'Yes', falseLabel: 'No' ),

[alvaroarizadadisa]

Did you solve it? I need it too

[zikrimuhammad09]

Up @luanfreitasdev

[eafarooqi]

This is simply working for me on bootstrap for toggle button. The problem can be only with tailwind.

Column::add()
	->title('WS OK')
	->field('planned')
	->headerAttribute('text-center')
	->bodyAttribute('text-center')
	->toggleable(),

[spiagz]

I was able to fix it by modifying the cols() method in my Custom PowerGrid Tailwind Theme.

The issue was that the <tr> contained a child <div> with flex class, which was preventing the text-center alignment form working due to the flex display.

Adding justify-center to the class definition solved it.

Here’s the updated method in the custom theme:

  public function cols(): array
    {
        return [
            'div' => 'select-none flex items-center justify-center gap-1',
        ];
    }

This ensures that the elements inside the <div> are properly centered.

Here's a screenshot of how it looks now:

Hope this helps!