Angular Grid Toolbar | Material Table | Ignite UI for Angular | infragistics - Native Angular

The Hierarchical Grid in Ignite UI for Angular provides an IgxGridToolbarComponent which is essentially a container for UI operations. The Angular toolbar is located at the top of the Angular component, i.e the Hierarchical Grid and it matches its horizontal size. The toolbar container hosts different UI controls which are related to some of the Hierarchical Grid's features - column hiding, column pinning, excel exporting, etc and supports Angular events.

Demo

The toolbar is shown using the Hierarchical Grid's showToolbar property - just set it to true. The toolbar supports a textual title which is left aligned and its content is set using the Hierarchical Grid's toolbarTitle property. The following code snippet demonstrates how to enable a toolbar and set its title:

<igx-hierarchical-grid #hierarchicalGrid class="hgrid" [data]="localdata" [showToolbar]="true" toolbarTitle="Singers" 
     [height]="'500px'" [width]="'800px'">
</igx-hierarchical-grid>

Features

The toolbar can be configured to allow column hiding, column pinning and exporting data to MS Excel and CSV. You can enable each feature independently by setting its dedicated boolean property to true:

for column hiding set columnHiding to true
for column pinning set columnPinning to true
for MS Excel export set the Hierarchical Grid's exportExcel property to true
for CSV export set the Hierarchical Grid's exportCsv property to true

Note

When exporting the Hierarchical Grid or any of its child grids down the hierarchy, the exported data will be a flat collection of rows that belong to the respective grid (the child grids will not be included in the exported data).

There are also properties for configuring each button's text and they are listed in the API section below.

The following code snippet demonstrates how to enable all features of the toolbar:

 <igx-hierarchical-grid #hierarchicalGrid class="hgrid" [data]="localdata" [showToolbar]="true" toolbarTitle="Singers" 
    [columnHiding]="true" [columnPinning]="true" [height]="'500px'" [width]="'100%'">
...
</igx-hierarchical-grid>

The export to MS Excel and the export to CSV features are using respectively the IgxExcelExporterService and IgxCsvExporterService as providers. If you need to use any of them you should specify them in the providers array of your app.module.ts file. For example the following code snippet demonstrates how to include all exporter services:

// app.module.ts

...
import { IgxExcelExporterService, IgxCsvExporterService } from "igniteui-angular";

@NgModule({
  providers: [ IgxExcelExporterService, IgxCsvExporterService ]
})

export class AppModule {}

Custom Content Template

If you need to add some application specific UI to the toolbar (like custom buttons for example) you may create an ng-template and mark it with the igxToolbarCustomContent directive. The following code snippet demonstrates how to define such custom template:

<igx-hierarchical-grid [showToolbar]="true" ...>

    ...

    <ng-template igxToolbarCustomContent let-hierarchicalGrid="grid">
        <button igxButton="flat" igxRipple igxRippleCentered="true" (click)="hierarchicalGrid.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>
    </ng-template>
</igx-hierarchical-grid>

Note

The igxToolbarCustomContent directive's context contains two properties: grid - a reference to the IgxHierarchicalGridComponent containing the toolbar and toolbar - a reference to the IgxGridToolbarComponent

The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers:

Styling

To get started with styling the toolbar, we need to import the index file, where all the theme functions and component mixins live:

// custom-grid-paging-style.component.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the igx-grid-toolbar-theme and accepts the $background-color and the $title-text-color parameters.

$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
    $background-color: #292826,
    $title-text-color: #FFCD0F
);

In order to style the buttons inside the toolbar, we will also create another theme that extends the igx-button-theme.

$dark-button-theme: igx-button-theme(
    $outlined-background: #FFCD0F,
    $outlined-text-color: #292826,
    $outlined-hover-background: #404040,
    $outlined-hover-text-color: #FFCD0F
);

The last step is to include the newly created themes. The button theme will be scoped to the actions container of the toolbar, so the buttons outside the toolbar do not get affected by it.

@include igx-grid-toolbar($dark-grid-toolbar-theme);
.igx-grid-toolbar__actions {
    @include igx-button($dark-button-theme);

    .igx-button--outlined {
        margin-left: 0.5rem;
        border: none;
    }
}

Note

If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep:

:host {
    ::ng-deep {
        @include igx-grid-toolbar($dark-grid-toolbar-theme);

        .igx-grid-toolbar__actions {
            @include igx-button($dark-button-theme);

            .igx-button--outlined {
                margin-left: 0.5rem;
                border: none;
            }
        }
    }
}

Defining a color palette

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the primary and secondary colors that are passed:

$yellow-color: #FFCD0F;
$black-color: #292826;

$dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);

And then with igx-color we can easily retrieve color from the palette.

$dark-button-theme: igx-button-theme(
    $outlined-background: igx-color($dark-palette, "secondary", 400),
    $outlined-text-color: igx-color($dark-palette, "primary", 400),
    $outlined-hover-background: igx-color($dark-palette, "primary", 400),
    $outlined-hover-text-color: igx-color($dark-palette, "secondary", 400)
);

$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
    $background-color: igx-color($dark-palette, "primary", 200),
    $title-text-color: igx-color($dark-palette, "secondary", 400)
);

Note

The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.

Using Schemas

Going further with the theming engine, you can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

Extend one of the two predefined schemas, that are provided for every component, in this case - dark-grid-toolbar and dark-button schemas:

$dark-grid-toolbar-schema: extend($_dark-grid-toolbar,
    (
        background-color:(
            igx-color: ("primary", 200)
        ),
        title-text-color:(
            igx-color: ("secondary", 400)
        )
    )
);

$dark-button-schema: extend($_dark-button,
    (
        outlined-background: (
            igx-color: ("secondary", 400)
        ),
        outlined-text-color: (
            igx-color: ("primary", 400)
        ),
        outlined-hover-background: (
            igx-color: ("primary", 400)
        ),
        outlined-hover-text-color: (
            igx-color: ("secondary", 400)
        )
    )
);

In order to apply our custom schemas we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
    igx-grid-toolbar: $dark-grid-toolbar-schema,
    igx-button: $dark-button-schema
));

// Defining button-theme with the global dark schema
$dark-button-theme: igx-button-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

// Defining grid-toolbar-theme with the global dark schema
$dark-grid-toolbar-theme: igx-grid-toolbar-theme(
  $palette: $dark-palette,
  $schema: $custom-dark-schema
);

Don't forget to include the themes in the same way as it was demonstrated above.