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.

Toolbar component with filter

Step 1 of 6

Setting up DataToolbar 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 DataToolbarContent 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 { Button } from "@patternfly/react-core";
import {
  EditIcon,
  CloneIcon,
  SyncIcon,
  FilterIcon
} from "@patternfly/react-icons";
import {
  DataToolbar,
  DataToolbarContent,
  DataToolbarItem,
  DataToolbarGroup,
  DataToolbarToggleGroup,
  DataToolbarFilter
} from "@patternfly/react-core/dist/esm/experimental";
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 DataToolbar component inside the React.Fragment and add the property id="tutorial-toolbar" to the DataToolbar.

4) Add a DataToolbarContent component inside the DataToolbar component.

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

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

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

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

Once the preview reloads, it should look like this:

toolbar with data toolbar content