In this lesson, you will learn how to compose multiple components to create a new one, building a filter component.

You will add a filter component to the events table in the New Events application you have built.

The filter component is composing multiple 

 components into a new functional one.
It uses the following components from 

The goal of building the filter is to let users filter the events table by the event's location.

The filter will have a button that, when clicked, will display a popover with a list of locations. The user can then select a location to filter the events table.

Here's the behavior of the filter component:

Step 1 – Install & Import the Required Components

First, you need to install and import the required components.

npx shadcn-ui@latest add popover button badge separator command

import * as React from "react"
import { Check, PlusCircle } from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Separator } from "@/components/ui/separator"

export type Option = {
  value: string
  label: string
}

interface FilterProps {
  title?: string
  options: Array<Option>
  selectedOptions: Array<Option>
  onChange: (value: Array<Option>) => void
}

 type defines the shape of the objects in the 

 component to display the list of locations.

---
title: Building a Filter Component with shadcn/ui
description: Learn how to compose multiple components to create a new one, such as building a filter component.
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/new-events/08.01-filter?ref_type=heads
privateVideoUrl: https://stream.mux.com/AOt1B1qXsI2V70101c72gEWZfLgMoR8gcrmqlcA01PEHnk.m3u8
---

In this lesson, you will learn how to compose multiple components to create a new one, building a filter component.

You will add a filter component to the events table in the New Events application you have built.

The filter looks like this:

![Filter Component](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/public/assets/filter.png)

The filter component is composing multiple `shadcn/ui` components into a new functional one.
It uses the following components from `shadcn/ui`:

-   `Popover`
-   `Button`
-   `Badge`
-   `Separator`
-   `Command`

![the filter structure](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/public/assets/structure.png)

## The Filter Functionality

The goal of building the filter is to let users filter the events table by the event's location.

The filter will have a button that, when clicked, will display a popover with a list of locations. The user can then select a location to filter the events table.

Here's the behavior of the filter component:

![](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/public/assets/filter.gif)

### Step 1 – Install & Import the Required Components

First, you need to install and import the required components.

```bash
npx shadcn-ui@latest add popover button badge separator command
```

Create a new `components/filter.tsx` file and import the required modules:

```javascript { actualFilename=../../code/new-events/08.01-filter/components/filter.tsx endLine=21 startLine=1 statedFilename=components/filter.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/.../code/new-events/08.01-filter/components/filter.tsx }
import * as React from "react"
import { Check, PlusCircle } from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Separator } from "@/components/ui/separator"
```

### Step 2 – Define the Types

Define the filter component types:

```javascript { actualFilename=../../code/new-events/08.01-filter/components/filter.tsx endLine=33 startLine=23 statedFilename=components/filter.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/.../code/new-events/08.01-filter/components/filter.tsx#L23 }
export type Option = {
  value: string
  label: string
}

interface FilterProps {
  title?: string
  options: Array<Option>
  selectedOptions: Array<Option>
  onChange: (value: Array<Option>) => void
}
```

The `Option` type defines the shape of the objects in the `options` array, which will be used inside the `Filter` component to display the list of locations.

The `Filter` component receives `options,` `selected options,` `onChange,` and `title` as props.

### Step 3 - Create the Component

Create the `Filter` component:

```javascript { actualFilename=../../code/new-events/08.01-filter/components/filter.tsx endLine=40 startLine=35 statedFilename=components/filter.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/.../code/new-events/08.01-filter/components/filter.tsx#L35 }
export function Filter({
  title,
  options,
  selectedOptions,
  onChange,
}: FilterProps) {
```

Return a popover that will wrap the button and the list of locations:

```javascript { actualFilename=../../code/new-events/08.01-filter/components/filter.tsx endLine=113 startLine=69 statedFilename=components/filter.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/.../code/new-events/08.01-filter/components/filter.tsx#L69 }
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 border-dashed">
          <PlusCircle className="mr-2 h-4 w-4" />
          {title}
          {selectedOptions?.length > 0 && (
            <>
              <Separator orientation="vertical" className="mx-2 h-4" />
              <Badge
                variant="secondary"
                className="rounded-sm px-1 font-normal lg:hidden dark:text-white"
              >
                {selectedOptions.length}
              </Badge>
              <div className="hidden space-x-1 lg:flex">
                {selectedOptions.length > 2 ? (
                  <Badge
                    variant="secondary"
                    className="rounded-sm px-1 font-normal dark:text-white"
                  >
                    {selectedOptions.length} selected
                  </Badge>
                ) : (
                  options
                    .filter((option) =>
                      selectedOptions
                        .map(({ value }) => value)
                        .includes(option.value)
                    )
                    .map((option) => (
                      <Badge
                        variant="secondary"
                        key={option.value}
                        className="rounded-sm px-1 font-normal dark:text-white"
                      >
                        {option.label}
                      </Badge>
                    ))
                )}
              </div>
            </>
          )}
        </Button>
      </PopoverTrigger>
```

The Popover is wrapping its trigger and content.

Inside the trigger, you render a `Button` with the following logic:

-   If there are no selected options, the title will be shown.
    ![filter-initial](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/public/assets/filter-initial.png)
-   When there are more than two selected options, the number is shown.
    ![filter-selected-number](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/public/assets/filter-selected-number.png)
-   When there are one or two selected options, it renders badges with the options values:
    ![filter-selected-two](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_08/lesson_08.03/public/assets/filter-selected-badges.png)

Eyal Cohen

Learn how to compose multiple components to create a new one, such as building a filter component.

Building a Filter Component with shadcn/ui

In this lesson, you will learn how to compose multiple components to create a

You will add the filter component to the events table in the new events

The filter component is composed from multiple shadc and UI components.

The popover, which is the part being opened after the user click on the filter,

the badge, the command, and the separator.

The goal of building the filter is to let users filter the events table by the

The filter will have a button that when clicked will display a popover with a

The user can then select a location to filter the events table.

First, you need to install and import the required component.

In your favorite terminal, run np shadc and UI at latest, add badge separator

You should already have the popover button components, but if you don't then

Now let's create a new component in component/filter.t6 and start with

Import the checks icon and plus circle icons from Lucide.

Import the same function and then import the badge component, the button

And then we want the command components, which are plenty.

So the command, command empty, command group, command input, command item,

And the popover content and popover trigger component.

Now the second step will be to create the types.

So let's export type option, which is a simple type with a value and label.

And options, which is an array of the option type.

A selected option, because we can select multiple options, which is an array of

And on change function with the value equal to an array with off option, the

You are now ready to create a component, export function, filter equals a

It receives title, options, selected options and on change function from the

Here we will return, we can immediately return a popover, a trigger, can pass

probe, then a button with an outline variant.

In the class name, we want the height to be eight, the border to be dashed.

Add some margin to the right and make it size four.

And then we're going to do something special inside the button.

Check if the selected options length is bigger than zero length.

Check if the selected options length is bigger than zero.

If so, we want to render the selected options to the user.

If there is one item selected, we can show the label of it and if the normal,

simply show a number to not catch too much width.

So we're going to render a separator with a vertical orientation and a max, MX,

The badge will have a secondary variant and a class name, rounded as same, px1

lg hidden, we don't want to show it for large screens and a text white for

Close the badge and inside of it show the selected options length, the number

On desktop devices, we want to show either the options or a number as well.

So let's hide it for mobile devices with the hidden class name.

So on larger screens, it will be displayed with a flex display.

Then check the selected options, length property.

And if it's bigger than two, we want to show a badge with the number of

And if it's less, we want to loop through the options array, the selected

and render a badge that will show the selected option name.

The class name would be rounded small medium, px1 font normal, and dark text

Inside render the option label and close the badge.

In the eventstable component, import the filter component and the option type.

Then inside the eventable, we need to define a state for the options, const

and set selected locations, call the use date hook with the array of option

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript