TabbedDataView
Controlled MUI Tabs shell with render prop content delegation. Supports scrollable tabs, closable tabs, add-tab action, and an actions slot. Tab content is fully delegated via renderTabContent.
Tab Configurations
Orders Tab Set (3 tabs with icons)
Mixed Tab Types (4 tabs, auto-created indicator)
Interactive Tab Management
Close tabs with the X button. Add new tabs with the + button. Active: tab-1
Usage
import { TabbedDataView } from '@so.boss/gloss-ui';
import type { TabConfig } from '@so.boss/gloss-ui';
const tabs: TabConfig[] = [
{ id: 'all', type: 'orders', name: 'All Orders', closable: false },
{ id: 'open', type: 'orders', name: 'Open Orders', closable: true },
{ id: 'shipped', type: 'orders', name: 'Shipped', closable: true },
];
<TabbedDataView
tabs={tabs}
activeTabId={activeTab}
onTabChange={setActiveTab}
onTabClose={(tabId) => removeTabs(tabId)}
onTabAdd={() => addNewTab()}
renderTabContent={(tab) => <DataGrid data={dataForTab(tab)} />}
actions={<Button onClick={exportData}>Export</Button>}
/>