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
    • 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
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • 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

Stable3.3.0View in LexiconCHANGELOGstorybook demos

  • ManagementToolbar
  • ItemList
  • Item
  • ResultsBar
    • ResultsBar.Item
  • Search

ManagementToolbar

PropertyTypeRequiredDefaultDescription
active
booleanfalsefalseFlag that identifies when to show the active state of the component.

ItemList

PropertyTypeRequiredDefaultDescription
expand
booleanfalseFlag to indicate the Management Toolbar Item List should fit the width of the parent container.

Item

Extends from React.HTMLAttributes<HTMLLIElement>

ResultsBar

Extends from React.HTMLAttributes<HTMLElement>

ResultsBar.Item

PropertyTypeRequiredDefaultDescription
expand
booleanfalsefalseFlag to indicate the Management Toolbar Results Bar Item should fit the width of the parent container.

Search

PropertyTypeRequiredDefaultDescription
onlySearch
booleanfalseFlag to indicate when there is only the search element within a Management Toolbar.
showMobile
booleanfalseFlag to control search visibility in mobile view.

How can this be improved? Create an issue!