# CollectionNoResultsState

**Category:** Features/Display/Empty States

## Design

### Description

Displays an empty state when a filter or search has no results. Pass through the `noResultsState` prop of a [`Grid`](./?path=/story/base-components-collections-grid-grid--grid), [`Table`](./?path=/story/base-components-collections-table-table--table), or other collection component.




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

### Demo

```tsx
import { Avatar, Text } from '@wix/design-system';
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  TableGridSwitch,
  useTableGridSwitchCollection,
  Filter,
  stringsArrayFilter,
  idNameArrayFilter,
  CollectionNoResultsState
} from '@wix/patterns';
import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
import { useHttpClient } from '@wix/yoshi-flow-bm';

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

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

function FilteredEmptyState() {
  const httpClient = useHttpClient();
  const state = useTableGridSwitchCollection<Contact, ContactsFilters>({
    queryName: 'contacts-FilteredEmptyState',
    paginationMode: 'offset',
    fetchData: () =>
      Promise.resolve({
        items: [],
        total: 0,
      }),
    itemKey: (item) => item.id as string,
    itemName: (item) => item.name as string,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {
      level: stringsArrayFilter(),
      lastSeen: idNameArrayFilter<Duration>({
        initialValue: [{ id: '1', name: 'Week', days: 7 }],
      }),
    },
  });

  return (
    <CollectionPage height="500px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <TableGridSwitch
          state={state}
          columns={[
            {
              title: '',
              width: '50px',
              render: (contact) => (
                <Avatar name={contact.name} imgProps={{ src: contact.image }} />
              ),
            },
            {
              title: 'Name',
              width: '250px',
              render: (contact) => contact.name,
            },
            {
              title: 'Last Seen',
              render: (contact) => contact.lastSeen?.toLocaleString(),
            },
          ]}
          noResultsState={
            <CollectionNoResultsState />
          }
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests |
| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
| `children` | `ReactNode` | No | - | Contains components rendered below the subtitle, e.g., `<Button/>` or `<TextButton/>` |
| `title` | `string` | No | - | Overrides the default title. |
| `skin` | `"page" \| "page-no-border" \| "section"` | No | `'section'` | Sets the style skin for the empty state |
| `theme` | `"page" \| "page-no-border" \| "section"` | No | - | @deprecated use skin prop instead |
| `subtitle` | `string` | No | - | Overrides the default subtitle. |
| `classNames` | `{ imageContainer?: string; }` | No | - | Sets the empty state image bottom margin. If not specified, use the default padding defined in the CSS. |
| `align` | `"start" \| "center" \| "end"` | No | `'center'` | Sets the alignment of all empty state contents within the component container |