The package offers significant opportunities to customise the look & feel of the core table, as well as other elements (which are documented in the relevant sections).

#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

#Attributes

#setComponentWrapperAttributes

Set a list of attributes to override on the main wrapper of the component

1public function configure(): void
2{
3  $this->setComponentWrapperAttributes([
4    'id' => 'my-id',
5    'class' => 'this that',
6  ]);
7}

#setTableWrapperAttributes

Set a list of attributes to override on the div that wraps the table

1public function configure(): void
2{
3  $this->setTableWrapperAttributes([
4    'id' => 'my-id',
5    'class' => 'this that',
6  ]);
7}

By default, this replaces the default classes on the table wrapper, if you would like to keep them, set the default flag to true.

1public function configure(): void
2{
3  $this->setTableWrapperAttributes([
4    'default' => true,
5    'class' => 'added these classes',
6  ]);
7}

#setTableAttributes

Set a list of attributes to override on the table element

1public function configure(): void
2{
3  $this->setTableAttributes([
4    'id' => 'my-id',
5    'class' => 'this that',
6  ]);
7}

By default, this replaces the default classes on the table, if you would like to keep them, set the default flag to true.

1public function configure(): void
2{
3  $this->setTableAttributes([
4    'default' => true,
5    'class' => 'added these classes',
6  ]);
7}

#setTheadAttributes

Set a list of attributes to override on the thead element

1public function configure(): void
2{
3  $this->setTheadAttributes([
4    'id' => 'my-id',
5    'class' => 'this that',
6  ]);
7}

By default, this replaces the default classes on the thead, if you would like to keep them, set the default flag to true.

1public function configure(): void
2{
3  $this->setTheadAttributes([
4    'default' => true,
5    'class' => 'added these classes',
6  ]);
7}

#setTbodyAttributes

Set a list of attributes to override on the tbody element

1public function configure(): void
2{
3  $this->setTbodyAttributes([
4    'id' => 'my-id',
5    'class' => 'this that',
6  ]);
7}

By default, this replaces the default classes on the tbody, if you would like to keep them, set the default flag to true.

1public function configure(): void
2{
3  $this->setTbodyAttributes([
4    'default' => true,
5    'class' => 'added these classes',
6  ]);
7}

#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 default flag to true.

 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

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 
11    return [];
12  });
13}

By default, this replaces the default classes on the td, if you would like to keep them, set the default flag to true.

 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}

#setSearchFieldAttributes

Set a list of attributes to override on the search field

1public function configure(): void
2{
3  $this->setSearchFieldAttributes([
4    'class' => 'this that',
5  ]);
6}

By default, this replaces the default classes on the search field, if you would like to keep them, set the default flag to true.

1public function configure(): void
2{
3  $this->setSearchFieldAttributes([
4    'default' => true,
5    'class' => 'added these classes',
6  ]);
7}

#setCollapsingColumnButtonCollapseAttributes

This customises the look & feel of the button displayed to Collapse an expanded Collapsed Column

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonCollapseAttributes([
4    'class' => 'text-blue-500',
5  ]);
6}

By default, this replaces the default classes on the button, if you would like to keep: Default Colors: set default-colors flag to true. Default Styling: set default-styling flag to true.

#Keeping the Default Styling

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonCollapseAttributes([
4    'default-styling' => true,
5    'class' => 'text-blue-500',
6  ]);
7}

#Keeping the Default Colors

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonCollapseAttributes([
4    'default-colors' => true,
5    'class' => 'h-12 w-12',
6  ]);
7}

#Replacing All

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonCollapseAttributes([
4    'class' => 'h-12 w-12 text-blue-500',
5  ]);
6}

#setCollapsingColumnButtonExpandAttributes

This customises the look & feel of the button displayed to Expand a collapsed Collapsed Column

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonExpandAttributes([
4    'class' => 'text-red-500',
5  ]);
6}

By default, this replaces the default classes on the button, if you would like to keep: Default Colors: set default-colors flag to true. Default Styling: set default-styling flag to true.

#Keeping the Default Styling

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonExpandAttributes([
4    'default-styling' => true,
5    'class' => 'text-red-500',
6  ]);
7}

#Keeping the Default Colors

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonExpandAttributes([
4    'default-colors' => true,
5    'class' => 'h-12 w-12',
6  ]);
7}

#Replacing All

1public function configure(): void
2{
3  $this->setCollapsingColumnButtonExpandAttributes([
4    'class' => 'h-12 w-12 text-red-500',
5  ]);
6}

#Vertical Scrolling Example

Should you wish to implement a table with a responsive height, and vertical scrolling for additional rows, a basic example is below that demonstrates the approach, noting that you will likely wish to adjust the break-points!

 1public function configure(): void
 2{
 3 
 4    $this->setTableWrapperAttributes([
 5        'class' => 'max-h-56 md:max-h-72 lg:max-h-96 overflow-y-scroll',
 6        ]);
 7    $this->setTheadAttributes([
 8        'class' => 'sticky top-0 '
 9    ]);
10}

Keep in mind that you must only call methods from configure() once to avoid overriding or conflicting results.