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';`

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>

											<Icon
												className="inline-item inline-item-after"
												symbol="caret-bottom"
											/>
										</span>
										<span className="navbar-breakpoint-d-none">
											<Icon symbol="filter" />
										</span>
									</Button>
								}
							/>

							<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>
									}
								/>
							</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>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

Composing
Results Bar