{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "table-toolbar",
"title": "TableToolbar",
"description": "Data-agnostic companion layout for application-owned table caption controls, with a start cluster, optional search, trailing Filter/Group/Sort, and narrow-width horizontal overflow.",
"type": "registry:ui",
"meta": {
"library": "@ds-mo/ui",
"distribution": "npm",
"storybook": "https://zainadeel.github.io/compomo/?path=/story/table-toolbar",
"source": "src/wc/components/TableToolbar/TableToolbar.tsx",
"intentStatus": "complete",
"intent": {
"audience": "general",
"status": "stable",
"summary": "Data-agnostic companion layout for application-owned table caption controls, with a start cluster, optional search, trailing Filter/Group/Sort, and narrow-width horizontal overflow.",
"useWhen": [
"Several table pages repeat the same saved-view cluster, middle discovery and result-shaping controls, and table-owned caption actions.",
"A ds-table header slot needs consistent control spacing, alignment, grouping, and narrow-width overflow without moving product behavior into the table."
],
"avoidWhen": [
"The controls do not operate on a table or structured result set.",
"The application expects the toolbar to define filters, saved views, grouping choices, persistence, or data transformations.",
"Only one standalone control is present and needs no grouped toolbar semantics."
],
"commonlyComposedWith": [
"component:ds-table",
"component:ds-table-saved-views",
"component:ds-divider",
"component:ds-input",
"component:ds-table-filter",
"component:ds-select",
"component:ds-table-sort",
"component:ds-button-unfilled"
],
"patterns": [],
"accessibility": [
"The component exposes a named toolbar while each slotted control retains its own accessible name and native keyboard behavior.",
"Use the start slot for saved views. Use search for the optional discovery field, leading for any additional left-side middle controls, and trailing for Filter, Group, and Sort. Table-owned column customizer and data-mode actions remain in the table caption trailing cluster.",
"Tab order follows authored DOM order. The toolbar does not add roving focus because it may contain heterogeneous form and popup controls."
],
"states": [
"The component owns layout only. It never mutates slotted control props, values, menus, loading, persistence, or consequences. Use ds-table-saved-views and ds-table-filter when those interactions need the shared CompoMo behavior while application data and persistence remain external.",
"The start cluster is followed by a decorative vertical divider, then the spanning middle region. The start cluster and divider hide when nothing is projected. Search is a dedicated slot that hides when nothing is projected. Empty leading or trailing clusters add no placeholder chrome. The middle region occupies remaining width so trailing controls stay at its inline end.",
"Column customizer and data-mode switching stay table-owned caption actions. Do not recreate those menus in the toolbar."
],
"responsiveBehavior": [
"The start cluster, search, trailing Filter/Group/Sort, and table caption trailing actions stay on one line. Saved views hug their current trigger content up to the compact menu-width token rather than reserving that full width; long names truncate while the dirty dot stays visible. Filter, Group, and Sort triggers cap at the same token, and Group and Sort popups keep that compact menu-width floor. The toolbar horizontally scrolls when its complete controls no longer fit.",
"Inside a named ds-table container narrower than 900px, ds-table-filter and ds-table-sort omit their labels and chevrons and become icon-only. Group controls explicitly opt into the same treatment with collapseLabel. Active filtering or grouping promotes the prefix icon to primary. Sort keeps resting secondary chrome. Table-owned Customize also becomes the icon-only Table menu button at that width.",
"The scrollbar is visually suppressed without removing touch, trackpad, mouse-wheel, or keyboard scrolling from the overflow container.",
"Trailing controls remain grouped after leading controls; the toolbar does not collapse controls into an application-specific overflow menu."
],
"frameworkCaveats": {
"customElements": [
"Project saved views through slot=start, search through slot=search, additional left-side middle controls through slot=leading, and ds-table-filter, Group, and ds-table-sort through slot=trailing. Set collapseLabel on the Group control and provide contextual accessible names when Table controls is insufficient."
],
"react": [
"Set slot=start, slot=search, slot=leading, or slot=trailing on each child control. Use ds-table-filter for the standard Filter recipe, opt Group into collapseLabel, and keep values and event handlers in the application."
],
"angular": [
"Set slot=start, slot=search, slot=leading, or slot=trailing on each child control, use DsTableFilter for the standard Filter recipe, opt Group into collapseLabel, and import the generated adapters."
]
},
"references": [
{
"label": "Storybook review states",
"path": "src/wc/components/TableToolbar/TableToolbar.stories.ts"
},
{
"label": "Table composition owner",
"path": "src/wc/components/Table/Table.agent.json"
}
]
},
"api": {
"props": {
"label": {
"type": "string",
"resolvedType": "string",
"attribute": "label",
"default": "'Table controls'",
"required": false,
"mutable": false,
"description": "Accessible name for the grouped table controls."
}
},
"events": [],
"methods": [],
"slots": []
},
"props": {
"label": {
"type": "string",
"resolvedType": "string",
"attribute": "label",
"default": "'Table controls'",
"required": false,
"mutable": false,
"description": "Accessible name for the grouped table controls."
}
},
"events": [],
"methods": [],
"slots": [],
"exports": {
"customElement": "ds-table-toolbar",
"react": "DsTableToolbar",
"vue": "DsTableToolbar",
"angular": "DsTableToolbar"
},
"consumption": {
"install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
"cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
"customElements": {
"import": "import '@ds-mo/ui/dist/components/ds-table-toolbar.js';",
"example": ""
},
"react": {
"import": "import { DsTableToolbar } from '@ds-mo/ui/react';",
"example": ""
},
"vue": {
"import": "import { DsTableToolbar } from '@ds-mo/ui/vue';",
"example": ""
},
"angular": {
"import": "import { DsTableToolbar } from '@ds-mo/ui/angular/ds-table-toolbar';",
"example": ""
},
"peerDependencies": {
"required": [
"@ds-mo/tokens ^6.5.0",
"@ds-mo/icons ^7.0.0"
],
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
}
}
},
"dependencies": [
"@ds-mo/ui",
"@ds-mo/tokens"
],
"registryDependencies": [
"divider"
],
"files": [
{
"path": "src/wc/components/TableToolbar/TableToolbar.css",
"content": ":host {\n display: block;\n min-inline-size: 0;\n max-inline-size: 100%;\n}\n\n.table-toolbar {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n inline-size: 100%;\n min-inline-size: 0;\n gap: var(--dimension-space-100);\n overflow-x: auto;\n overflow-y: hidden;\n scrollbar-width: none;\n}\n\n.table-toolbar::-webkit-scrollbar {\n display: none;\n}\n\n.table-toolbar__start,\n.table-toolbar__search,\n.table-toolbar__main,\n.table-toolbar__leading,\n.table-toolbar__trailing {\n display: flex;\n align-items: center;\n min-inline-size: 0;\n gap: var(--dimension-space-100);\n}\n\n.table-toolbar__start {\n flex: 0 0 auto;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n overflow: hidden;\n}\n\n.table-toolbar__rule {\n flex: 0 0 auto;\n}\n\n.table-toolbar__main {\n flex: 1 1 auto;\n min-inline-size: min-content;\n}\n\n.table-toolbar__search {\n flex: 0 1 var(--dimension-panel-width-xs);\n max-inline-size: var(--dimension-panel-width-xs);\n}\n\n:host(:not(:has([slot='search']))) .table-toolbar__search {\n display: none;\n}\n\n:host(:not(:has([slot='start']))) .table-toolbar__start,\n:host(:not(:has([slot='start']))) .table-toolbar__rule {\n display: none;\n}\n\n.table-toolbar__leading {\n flex: 1 0 auto;\n}\n\n.table-toolbar__trailing {\n flex: 0 0 auto;\n margin-inline-start: auto;\n}\n\n.table-toolbar__trailing > *,\n.table-toolbar [slot='start'],\n.table-toolbar ds-table-filter,\n.table-toolbar ds-filter-menu,\n.table-toolbar ds-select,\n.table-toolbar ds-table-sort {\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n}\n\n.table-toolbar__start slot,\n.table-toolbar__search slot,\n.table-toolbar__leading slot,\n.table-toolbar__trailing slot {\n display: contents;\n}\n",
"type": "registry:ui"
},
{
"path": "src/wc/components/TableToolbar/TableToolbar.tsx",
"content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ds-table-toolbar',\n styleUrl: 'TableToolbar.css',\n scoped: true,\n})\nexport class TableToolbar {\n /** Accessible name for the grouped table controls. */\n @Prop() label: string = 'Table controls';\n\n render() {\n return (\n \n \n \n );\n }\n}\n",
"type": "registry:ui"
}
]
}