[sourcing]: Expand/Collapse All buttons should be on the left most of the toolbar and need tooltips

[I835291]

This caused alignment issue, so I think it's a bug.

The Expand/Collapse All buttons are now in the middle of the toolbar. However, it does not look as some tables will not see it as the middle. Also, we don't have any tooltips for these buttons.

Angular 15

Add Expand/Collapse All buttons. The buttons are shown in the middle like the following:

I've tried to move to the left most position, it looks much nicer:

Please also add tooltips for these buttons.

Please provide relevant source code if applicable.

Is there anything else we should know?

[I543348]

This is a little high priority as we plan to deliver these areas to customer.
Can you please prioritize this issue for march 2023?
Thanks,

cc: @droshev , @mikerodonnell89

[I543348]

Issue logged for tooltips:#9551

[I543348]

Regarding placement of expand all / collapse all buttons , we contacted UX designers and as per fiori standard , the ask is to keep these buttons before sort button
https://experience.sap.com/internal/fiori-design-web/tree-toolbar/

cc: @droshev , @fkolar , @mikerodonnell89

[omband]

From the first picture I see that that the "centre" of 2 tables is also not same in the same page.
So the centre buttons won't be vertically aligned in a single view.

[fkolar]

@I543348 , On the picture you provided you say you like the left most position, but on the UX design link you sent it is positioned to the right .

What is the final expectation?

• Move These button from center to the right
• Keep these button before sort buttons?

[I543348]

Hi @fkolar , as per our last discussion , we will need these buttons before sort buttons (point 2)
Since I cannot modify the description of the issue on behalf of @I835291 I have commented here.

[droshev]

@I543348 The buttons are in the middle as the toolbar has few other features(title information with the number of items on the left and search on the right)
https://fundamental-ngx.netlify.app/#/platform/table#tree

If you pass the proper titling, which will help the accessibility, you won't see an empty gap.

[I543348]

Hi @droshev ,
Thanks for the updates,
Our use case in table has many action buttons on the right as in screenshot, also as per UX experts , we would like to have an option to make it place as in https://experience.sap.com/internal/fiori-design-web/tree-toolbar/ with or without title.
Please help here.

cc: @fkolar , @I835291

[fkolar]

If you need it on the right why:

1. dont you use - showExpandCollapseButtons = false
2. use fdp-table-toolbar-actions to pass actions before sort/group

• In this case it woudl be

 <fdp-table-toolbar-actions>
            <fdp-button glyph="expand-all" (click)="refToTable.expandAll()"></fdp-button>
            <fdp-button glyph="collapse-all" (click)="refToTable..collapseAll()"></fdp-button>
            <fd-toolbar-spacer></fd-toolbar-spacer> 
</fdp-table-toolbar-actions>

[I543348]

I see some weird performance issues with this suggested workaround, please check this recording below.
Even though i clicked on expand / collapse buttons they only operate on hover or clicking outside

workaround.mov

sample code snippet

<fdp-table #taskTable [dataSource]="tasksSource"
       <fdp-table-toolbar title=" " [hideItemCount]="true">            
<fdp-table-toolbar-actions>                
<fdp-button glyph="expand-all" (click)="taskTable.expandAll()" title="Expand"></fdp-button>                
<fdp-button glyph="collapse-all" (click)="taskTable.collapseAll()" title="Collpase"></fdp-button>                
<fd-toolbar-spacer></fd-toolbar-spacer>            
</fdp-table-toolbar-actions>        
</fdp-table-toolbar> 
bla bla bla
 </fdp-table> 

ts file

 @Component({
    selector: 'app-project-tasks',
    templateUrl: './project-tasks.component.html',
    styleUrls: ['./project-tasks.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,

[fkolar]

Yes, this is something to do with the how change detection is handled. There are tons of issues on the Angular side (link). It should work for you without a problem if your parent component is not OnPush. When OnPush, you need to call markForCheck from child component.

Internal component for certain cases should prefer using markForCheck, instead of it detectChanges.

So you can use. I just test it on one of the docs samples:

<fdp-table
    #table ...
<fdp-table-toolbar #toolbar title="Order Line Items"
                       [hideItemCount]="false" [showExpandCollapseButtons]="false">

        <fdp-table-toolbar-actions>
            <fdp-button glyph="expand-all" (click)="exp(table)"></fdp-button>
            <fdp-button glyph="collapse-all" (click)="cola(table)"></fdp-button>
            <fd-toolbar-spacer></fd-toolbar-spacer>
        </fdp-table-toolbar-actions>

    exp(tree: any) {
        tree.expandAll();
        tree._cdr.markForCheck();
    }

    cola(tree: any) {
        tree.collapseAll();
        tree._cdr.markForCheck();
    }
    

I expect that in your app code you will do this more elegant. This is quick test

[I543348]

Yes this last workaround works perfectly fine !
Thanks @fkolar

[fkolar]

Great. Also I think @droshev , this issue is ready to be closed. There are no father plan to change the data-table. Unless the whole UX is revised by central UX and this case applies to all.