SGUI / Development
DataToolbar
Controlled search, sort/filter menus, columns and refresh.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Controlled search, sort/filter menus, columns and refresh.
Loading examples…
Loading examples…
Loading examples…
'use client';
import { useState } from 'react';
import { DataToolbar, type DataToolbarColumnOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
import { type DataToolbarFilterRule, type DataToolbarSortRule } from '@structured-growth/sg-ui/components';
export default function DataToolbarExample() {
const [search,setSearch]=useState("");
const [view,setView]=useState<'list'|'cards'>("list");
const [filters,setFilters]=useState<DataToolbarFilterRule[]>([]);
const [sort,setSort]=useState<DataToolbarSortRule[]>([]);
const [options,setOptions]=useState<DataToolbarColumnOption[]>([{"id":"name","label":"Course","visible":true,"locked":true},{"id":"status","label":"Status","visible":true},{"id":"actions","label":"Actions","visible":true,"locked":true,"reorderable":false}]);
const [message,setMessage]=useState("No refresh requested");
return (
<>
<DataToolbar errorMessage={undefined} onRetry={()=>setMessage('Retry requested')} refreshing={false} selectedCount={0} searchValue={search} onSearchValueChange={setSearch} viewMode={view} onViewModeChange={setView} columnOptions={options} onColumnOptionsChange={setOptions} filterFields={[{"id":"status","label":"Status","type":"enum","enumOptions":[{"id":"active","label":"Active"},{"id":"archived","label":"Archived"}]}]} filterRules={filters} onFilterRulesChange={setFilters} sortOptions={[{id:'name',label:'Course'}]} sortRules={sort} onSortRulesChange={setSort} onRefresh={()=>setMessage('Refresh requested')} />
</>
);
}
'use client';
import { useState } from 'react';
import { DataToolbar, type DataToolbarColumnOption } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function ToolbarActionExample() {
const [message,setMessage]=useState('No refresh requested');
return (
<>
<DataToolbar showViewModeToggle={false} showColumnsButton={false} showFilterButton={false} showSortButton={false} leftContent={<Link href="#main-content">Create course</Link>} onRefresh={()=>setMessage("Refresh requested")} />
</>
);
}