feat: add support for default collapsed grouping in table records. (#17920)

* feat: add support for default collapsed grouping in table records.

* Updated documentation to include new `groupingDefaultCollapsed` method.

* Reset collapsed groups array on initialization for default grouping.

* fix: enhance group collapse behavior based on default setting

* Reverted the changes that was in my PR that I somehow managed to change.

* Correct input tag formatting in index.blade.php

* Fix formatting in table.js

* Formatting fix for table.js

* clean up

---------

Co-authored-by: Dan Harrin <git@danharrin.com>

packages/tables/docs/07-grouping.md

@@ -202,6 +202,27 @@ public function table(Table $table): Table
 }
 ```
 
+### Collapsing groups by default
+
+By default, groups with the `collapsible()` method are expanded when the table loads.
+
+If you want all groups to be collapsed by default when the table loads, use `$table->collapsedGroupsByDefault()`:
+
+```php
+use Filament\Tables\Grouping\Group;
+use Filament\Tables\Table;
+
+public function table(Table $table): Table
+{
+    return $table
+        ->groups([
+            Group::make('author.name')
+                ->collapsible(),
+        ])
+        ->collapsedGroupsByDefault();
+}
+```
+
 ## Summarising groups
 
 You can use [summaries](summaries) with groups to display a summary of the records inside a group. This works automatically if you choose to add a summariser to a column in a grouped table.

packages/tables/resources/js/components/table.js

@@ -1,4 +1,5 @@
 export default ({
+    areGroupsCollapsedByDefault,
     canTrackDeselectedRecords,
     currentSelectionLivewireProperty,
     maxSelectableRecords,
@@ -7,7 +8,7 @@ export default ({
 }) => ({
     checkboxClickController: null,
 
-    collapsedGroups: [],
+    groupVisibility: [],
 
     isLoading: false,
 
@@ -266,20 +267,36 @@ export default ({
 
     toggleCollapseGroup(group) {
         if (this.isGroupCollapsed(group)) {
-            this.collapsedGroups.splice(this.collapsedGroups.indexOf(group), 1)
-
-            return
+            if (areGroupsCollapsedByDefault) {
+                this.groupVisibility.push(group)
+            } else {
+                this.groupVisibility.splice(
+                    this.groupVisibility.indexOf(group),
+                    1,
+                )
+            }
+        } else {
+            if (areGroupsCollapsedByDefault) {
+                this.groupVisibility.splice(
+                    this.groupVisibility.indexOf(group),
+                    1,
+                )
+            } else {
+                this.groupVisibility.push(group)
+            }
         }
-
-        this.collapsedGroups.push(group)
     },
 
     isGroupCollapsed(group) {
-        return this.collapsedGroups.includes(group)
+        if (areGroupsCollapsedByDefault) {
+            return !this.groupVisibility.includes(group)
+        }
+
+        return this.groupVisibility.includes(group)
     },
 
     resetCollapsedGroups() {
-        this.collapsedGroups = []
+        this.groupVisibility = []
     },
 
     watchForCheckboxClicks() {

packages/tables/resources/views/index.blade.php

@@ -83,6 +83,7 @@
     $isReordering = $isReordering();
     $areGroupingSettingsVisible = (! $isReordering) && count($groups) && (! $areGroupingSettingsHidden());
     $isGroupingDirectionSettingHidden = $isGroupingDirectionSettingHidden();
+    $areGroupsCollapsedByDefault = $areGroupsCollapsedByDefault();
     $areGroupingSettingsInDropdownOnDesktop = $areGroupingSettingsInDropdownOnDesktop();
     $isColumnSearchVisible = $isSearchableByColumn();
     $isGlobalSearchVisible = $isSearchable();
@@ -136,6 +137,7 @@
         wire:init="loadTable"
     @endif
     x-data="filamentTable({
+                areGroupsCollapsedByDefault: @js($areGroupsCollapsedByDefault),
                 canTrackDeselectedRecords: @js($canTrackDeselectedRecords()),
                 currentSelectionLivewireProperty: @js($getCurrentSelectionLivewireProperty()),
                 maxSelectableRecords: @js($maxSelectableRecords),

packages/tables/src/Table/Concerns/CanGroupRecords.php

@@ -32,6 +32,8 @@ trait CanGroupRecords
 
     protected bool | Closure $isGroupingDirectionSettingHidden = false;
 
+    protected bool | Closure $areGroupsCollapsedByDefault = false;
+
     protected ?Closure $modifyGroupRecordsTriggerActionUsing = null;
 
     public function groupRecordsTriggerAction(?Closure $callback): static
@@ -72,6 +74,13 @@ trait CanGroupRecords
         return $this;
     }
 
+    public function collapsedGroupsByDefault(bool | Closure $condition = true): static
+    {
+        $this->areGroupsCollapsedByDefault = $condition;
+
+        return $this;
+    }
+
     public function defaultGroup(string | Group | Closure | null $group): static
     {
         $this->defaultGroup = $group;
@@ -146,6 +155,11 @@ trait CanGroupRecords
         return (bool) $this->evaluate($this->isGroupingDirectionSettingHidden);
     }
 
+    public function areGroupsCollapsedByDefault(): bool
+    {
+        return (bool) $this->evaluate($this->areGroupsCollapsedByDefault);
+    }
+
     public function getDefaultGroup(): ?Group
     {
         $defaultGroup = $this->evaluate($this->defaultGroup);