Angular Grid Toolbar

    The 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 Grid and it matches its horizontal size. The toolbar container can host predefined UI controls for the following Grid's features:

    • Column Hiding
    • Column Pinning
    • Excel Exporting
    • Advanced Filtering

    or just any other custom content. The toolbar and the predefined UI components support Angular events and expose API for developers.

    Angular Toolbar Grid Example

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    The predefined actions and title UI components are added inside the <igx-grid-toolbar> and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

    <igx-grid [data]="data" [autoGenerate]="true">
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Grid Toolbar</igx-grid-toolbar-title>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-advanced-filtering><igx-grid-toolbar-advanced-filtering>
            <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
            <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
</igx-grid>
html

    Note: As seen in the code snippet above, the predefined actions UI components are wrapped in the <igx-grid-toolbar-actions> container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

    Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty:

    <igx-grid [data]="data" [autoGenerate]="true">
    <igx-grid-toolbar>
    </igx-grid-toolbar>
</igx-grid>
html

    For a comprehensive look over each of the default UI components, continue reading the Features section below.

    Features

    The toolbar is great at separating logic/interactions which affects the grid as a whole. As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid. These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Angular suite. Listed below are the main features of the toolbar with example code for each of them.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Title

    Setting a title for the toolbar in your grid is achieved by using the IgxGridToolbarTitleComponent. Users can provide anything from simple text to more involved templates.

    <igx-grid-toolbar>
    <igx-grid-toolbar-title>Grid toolbar title</igx-grid-toolbar-title>
</igx-grid-toolbar>
html

    Actions

    The toolbar exposes a specific container where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components.

    <igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <button igxButton>Action</button>
        <igx-select></igx-select>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>
html

    Each action now exposes a way to change the overlay settings of the actions dialog by using the overlaySettings input, example:

    <igx-grid-toolbar-actions>
    <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsScaleCenter"></igx-grid-toolbar-pinning>
    <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
html
    public data: any[];
public positionStrategyScaleCenter = new GlobalPositionStrategy({
    openAnimation: scaleInCenter,
    closeAnimation: scaleOutCenter
});
public overlaySettingsScaleCenter = {
    positionStrategy: this.positionStrategyScaleCenter,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: true,
    closeOnEscape: true
};

public positionStrategyAuto = new AutoPositionStrategy();
public overlaySettingsAuto = {
    positionStrategy: this.positionStrategyAuto,
    scrollStrategy: new AbsoluteScrollStrategy(),
    modal: false,
    closeOnEscape: false
};
constructor() {
    this.data = athletesData;
}
ts

    The default overlaySettings are using ConnectedPositionStrategy with Absolute scroll strategy, modal set to false, with enabled close on escape and close on outside click interactions.

    Column pinning

    Toolbar Pinning component provides the default UI for interacting with column pinning in the grid. The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

    <igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-pinning
            title="Grid pinned columns"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-pinning>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>
html

    Column hiding

    Toolbar Hiding component provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

    <igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            columnListHeight="400px"
        >
        </igx-grid-toolbar-hiding>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>
html

    Advanced filtering

    Toolbar Advanced Filtering component provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button.

    <igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-advanced-filtering>Custom text for the toggle button</igx-grid-toolbar-advanced-filtering>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>
html

    Data exporting

    As with the rest of the toolbar actions, exporting is provided through a Toolbar Exporter component out of the box. The exporting component is using the respective service for the target data format (Excel CSV). That means if the respective service is not provided through the dependency injection chain, the component won't be able to export anything. If you need a refresher on the DI in Angular, check the official guide. Here is a sample snippet showing how to enable all export services for your application.

    // app.module.ts

import { IgxExcelExporterService, IgxCsvExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService, IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    providers: [IgxExcelExporterService, IgxCsvExporterService ]
})
export class AppModule { ... }
typescript

    In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers.

    The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience. These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the toolbar exporter component.

    Here is a snippet showing some of the options which can be customized through the Angular template:

    <igx-grid-toolbar>
    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-exporter
            <!-- If active, enables the csv export entry in the dropdown UI -->
            [exportCSV]="csvExportEnabled"
            <!-- If active, enables the excel export entry in the dropdown UI -->
            [exportExcel]="excelExportEnabled"
            <!-- The name of the generated export file without the file extension -->
            filename="exported_data"
        >
            Custom text for the exporter button
            <span excelText>Custom text for the excel export entry</span>
            <span csvText>Custom text for the CSV export entry</span>
        </igx-grid-toolbar-exporter>
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>
html

    In addition to changing the exported filename, the user can further configure the exporter options by waiting for the toolbarExporting event and customizing the options entry in the event properties.

    By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.

    The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options:

    <igx-grid (toolbarExporting)="configureExport($event)" ></igx-grid>
html
    configureExport(args: IGridToolbarExportEventArgs) {
    const options: IgxExporterOptionsBase = args.options;
    
    options.fileName = `Report_${new Date().toDateString()}`;

    if (options instanceof IgxExcelExporterOptions) {
        options.columnWidth = 10;
    } else {
        options.fileType = CsvFileTypes.TSV;
        options.valueDelimiter = '\t';
    }

    args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => {
        
        // Don't export image fields
        columnArgs.cancel = columnArgs.header === 'Athlete' ||
                            columnArgs.header === 'Country';
        
        
    });
}
typescript

    The following sample demonstrates how to customize the exported files:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Exporting Indicator

    When using the default toolbar exporter component, whenever an export operation takes place the toolbar will show a progress indicator while the operation is in progress. Moreover, users can set the toolbar showProgress property and use for their own long running operations or just as another way to signify an action taking place in the grid. The sample below has significant amount of data. While the data is being exported, the progress bar is shown. Additionally, it has another button that simulates a long running operation in the grid:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Custom Content

    This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified template files after the migration completes.

    If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable.

    Here is a sample snippet:

    <igx-grid #gridRef ...>

    ...
    <igx-grid-toolbar>
        <igx-grid-toolbar-title>{{ titleBinding }}</igx-grid-toolbar-title>

        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <button igxButton="flat" igxRipple (click)="#gridRef.clearSort()">
            <igx-icon fontSet="material">clear</igx-icon>
            Clear Sort
        </button>

        <igx-grid-toolbar-actions>
            ...
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

</igx-grid>
html

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA Banner

    Styling

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

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

    First, let's create a new palette.

    $my-dark-palette: palette(
  $primary: #2466ff,
  $secondary: #ffcd0f,
  $surface: #2a2b2f,
  $grays: #fff,
);

$my-dark-color: color($my-dark-palette, 'surface');
scss

    Now, create a new theme that extends the grid-toolbar-theme and modify the $background-color and the $title-text-color parameters.

    $dark-grid-toolbar-theme: grid-toolbar-theme(
  $background-color: $my-dark-color,
  $title-text-color: color($my-dark-palette, 'secondary'),
  $dropdown-background: $my-dark-color,
);
scss

    To theme the column actions menus of the toolbar, we have to change the theme of the column-actions-theme component.

    $dark-column-actions-theme: column-actions-theme(
  $title-color: color($my-dark-palette, 'secondary'),
  $background-color: color($my-dark-palette, 'surface')
);
scss

    Since the column actions are using other components - igx-button and igx-checkbox we need to change their themes to match our new toolbar theme.

    $dark-button-theme: button-theme(
  $outlined-background: color($my-dark-palette, 'secondary'),
  $outlined-hover-background: color($my-dark-palette, 'grays', 100),
  $outlined-hover-text-color: color($my-dark-palette, 'secondary')
);

$dark-checkbox-theme: checkbox-theme(
  $tick-color: $my-dark-color,
);
scss

    The last step is to include the newly created themes.

    @include css-vars($dark-grid-toolbar-theme);
@include css-vars($dark-column-actions-theme);
@include css-vars($dark-checkbox-theme);
@include css-vars($dark-button-theme);
scss

    If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep to style the components inside the grid toolbar component:

    @include css-vars($dark-grid-toolbar-theme);

:host {
  ::ng-deep {
    @include css-vars($dark-column-actions-theme);
    @include css-vars($dark-checkbox-theme);
    @include css-vars($dark-button-theme);
  }
}
scss

    Demo

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    API References

    The Grid Toolbar service has a few more APIs to explore, which are listed below.

    IgxGridComponent events:

    Styles:

    Additional Resources

    Our community is active and always welcoming to new ideas.