# useStaticListFilterCollection

**Category:** Features/Filter/Hooks

## Design

### Overview

`useStaticListFilterCollection` is a hook that connects a filter ([ArrayFilter](./?path=/story/features-filter-factories--arrayfilter), usually), to a [CollectionState](./?path=/story/common-state--collectionstate) created from a static list of items.
It also providers search functionality (search term, will be matched against the [itemName](./?path=/story/features-filter-factories--arrayfilter&tab=API) function configured on the `filter` object).



```tsx
import { useStaticListFilterCollection } from '@wix/patterns';
```

---

### Examples

### Basic

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import { Edit } from '@wix/wix-ui-icons-common';
import { CollectionPage } from '@wix/patterns/page';
import {
  CollectionToolbarFilters,
  Filter,
  idNameArrayFilter,
  Table,
  MultiSelectCheckboxFilter,
  SingleSelectFilter,
  stringsArrayFilter,
  useTableCollection,
  useStaticListFilterCollection,
  OffsetQuery,
} from '@wix/patterns';
import { contacts } from '@wix/crm';
import { subDays } from 'date-fns';

interface Duration {
  id: string;
  name: string;
  days: number | null;
}

type ContactsFilters = {
  lastActivity: Filter<Duration[]>;
  level: Filter<string[]>;
};

function UseStaticListFilterCollectionExample() {

  const state = useTableCollection<contacts.Contact, ContactsFilters>({
    queryName: 'contacts-UseStaticListFilterCollectionExample',
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchData: (query: OffsetQuery<ContactsFilters>) => {
      const { limit, offset, search, filters } = query;

      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);

      if (search) {
        queryBuilder = queryBuilder.startsWith('info.name.first', search);
      }

      if (filters.level) {
        queryBuilder = queryBuilder.in('info.jobTitle', filters.level);
      }

      const lastActivityDays = filters.lastActivity?.[0]?.days;
      if (lastActivityDays) {
        queryBuilder = queryBuilder.gt(
          'lastActivity.activityDate',
          subDays(new window.Date(), lastActivityDays),
        );
      }

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: ({ err }) => String(err),
    filters: {
      level: stringsArrayFilter(),
      lastActivity: idNameArrayFilter(),
    },
  });

  const collection = state.collection;

  const levelsCollection = useStaticListFilterCollection(
    collection.filters.level,
    [
      'Beginner',
      'Amateur',
      'Semi-Pro',
      'Professional',
      'World Class',
      'Legendary',
      'Ultimate',
    ],
  );

  const lastActivityCollection = useStaticListFilterCollection(
    collection.filters.lastActivity,
    [
      { id: 'w', name: 'Week', days: 7 },
      { id: 'm', name: 'Month', days: 30 },
      { id: 'y', name: 'Year', days: 365 },
      { id: 'o', name: 'Other', days: null },
    ],
  );

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <Table
          state={state}
          filters={
            <CollectionToolbarFilters>
              <MultiSelectCheckboxFilter
                accordionItemProps={{ label: 'Level' }}
                popoverProps={{ appendTo: 'window' }}
                filter={collection.filters.level!}
                collection={levelsCollection}
                renderItem={(level) => ({ title: level })}
              />
              <SingleSelectFilter
                filter={collection.filters.lastActivity!}
                placeholder="Select Last Activity"
                accordionItemProps={{ label: 'Last Activity' }}
                collection={lastActivityCollection}
              />
            </CollectionToolbarFilters>
          }
          columns={[
            {
              title: '',
              width: '50px',
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
            {
              title: 'Level',
              render: (contact) => contact.info?.jobTitle,
            },
            {
              title: 'Last Activity',
              render: (contact) =>
                contact.lastActivity?.activityDate?.toLocaleString(),
            },
          ]}
          actionCell={(contact, index) => ({
            secondaryActions: [
              {
                icon: <Edit />,
                text: 'Edit',
                disabled:
                  index % 5 === 0 || contact.info?.name?.first?.startsWith('A'),
                onClick: () => {},
              },
            ],
          })}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `filter` | `Filter<V[]>` | Yes | - | This is a reference to the filter that was defined in the main collection. For example: `collection.filters.<filterName>` |
| `list` | `V[]` | Yes | - | Static list of items to show in the filter component |