#Keeping Defaults

To allow simpler customisation on a per-table basis, there are numerous methods available to over-ride the default CSS classes. Historically, this was provided by a simple toggleable "default" flag. However - in many cases, the original "default" has been expanded to include:

#Keep Default Colors And Default Styles

• set default flag to true or
• set default-colors flag to true
• set default-styling flag to true

#Keep Default Colors Only

• set default flag to false
• set default-colors flag to true
• set default-styling flag to false

#Keep Default Styling Only

• set default flag to false
• set default-colors flag to false
• set default-styling flag to true

#Styling The Column Label

The Column itself provides the capability to style the Label shown in the "th" element. You can set custom attributes to pass to the Column Label on a per-Column basis:

For example:

1Column::make('Name')
2    ->setLabelAttributes(['class' => 'text-2xl'])

By default, this replaces the default classes on the label, if you would like to keep them, set the default/default-styling/default-colors flags to true as appropriate.

#Styling Table Elements

It is important to note that you can also customise the parent TH and TD elements, customising both classes and attributes for each Column's header (using setThAttributes) and each row of that Column (using setTdAttributes), these are available in the configure() method of the table. This allows you to customise attributes based on the value of the table as well!

Below is a copy of the relevant sections from datatable styling to ensure visibility of the options. More are documented on the main datatable styling page.

#setThAttributes

Set a list of attributes to override on the th elements.

If your Column does not have a field (e.g. a label column), then you may use the following, which will utilise the first parameter in Column::make()

1$column->getTitle()

 1public function configure(): void
 2{
 3  // Takes a callback that gives you the current column.
 4  $this->setThAttributes(function(Column $column) {
 5    if ($column->isField('name')) {
 6      return [
 7        'class' => 'bg-green-500',
 8      ];
 9    }
10 
11    return [];
12  });
13}

#Keeping Default Colors and Default Styling

 1public function configure(): void
 2{
 3  $this->setThAttributes(function(Column $column) {
 4    if ($column->isField('name')) {
 5      return [
 6        'default' => true,
 7        'class' => 'bg-green-500',
 8      ];
 9    }
10 
11    return ['default' => true];
12  });
13}

#Keeping Default Styling Only For the "Name" Column

 1public function configure(): void
 2{
 3  $this->setThAttributes(function(Column $column) {
 4    if ($column->isField('name')) {
 5      return [
 6        'default' => false,
 7        'default-styling' => true,
 8        'class' => 'text-black bg-green-500 dark:text-white dark:bg-green-900',
 9      ];
10    }
11 
12    return ['default' => true];
13  });
14}

#Reorder Column

Note: If you are using Reorder, then the th for Reorder can be styled separately. However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6

You can also use the "title" of the Column, which will be "reorder" for the "reorder" Column:

 1public function configure(): void
 2{
 3  $this->setThAttributes(function(Column $column) {
 4      if ($column->getTitle() == 'reorder')
 5      {
 6          return [
 7              'class' => 'bg-green-500 dark:bg-green-800',
 8              'default' => false,
 9              'default-colors' => false,
10          ];
11 
12      }
13 
14    return ['default' => true];
15  });
16}

#Bulk Actions Column

Note: If you are using Bulk Actions, then the th for Bulk Actions can be styled separately. However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6

You can also use the "title" of the Column, which will be "bulkactions" for the "Bulk Actions" Column:

 1public function configure(): void
 2{
 3  $this->setThAttributes(function(Column $column) {
 4      if ($column->getTitle() == 'bulkactions')
 5      {
 6          return [
 7              'class' => 'bg-yellow-500 dark:bg-yellow-800',
 8              'default' => false,
 9              'default-colors' => false,
10          ];
11 
12      }
13 
14    return ['default' => true];
15  });
16}

#setThSortButtonAttributes

Set a list of attributes to override on the th sort button elements

 1public function configure(): void
 2{
 3  // Takes a callback that gives you the current column.
 4  $this->setThSortButtonAttributes(function(Column $column) {
 5    if ($column->isField('name')) {
 6      return [
 7        'class' => 'bg-green-500',
 8      ];
 9    }
10 
11    return [];
12  });
13}

#setTrAttributes

Set a list of attributes to override on the tr elements

 1public function configure(): void
 2{
 3  // Takes a callback that gives you the current row and its index
 4  $this->setTrAttributes(function($row, $index) {
 5      if ($index % 2 === 0) {
 6        return [
 7          'class' => 'bg-gray-200',
 8        ];
 9      }
10 
11      return [];
12  });
13}

By default, this replaces the default classes on the tr, if you would like to keep them, set the appropriate default flag (see above)

 1public function configure(): void
 2{
 3  $this->setTrAttributes(function($row, $index) {
 4      if ($index % 2 === 0) {
 5        return [
 6          'default' => true,
 7          'class' => 'bg-gray-200',
 8        ];
 9      }
10 
11      return ['default' => true];
12  });
13}

#setTdAttributes

Set a list of attributes to override on the td elements. For example, changing the background color between red/green based on whether the "total" field is over or under 1000.

If your Column does not have a field (e.g. a label column), then you may use the following, which will utilise the first parameter in Column::make()

1$column->getTitle()

 1public function configure(): void
 2{
 3  // Takes a callback that gives you the current column, row, column index, and row index
 4  $this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
 5    if ($column->isField('total') && $row->total < 1000) {
 6      return [
 7        'class' => 'bg-red-500 text-white',
 8      ];
 9    }
10    elseif ($column->isField('total') && $row->total >= 1000) {
11      return [
12        'class' => 'bg-green-500 text-white',
13      ];
14    }
15 
16    return [];
17  });
18}

By default, this replaces the default classes on the td, if you would like to keep them, set the appropriate default flag (see above).

 1public function configure(): void
 2{
 3  // Takes a callback that gives you the current column, row, column index, and row index
 4  $this->setTdAttributes(function(Column $column, $row, $columnIndex, $rowIndex) {
 5    if ($column->isField('total') && $row->total < 1000) {
 6      return [
 7        'default' => true,
 8        'class' => 'bg-red-500 text-white',
 9      ];
10    }
11 
12    return ['default' => true];
13  });
14}

#Reorder Column

Note: If you are using Reorder, then the td for Reorder can be styled separately. However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6

You can use the "title" of the Column, which will be "reorder" for the "reorder" Column:

 1public function configure(): void
 2{
 3  $this->setTdAttributes(function(Column $column) {
 4      if ($column->getTitle() == 'reorder')
 5      {
 6          return [
 7              'class' => 'bg-green-500 dark:bg-green-800',
 8              'default' => false,
 9              'default-colors' => false,
10          ];
11 
12      }
13 
14    return ['default' => true];
15  });
16}

#Bulk Actions Column

Note: If you are using Bulk Actions, then the td for Bulk Actions can be styled separately. However this is now replaced with the following to ensure consistent behaviour. The separate method will be supported until at least v3.6

You can use the "title" of the Column, which will be "bulkactions" for the "Bulk Actions" Column:

 1public function configure(): void
 2{
 3  $this->setTdAttributes(function(Column $column) {
 4      if ($column->getTitle() == 'bulkactions')
 5      {
 6          return [
 7              'class' => 'bg-yellow-500 dark:bg-yellow-800',
 8              'default' => false,
 9              'default-colors' => false,
10          ];
11 
12      }
13 
14    return ['default' => true];
15  });
16}