Platform: Table toolbar Component V1.0 Technical Design

Table toolbar

Summary

The table toolbar always appears above the table and has a transparent background. The control is used for key actions that impact the entire table.

Example

<fdp-table-toolbar    [id]="id of the element'"
                      [clickable]="true|false'"
                      [width]="12rem"
                      [disabled]="true|false"
                      [type]="auto|info|solid|transparent"
                      (click)="onpress()">
                       toolbar title</fdp-table-toolbar>

Design

Property Bindings

[clickable]="true|false'":boolean

Defines toolbar text is selectable for the user. once value of the text property becomes active and acts like a link.

on text presence, active property will be set to true.

[width]="12rem"

Width of the toolbar

[disabled]="true|false"

toolbar is disabled or not

[type]: Tooltype

design type of toolbar

export type Tooltype="auto|info|solid|transparent";

Eventbinding

[click]="onToolBarclick()'"

Event fired on click of toolBar.

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-table-toolbar can be supported as:

<fdp-table-toolbar    
   i18n="@@tableTitle"
   [id]="id of the element'"
   [clickable]="true|false'"
   (click)="onpress()">
      toolbar title
</fdp-table-toolbar>

Redesign Required: No

---