SGUI / Development
DataToolbarSelectionMenu
Host selection commands and mixed states.
Loading examples…
Loading examples…
Examples
Loading examples…
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Host selection commands and mixed states.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
'use client';
import { useState } from 'react';
import { DataToolbarSelectionMenu } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function SelectionMenuExample() {
const [selection,setSelection]=useState<'none'|'some'|'all'>("none");
const [message,setMessage]=useState("No selection command");
return (
<>
<DataToolbarSelectionMenu options={[{id:'page',label:'Select current page'},{id:'none',label:'Clear selection'}]} selectionState={selection} onToggleSelection={()=>setSelection(previous=>previous==='all'?'none':'all')} onSelectOption={id=>{setSelection(id==='none'?'none':'all');setMessage(id);}} />
</>
);
}
'use client';
import { useState } from 'react';
import { DataToolbarSelectionMenu } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function MixedSelectionExample() {
const [selection,setSelection]=useState<'none'|'some'|'all'>("some");
const [message,setMessage]=useState("Mixed selection");
return (
<>
<DataToolbarSelectionMenu options={[{id:'page',label:'Select current page'},{id:'none',label:'Clear selection'}]} selectionState={selection} onToggleSelection={()=>setSelection(previous=>previous==='all'?'none':'all')} onSelectOption={id=>{setSelection(id==='none'?'none':'all');setMessage(id);}} />
</>
);
}