diff --git a/docs/columns/available-methods.md b/docs/columns/available-methods.md index ebd7fa051..23797087d 100644 --- a/docs/columns/available-methods.md +++ b/docs/columns/available-methods.md @@ -153,7 +153,15 @@ The component has the ability to collapse certain columns at different screen si ![Collapsing](https://imgur.com/z1rWHzP.png) -You have 2 options when it comes to collapsing. +You have 3 options when it comes to collapsing. + +Collapse Always: + +```php +Column::make('Name') + ->collapseAlways(), +``` +The columns will always be collapsed Collapse on tablet: diff --git a/resources/views/components/table/row-contents.blade.php b/resources/views/components/table/row-contents.blade.php index d3602c9a7..1e4aea9a5 100644 --- a/resources/views/components/table/row-contents.blade.php +++ b/resources/views/components/table/row-contents.blade.php @@ -6,6 +6,10 @@ $colspan = $component->getColspanCount(); $columns = collect(); + if($component->shouldCollapseAlways()) + { + $columns->push($component->getCollapsedAlwaysColumns()); + } if ($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) { $columns->push($component->getCollapsedMobileColumns()); $columns->push($component->getCollapsedTabletColumns()); @@ -26,8 +30,8 @@ wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60" @class([ - 'hidden md:hidden bg-white dark:bg-gray-700 dark:text-white' => $component->isTailwind(), - 'd-none d-md-none' => $component->isBootstrap() + 'hidden bg-white dark:bg-gray-700 dark:text-white' => $component->isTailwind(), + 'd-none' => $component->isBootstrap() ]) > columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column))

$component->isTailwind() && $column->shouldCollapseOnMobile(), - 'block mb-2 md:hidden' => $component->isTailwind() && $column->shouldCollapseOnTablet(), - 'd-block mb-2 d-sm-none' => $component->isBootstrap() && $column->shouldCollapseOnMobile(), - 'd-block mb-2 d-md-none' => $component->isBootstrap() && $column->shouldCollapseOnTablet(), + 'block mb-2' => $component->isTailwind() && $column->shouldCollapseAlways(), + 'block mb-2 sm:hidden' => $component->isTailwind() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(), + 'block mb-2 md:hidden' => $component->isTailwind() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(), + 'block mb-2 lg:hidden' => $component->isTailwind() && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()), + + 'd-block mb-2' => $component->isBootstrap() && $column->shouldCollapseAlways(), + 'd-block mb-2 d-sm-none' => $component->isBootstrap() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(), + 'd-block mb-2 d-md-none' => $component->isBootstrap() && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(), + 'd-block mb-2 d-lg-none' => $component->isBootstrap() && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()), + ]) > {{ $column->getTitle() }}: {{ $column->renderContents($row) }} diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php index 3ff531c81..2201356d2 100644 --- a/resources/views/components/table/td.blade.php +++ b/resources/views/components/table/td.blade.php @@ -14,6 +14,7 @@ {{ $attributes->merge($customAttributes) ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true]) + ->class(['hidden' => $column && $column->shouldCollapseAlways()]) ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()]) ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()]) ->except('default') @@ -31,6 +32,7 @@ {{ $attributes->merge($customAttributes) ->class(['' => $customAttributes['default'] ?? true]) + ->class(['d-none' => $column && $column->shouldCollapseAlways()]) ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()]) ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()]) ->except('default') diff --git a/resources/views/components/table/td/plain.blade.php b/resources/views/components/table/td/plain.blade.php index 3da291073..1135cf0f5 100644 --- a/resources/views/components/table/td/plain.blade.php +++ b/resources/views/components/table/td/plain.blade.php @@ -5,6 +5,7 @@ merge($customAttributes) ->class(['px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true]) + ->class(['hidden' => $column && $column->shouldCollapseAlways()]) ->class(['hidden sm:table-cell' => $column && $column->shouldCollapseOnMobile()]) ->class(['hidden md:table-cell' => $column && $column->shouldCollapseOnTablet()]) ->except('default') @@ -15,6 +16,7 @@ merge($customAttributes) ->class(['' => $customAttributes['default'] ?? true]) + ->class(['d-none' => $column && $column->shouldCollapseAlways()]) ->class(['d-none d-sm-table-cell' => $column && $column->shouldCollapseOnMobile()]) ->class(['d-none d-md-table-cell' => $column && $column->shouldCollapseOnTablet()]) ->except('default') diff --git a/resources/views/components/table/td/row-contents.blade.php b/resources/views/components/table/td/row-contents.blade.php index d74bb4eb0..017664f74 100644 --- a/resources/views/components/table/td/row-contents.blade.php +++ b/resources/views/components/table/td/row-contents.blade.php @@ -3,24 +3,20 @@ @if ($component->collapsingColumnsAreEnabled() && $component->hasCollapsedColumns()) @if ($component->isTailwind()) - merge(['class' => 'p-3 table-cell text-center']) - ->class([ - 'md:hidden' => - (($component->shouldCollapseOnMobile() && $component->shouldCollapseOnTablet()) || - ($component->shouldCollapseOnTablet() && ! $component->shouldCollapseOnMobile())) - ]) - ->class(['sm:hidden' => $component->shouldCollapseOnMobile() && ! $component->shouldCollapseOnTablet()]) + ->merge(['class' => 'p-3 table-cell text-center ']) + ->class(['sm:hidden' => !$component->shouldCollapseAlways() && !$component->shouldCollapseOnTablet()]) + ->class(['md:hidden' => !$component->shouldCollapseAlways() && !$component->shouldCollapseOnTablet() && $component->shouldCollapseOnMobile()]) + ->class(['lg:hidden' => !$component->shouldCollapseAlways() && ($component->shouldCollapseOnTablet() || $component->shouldCollapseOnMobile())]) }} :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''" > @if (! $hidden)