# CollectionErrorState

**Category:** Common/State

## Design

### Description

The `CollectionErrorState` component displays an error state for a collection when a data fetch fails. Pass this component to the `errorState` prop of a collection component, such as a [Grid](./?path=/story/base-components-collections-grid-grid--grid) or a [Table](./?path=/story/base-components-collections-table-table--table). 


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

### Demo

Displays an error state for a collection when a data fetch fails.

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import { CollectionPage } from '@wix/patterns/page';
import {
  CollectionErrorState,
  TableGridSwitch,
  useTableGridSwitchCollection,
} from '@wix/patterns';
import { contacts } from '@wix/crm';
import { Refresh } from '@wix/wix-ui-icons-common';

function ErrorStateDemo() {
  const state = useTableGridSwitchCollection<contacts.Contact>({
    queryName: 'contacts-ErrorStateDemo',
    paginationMode: 'offset',
    fetchData: () => Promise.reject(new Error('Error fetching contacts')),
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="500px">
      <CollectionPage.Header title={{ text: 'Contacts' }} />
      <CollectionPage.Content>
        <TableGridSwitch
          state={state}
          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: 'Last Activity',
              render: (contact) =>
                contact.lastActivity?.activityDate?.toLocaleString(),
            },
          ]}
          errorState={(err, { retry }) => (
            <CollectionErrorState
              title="Couldn't load contacts"
              subtitle={String(err)}
              action={{
                text: 'Click here to retry',
                prefixIcon: <Refresh />,
                onClick: retry,
              }}
            />
          )}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `requestId` | `string` | No | - | The `requestId` to display in the error state. |
| `title` | `string` | No | - | Title to display in the error state. |
| `subtitle` | `string` | No | - | Subtitle to display in the error state. |
| `action` | `{ text: string; onClick: () => void; prefixIcon?: IconElement; }` | No | - | Action button to display in the error state. |
| `children` | `ReactNode` | No | - | Contains elements inside the card such as `<Card.Header/>`, `<Card.Subeader/>`, `<Card.Content/>` or `<Card.Divider/>`. |
| `controls` | `ReactNode` | No | - | Contains elements that control the component, usually a `<CloseButton/>`. |
| `stretchVertically` | `boolean` | No | - | Makes a card stretch vertically to max height in a layout or container. |
| `hideOverflow` | `boolean` | No | - | Defines whether to hide portions of card content that overflows its dimensions. |
| `showShadow` | `boolean` | No | - | Defines whether to apply a drop shadow effect. |
| `dataHook` | `string` | No | `collection-error-state` | Applies a data-hook HTML attribute that can be used in tests. |
| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component's root element. |
| `highlight` | `"focus"` | No | - | Applies a highlighting effect on the borders of the component. |