Difficulty: intermediate
Estimated Time: 30 minutes

In this tutorial, build a toolbar filter and attach it to a table.

Toolbars allow users to manage and manipulate a data set. For example, data can be presented in any valid presentation, a table, a list, or a data visualization (chart). The PatternFly toolbar component is a flexible layout system that accommodates a variety of configurations.

Congratulations! You finished the "toolbar component with filter" course.

Please fill out a quick survey here

Learn more about PatternFly React:

Toolbar component with filter

Step 1 of 6

Setting up Toolbar basics

Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.

Toolbars consist of content rows of components. Most toolbars will only be a single row, but each row is required to be housed in a ToolbarContent component.

Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.

1) Navigate to the src folder and open src/App.js.

2) Set up the general structure of an empty toolbar and add the necessary imports.

Copy the following code into the App.js file, replacing all of the content there:

import React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import {
  EditIcon,
  CloneIcon,
  SyncIcon,
  FilterIcon
} from "@patternfly/react-icons";
import {
  Button,
  Toolbar,
  ToolbarContent,
  ToolbarItem,
  ToolbarGroup,
  ToolbarToggleGroup,
  ToolbarFilter
} from "@patternfly/react-core";
import Input from "./components/input";
import CheckboxSelect from "./components/checkboxSelect";
import Kebab from "./components/kebab";
import DemoTable from "./components/table";

class ToolbarDemoApp extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>

      </React.Fragment>
    );
  }
};

export default ToolbarDemoApp;

3) Add a Toolbar component inside the React.Fragment and add the property id="tutorial-toolbar" to the Toolbar.

4) Add a ToolbarContent component inside the Toolbar component.

Each toolbar must contain one or more ToolbarContent components as content rows.

5) Add Toolbar Demo as text inside the ToolbarContent as a placeholder for future content.

Once completed, the code inside <React.Fragment> should appear as below.

<Toolbar id="tutorial-toolbar">
  <ToolbarContent>
    Toolbar Demo
  </ToolbarContent>
</Toolbar>

Once the preview reloads, it should look like this:

toolbar with toolbar content