Sheet Tabs

Quickly switch between multiple sheets

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

Sheet tabs

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.

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}>