Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 65 additions & 1 deletion docs/columns/column-selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -222,4 +222,68 @@ class DataTableColumnsSelectedListener
}

}
```
```

## Styling

### setColumnSelectButtonAttributes
Allows for customisation of the appearance of the "Column Select" button

Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.

#### default-colors
Setting to false will disable the default colors for the Column Select button, the default colors are:

Bootstrap: None

Tailwind: `text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600`

#### default-styling
Setting to false will disable the default styling for the Column Select button, the default styling is:

Bootstrap: `btn dropdown-toggle d-block w-100 d-md-inline`

Tailwind: `inline-flex justify-center px-4 py-2 w-full text-sm font-medium rounded-md border shadow-sm focus:ring focus:ring-opacity-50`

```php
public function configure(): void
{
$this->setColumnSelectButtonAttributes([
'class' => 'focus:border-rose-300 focus:ring-1 focus:ring-rose-300 focus-visible:outline-rose-300', // Add these classes to the column select button
'default-colors' => false, // Do not output the default colors
'default-styling' => true // Output the default styling
]);
}
```

### setColumnSelectMenuOptionCheckboxAttributes
Allows for customisation of the appearance of the "Column Select" menu option checkbox

Note that this utilises a refreshed approach for attributes, and allows for appending to, or replacing the styles and colors independently, via the below methods.

#### default-colors
Setting to false will disable the default colors for the Column Select menu option checkbox, the default colors are:

Bootstrap: None

Tailwind: `text-indigo-600 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600`
#### default-styling

Setting to false will disable the default styling for the Column Select menu option checkbox, the default styling is:

Bootstrap 4: None

Bootstrap 5: `form-check-input`

Tailwind: `transition duration-150 ease-in-out rounded shadow-sm focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-wait`

```php
public function configure(): void
{
$this->setColumnSelectMenuOptionCheckboxAttributes([
'class' => 'text-rose-300 focus:border-rose-300 focus:ring-rose-300', // Add these classes to the column select menu option checkbox
'default-colors' => false, // Do not output the default colors
'default-styling' => true // Output the default styling
]);
}
```
Loading
Loading