# CollectionPage.Header

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

## Design

### Description

This component renders a [Page.Header](https://www.docs.wixdesignsystem.com/?path=/story/components-layout-page--page-header) component inside a [CollectionPage](./?path=/story/base-components-pages-collection-page--collectionpage).


```tsx
import { CollectionPage } from '@wix/patterns/page'; 
// And its usage: <CollectionPage.Header>
```

### Full

Rendering a header with title, subtitle, total, primary action, and more actions. To learn how to create a more actions menu, see [`MoreActions`](./?path=/story/features-actions-more-actions--more-actions).

```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' }}
        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={[
              [
                {
                  biName: 'action-1',
                  text: 'Do Action #1',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Action #1');
                  },
                },
                {
                  biName: 'action-2',
                  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>
  );
}
```

### Without Total

Hiding the total number of entities in the header of a collection page, with `hideTotal` config.

```tsx
import { Avatar } from '@wix/design-system';
import React from 'react';
import { Table, useTableCollection } from '@wix/patterns';
import { CollectionPage } from '@wix/patterns/page';
import { contacts } from '@wix/crm';

function WithoutTotal() {
  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-DisabledCustomColumns',
    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', hideTotal: true }} />
      <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>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `breadcrumbs` | `BreadcrumbsElement` | No | - | A [`Breadcrumbs`](https://www.docs.wixdesignsystem.com/?path=/story/components-navigation--breadcrumbs) element to be rendered on the header. |
| `title` | `{ text: string; hideTotal?: boolean \| undefined; }` | Yes | - | `text`: The title text. \ `hideTotal`: Determines whether to hide the number of total entities on the title of the page. |
| `subtitle` | `PageSubTitleProps` | No | - | The page subtitle text. |
| `primaryAction` | `PrimaryActionsElement` | No | - | A [`PrimaryActions`](./?path=/story/features-actions-primary-actions--primary-actions) component to be rendered on the header. A primary button w/o PopoverMenu component to be rendered in the header. |
| `secondaryActions` | `SecondaryActionsElement` | No | - | A [`SecondaryActions`](./?path=/story/features-actions-secondary-actions--secondary-actions) component to be rendered on the header. A Secondary button w/o PopoverMenu component to be rendered on the header |
| `moreActions` | `MoreActionsElement` | No | - | A [`MoreActions`](./?path=/story/features-actions-more-actions--more-actions) component to be rendered on the header. |