> For the complete documentation index, see [llms.txt](https://docs.rowsncolumns.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rowsncolumns.app/configuration/components/sheet-tabs.md).

# Sheet Tabs

Optional SheetTab component to select sheets, and change sheet attributes. You can choose to use your preferred Tab component

<figure><img src="/files/1Pzul4gWqSqRkBSVSgKZ" alt=""><figcaption><p>Sheet tabs</p></figcaption></figure>

```tsx
import { SheetTabs } from "@rowsncolumns/spreadsheet"

const App = () => {
  return (
    <SheetTabs
      sheets={sheets}
      activeSheetId={activeSheetId}
      onChangeActiveSheet={onChangeActiveSheet}
      onRenameSheet={onRenameSheet}
      onChangeSheetTabColor={onChangeSheetTabColor}
      onDeleteSheet={onRequestDeleteSheet}
      onHideSheet={onHideSheet}
      onMoveSheet={onMoveSheet}
      onProtectSheet={onProtectSheet}
      onUnProtectSheet={onUnProtectSheet}
      onDuplicateSheet={onDuplicateSheet}
    />
  )
}
```

## Custom context menu

Each sheet tab can display a custom context menu. Use the `ContextMenu` props to inject a react component

You can use the default menu as a template to build your own Context menu

<https://github.com/rowsncolumns/spreadsheet/blob/main/apps/spreadsheet/components/sheet-tabs/context-menu.tsx>

Contextmenu uses shadcn/radix-ui dropdown components internally.

```tsx
import type { SheetTabContextMenuProps } from "@rowsncolumns/spreadsheet"
import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownRightSlot,
} from "@rowsncolumns/ui";

const CustomContextMenu = ({ onDeleteSheet, canDelete, sheetId }: SheetTabContextMenuProps) => {
  return (
    <DropdownMenuPortal>
      <DropdownMenuContent align="start">
        <DropdownMenuItem
          onClick={() => onDeleteSheet?.(sheetId)}
          disabled={!canDelete}
        >
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  )
}
<SheetTabs ContextMenu={CustomContextMenu}>
```