Skip to content

Commit

Permalink
Set Custom Classes for Collapsing Column - Collapse/Expand buttons (#…
Browse files Browse the repository at this point in the history 
…1785)

* Initial Commit

* Update Blade

* Add Tests for Collapsing Column Button Attributes

* Add DocBlock
---------

Co-authored-by: lrljoe <[email protected]>
  • Loading branch information
@lrljoe
lrljoe and lrljoe authored Jul 19, 2024
1 parent 98117b6 commit e64fa40
Show file tree
Hide file tree
Showing 7 changed files with 516 additions and 282 deletions.
280 changes: 2 additions & 278 deletions docs/datatable/available-methods.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,283 +20,7 @@ public function configure(): void

## Attributes

### setComponentWrapperAttributes

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

```php
public function configure(): void
{
$this->setComponentWrapperAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
```

### setTableWrapperAttributes

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

```php
public function configure(): void
{
$this->setTableWrapperAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
```

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

```php
public function configure(): void
{
$this->setTableWrapperAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
```

### setTableAttributes

Set a list of attributes to override on the table element

```php
public function configure(): void
{
$this->setTableAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
```

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

```php
public function configure(): void
{
$this->setTableAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
```

### setTheadAttributes

Set a list of attributes to override on the thead element

```php
public function configure(): void
{
$this->setTheadAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
```

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

```php
public function configure(): void
{
$this->setTheadAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
```

### setTbodyAttributes

Set a list of attributes to override on the tbody element

```php
public function configure(): void
{
$this->setTbodyAttributes([
'id' => 'my-id',
'class' => 'this that',
]);
}
```

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

```php
public function configure(): void
{
$this->setTbodyAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
```

### setThAttributes

Set a list of attributes to override on the th elements

```php
public function configure(): void
{
// Takes a callback that gives you the current column.
$this->setThAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'class' => 'bg-green-500',
];
}

return [];
});
}
```

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

```php
public function configure(): void
{
$this->setThAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'default' => true,
'class' => 'bg-green-500',
];
}

return ['default' => true];
});
}
```

### setThSortButtonAttributes

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

```php
public function configure(): void
{
// Takes a callback that gives you the current column.
$this->setThSortButtonAttributes(function(Column $column) {
if ($column->isField('name')) {
return [
'class' => 'bg-green-500',
];
}

return [];
});
}
```

### setTrAttributes

Set a list of attributes to override on the tr elements

```php
public function configure(): void
{
// Takes a callback that gives you the current row and its index
$this->setTrAttributes(function($row, $index) {
if ($index % 2 === 0) {
return [
'class' => 'bg-gray-200',
];
}

return [];
});
}
```

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

```php
public function configure(): void
{
$this->setTrAttributes(function($row, $index) {
if ($index % 2 === 0) {
return [
'default' => true,
'class' => 'bg-gray-200',
];
}

return ['default' => true];
});
}
```

### setTdAttributes

Set a list of attributes to override on the td elements

```php
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 [];
});
}
```

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

```php
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 [
'default' => true,
'class' => 'bg-red-500 text-white',
];
}

return ['default' => true];
});
}

```
### setSearchFieldAttributes

Set a list of attributes to override on the search field

```php
public function configure(): void
{
$this->setSearchFieldAttributes([
'class' => 'this that',
]);
}
```

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

```php
public function configure(): void
{
$this->setSearchFieldAttributes([
'default' => true,
'class' => 'added these classes',
]);
}
```
Documentation for Data Table Styling/Attributes is now: <a href="https://rappasoft.com/docs/laravel-livewire-tables/v3/columns/styling" aria-label="Documentation for Data Table Styling" >Here</a>

## Offline

Expand Down Expand Up @@ -461,4 +185,4 @@ public function configure(): void
{
$this->setEmptyMessage('No results found');
}
```
```
Loading

0 comments on commit e64fa40

Please sign in to comment.