The individual components placed inside of a toolbar are each wrapped in a DataToolbarItem component. DataToolbarItems can be passed an optional variant property to format a specific type of component it wraps. These particular components could be a search filter, a pagination component, a bulk select, or an overflow menu.

Wrapping components in the DataToolbarItem component and adding the proper variant ensures the components are spaced appropriately.

Use the state of the ToolbarDemoApp to manage the three applied filters in the DataToolbar.

1) Locate the following constructor in ToolbarDemoApp.

constructor(props) {
  super(props);
}

2) Initialize the state in the constructor located in step 1.

Add a filters object to the state. filters should have three properties (name, risk, and status), and each property should have an empty array as its value. This filters object will manage the three filters in the DataToolbar.

Once step 2 is completed, the constructor should look like the snippet below.

constructor(props) {
  super(props);
  this.state = {
    filters: {
      name: [],
      risk: [],
      status: []
    }
  };
}

3) Add two event handlers to the ToolbarDemoApp class

Both of the event handlers can be inserted outside and below the constructor modified in the previous steps.

a) Add the event handler onSearch which will fire when the user interacts with the name filter.

onSearch = (value) => {
  this.setState(prevState => {
    return {
      filters: {
        ...prevState.filters,
        name: [...prevState.filters.name, value]
      }
    };
  });
}

b) Add the event handler onSelect which will fire when the user interacts with the risk and status filters.

onSelect = (type, event, selection) => {
  const checked = event.target.checked;
  this.setState(prevState => {
    const prevSelections = prevState.filters[type.toLowerCase()];
    return {
      filters: {
        ...prevState.filters,
        [type.toLowerCase()]: checked
          ? [...prevSelections, selection]
          : prevSelections.filter(value => value !== selection)
      }
    };
  });
};

4) Declare constants in the render function.

Inside the top of the render function and above the return statement, add three constants.

a) Unwrap the state managed filters to be used by the DataToolbar.

b) Define the status and risk options that will appear in the two dropdown filters in the DataToolbar.

const { filters } = this.state;
const statusOptions = ["New", "Pending", "Running", "Cancelled"];
const riskOptions = ["Low", "Medium", "High"];

<DataToolbar id="tutorial-toolbar">
  <DataToolbarContent>
    Toolbar Demo
  </DataToolbarContent>
</DataToolbar>

<DataToolbarItem variant="search-filter">
  <Input value="" id="step2Input" ariaLabel="Step 2 input" />
</DataToolbarItem>
<DataToolbarItem>
  <CheckboxSelect
    onSelect={this.onSelect}
    type="Status"
    selections={filters.status}
    options={statusOptions}
  />
</DataToolbarItem>
<DataToolbarItem>
  <CheckboxSelect
    onSelect={this.onSelect}
    type="Risk"
    selections={filters.risk}
    options={riskOptions}
  />
</DataToolbarItem>
<DataToolbarItem>
  <Button variant="plain">
    <EditIcon />
  </Button>
</DataToolbarItem>
<DataToolbarItem>
  <Button variant="plain">
    <CloneIcon />
  </Button>
</DataToolbarItem>
<DataToolbarItem>
  <Button variant="plain">
    <SyncIcon />
  </Button>
</DataToolbarItem>
<DataToolbarItem>
  <Kebab />
</DataToolbarItem>

Toolbar groups are used to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. A DataToolbarGroup passes an optional property variant to format particular types of element groups such as filter groups, button groups, or icon button groups.

This step will group DataToolbarItem components into DataToolbarGroup components and apply appropriate variant properties.

1) Locate the following two DataToolbarItems containing CheckBoxSelect components:

<DataToolbarItem>
  <CheckboxSelect
    onSelect={this.onSelect}
    type="Status"
    selections={filters.status}
    options={statusOptions}
  />
</DataToolbarItem>
<DataToolbarItem>
  <CheckboxSelect
    onSelect={this.onSelect}
    type="Risk"
    selections={filters.risk}
    options={riskOptions}
  />
</DataToolbarItem>

2) Wrap both the DataToolbarItem components containing the CheckboxSelect filters in one DataToolbarGroup component.

3) Add the property variant="filter-group" to the DataToolbarGroup added in step 2.

This will space the two CheckboxSelect components according to the PatternFly design specifications.

Once completed, the code should appear as below.

<DataToolbarGroup variant="filter-group">
  <DataToolbarItem>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Status"
      selections={filters.status}
      options={statusOptions}
    />
  </DataToolbarItem>
  <DataToolbarItem>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Risk"
      selections={filters.risk}
      options={riskOptions}
    />
  </DataToolbarItem>
</DataToolbarGroup>

4) Locate the following three DataToolbarItems containing icons:

<DataToolbarItem>
  <Button variant="plain">
    <EditIcon />
  </Button>
</DataToolbarItem>
<DataToolbarItem>
  <Button variant="plain">
    <CloneIcon />
  </Button>
</DataToolbarItem>
<DataToolbarItem>
  <Button variant="plain">
    <SyncIcon />
  </Button>
</DataToolbarItem>

5) Wrap the three adjacent DataToolbarItem components containing icons in one DataToolbarGroup component.

6) Add the property variant="icon-button-group" to the DataToolbarGroup component added in step 5.

This will space the three icons according to the PatternFly design specifications. Once completed, the code should appear as below.

<DataToolbarGroup variant="icon-button-group">
  <DataToolbarItem>
    <Button variant="plain">
      <EditIcon />
    </Button>
  </DataToolbarItem>
  <DataToolbarItem>
    <Button variant="plain">
      <CloneIcon />
    </Button>
  </DataToolbarItem>
  <DataToolbarItem>
    <Button variant="plain">
      <SyncIcon />
    </Button>
  </DataToolbarItem>
</DataToolbarGroup>

Once the preview reloads, it should look like this:

Note: The filters in the DataToolbarGroup with the filter-group variant have no spacing between them. The DataToolbarGroup with the icon-button-group variant is now spaced closer to each other.

One particular type of data toolbar group is called the toggle group. The DataToolbarToggleGroup collapses a set of items into an overlay panel at a specific breakpoint. The method allows complex toolbars with multiple items and groups of items to be responsive.

A toggle group is useful for containing filter controls, for example. When the toolbar responds to adapt to a mobile viewport, the contents contained in a toggle group will collapse into an overlay panel. This panel can be toggled by clicking the filter icon.

Using a DataToolbarToggleGroup requires both a toggleIcon and breakpoint property. The toggleIcon is a ReactNode which is displayed instead of the children of DataToolbarToggleGroup. This occurs once the viewport width shrinks below the passed in breakpoint.

1) Locate both the DataToolbarItem with variant="search-filter" and the DataToolbarGroup with variant="filter-group".

Hint: Both the DataToolbarItem and DataToolbarGroup are siblings of each other.

<DataToolbarItem variant="search-filter">
  <Input value="" id="step2Input" ariaLabel="Step 2 input" />
</DataToolbarItem>
<DataToolbarGroup variant="filter-group">
  <DataToolbarItem>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Status"
      selections={filters.status}
      options={statusOptions}
    />
  </DataToolbarItem>
  <DataToolbarItem>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Risk"
      selections={filters.risk}
      options={riskOptions}
    />
  </DataToolbarItem>
</DataToolbarGroup>

2) Wrap the DataToolbarItem and DataToolbarGroup located in step 1, in a DataToolbarToggleGroup.

3) Add the toggleIcon property to the DataToolbarToggleGroup component.

The value of the toggleIcon property should be {<FilterIcon />}.

4) Add the breakpoint property to the DataToolbarToggleGroup component.

The value of the breakpoint property should be "xl".

Once completed, the code should appear as below.

<DataToolbarToggleGroup 
  toggleIcon={<FilterIcon />} 
  breakpoint="xl"
  >
  <DataToolbarItem variant="search-filter">
    <Input value="" id="step2Input" ariaLabel="Step 2 input" />
  </DataToolbarItem>
  <DataToolbarGroup variant="filter-group">
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Status"
        selections={filters.status}
        options={statusOptions}
      />
    </DataToolbarItem>
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Risk"
        selections={filters.risk}
        options={riskOptions}
      />
    </DataToolbarItem>
  </DataToolbarGroup>
</DataToolbarToggleGroup>

5) Test the responsiveness of the toolbar.

Shrinking and expanding the viewport should toggle between showing the toggle icon and the children of the DataToolbarToggleGroup. When the toggle icon is being displayed, clicking on it should toggle the DataToolbarToggleGroup children in responsive expandable content.

This first image shows how the toolbar should appear at a wider viewport width.

This second image shows how the toolbar should appear at a narrow viewport width.

Changing the breakpoint passed to the DataToolbarToggleGroup should change the viewport width at which the DataToolbarToggleGroup toggles between the expanded state and the responsive collapsed state.

Valid values for the breakpoint property are md, lg, or xl.

One particular type of data toolbar item is called the DataToolbarFilter. When used, selected filters are displayed in chip groups below the toolbar. Placing any DataToolbarFilter inside of a toggle group makes the toolbar responsive.

Using a DataToolbarFilter requires three properties:

First is a managed array of selected filters called chips as strings or ReactNodes.

An onDelete callback function to be executed whenever the user deletes a selected filter chip.

A categoryName which will be used to label the chip group.

1) Define the required onDelete function to be passed to each DataToolbarFilter.

Add the function to the ToolbarDemoApp class. Make sure to add it below the onSelect function definition in the ToolbarDemoApp class.

The onDelete callback function is executed whenever the user deletes a selected filter chip.

onDelete = (type = "", id = "") => {
  if (type) {
    this.setState((prevState) => {
      prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
      return {
        filters: prevState.filters,
      }
    });
  } else {
    this.setState({
      filters: {
        name: [],
        risk: [],
        status: [],
      }
    })
  }
};

2) Locate the following three DataToolbarItems inside the DataToolbarToggleGroup:

<DataToolbarItem variant="search-filter">
  <Input value="" id="step2Input" ariaLabel="Step 2 input" />
</DataToolbarItem>
<DataToolbarGroup variant="filter-group">
  <DataToolbarItem>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Status"
      selections={filters.status}
      options={statusOptions}
    />
  </DataToolbarItem>
  <DataToolbarItem>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Risk"
      selections={filters.risk}
      options={riskOptions}
    />
  </DataToolbarItem>
</DataToolbarGroup>

3) Replace each of the three DataToolbarItems inside the DataToolbarToggleGroup with a DataToolbarFilter.

Once completed, the contents of the DataToolbarToggleGroup should appear as follows:

<DataToolbarFilter>
  <Input id="searchInput" search={this.onSearch} ariaLabel="Search input" />
</DataToolbarFilter>
<DataToolbarGroup variant="filter-group">
  <DataToolbarFilter>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Status"
      selections={filters.status}
      options={statusOptions}
    />
  </DataToolbarFilter>
  <DataToolbarFilter>
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Risk"
      selections={filters.risk}
      options={riskOptions}
    />
  </DataToolbarFilter>
</DataToolbarGroup>

4) Add a chips property to each of the DataToolbarFilter components.

Each of the DataToolbarFilter components requires a chips property. In this case, the state managed filters array's properties can serve as the chips property for each DataToolbarFilter.

a) For the first DataToolbarFilter (containing a text input) add the property chips={filters.name}.

b) For the second DataToolbarFilter (containing the status filter) add the property chips={filters.status}.

c) For the third DataToolbarFilter (containing the risk filter) add the property chips={filters.risk}.

5) Pass an appropriate label as the categoryName property to each DataToolbarFilter.

a) For the first DataToolbarFilter (containing a text input) add the property categoryName="Name".

b) For the second DataToolbarFilter (containing the status filter) add the property categoryName="Status".

c) For the third DataToolbarFilter (containing the risk filter) add the property categoryName="Risk".

6) Pass the onDelete function as the deleteChip property to each DataToolbarFilter.

Once steps 4, 5, and 6 are completed, the contents of the DataToolbarToggleGroup should appear as follows:

<DataToolbarFilter chips={filters.name} deleteChip={this.onDelete} categoryName="Name">
  <Input id="searchInput" search={this.onSearch} ariaLabel="Search input" />
</DataToolbarFilter>
<DataToolbarGroup variant="filter-group">
  <DataToolbarFilter chips={filters.status} deleteChip={this.onDelete} categoryName="Status">
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Status"
      selections={filters.status}
      options={statusOptions}
    />
  </DataToolbarFilter>
  <DataToolbarFilter chips={filters.risk} deleteChip={this.onDelete} categoryName="Risk">
    <CheckboxSelect
      onSelect={this.onSelect}
      type="Risk"
      selections={filters.risk}
      options={riskOptions}
    />
  </DataToolbarFilter>
</DataToolbarGroup>

7) Experiment with two optional properties passed to DataToolbar.

Two properties can be optionally added to the top-level DataToolbar component when using a DataToolbarFilter.

a) Pass a clearAllFilters event handler to DataToolbar.

A 'Clear All Filters' action will appear alongside the applied filters chip groups.

b) Pass a collapseListedFiltersBreakpoint is passed to DataToolbar.

The chip groups will collapse to a summary message at the passed in breakpoint, making the applied filters chip groups more responsive.

Add the following code to the DataToolbar to see optional properties in action.

clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint="xl"

Note: Take some time to experiment with the toolbar to see how it responds to changes in viewport size and the number of filters applied.

At smaller viewport widths, a responsive collapsed view of the toolbar and applied filters should be visible.

Managing the relationship of a toolbar and its filters has to a table or other component is the responsibility of the consumer.

1) Add the DemoTable component below the DataToolbar.

Pass the DemoTable the status and risk filters as properties.

<DemoTable nameFilters={filters.name} statusFilters={filters.status} riskFilters={filters.risk} clearAllFilters={this.onDelete}/>

Note: The relationship a toolbar and its filters has to a table or other component must be managed by the consumer. The DemoTable component is defined in src/components/table.js where the managed list of applied filters manipulates a very small set of data.

Once the preview reloads, it should look like this:

Note: Take time to experiment with how the data toolbar interacts with the table to see the filtering in action.