# ToolbarTitle

**Category:** Features/Display/Toolbar

## Design

### Description

The card title located on the left hand side of the toolbar to provide visitors with information about the collection.


### Title

This example uses the `` `title` prop to display a title in the toolbar.

```tsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  ToolbarTitle,
  useTableCollection,
  OffsetQuery,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function Title() {

  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-toolbar-title',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      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,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            title={<ToolbarTitle title="Title" />}
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

---

### Title, subtitle, and learn more

This example uses the `` `title` and `subtitle` props to display a title, subtitle, and a redirect link in the toolbar.

```tsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  ToolbarTitle,
  useTableCollection,
  OffsetQuery,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function Subtitle() {

  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-toolbar-title',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      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,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            title={
              <ToolbarTitle
                title="Title"
                subtitle={{
                  text: 'subtitle',
                  learnMore: { url: 'https://www.wix.com' },
                }}
              />
            }
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

---

### Title and count

This example uses the `` `title` and `showCount` props to display a title and a count in the toolbar.

```tsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  ToolbarTitle,
  useTableCollection,
  OffsetQuery,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function Total() {

  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-toolbar-title',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      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,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            title={<ToolbarTitle title="Title" showTotal />}
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

---

### Title, count, and the collection's item limit

This example uses the `` `title`, `showCount`, and `itemsLimit` props to display a title, a count, and the maximum number of items a visitor can add to the collection in the toolbar.

```tsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { Page } from '@wix/design-system';
import {
  Table,
  PageWrapper,
  ToolbarTitle,
  useTableCollection,
  OffsetQuery,
} from '@wix/patterns';
import { contacts } from '@wix/crm';

function Limit() {

  const state = useTableCollection<contacts.Contact>({
    queryName: 'contacts-toolbar-title',
    paginationMode: 'offset',
    fqdn: 'wix.patterns.dummyservice.v1.dummy_entity',
    fetchData: (query: OffsetQuery) => {
      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,
      }));
    },
    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
    fetchErrorMessage: () => 'Error fetching contacts',
    filters: {},
  });

  return (
    <PageWrapper>
      <Page height="400px">
        <Page.Header />
        <Page.Content>
          <Table
            state={state}
            title={<ToolbarTitle title="Title" showTotal itemsLimit={2000} />}
            columns={[
              {
                id: 'name',
                title: 'Name',
                width: '250px',
                render: (contact) =>
                  `${contact.info?.name?.first} ${contact.info?.name?.last}`,
              },
            ]}
          />
        </Page.Content>
      </Page>
    </PageWrapper>
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `title` | `ReactNode` | Yes | - | Title to display at the left of the table's toolbar. |
| `subtitle` | `{ text: string; info?: InfoIconProps; learnMore?: { url: string; label?: string; } \| undefined; } \| undefined` | No | - | Subtitle to display at the left of the table's toolbar under the title. @param text The subtitle text @param (https://www.docs.wixdesignsystem.com/?path=/story/components-form--infoicon)} info info to display an info icon next to the subtitle text @param learnMore an object with a `url`(required) and a `label`(optional), for displaying a link button on the subtitle |
| `showTotal` | `boolean` | No | - | Whether to show a total count badge next to the title. |
| `itemsLimit` | `number` | No | - | Maximum number of items that can be displayed. <br><br> Shows only when `showTotal` is `true`. |

## BI

### Events

We haven't defined any events for this feature yet.



### Component load events
Event   |   Description   |
--------- | --------------- |
[144:110](https://bo.wix.com/data-tools/bi-catalog-app/event/144:110) | Sent when a Wix Patterns component starts loading
[144:111](https://bo.wix.com/data-tools/bi-catalog-app/event/144:111) | Sent when a Wix Patterns component is done loading


#### 🐪 Couldn't find what you need?
* Check our [BI Catalog](https://bo.wix.com/data-tools/bi-catalog-app?viewId=all-items-view&selectedColumns=src%2Cevid%2Cname%2Cowner%2Cproduct%2CuserType+false%2CdateUpdated%2CdateCreated+false%2CcreatedBy+false%2Cstatus&source=%5B%7B%22id%22%3A%22144%22%2C%22name%22%3A%22144+-+Cairo%22%7D%5D)
* Contact us on [#cairo-bi](https://wix.slack.com/archives/C03N53KURH9)