Skip to content

@sqlrooms/ui / TabStripProps

Interface: TabStripProps

Properties

className?

optional className?: string


tabsListClassName?

optional tabsListClassName?: string


children?

optional children?: ReactNode


tabs

tabs: TabDescriptor[]

All available tabs.


openTabs?

optional openTabs?: string[]

IDs of tabs that are currently open.


selectedTabId?

optional selectedTabId?: string | null

ID of the currently selected tab.


preventCloseLastTab?

optional preventCloseLastTab?: boolean

If true, hides the close button when only one tab remains open.


closeable?

optional closeable?: boolean

Whether tabs can be closed. Defaults to true.


onClose?

optional onClose?: (tabId) => void

Called when a tab is closed (hidden, can be reopened).

Parameters

ParameterType
tabIdstring

Returns

void


onOpenTabsChange?

optional onOpenTabsChange?: (tabIds) => void

Called when the list of open tabs changes (open from dropdown or reorder).

Parameters

ParameterType
tabIdsstring[]

Returns

void


onSelect?

optional onSelect?: (tabId) => void

Called when a tab is selected.

Parameters

ParameterType
tabIdstring

Returns

void


onCreate?

optional onCreate?: () => void

Called when a new tab should be created.

Returns

void


onRename?

optional onRename?: (tabId, newName) => void

Called when a tab is renamed inline.

Parameters

ParameterType
tabIdstring
newNamestring

Returns

void


renderTabMenu?

optional renderTabMenu?: (tab) => ReactNode

Render function for the tab's dropdown menu. Use TabStrip.MenuItem and TabStrip.MenuSeparator.

Parameters

ParameterType
tabTabDescriptor

Returns

ReactNode


renderSearchItemActions?

optional renderSearchItemActions?: (tab) => ReactNode

Render function for search dropdown item actions. Use TabStrip.SearchItemAction.

Parameters

ParameterType
tabTabDescriptor

Returns

ReactNode


renderSearchItemLabel?

optional renderSearchItemLabel?: (tab) => ReactNode

Render function for custom search dropdown item labels.

Parameters

ParameterType
tabTabDescriptor

Returns

ReactNode


renderTabLabel?

optional renderTabLabel?: (tab) => ReactNode

Render function for custom tab content. Receives the tab and returns the content to display.

Parameters

ParameterType
tabTabDescriptor

Returns

ReactNode


fontSize?

optional fontSize?: FontSize<string | number>

Font size applied to tab labels, inline editing, and TabStrip subcomponents.


dndMode?

optional dndMode?: TabStripDndMode

Whether this tab strip owns its dnd context or participates in a shared parent context.


dndScopeId?

optional dndScopeId?: string

Unique scope for shared dnd tab ids. Defaults to a generated component id.


getTabDragData?

optional getTabDragData?: (tab) => TabStripDragData | undefined

Extra drag payload attached to tab drags; may intentionally override kind.

Parameters

ParameterType
tabTabDescriptor

Returns

TabStripDragData | undefined