Difficulty: intermediate
Estimated Time: 30 minutes

In this scenario, you will learn how to use the PatternFly 4 React Toolbar component to build a table filter.

Toolbar component with filter

Step 1 of 7

Introducing Patternfly React toolbar

Toolbars can be included to allow a user to manage and manipulate a data set. Data can be presented in any valid presentation, a table, a list, or a data visualization (chart), for example. The PatternFly Toolbar component is a flexible layout system that accommodates a variety of configurations that can be adapted to your specific needs.

In this tutorial, you will build a toolbar filter and attach it to a table. The image below is what we'll end up with when we are done. Completed toolbar filter with table