ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Menubar (Vertical Navigation)
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
      • Text
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Management Toolbar

yarn add @clayui/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.

  • Examples
  • Markup
  • API

Deprecated3.56.0View in LexiconCHANGELOGstorybook demos

WarningDeprecated since version 3.54.x

Composing

With ClayManagementToolbar you can create a variety of Management Toolbar variations, use ClayManagementToolbar component as the outside container, ClayManagementToolbar.ItemList for creating groups of items and ClayManagementToolbar.Item for create items inside groups. Use expand property on ClayManagementToolbar.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 ClayManagementToolbar.Search for creating a Search input inside the management toolbar.

Copied!
Code Sample (expand to see it)

Aggregating ClayManagementToolbar.ItemList and ClayManagementToolbar.ResultsBar you can reach this result:

Copied!
Code Sample (expand to see it)

Results Bar

Use ClayManagementToolbar.ResultsBar for creating a results bar and ClayManagementToolbar.ResultsBarItem for defining items inside Results Bar.

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!