Custom column css classes in v2

[mrl22]

I was unable to find an easy solution in the discussion search, so I want to share a snippet of code of how I made custom CSS classes in version 2, which is excellent for aligning columns.

This aligns both the header and the body columns.

Version 1 had a method you could add to a column ->addClass('text-right'), but this does not exist in v2.

class CustomerTable extends DataTableComponent
{

    public $columnClass = [
        'Column Title' => 'column-center another-class',
        'Created' => 'column-right'
    ];

...

    public function configure(): void
    {
        $this->setPrimaryKey('id')
            ->setThAttributes(fn(Column $column) => ['class' => $this->columnClass[$column->getTitle()] ?? ''])
            ->setTdAttributes(fn(Column $column) => ['class' => $this->columnClass[$column->getTitle()] ?? '']);
    }

I am using this on Tailwind and have found that sortable header columns do not align because they are flex buttons. Some CSS like this will fix it.

.column-center {
    text-align: center;
    button {
        margin-left: auto;
        margin-right: auto;
    }
}
.column-right {
    text-align: right;
    button {
        margin-left: auto;
    }
}

[lrljoe]

You can specify which column(s) to apply different classes to in setTdAttributes

e.g.

public function configure(): void
{
  // Takes a callback that gives you the current column, row, column index, and row index
  $this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
    if ($column->isField('total') && $row->total < 1000) {
      return [
        'class' => 'bg-red-500 text-white',
      ];
    }
 
    return [];
  });
}

[mrl22]

Thanks, I saw this but wanted to make it simpler for people who just want to add classes to whole columns by just defining an array.

[lrljoe]

Fair enough, just keep in mind that anything public is editable via the frontend, and that future versions may use a variable with the same name!

[lrljoe]

And you can certainly center align them with standard tailwind classes!

[mrl22]

text-center, text-right, text-end does not work on sortable header rows due to them being flex buttons.

[lrljoe]

If you use

            $this->setThAttributes(function (Column $column) {
                return [
                    'class' => 'px-6 py-3 text-center text-xs font-medium whitespace-nowrap text-gray-500 uppercase tracking-wider dark:bg-gray-800 dark:text-gray-400',
                    'default' => false,
                ];
            })
            ->setThSortButtonAttributes(function (Column $column) {
                return [
                    'class' => 'inline-flex items-center space-x-1 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider group focus:outline-none dark:text-gray-400',
                    'default' => false,
                ];
            });

Then that'll center align them, it's a merge of the standard classes and what you're after I believe