Management Toolbar

Management toolbar is an extension of Toolbar. It is a combination of different components, including filters, orders, search, visualization select, and other actions that let users manage a dataset.

install	yarn add @clayui/management-toolbar
version
use	`import ManagementToolbar from '@clayui/management-toolbar';`

Table of Contents

Composing
Results Bar
API Reference

Warning Deprecated since version 3.54.x

Composing

With ManagementToolbar you can create a variety of Management Toolbar variations, use ManagementToolbar component as the outside container, ManagementToolbar.ItemList for creating groups of items and ManagementToolbar.Item for create items inside groups. Use expand property on ManagementToolbar.ItemList for expanding the item list.

We recommend that you review the use cases in the Storybook. Also, check our List Page Template on Storybook.

Use ManagementToolbar.Search for creating a Search input inside the management toolbar.

Open Sandbox

import {Provider} from '@clayui/core';
import ManagementToolbar from '@clayui/management-toolbar';
import Button, {ClayButtonWithIcon} from '@clayui/button';
import {ClayInput} from '@clayui/form';
import Icon from '@clayui/icon';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ManagementToolbar>
					<ManagementToolbar.ItemList>
						<ManagementToolbar.Search>
							<ClayInput.Group>
								<ClayInput.GroupItem>
									<ClayInput
										aria-label="Search"
										className="form-control input-group-inset input-group-inset-after"
										defaultValue="Red"
										type="text"
									/>
									<ClayInput.GroupInsetItem after tag="span">
										<ClayButtonWithIcon
											aria-label="Close search"
											className="navbar-breakpoint-d-none"
											displayType="unstyled"
											onClick={() =>
												setSearchMobile(false)
											}
											symbol="times"
										/>
										<ClayButtonWithIcon
											aria-label="Search"
											displayType="unstyled"
											symbol="search"
											type="submit"
										/>
									</ClayInput.GroupInsetItem>
								</ClayInput.GroupItem>
							</ClayInput.Group>
						</ManagementToolbar.Search>

						<ManagementToolbar.Item>
							<Button
								aria-label="Info"
								className="nav-link nav-link-monospaced"
								displayType="unstyled"
								onClick={() => {}}
							>
								<Icon symbol="info-circle-open" />
							</Button>
						</ManagementToolbar.Item>

						<ManagementToolbar.Item>
							<ClayButtonWithIcon
								aria-label="Add"
								className="nav-btn nav-btn-monospaced"
								symbol="plus"
							/>
						</ManagementToolbar.Item>
					</ManagementToolbar.ItemList>
				</ManagementToolbar>
			</div>
		</Provider>
	);
}

Aggregating ManagementToolbar.ItemList and ManagementToolbar.ClayResultsBar you can reach this result:

Open Sandbox

import {Provider} from '@clayui/core';
import ManagementToolbar, {ClayResultsBar} from '@clayui/management-toolbar';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import Button, {ClayButtonWithIcon} from '@clayui/button';
import {ClayCheckbox, ClayInput} from '@clayui/form';
import Icon from '@clayui/icon';
import Label from '@clayui/label';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const filterItems = [
		{label: 'Filter Action 1', onClick: () => alert('Filter clicked')},
		{label: 'Filter Action 2', onClick: () => alert('Filter clicked')},
	];

	const viewTypes = [
		{
			label: 'List',
			onClick: () => alert('Show view list'),
			symbolLeft: 'list',
		},
		{
			active: true,
			label: 'Table',
			onClick: () => alert('Show view table'),
			symbolLeft: 'table',
		},
		{
			label: 'Card',
			onClick: () => alert('Show view card'),
			symbolLeft: 'cards2',
		},
	];

	const [searchMobile, setSearchMobile] = useState(false);
	const [checked, setChecked] = useState(false);

	const viewTypeActive = viewTypes.find((type) => type.active);
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<>
					<ManagementToolbar>
						<ManagementToolbar.ItemList>
							<ManagementToolbar.Item>
								<ClayCheckbox
									aria-label={
										checked ? 'Unselect all' : 'Select all'
									}
									checked={checked}
									onChange={(event) =>
										setChecked(event.target.checked)
									}
								/>
							</ManagementToolbar.Item>

							<ClayDropDownWithItems
								items={filterItems}
								trigger={
									<Button
										className="nav-link"
										displayType="unstyled"
									>
										<span className="navbar-breakpoint-down-d-none">
											<span className="navbar-text-truncate">
												{'Filter and Order'}
											</span>
										</span>
										<span className="navbar-breakpoint-d-none">
											<Icon symbol="filter" />
										</span>
									</Button>
								}
								triggerIcon="caret-bottom"
							/>

							<ManagementToolbar.Item>
								<Button
									aria-label="Order"
									className="nav-link nav-link-monospaced"
									displayType="unstyled"
									onClick={() => {}}
								>
									<Icon symbol="order-list-up" />
								</Button>
							</ManagementToolbar.Item>
						</ManagementToolbar.ItemList>

						<ManagementToolbar.Search showMobile={searchMobile}>
							<ClayInput.Group>
								<ClayInput.GroupItem>
									<ClayInput
										aria-label="Search"
										className="form-control input-group-inset input-group-inset-after"
										defaultValue="Red"
										type="text"
									/>
									<ClayInput.GroupInsetItem after tag="span">
										<ClayButtonWithIcon
											aria-label="Close search"
											className="navbar-breakpoint-d-none"
											displayType="unstyled"
											onClick={() =>
												setSearchMobile(false)
											}
											symbol="times"
										/>
										<ClayButtonWithIcon
											aria-label="Search"
											displayType="unstyled"
											symbol="search"
											type="submit"
										/>
									</ClayInput.GroupInsetItem>
								</ClayInput.GroupItem>
							</ClayInput.Group>
						</ManagementToolbar.Search>

						<ManagementToolbar.ItemList>
							<ManagementToolbar.Item className="navbar-breakpoint-d-none">
								<Button
									aria-label="Search"
									className="nav-link nav-link-monospaced"
									displayType="unstyled"
									onClick={() => setSearchMobile(true)}
								>
									<Icon symbol="search" />
								</Button>
							</ManagementToolbar.Item>

							<ManagementToolbar.Item>
								<Button
									aria-label="Info"
									className="nav-link nav-link-monospaced"
									displayType="unstyled"
									onClick={() => {}}
								>
									<Icon symbol="info-circle-open" />
								</Button>
							</ManagementToolbar.Item>

							<ManagementToolbar.Item>
								<ClayDropDownWithItems
									items={viewTypes}
									trigger={
										<Button
											aria-label="Display view"
											className="nav-link-monospaced nav-link"
											displayType="unstyled"
										>
											<Icon
												symbol={
													viewTypeActive
														? viewTypeActive.symbolLeft
														: ''
												}
											/>
										</Button>
									}
									triggerIcon="caret-double-l"
								/>
							</ManagementToolbar.Item>

							<ManagementToolbar.Item>
								<ClayButtonWithIcon
									aria-label="Add"
									className="nav-btn nav-btn-monospaced"
									symbol="plus"
								/>
							</ManagementToolbar.Item>
						</ManagementToolbar.ItemList>
					</ManagementToolbar>

					<ClayResultsBar>
						<ClayResultsBar.Item>
							<span className="component-text text-truncate-inline">
								<span className="text-truncate">
									{'2 results for "'}
									<strong>{'Red'}</strong>
									{'"'}
								</span>
							</span>
						</ClayResultsBar.Item>
						<ClayResultsBar.Item expand>
							<Label
								className="component-label tbar-label"
								displayType="unstyled"
							>
								{'Filter'}
							</Label>
						</ClayResultsBar.Item>
						<ClayResultsBar.Item>
							<Button
								className="component-link tbar-link"
								displayType="unstyled"
							>
								{'Clear'}
							</Button>
						</ClayResultsBar.Item>
					</ClayResultsBar>
				</>
			</div>
		</Provider>
	);
}

Results Bar

Use ManagementToolbar.ClayResultsBar for creating a results bar and ManagementToolbar.ResultsBarItem for defining items inside Results Bar.

Open Sandbox

import {Provider} from '@clayui/core';
import ManagementToolbar, {ClayResultsBar} from '@clayui/management-toolbar';
import Button from '@clayui/button';
import Label from '@clayui/label';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ManagementToolbar>
					<ClayResultsBar>
						<ClayResultsBar.Item>
							<span className="component-text text-truncate-inline">
								<span className="text-truncate">
									{'2 results for "'}
									<strong>{'Red'}</strong>
									{'"'}
								</span>
							</span>
						</ClayResultsBar.Item>
						<ClayResultsBar.Item expand>
							<Label
								className="component-label tbar-label"
								displayType="unstyled"
							>
								{'Filter'}
							</Label>
						</ClayResultsBar.Item>
						<ClayResultsBar.Item>
							<Button
								className="component-link tbar-link"
								displayType="unstyled"
							>
								{'Clear'}
							</Button>
						</ClayResultsBar.Item>
					</ClayResultsBar>
				</ManagementToolbar>
			</div>
		</Provider>
	);
}

API Reference

typeof ManagementToolbar

Parameters

Properties

active

boolean | undefined

Flag that identifies when to show the active state of the component.

Returns

Element

ResultsBar

typeof ResultsBar

Returns

Element

Item

({ children, className, ...otherProps }: React.HTMLAttributes<HTMLLIElement>) => JSX.Element

Returns

Element

ItemList

({ children, expand }: IProps) => JSX.Element

Parameters

Properties

expand

boolean | undefined

Flag to indicate the Management Toolbar Item List should fit the width of the parent container.

Returns

Element

ResultsBarItem

({ children, className, expand, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

expand

boolean | undefined

Flag to indicate the Management Toolbar Results Bar Item should fit the width of the parent container.

Returns

Element

Search

({ children, onlySearch, showMobile, ...otherProps }: IProps) => JSX.Element

Parameters

Properties

onlySearch

boolean | undefined

Flag to indicate when there is only the search element within a Management Toolbar.

showMobile

boolean | undefined

Flag to control search visibility in mobile view.

Returns

Element

Edit this page on GitHub

Contributors

Table of Contents

Composing
Results Bar
API Reference