Filter

Filters are used to provide the user with a method of filtering large sets of elements like data tables or a long list of cards. A filter is always specific to a certain dimension of the underlying data. If you want use filters with a table then one single filter usually refers to one column of the table.

Usage

You can import the Filter component from the Design System like so:

import Filter from "../Filter";

The Filter variable contains multiple separate components that you can use to create your filter. These components are just used for the UI part of your filter and don't contain any functionality. We recommend using a library like downshift to manage the state of your filter.

Button

This component renders a button that is in charge of toggling the list of selectable items. It accepts the following props:

Example

The example below shows how the Filter component can be used in conjunction with the dropdown menu and dropdown menu item components to markup a complete filter.

<div style={{ marginBottom: "100px" }}>
  <Downshift>
    {({
      getItemProps,
      getMenuProps,
      getRootProps,
      getToggleButtonProps,
      highlightedIndex,
      isOpen,
      selectedItem,
    }) => (
      <div {...getRootProps()}>
        <Filter.Button
          getToggleButtonProps={getToggleButtonProps}
          id="demo-filter"
          isOpen={isOpen}
          label="Choose your favourite movie"
        />
        <DropdownMenu getMenuProps={getMenuProps} label="Foo" isOpen>
          {isOpen &&
            ["A New Hope", "The Empire Strikes Back", "Return of the Jedi"].map(
              (movie, index) => (
                <DropdownMenuItem
                  key={index}
                  isSelected={movie === selectedItem}
                  {...getItemProps({
                    isActive: index === highlightedIndex,
                    key: movie,
                    index,
                    item: movie,
                  })}
                >
                  {movie}
                </DropdownMenuItem>
              ),
            )}
        </DropdownMenu>
      </div>
    )}
  </Downshift>
</div>