# CollectionPage

**Category:** Base Components/Pages/Collection Page

## Design

### Description

CollectionPage wraps [](https://www.docs.wixdesignsystem.com/?path=/story/components-layout-page--page) from `@wix/design-system`. \
It provides scrolling context for collection components, such as [](./?path=/story/components-collection--table).
Also, it displays total items count in the page header.

It accepts two types of children: [CollectionPage.Header](./?path=/story/base-components-pages-collection-page--collectionpage-header) and [CollectionPage.Content](./?path=/story/base-components-pages-collection-page--collectionpage-content).



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

### Full

```tsx
import { Avatar, Breadcrumbs } from '@wix/design-system';
import React from 'react';
import {
  Table,
  useTableCollection,
  MoreActions,
  PrimaryActions,
} from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { InvoiceSmall, VisibleSmall } from '@wix/wix-ui-icons-common';
import { contacts } from '@wix/crm';

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

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

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

      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
        items,
        total,
      }));
    },
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <CollectionPage height="400px">
      <CollectionPage.Header
        title={{ text: 'Contacts' }}
        subtitle={{
          text: 'My Contacts',
          learnMore: {
            url: 'https://www.wix.com/',
            label: 'my custom learn more label', // Defaults to "Learn more"
          },
        }}
        breadcrumbs={
          <Breadcrumbs
            activeId="2"
            items={[
              { id: '1', value: 'First crumb' },
              { id: '2', value: 'Second crumb' },
            ]}
          />
        }
        primaryAction={
          <PrimaryActions
            label="Do something"
            onClick={() => console.log('I do something')}
          />
        }
        moreActions={
          <MoreActions
            items={[
              [
                {
                  text: 'Do Action #1',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Action #1');
                  },
                },
                {
                  text: 'Another Action #2',
                  prefixIcon: <VisibleSmall />,
                  onClick: () => {
                    console.log('Action #2');
                  },
                },
              ],
            ]}
            containerId="6dcbba57-c740-477c-a747-30094cf54ca1"
          />
        }
      />
      <CollectionPage.Content>
        <Table
          state={state}
          columns={[
            {
              id: 'avatar',
              name: 'Avatar',
              title: '',
              width: '50px',
              hideable: false,
              render: (contact) => (
                <Avatar
                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
                  imgProps={{ src: contact.info?.picture?.image }}
                />
              ),
            },
            {
              id: 'name',
              title: 'Name',
              width: '250px',
              render: (contact) =>
                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
            },
          ]}
        />
      </CollectionPage.Content>
    </CollectionPage>
  );
}
```

### Basic

Simple page for demonstration of page parts

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

import React from 'react';

function Basic() {
  return (
    <CollectionPage>
      <CollectionPage.Header title={{ text: 'Custom Header' }} />
      <CollectionPage.Content>Custom Content</CollectionPage.Content>
    </CollectionPage>
  );
}
```

## API

### Extends

[Page](https://www.docs.wixdesignsystem.com/?path=/story/components-layout-page--page)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | No | - | Accepts [CollectionPage.Header](./?path=/story/base-components-pages-collection-page--collectionpage-header) and [CollectionPage.Content](./?path=/story/base-components-pages-collection-page--collectionpage-content) elements |
| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute that can be used in the tests |
| `backgroundImageUrl` | `string` | No | - | Provides a link to the background image source (URL). Image will be displayed at the top of a page, underneath the \<Page.Header/>. |
| `maxWidth` | `number` | No | - | Sets the maximum width of the page (paddings excluded) |
| `minWidth` | `number` | No | - | Sets the minimum width of the page (paddings excluded). When `mobile` is enabled on `<WixDesignSystemProvider/>`, the default minimum width is removed, but an explicitly provided value is still applied. |
| `height` | `string` | No | - | Sets the height of the page in pixels (px), viewport height (vh), etc. |
| `sidePadding` | `number` | No | - | Sets the side paddings of a page |
| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
| `gradientClassName` | `string` | No | - | Specifies a CSS class name that defines a gradient background for \<Page.Header/> |
| `scrollableContentRef` | `((ref: HTMLElement \| null) => void)` | No | - | Defines a reference called together with page scrollable content ref after page mount. <br/> **Note** - if you need this ref only for listening to scroll events on the scrollable content then use this prop instead: `scrollProps = {onScrollChanged/onScrollAreaChanged}` |
| `zIndex` | `number` | No | - | Specifies the stack order (z-index) of a page |
| `horizontalScroll` | `boolean` | No | - | Enables page content to scroll horizontally when its width exceed maximum allowed width |
| `scrollProps` | `ScrollableContainerCommonProps` | No | - | Pass properties related to the scrollable content of the page. <br/> **onScrollAreaChanged** - defines a handler function for scroll area changes. Function is triggered when the user scrolls to a different area of the scrollable content. See signature for possible areas: `function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void` `AreaY`: top \| middle \| bottom \| none `AreaX`: start \| middle \| end \| none (not implemented yet) <br/> **onScrollAreaChanged** - defines a general handler for scroll changes with throttling (100ms): `function({target: HTMLElement}) => void` |